Jsi super?

Super/Vánoce

Ochutnejte čokoládku z našeho front-adventního kalendáře a
objevte naše přání do nového roku.

CSS vlastnost all

Pravidlo, které jednou definicí dokáže přenastavit téměř všechny vlastnosti do jednotného nastavení.

Uplatnění tedy najde zejména při resetování vlastností. Dnes musíme každou vlastnost po jedné resetovat (uvádět do výchozího stavu). Nastavením pravidla all: initial; by bylo hotovo.

Dá se to použít?

Pokud nepodporujete microsoftí prohlížeče tak ANO. Jinak bohužel ani poslední Edge nemá podporu této vlastnosti.

Náš názor

Užití takového pravidla v dobře postavéné CSS architektuře může být spekulativní. Nicméně je možné, že se v některé situaci může hodit. Např. pokud implementujete komponentu do kódu třetích stran a chcete raději vše doposud nastavené zrušit.

Shadom DOM

Shadom DOM spadá spolu s HTML templates, Custom Elements a HTML Imports do standardu Web Components. Shadow DOM je běžný DOM s tím rozdílem, že vytváří vlastní rámec (scope) . Styly definované na globální úrovni dokumentu neovlivní styly definované v tomto rámci. Pláti to i naopak. Kodér tím pádem může volit jednoduché názvy selektoru a nemusí mít obavu, že tím ovlivní jiný element na stránce, který používá stejný indentifikátor.

Veškeré vlastností a výhody použití Shadow DOMu není možné pokrýt v tomto krátkém vánočním příspěvku. Zájemcům mohu doporučit článek na HTMLRock5, dokumentaci Shadow DOMu od Googlu nebo W3 specifikaci

Obalující fragment nově vytvořeného Shadow DOMu se nazývá shadow root. Element, do kterého je shadow root umístěn se nazývá shadow host. Obsah shadow hostu bude nahrazen obsahem nově vytvořeného shadow rootu. https://codepen.io/Pavhan/pen/POVKmW

Jak se to musí obcházet teď?

V současné době se můžeme na nativní podporu Shadow DOM (verze 1) spolehnout pouze v prohlížeči Chrome, Safari, Firefox Nightly. Ačkoli existuje polyfil WebComponents.js (https://www.webcomponents.org/polyfills), který dokáže simulovat některé vlastnosti Shadow DOMu. Nicméně polyfil je stále ve vývoji a výše uvedený příklad nefunguje správně ve prohlížečích Firefox a Internet Explorer.

Náš názor

Shadow DOM představuje revoluční změnu v tom, jakým způsobem je webové stránka poskládána dohromady. Budeme pozorně sledovat situaci kolem Web Components a těšíme se až jej budeme někdy moci využít v našem projektu.

CSS pseudotřída matches

CSS pseudotřída :matches() nepřidává nic moc extra nového. Jedná se spíše o syntaktický cukr, který nám front-endistům ušetří pár stisků na klávesnici navíc, protože umožňuje sdružit více selektorů do jedné skupiny.

:matches(), již dříve představeno jako :any(), tedy umí v případě více složených selektorů, které se liší pouze v nějaké drobnosti, zjednodušit jejich zápis do jednoho pravidla. Následující ukázka tedy obarví nadpis h1, který je potomkem jakéhokoli z elementů article, section, nebo aside:

:matches(article, section, aside) h1 {
	color: rebeccapurple;
}

Dá se to použít?

Nějaká podpora napříč prohlížeči již je, ale zatím pouze s vendor prefixy. V Chromu je to :-webkit-any() a ve Firefoxu :-moz-any(), podpora v IE a prohlížeči Edge zcela chybí.

Jak se to musí obcházet?

V dnešní době preprocesorů nám absence :matches() ale vlastně ani tolik nevadí, protože podobného chování lze docílit prostým zanořováním selektorů, byť výsledné CSS je trochu upovídanější. Ve Stylusu by příklad uvedený výše tedy mohl vypadat takto:

article
section
aside
	h1
		color rebeccapurple

Náš názor?

Vlastnost by někteří z nás jistě uvítali, zvláště tedy na starších projektech, kde se nepoužívá některý z preprocesorů, ale asi se nejedná o nic, bez čeho by kodér nedokázal žít.

Multiple :not(class, class)

Aktuálně :not selector umí pracovat pouze s jedním selectorem uvnitř – selector:not(:disabled). Takže pokud chcete na jeden selector aplikovat více :not pravidel, pak musíte naskládat více :not selectorů za sebe – selector:not(:disabled):not(.class). Podle nové specifikace CSS4 by mělo být možné vložit více selectorů oddělených čárkou – selector:not(:disabled, .class).

Dá se to použít?

V klasickém CSS NE. Aktuálně feature podporuje akorát Safari. Nicméně pomocí PostCSS můžete CSS4 syntaxi používat už nyní - viz. https://github.com/postcss/postcss-selector-not

Náš názor

Nevím jak vy, ale nás nebaví psát zbytečné znaky, proto už máme tuto feature v našem devstacku.

CSS vlastnost scroll-behaviour

Jedná se o další CSS vlastnost, která, jak už i samotný název napovídá, ovlivňuje chování scrollu. Nicméně ne klasického vyvolaného třeba pomocí kolečka myši, ale toho který nastane sám například při kliku na kotvu ve stránce.

Vlastnost scroll-behavior má pouze dvě hodnoty:

  • auto - výchozí. Scrollování je instatní, tedy dojde k okamžitému přeskočení na kotevní bod.
  • smooth - scrollování je “smooth” (hladké - animované) za pomoci defaultní timing funkce a easingu konkrétního prohlížeče.

Dá se to použít?

V Chromu a Firefoxu vlastnost již pár verzí funguje, takže pokud se ztotožňujete s principem graceful degradation vůbec nic vám v jejím použití nebrání. V podporujících prohlížečích tedy přechod na kotvu bude hezky plynulý a v ostatních se na ni rovnou přeskočí. Většinou nám to nemusí vadit, protože finální funkčnost je vlastně v obou případech stejná.

Jak se to musí obcházet teď

Pokud je potřeba plynulý přechod na kotvu, tak ho teď řešíme javascriptem. Celkem jednoduše a na pár řádků kódu pomocí .animate() lze takovou funkčnost napsat s jQuery. Pokud by bylo potřeba nějaké sofistikovanější řešení, které zvládá různé druhy použití a nastavení, dovolím si doporučit smoothscroll polyfill.

Náš názor

Opět vlastně taková hloupůstka, o které je ale dobré vědět. Díky ní lze totiž naprosto zadarmo vylepšit obyčejné přecházení mezi kotvami v některých prohlížečích (do budoucna snad ve všech) o oku příjemnější animaci.

Custom properties
(CSS variables)

CSS custom properties (uživatelské vlastnosti CSS, též proměnné CSS) umožní autorům stránek definovat libovolné vlastnosti či proměnné v hierarchii kaskádových stylů a dále s nimi ve stylech pracovat. Styly tak lze jednoduše parametrizovat a ovládat Javascriptem. Otevírá to nové možnosti snadného skinování a přizpůsobování vzhledu webové stránky.

Uživatelskou vlastnost CSS lze definovat v libovolném selektoru. Ta se pak chová stejně jako jakákoliv běžná vlastnost CSS, včetně dědění a přetěžování. Od standardních vlastností CSS se odlišuje prefixem -- (dva spojovníky). Např.:

:root {
	--primary-color: #f00;
	--secondary-color: #00f;
}

Vlastnost lze následně použít pomocí funkce var():

a {
	color: var(--primary-color);
}

a:hover {
	color: var(--secondary-color);
}

Vlastnost lze rovněž měnit Javascriptem:

	element.style.setProperty("--primary-color", "#0f0");

Jak se to musí obcházet?

Uživatelské vlastnosti CSS nelze plnohodnotně nahradit ničím. Preprocesory řeší pouze malou část problému.

Dá se to použít?

V současnosti již je podpora ve všech hlavních prohlížečích (asi 78 % pokrytí), čeká se tedy pouze na vymření MSIE. Viz též https://caniuse.com/#feat=css-variables

Náš názor

Uživatelské vlastnosti CSS mají potenciál výrazně změnit a zjednodušit způsob stylování webů a interakce s Javascriptem. Velké možnosti se také otevírají na poli frameworků CSS.

CSS vlastnost
overflow-behavior

Jedná se o vlastnost, která umožňuje změnit defaultní chování prohlížeče při “overscrollu” (při dosažení konce scrollovaného obsahu). Využitelné to je zejména při blokování scrollování pod otevřeným modálním oknem, které v současné chvíli nelze nijak jednoduše zařídit (zejména tedy na iOS zařízeních je to značně problematické). Dalších případů použití je nicméně celá řada (například blokování pull-to-refresh efektu apod.).

CSS vlastnost overflow-behavior může mít tyto tři hodnoty:

  • auto - výchozí. Pokus o scroll elementem při dosažení konce obsahu scrolluje i nadřazenými elementy.
  • contain - nadřazené elementy od potomků scroll nepřebírají. Při dosažení konce obsahu dochází ke klasickému “overscrollu”, jak ho známe například z iOS zařízení.
  • none - chování je obdobné jako u contain, nedochází však k “overscrollu”.

Dá se to použít?

Zatím bohužel vůbec. Jedná se o experimentální vlastnost jejíž specifikace je ve stádiu draftu. Nicméně měla by být implementována v Chromu 63, jehož release je plánován na 5. prosince 2017.

Jak se to musí obcházet teď

V současné chvíli lze podobné chování pouze simulovat pomocí Javascriptu. Velmi triviální řešení, které však nepočítá s dlouhým (scrollovatelným) obsahem v rámci modálního okna, je naznačeno zde.

Náš názor

Pro nás se jedná o určitě velmi vyhlíženou vlastnost, protože různá modální okna a jejich chování řešíme poměrně často. Složitý javascriptový kód by bylo možné hladce nahradit jednou vlastností. Více použitelné to ale bude až ve chvíli, kdy se toho chopí Safari a další mobilní prohlížeče.

CSS vlastnost
-webkit-line-clamp
(text-overflow: ellipsis pro více řádků)

Jedná se o elegantní řešení zalamování jakéhokoliv delšího textu na předem daný počet řádků. V případě, že text se na definovaný počet řádků nevejde, jsou automaticky na konec posledního řádku přidány tři tečky. Využít to lze jak na obsahově rozsáhlých stránkách jako jsou např. blogy, zpravodajské servery, tak i na menších webech, kde se vyskytuje např. výpis produktů.

Zalomení textu tak, aby bylo vidět vždy celé slovo nebo aby nezůstávaly předložky na konci řádku, není možné nastavit. Může tak dojít k situaci, kdy věta “Našla ho v noci” může být zkrácena na “Našla ho v no…” :)

Chceme-li zkrátit text na 4 řádky, zápis css bude vypadat následovně:

p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

Jak se to musí obcházet?

Nejběžnější praxí je zkrácení textu (truncate) na serveru, kdy do prohlížeče již přijde text s přesným počtem znaků. S tímto přístupem však ztrácíme možnost text dále zkracovat v závislosti na šířce daného zařízení.

V současné době je již možné toto řešit na straně klienta za pomocí pseudo elementů :before/:after. Konkrétní příklad je uveden zde https://codepen.io/natonischuk/pen/QbGWBa.

Dáváte-li přednost JS před CSS je možné použít tento skript https://codepen.io/nilsynils/pen/zKNpkm?editors=1111.

Dá se to použít?

Zatím funguje pouze v prohlížečích s jádrem Webkit (Chrome, Safari,..) Viz https://caniuse.com/#search=line-clamp

Náš názor?

Podle našeho názoru by si tato užitečná vlastnost jistě zasloužila větší podporu napříč nejpoužívanějšími prohlížeči. Věříme, že se to časem změní a my ji budeme moci bez různých fallbacků plně využívat na našich dalších projektech.

Service workers

Service worker je kousek javascriptového kódu, který obohacuje obyčejné webové stránky o vlastnosti aplikací. Script, který běží na pozadí, umožňuje např. komunikovat se stránkou, aniž by byla stránka otevřená nebo jste byli offline. To umožňuje například posílat tzv. push notifikace nebo vytvořit offline cache.

Jak takové notifikace vypadají, si můžete vyzkoušet přímo na našem kalendáři (používáte-li Chrome). Povolte příjem těchto notifikací a nezmeškáte žádná z našich přání. Webová stránka vám každý den připomene, že si máte náš kalendář otevřít.

Dá se to použít?

Podpora zatím není nic moc. Pouze v Chrome a Firefoxu. Nicméně je to věc, které se bát nemusíte. Jedná se o tzn. „progressive enhancement“ vlastnost – tzn. v nepodporovaných prohlížečích uživatelé budou připravení pouze o funkcionalitu „navíc“, o běžné fungování webu nepřijdou.

Pozn. pokud budete service worker zkoušet implementovat, musíte používat HTTPS protokol.

Náš názor

Zejména na možnost offline se těšíme moc. Momentálně musíme používat nepříliš povedenou Appcache, jejíž použití je omezené a hlavně velmi těžko debugovatelné.

Element queries

Je vlastně obdoba Media Queries, jen nepodmínkujete parametry window, ale samotného elementu.

Dá se to použít?

Bohužel NE, není totiž ani ustanovená specifikace.

Kdo by chtěl experimentovat, pak existuje pár polyfillů (https://github.com/marcj/css-element-queries, http://elementqueries.com/ a další), které si však syntaxi element queries vysvětlují po svém.

syntaxe:

selector[min-width~="400px"] {
	/* pravidla */
}

další možnost syntaxe:

@element selector and (min-width: 500px) {
	selector {
		/* pravidla */
	}
}

V dnešním světě to lze obejít pomocí elementů <iframe>, které by měly vždy jednu 100 % širokou komponentu – čímž by fejkoval element queries.

Náš názor?

Aktuálně se to nedá použít, kdo by chtěl také spoléhat se na javascriptový polyfill, který nemá v CSS ustanovenou specifikaci? Nicméně se těšíme na specifikaci a přejeme si, aby byla co nejdříve dokončena – daly by se s tím dělat velké věci.

Preload attribute

Velmi stručně řečeno jde o předběžné načtení :-). Člověka by napadlo, že může atribut použít na většinu elementů, a pak už nemusí řešit performance webu. Bohužel, tak jednoduché to nebude.

Preload naznačuje, že někdy je lepší stahovat assety bez ohledu na běžné flow v prohlížeči. Preaload tedy musí poslat požadavek na browser o předběžné načítaní assetů, což je například rozdíl od prefetch, který lze ignorovat.

Použití

Jako hodnota <link> elementu se přidává do rel atributu.

Nejčastěji jsme zvyklí na zápis:

	<link rel="stylesheet" href="./css/style.css">

S použitím preload by to pak vypadalo takto:

	<link rel="preload" href="./css/style.css" as=”style”>

To nám zajistí, že naše CSS bude k dispozici dříve, než budou požadovány při pozdějším vykreslení stránek.

Použitím as tedy specifikujete typ contentu, který má být přednačten, což umožňuje browseru přesnější načítání zdrojů.

Co lze předem načíst

Přednačteno může být mnoho různých typů obsahu, pojďme se podívat alespoň na ty hlavní:

  • audio
  • video
  • document - dokument HTML určený k vložení do <iframe>
  • emded
  • font
  • image
  • script
  • style

Na co se těšíme

Jedna zajímavá feature je použití media atributů. Ty mohou přijímat media jako plnohodnotné media queries, což umožní provést responsivní preloading!

<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

Dá se použít

Prozatím je plná podpora pouze v prohlížeči Chrome, ostatní jsou stále in development, nicméně myšlenka je to určitě zajímavá.

Náš názor?

Zajímavá vlastnost, kterou lze zlepšit performance webu, například preload fontů je určitě jedna z prvních věcí, na kterou to lze využít. Těšíme se, až bude implementována ve většině prohlížečích. Tedy krom IE11-, kde čekáme na úplné vymření. A co Edge? - Under Consideration.

Přejeme všem krásné, veselé a hlavně pohodové Vánoce.
V příštím roce mějte pevné zdraví, chuť do práce, nadšení do projektů a spoustu úspěšně realizovaných cílů a splněných přání.

Ať je ten příští rok alespoň takový, jako byl ten letošní.

Přečtěte si, jaký jsme měli rok 2017. Jedním slovem super.

Mathematical Expressions - min(), max()

Jedná se o funkce použitelné k dynamickému výpočtu hodnot pro CSS vlastnosti (na podobném principu jako je již hojně používaná funkce calc()). Skvělý případ použití lze nalézt při implementování responsivní typografie, kdy chceme mít fluidní velikost textu vzhledem k velikosti obrazovky, ale nechceme, aby bylo písmo menší než nějaká minimální hodnota a zároveň větší než námi stanovená hodnota maximální.

Ukázka min() a max()

Funkce min() a max() berou jako vstup čárkami oddělený výčet hodnot a jako výstup vrací hodnotu nejmenší (případně největší). Jednoduchá ukázka pro docílení responsivního chování velikosti textu by mohla vypadat takto:

	font-size: min(max(1rem, 5vw), 3rem);

Prohlížeč si tento zápis vyloží tak, že chceme nastavit velikost písma na 5vw, ale zároveň nechceme, aby bylo menší než 1rem nebo větší než 3rem.

Dá se to použít?

Zatím nedá. Funkce byly v minulosti součástí CSS specifikace, ale bylo od nich upuštěno. Po diskuzi se však opět vrátily do draftu pro CSS 4, takže to vypadá, že se jich jednou přeci jen dočkáme. Před pár dny se totiž dokonce nenápadně dostaly do buildu WebKit Nightly.

Jak se to musí obcházet teď

Podobného efektu pro responsivní velikost písma použitého v ukázce lze už i nyní dosáhnout pomocí funkce calc(). Vysvětlení jak na to je však nad rámec našeho vánočního tipu. Zájemce tedy odkáži na velice kvalitní článek, který se problematice tzv. “CSS locks”, jak se této technice říká, věnuje velmi podrobně.

Náš názor

Pokud se min() a max() do prohlížečů nakonec dostanou, budeme velice rádi. Případy, které teď řešíme složitěji pomocí calc(), se nám totiž zjednoduší (odpadne matematika), a tím i značně zpřehlední. Určitě se na to těšíme.

E-maily - custom font

Čím dál častěji se k nám dostávají designy newsletterů s custom fonty. Ale HTML e-maily se stále kódují v tabulkách kvůli některým zastaralým e-mailovým klientům, takže jak tam dát webfont?

Existuje už teď nějaké řešení?

Ano, pokud razíte vývojářský přístup graceful degradation. Ne, pokud chcete aby to ve všech klientech vypadalo stejně (pak použijte obrázky).

Custom font lze do e-mailů dostat třemi způsoby:

  • @import
    <style>
    	@import url('https://fonts.googleapis.com/css?family=Pacifico&subset=latin-ext');
    </style>
    		
  • <link>
    <link href="https://fonts.googleapis.com/css?family=Pacifico&subset=latin-ext" rel="stylesheet">
    		
  • @font-face
    <style>
    @font-face {
    	font-family: 'Pacifico';
    	font-style: normal;
    	font-weight: 400;
    	src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/6RfRbOG3yn4TnWVTc898ERkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
    	unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
    }
    </style>
    		

Ukázka je psaná na google font, ale úplně stejně lze načítat vlastní font, kdy budete načítat stylopis z vlastního serveru či načítat fonty pro @font-face.

Dejte si pozor na Outlook

Zajímavé je, že Outlook 2011 webfonty umí, ale ostatní Outlooky NE a to vč. těch novějších – 13 a 16. Ty zobrazí defaultní font Time New Roman. Je tedy potřeba linkování fontů ifnout podmíněným komentářem, díky kterému pak zobrazí nadefinovaný alternativní font.

<!--[if !mso]><!-- -->
	<link href="https://fonts.googleapis.com/css?family=Pacifico&subset=latin-ext" rel="stylesheet">
<!--<![endif]-->

Náš názor

Podpora není kdoví jaká, ale doba určitě spěje k tomu, aby se i e-mailech zobrazovali nesystémové fonty. My custom fonty standardně používáme, ale vždy klienta upozorníme, že podpora není úplně dobrá, ale že zvolíme odpovídající alternativu, aby to vypadalo dobře i v klientech, kteří web fonty nepodporují.

CSS vlastnost grid

První a jediný systém vymyšlený pro sestavování layoutu webové stránky. Díky jednoduchému skládání sloupců a řádků to předznamenává konec floatovaných, inline-blockových a flexových layoutů. Stejně jako u flexboxu rozlišujeme vlastnosti kontejneru a vlastnosti prvku. Přibyla také nová jednotka “fr” - fragment gridu.

Dá se to použít?

Dle Can I Use je plná podpora v ČR cca 73%, tudíž si na možnost bezstarostného použití budeme muset ještě počkat. Samozřejmě je možné použít polyfill, což je ale samozřejmě čas na zkoušení a testování navíc.

Náš názor

Doufáme, že grid bude už v roce 2018 použitelný, jelikož se jedná o velký krok kupředu v oblasti čisté a moderní webové kodéřiny.

Background image v e‑mailech

Kdo někdy kódoval nějaký HTML e-mail či složitější newsletter, tak určitě ví, jaký je problém dostat do mailů cokoliv složitějšího. A co teprve background? Zní to jako sci-fi, ale jde to.

Lze to použít?

Lze, ale má to svá omezení. Určitě bych to nepoužil na nějaký obsah, který se musí zákazníkovi zobrazit, protože to v některých klientech bohužel nefunguje, ale se správně barevným fallbackem si toho běžný uživatel ani nevšimne.

Dál je potřeba myslet už při tvorbě grafiky, že v některých klientech nefunguje pozicování či nastavení opakování. Ideálně to funguje pro přesně daný rozměr (např. 600x300px) – Ukázka: https://litmus.com/checklist/emails/public/ae419d1.

Pro generování pozadí používám nástroj Backgrounds.cm, který dokáže vygenerovat i fallback elementy pro Outlook.

Náš názor

S pomocí nástroje Backgrounds.cm a testování e-mailů v Litmusu již nejsou background obrázky v HTML e-mailech problém a běžně je používáme.

Kdo se tvorbou HTML e-mailů zabývá hlouběji, pak určitě ocení newslettery samotného Litmusu – doporučuji se přihlásit.

HTML import

Načítání jiného obsahu do HTML je běžné a jednoduché - umíme vložit CSS <link rel="stylesheet">, javascript <script>, obrázek <img>, audio <audio>, video <video>… . Ale vkládání jiné HTML stránky? Na to existuje právě HTML import: <link rel="import">

Výhodou takového importu je, že se importuje stránka včetně dalších linkovaných zdrojů CSS, JS apod. Přičemž stránka se nevloží přímo, jako je to např. u klasického include v PHP, ale prohlížeč obsah pouze "připraví" a dá jej k dispozici pro další práci v JS.

	<head>
		<link rel="import" href="warnings.html">
	</head>
	<body>
		...
		<script>
			var link = document.querySelector('link[rel="import"]');
			var content = link.import;
	
			// Grab DOM from warning.html's document.
			var el = content.querySelector('.warning');

			document.body.appendChild(el.cloneNode(true));
		</script>
	</body>

Dá se to použít?

Podpora je bohužel pouze v Chrome.

Náš názor?

HTML importy se velmi hodí při práci s jinými frameworky nebo HTML Custom elements (viz přání #14)

HTML custom elements

Přináší nám možnost vytvářet si vlastní elementy v HTML a výhodou je především přehlednější kód. Zároveň nám umožňuje mít v těchto elementech jasně definovaný obsah, který můžeme měnit podle vlastních metod.

Dá se to použít?

Plnou podporu v1 zatím nenajdete v žádném prohlížeči, částečnou pak v Chrome, Safari a Samsung Internet Browseru.
https://caniuse.com/#feat=custom-elementsv1
https://www.w3.org/TR/custom-elements/

Využít můžete například tento polyfill: https://github.com/webcomponents/webcomponentsjs

Náš názor?

Myšlenka HTML custom elements je zajímavá, nicméně v současné chvíli bychom je na žádném projektu nepoužili. Důvodem je opravdu slabá podpora a potřeba polyfillu. Na polyfill se určitě v takové míře nechceme spoléhat a samozřejmě jeho nasazení a testování by zabralo čas.

Upřímně, HTML custom elements nejsou pro každého. Existují kodéři, kteří přehlednost neocení. Do budoucna vidíme potenciál custom elements hlavně pro aplikace, nikoliv pro webové stránky.

Intersection API

Jde o nový způsob, jak lze detekovat viditelnost elementu ve viewportu nebo viditelnost relativně vůči nadřazenému elementu. Aktuálně je to poměrně náročný úkol. Většina implementovaných řešení je nespolehlivá, protože nepokrývá všechny případy. Pro zprovoznění takové detekce je potřeba sáhnout po událostech a metodách v DOM api, které zásadně ovlivňují výkon webu a tím uživatelský prožitek při procházení obsahu.

Dnešní obsah je mnohem datově i vizuálně náročnější. Navíc téměř polovina zobrazení webů je na mobilních zařízení, pro které je nutné obsah optimalizovat. Proto se dnes často implementují řešení jako:

  • lazyload multimedií
  • infinite scrolling a donačítání obsahu
  • inview animace i milovaný parallax

Na detekci viditelnosti jsme se stali poslední dobou celkem závislí. Proto vznikla potřeba mít nativní API, které dokáže potřebné operace udělat interně mnohem rychleji. Vývojářům API šetří čas a také jim dává jasnou cestu, jak takové detekce dělat.

Dá se to použít?

Ano. Pokud si vystačíte se základní funkčností, můžete využít oficiální polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill
Musíte si ale uvědomit, že ve starších prohlížečích kvůli polyfillu vytváříte stejnou zátěž jako doposud, takže je nutné to pořádně otestovat, než popustíte uzdu své fantazii.

Jednoduché demo, jak se dá nové API použít: https://codepen.io/superkoders/pen/dJbVYj

Náš názor?

Jsme rádi, že něco takového je nativně implementováno. Prohlížeče musí držet krok s rostoucími nároky obsahu. U nás teprve testujeme limity polyfillu. Uvidíme, co vše se s tímto API dá implementovat. Možnosti jsou velké.

CSS Font Loading API

Webové fonty nám rozšiřují možnosti na poli typografie, přestavují však datovou zátěž. Než se požadovaný font načte, některé prohlížeče po určitou dobu nezobrazí text vůbec, jiné text zobrazí hned, ale zástupným fontem. Proto se na scéně objevuje CSS Font Loading API, které přináší rozhraní pro manipulaci s fonty, umožňuje sledování průběhu jejich stahování a dokáže sjednotit chování v prohlížečích.

Toto API zahrnuje 2 hlavní části:

  • FontFace - kopíruje chování CSS pravidla @font-face, obsahuje tedy informace o fontu jako URL, font-weight atd.
  • FontFaceSet - obsahuje všechny fonty, které může webová stránka použít k vykreslení textu. Každý dokument má svůj vlastní FontFaceSet přístupný přes document.fonts

Příklad obsluhy

// Zjištění, zda prohlížeč tomuto API rozumí.
if (document.fonts) {

	// Definování nového fontu.
	var OpenSansFont = new FontFace('Open Sans', 'url(/fonts/OpenSans.woff2)', {
		style: 'normal',
		weight: '400'
	});

	// Zahájení asynchronního stahování fontu.
	OpenSansFont.load();

	// Při úspěšném načtení fontu přidáme font do dokumentu a nastavíme ho elementu body.
	OpenSansFont.loaded.then(function(fontFace) {
		document.fonts.add(fontFace);
		document.body.style.fontFamily = '"Open Sans", sans-serif';
	}, function(fontFace) {
		// fontFace.status obsahuje aktuální stav stahování ('unloaded', 'loading', 'loaded' nebo 'error')
		console.error('Status', fontFace.status);
	});
}

Dá se to použít?

Tuto feature podporují všechny prohlížeče kromě dvojice Internet Explorer a Edge. Pokud potřebujete, aby se webový font zobrazil ve všech prohlížečích, můžete použít polyfill Font Face Observer.

Náš názor

Pokud potřebujete využít vlastní font, je nyní za nás nutnost toto API využít. S polyfillem sjednotíte chování napříč prohlížeči a uživatelům můžete poskytnout po dobu načítání alternativní font. Tím zpříjemníte prohlížení obsahu zejména na mobilním připojení. V budoucnu očekáváme příchod CSS vlastnosti font-display, která celé řešení značně zjednoduší, a proto bude toto API víceméně zbytečné.

React Fiber

React Fiber je nové jádro populární javascriptové knihovny React. Přináší řadu zajímavých možností, které se starým jádrem implementovat nešly.

Nově například může komponenta vracet pole prvků, řetězec nebo JSX fragment bez zbytečné obalující komponenty. Dále je možné lépe odchytávat chyby v komponentách pomocí tzv. Error Boundaries. Asi nejzajímavější a nejvýraznější změnou je ale asynchronní rendering.

V současných verzích Reactu probíhá veškerý rendering stromu komponent v jednom cyklu (framu prohlížeče), takže jediná náročnější komponenta může blokovat vykreslování všech ostatních komponent. React Fiber umožní rozdělit a naplánovat vykreslování do více framů, což povede ke zlepšení výkonu aplikace a sníží se riziko blokování hlavního vlákna prohlížeče. To vše při zachování 100% zpětné kompatibility se stávajícím API.

Dá se to použít?

Produkční verze Reactu 16 a výše již jádro Fiber obsahuje. Od verze 16.0.0 lze využívat nové návratové typy - pole a řetězce - a Error Boundaries. Od verze 16.2.0 přibyly také fragmenty. Asynchronní rendering je prozatím vypnutý kvůli hladkému přechodu na novou verzi. S jeho zapnutím se počítá během následujících měsíců.

Náš názor?

Zejména od asynchronního renderingu si slibujeme mnohem lepší škálování výkonu náročných javascriptových aplikací, především těch, které vyžadují real-time rendering nebo složitější vykreslovací logiku. Pokud se tyto předpoklady naplní, ušetří nám to mnoho starostí s optimalizacemi výkonu.

Úplné vymření IE

Co to je a co to řeší?

Neřeší nic a přináší většinou největší útrapy, strasti a bezesné noci kodérům při testování webu. Od dob IE 5 či legendární IE 6, se tento prohlížeč posunul mílovými kroky. Weby se v aktuální verzi IE11 naštěstí nerozpadají, již nepotřebujete vlastnost zoom: 1, dokáže zobrazit většinu CSS atributů, nicméně stále háže vývojářům klacky pod nohy.

Klasickým případem jsou problémy s flexboxem, podporou některých javascriptových metod a celkově pomalou implementací novinek.

Popis

Jak se to musí obcházet?

Pollyfily nebo ignorováním jeho existence.

Stav

Už nějaký ten pátek víme, že IE11 je poslední verzí tohoto legendárního prohlížeče, nicméně jeho odchod do frontendového peklíčka je zatím ještě v nedohlednu, globálně nějakou verzi IE používá cca 4% uživatelů, v České republice o něco více, cca 7%. zdroj: http://gs.statcounter.com

CSS pseudotřída :has

Pomocí tohoto pseudo selectoru by se daly stylovat elementy podle obsahu.

Syntaxe:

	selector1:has(selector2) {
		/* pravidla */
	}

Příklad:

	header:has(h1) {
		background-color: blue;
	}

Dá se to použít?

Bohužel pomocí klasického CSS ne. Jedinou možností je ifování javascriptem.

Náš názor

Občas by se něco takového hodilo. Např. pokud máte nějaký generovaný obsah z CMS (třeba menu), který nelze upravit a potřebujete ovlivňovat obalující element – takže bychom takovou možnost uvítali.

CSS meta selectory

Element Queries (viz přání #13) obsahují nové meta selektory. Díky nim je možné vybrat element, který se nachází v DOMu před jiným elementem ($prev) nebo obalující element, tedy jeho přímého rodiče ($parent).

Použití selektorů můžeme vidět na následujícím příkladu. https://codepen.io/Pavhan/pen/dZwVOZ

Jak se to musí obcházet teď?

V CSS neexistuje možnost, jak vybrat předchozí element nebo rodiče konkrétního elementu. Meta selektory spadají do “ekosystému” EQ, tudíž jejich použití bude možné ve chvíli, kdy prohlížeče budou EQ podporovat. Druhou možností je použít polyfil EQCSS - https://github.com/eqcss/eqcss

Řešením může být také použití JS knihovny jQuery a její funkcí prev() a parent().

Náš názor

Využití meta selektoru skrývá potenciál ve chvíli, kdy není možné nebo není žádoucí přidat danému elementu specifický identifikátor. Navíc se nebudou tyto věci muset hackovat javascriptem.