Na okraj webu a ještě dál s Microsoft Edge


O základech přípravy webu pro Microsoft Edge jsme už psali – výhodou je, že pravidla a doporučení jsou stejná pro Edge i pro Chrome, Safari a ostatní moderní browsery. Skutečnost, že Microsoft má najednou prohlížeč, který hledí dopředu a který budou záhy používat miliony uživatelů po celém světě (na PC i mobilech), s sebou nese ještě jeden příjemný vedlejší efekt – vzniká spousta nástrojů a návodů, které vám s úpravou webu pomohou.

Čím lépe budete pracovat s moderními standardy, tím lépe bude váš web fungovat uživatelům (bez ohledu na platformu).

Testování

Začněte tím, že svou stránku otestujete. Open-source skenovadlo od Microsoftu je k dispozici online (pro lokální instalaci i na GitHubu) a prozradí vám, jestli váš web používá specifické CSS prefixy, identifikuje se správně pro HTML5, obsahuje zastaralé pluginy a webové frameworky (např. jQuery) apod.

Pokud budete s nástrojem chvíli experimentovat, určitě vám neujde, že i weby Microsoftu nejsou bez poskvrny. Inu, kovářova kobyla…

EdgeHTML bez Windows

Až budete mít před sebou sadu doporučení, je dobré si svůj web v Edgi také prohlédnout. Nejspíš zjistíte, že se zobrazení nijak neliší od Chrome nebo Safari. Přesto je dobré to zkusit. Nemáte-li Windows 10, můžete zdarma využít RemoteIE, který zvládne streamovat Internet Explorer s jádrem EdgeHTML až na váš Mac nebo starší Windows.

clip_image001

UA string

A pak můžete začít řezat. Úplně prvním kandidátem na odstranění/přepracování je kontrola User-Agent stringu. Edge se stejně tváří jako všechny ostatní moderní prohlížeče. Mnohem lepší je použít feature-detection. Ušetříte si spoustu práce se sledováním, co která verze prohlížeče podporuje.

clip_image002

Labík, kde si můžete principy feature-detection projít prakticky, najdete na GitHubu.

Kdybyste vás zajímalo, které standardy jsou aktuálně podporované v Microsoft Edge a které se chystají, podívejte se na Platform Status.

Vendor-specific

Další řezy by se určitě měly týkat vendor-specific CSS prefixů. Edge v tomto ohledu mírně ustupuje, protože podporuje i některé „cizí“ prefixy (např. -webkit-gradient). Kompletní seznam podporovaných Webkit API najdete na MSDN.

Uzavřená kapitola

Edge také nepodporuje některé techniky a technologie často používané v IE.

  • Podmíněné komentáře. Zapomeňte na <!—[if IE 8]> … <![endif]–>.
  • Silverlight a Flash (přestože pro ten má vlastní nativní implementaci).
  • Doplňky ActiveX a Browser Helper Object.
  • VBScript.
  • Panely a „lištičky“.

Jeden praktický důsledek za všechny: pokud na webu přehráváte video, zvažte nahrazení flashového nebo silverlightového přehrávače za HTML5 značku <video>:

<video id=”promoVideo” width=”100%” controls src=”http://[url].mp4″></video>

Jeho automatické přehrání po načtení stránky pak zajistí event listener:

<script>

window.addEventListener(“load”, function () {

var player = document.getElementById(“promoVideo”);

player.play();

});
</script>

Nástroje

Na začátku jsem zmiňoval nástroje, které webový tým v Microsoftu vytváří kromě prohlížeče samotného. Pojďme si je nyní připomenout.

F12 Developer Tools se tváří nenápadně, však jsme je měli už v Internet Exploreru, nicméně když se zanoříte hlouběji, najdete nedocenitelné pomocníky. Třeba ladění JavaScriptu, včetně krokování, nebo úpravy DOM, které se okamžitě projeví, případně sledování všeho, co se posílá po síti.

A co možná nevíte – nástroje F12 jsou k dispozici i samostatně, mimo prohlížeč.

clip_image003

Dalším nástrojem v naší paletě by měl být Vorlon.js pro vzdálené ladění JavaScriptu. Vzdálené ve smyslu, že se připojíte až na 50 zařízení současně a sledujete, co na nich váš kód dělá. Mohou to být počítače, ale klidně se můžete napojit i do prohlížečů na mobilních telefonech.

clip_image004

No a pokud prahnete po automatizovaných testech, které simulují interakci uživatele s vaším webem, je tu pro vás WebDriver. Protokol pochází od W3C a definuje API, které je nezávislé na platformě a jazyku. Microsoft Edge jej umí využít a dovolit vám tak lepší testování, než jaké zvládnou např. javascriptové frameworky (protože se dokáže dostat na nižší úroveň). Aktuální stav podpory protokolu je vidět na webu Edge Dev.

Preview a testování připravovaných verzí

Kromě RemoteIE, kde je pravidelně aktualizovaná preview verze IE s EdgeHTML, můžete testovat připravovanou verzi Microsoft Edge v rámci programu Windows Insider. Spolu s novou verzí Windows tak dostanete i novou verzi prohlížeče.

Zpětná vazba

Chybí vám některý standard, bez něhož nemůže váš web existovat? Je v podpoře některé funkce chyba? Nelíbí se vám, jak Edge přistupuje ke kompatibilitě? Řekněte to! Nejlepším místem pro zpětnou vazbu týmu webové platformy je UserVoice.

Další informace

Jak už je poslední dobou u Microsoftu zvykem, nejaktuálnější informace přináší pravidelně Microsoft Edge Dev Blog. Najdete tam významné změny browseru a také komentáře k některým rozhodnutím a technikám, které se používají.

Edge má také svůj účet na Twitteru.

Martin

Comments (1)

  1. n/a says:

    Ja sem z Edge zmaten, proc IE otevre stranku z VPN intranet adresy a Edge ne … a jak sem videl, reporty kolem VPN mají.

Skip to main content