cz
cz
Zpět

CSS4: Co nám přinese nová verze kaskádových stylů?

PixelNews | Web - 4th Únor 2016
Napsal/a Artem

Už je tomu více než tři roky, co se CSS3 stalo obecně doporučovaným jazykem pro popis způsobu zobrazení elementů. Od té doby se na webových fórech shromáždilo obrovské množství názorů, vesměs pozitivních, a zkušeností s novými prvky, které třetí verze kaskádových stylů vývojářům přinesla.

Každý musí uznat, že některé inovativní funkce, které se v CSS3 objevily, měly obrovský vliv na další směřování vývoje webů – za všechny uveďme například vlastnosti, které nás konečně zbavily rastrových přechodů a zaoblených rohů, nebo komplexní řešení zajišťující daleko efektivnější rozložení stránky. Vzhledem k tomu, kolik času uplynulo od vypuštění předchozí verze, můžeme si být jisti, že CSS4 už pomalu zvedá ruku a za malou chvíli také zaklepe na dveře programátorského světa.

 

Diskuse a odhady

Uvedení nové verze kaskádových stylů je momentálně vskutku hojně diskutované téma na internetových fórech. Přestože už má v tuto chvíli CSS4 několik implementovaných modulů, stále ještě můžeme ohledně konkrétních novinek v kaskádových stylech směle fantazírovat. V tomto článku bych se s vámi rád podělil o své osobní očekávání a naděje týkající se funkcí budoucího CSS4.

Rodičovské selektory

Kdybych dostal za každé vybrání rodičovského elementu jeho potomkem korunu, pravděpodobně bych teď místo psaní tohoto článku proháněl své nové Lamborghini (naštěstí rád chodím pěšky a v autech se nijak zvlášť nevyžívám). Rodičovský výběr by se bezpochyby stal velice užitečnou novinkou kaskádových stylů, která by ušetřila programátorům nezanedbatelnou porci času a značně by zpřehlednila layout.

Návrhy funkčnosti tohoto selektoru se liší vývojář od vývojáře, z mého pohledu je však nejrozumnější tento:

      li < .current_menu_item { … }

POZNÁMKA: Tento selektor už můžete najít ve W3C Working Drafts, konkrétně v sekci “Selectors Level 4” (http://www.w3.org/TR/selectors4/). Je tam zmíněn jako vykřičník (exclamation point, “!”), který nastavuje objekt výběru:

!ul > li.active

V tomto případě vybraným prvkem není <li> s classou “active”, ale jeho rodič <ul>. To vypadá vskutku působivě, avšak musíme pamatovat, že se jedná pouze o návrh, který zatím není možné v praxi běžně používat.

Atributy

Toto možná nepatří mezi ty vychytávky, o kterých se vám poslední měsíce ve spojení s CSS4 zdá, určitě by vám to ale také čas od času přišlo vhod. Mám na mysli způsob, jakým bychom mohli jednoduše vzít hodnotu atributu vybraného elementu a dále s ním pracovat mimo CSS4. Tato funkce už je ve skutečnosti dostupná pro pseudo-classy :before and :after:

a:after {

            content: attr(‘href’);

      }

Tato funkce je na vývojářských fórech (Mozilla) v souvislosti s CSS4 jednou z nejdiskutovanějších, můžeme tak věřit, že poptávka po ní neunikne pozornosti vývojářů připravované čtvrté verze kaskádových stylů.

Výrazy

Většina programátorů se shoduje v tom, že kaskádové styly by se neměly snažit pokrývat příliš složité problémy, neboť jejich krása tkví v jednoduchosti a přehlednosti. S tím rozhodně souhlasím, přesto si dovolím tvrdit, že by nám CSS4 značně usnadnilo práci, kdyby umožňovalo vytvoření proměnných z jednoduchých výrazů (například vytvoření jednoduchého layoutu se šířkami sloupečků závislých na jejich celkovém počtu v rodičovském kontejneru).

.container .column { width: 100% / n; }

Kde “n” představuje počet potomkových “.column” elementů uvnitř kontejneru.

Proměnné

Dle mého názoru právě proměnné, dosud dostupné přes moderní preprocesory, představují ono chybějící ozubené kolečko v jinak perfektně fungujícím mechanismu nativních kaskádových stylů. Jejich užitečnost a všestrannost totiž rozhodně nejsou přeceňované a způsob, jakým drží formu našeho kódu, je k nezaplacení.

Slovo závěrem

Zatím nám nezbývá než odhadovat konkrétní funkce a úpravy, které s sebou nejnovější verze kaskádových stylů přinese. Nicméně návrh specifikace CSS4 už existuje, a jelikož se snaží popsat funkčnost CSS4 jako celku, můžeme si přečtením W3C Working Drafts složit poměrně přesný obrázek o tom, jak se nám bude s tímto jazykem v budoucnu pracovat.

Profilový obrázek
Napsal/a
Artem
Napsal/a
Rozhovor s Michalem, naším CTO
Aktuality | PixelNews | PixelNews - 6th Leden 2018
Napsal/a Michal Vávra
Progresivní webové aplikace neboli web na steroidech
Mobil | Web - 8th Prosinec 2017
Napsal/a Michal Vávra