Testování IE11 v Edge

Od verze Microsoft Edge 78, tedy v novém Edge postaveném na jádře Chromium, můžete konkrétní stránky spustit v režimu Internet Exploreru 11 (IE Mode), takže se stránka bude renderovat pomocí Trident jádra.

Tento režim vám umožní používat stránku stejně, jako byste ji používali v IE11, aniž byste museli přepínat do jiného prohlížeče.

Stránka bude používat CSS a JS tak, jak by to dělalo IE11 a také bude moci používat ActiveX a další prvky starých Enternet Explorerů a zároveň (v omezené míře) používat nová rozšíření.

Na druhou stranu IE mode lze zapnout pro konkrétní domény, které pak nepůjdou zobrazit v Chromium jádře, takže nemůžete své stránka současně testovat v IE11 a novém Edge.

Nový Edge sice obsahuje staré Trident jádro, ale již neobsahuje debugger F12, takže stránku sice zobrazíte, ale nebudete v ní moci zobrazit DOM ani CSS, ladit skripty a prohlížet konzoly.

Pokud tedy potřebujete stále vyvíjet a ladit webové stránky pro Internet Explorer, budete muset stále používat samostatný IE11.

Pokud ale máte naopak starý web, který je odladěný pouze pro Internet Explorer, není již potřeba nutit vaše uživatele používat IE11 a stačí nastavit v Edge domény, které mají používat IE mode.

Jak na lepkavé (Sticky) prvky

Jistě znáte CSS vlastnosti position a její hodnoty absolute a fixed. Ty byly před příchodem CSS Flexboxu a Gridu prakticky jedinou možností, jak umístit hlavičku a/nebo patičku stránky tak, aby nezmizela po tom, co uživatel posune obsah.

Nová hodnota sticky (česky lepkavý, nebo též otravný) umožňuje přilepit prvek k okraji okna, bez toho, aby tam byl trvale umístěný.

Pokračování textu Jak na lepkavé (Sticky) prvky

Rychlost zpracování změn CSS

CSS styly musejí reagovat na celou řadu změn ve stránce, ať už je to akce uživatele (:hover či :focus) nebo programové změny (class či přidání DOM prvků). A zatímco některé změny jsou pro prohlížeč hračkou (např. změna barvy rámečku), tak nad některými musí strávit dlouhý čas, aby je do stránky přidal (např. změna šířky rámečku z 1px na 2px).

Pokračování textu Rychlost zpracování změn CSS

Logické vlastnosti

Pokud jste již používali Flexbox a/nebo Grid, jistě jste si všimli, že místo hodnot jako align:top nebo align:left používají hodnoty start a end. To je proto, že tyto nové návrhy již byly vytvořeny s přihlédnutím na logické vlastnosti místo dříve používaných fyzických vlastností.

A stejně jako Flexbox a Grid dochází k postupnému zavádění logických vlastností u dalších definic jako je padding, margin, text-align, atd.

Pokračování textu Logické vlastnosti

Posun obsahu se zachytáváním

Když uživatel posouvá stránku, málokdy se mu povede, že posun skončí přesně na začátku odstavce nebo obrázku, což pak zhoršuje UX (dojem ze stránky). Do teď se podobné situace řešili pomocí javaskriptu, ale kombinace JS a skrolování většinou UX ještě zhorší.

Díky nové CSS specifikaci Scroll snap můžete tyto situace vyřešit automaticky jen pomocí CSS definice.

Pokračování textu Posun obsahu se zachytáváním

Co nedělat při návrhu webu ve Photoshopu

Navrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.

Pokračování textu Co nedělat při návrhu webu ve Photoshopu

Jak určit kvalitu a kompresi JPG obrázků?

Pokud připravujete obrázky JPG pro váš web, pravděpodobně jste již narazili na problém, v jaké kvalitě (resp. kompresi) obrázek uložit, aby byl co nejmenší a zároveň stále bylo vidět, co na něm je místo aby byly vidět chyby (artefakty).

Já vám ukážu jednoduchý matematický výpočet, kterým určíte nejvhodnější kompresi.

Pokračování textu Jak určit kvalitu a kompresi JPG obrázků?