Narazili jste někdy na problém, že jste museli zvýšit specificitu CSS selektoru, abyste přepsali nějaké pravidlo z frameworku nebo vlastního vzhledu (theme)?
Nejste jediný, a proto W3C přišlo v roce 2021 s návrhem kaskádových vrstem (Cascade Layers) a většina předních vývojářů (Chromium, Webkit i Mozilla) již pracují na co nejrychlejší implementaci.
Pokračování textu Kaskádové vrstvyHTML5 má jednu „skrytou“ vlastnost, o které se moc nemluví. Částečně proto, že pro nováčky je trochu matoucí a pro zkušení kodéry víceméně zbytečná. Mluvím o vlastnosti (atributu) hidden („skrytý„), který můžete nastavit na libovolný prvek a ten se pak bude chovat stejně jako s display:none.
V čem spočívá její smysl (a dalo by se říct i nesmysl)?
Pokračování textu Prvek skrytý pomocí HTML5Formulářové prvky mají ve všech prohlížečích předdefinovaný styl (podle OS) a je obtížné je změnit. Přitom požadavek na změnu vzhledu formulářů je jeden z nejčastějších při vývoji RIA (Rich Internet Application) nebo PWA (Progressive Web App).
Původní text: listopad 2017
Aktualizováno: březen 2022
CSS vlastnost border-radius umožňuje nastavit prvku kulaté okraje. To, zda používat kulaté rohy u tlačítek, se mění stejně jako barva modního dámského oblečení, ale border-radius se dá použít i na mnohem více věcí.
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.
Moderní poučky o CSS tvrdí, že hackům už odzvonilo a místo nich by se měla používat feature detect a fallbacky. To je sice pravda v okamžiku, kdy chcete stylovat vzhled stránky, ale pokud potřebujete vyřešit nějaký bug, který se projevuje jen v konkrétním prohlížeči (hádáte správně, mluvím o Internet Exploreru Safari), je CSS hack tou nejlepší cestou.
Kromě sdílení šablon můžete v Latte často používaný kód zapouzdřit do makra. Rozdíl je v tom, že zatímco kód v šabloně se provádí při každém načtení stránky, makro může část kódu připravit v době kompilace šablony a do šablony vložit již připravený kód.
Pokračování textu Jak správně vytvořit vlastní makra v LatteLatte je šablonovací (templating) systém z českého frameworku Nette (dá se ale použít i samostatně). Jeho nejsilnější vlastností je možnost rozložit celou stránku na sadu menších šablon, ze kterých se pak zpětně stránka poskládá.
Důvodem pro rozdělení stránky na menší části je to, že danou část můžete použít na více místech a změnou jedné šablony pak upravíte několik stránek najednou. Ale i když určitou část nepotřebujete znovu-použít, můžete ji oddělit čistě pro přehlednost.
Pokračování textu Latte jako od baristkyJak přišel Grid na svět? Když se před pár lety (mezi 2009 – 2012) objevil ve W3C specifikaci CSS Flexbox layout, byl to první náznak toho, že dlouho používaným tabulkovým a plovoucím layoutům odzvonilo. Přesto ale flexbox nedokáže všechno vzhledem k tomu, že je založen na plovoucím uspořádání prvků. Složitější layouty se tak museli řešit vkládáním několika flexboxů do sebe a responzivita na tom byla dost špatně.
Proto se velice záhy rozhodlo W3C pro další nový layout, který by byl přímo zaměřen na vytváření responzivního layoutu – CSS Grid Layout. Bylo to opravdu záhy, poslední working draft (návrh) flexboxu je z října 2012 a první návrh gridu se objevil v listopadu 2012 (ale stejně jako u flexboxu existují i starší návrhy z předchozích let, ze kterých ten konečný čerpá). Na návrzích Flexboxu a Gridu navíc pracovali ti samí lidé, takže se oba pěkně doplňují, místo aby spolu soupeřili.
Grid layout se samozřejmě již nějakou dobu používá, ale zatím je to vždy jen nadstavba nad nějakým tabulkovým nebo plovoucím layoutem, který je obalený sadou CSS tříd pro umístění položek. Příkladem je Bootstrap Grid, který využívá plovoucí kontejnery (float: left) různých šířek umístěné do 12 sloupců.
Do září roku 2016 byl W3C Grid vyvíjen a byl dostupný pouze pro testování ve Firefoxu (options:layout.css.grid.enabled) a Chrome/Opera (flags:experimental Web Platform). Od roku 2017 (přesněji asi od března) by měl být již dostupný pro všechny uživatele, konkrétně ve Firefox 52+, Chrome 57+, Opera 43+ a Safari 10.1.
Internet Explorer 10/11 a Edge 12+ podporují jiný návrh z roku 2011 (známý jako Grid Align) – viz konec tohoto článku. V dubnu 2017 začal Microsoft pracovat na W3C verzi, která je experimentálně dostupná od buildu 16226. Pokud půjde vše dobře, mohl by Edge podporovat W3C grid v průběhu roku 2018.
Pokračování textu Grid, aneb revoluce tabulkového layoutuKromě CSS tříd, které sami definujete v HTML, můžete použít i pseudo-třídy, které jsou definované CSS2 a CSS3 specifikací a mají své speciální významy, které se odvíjí od obsahu HTML nebo akcí, které uživatel provádí.
Pokračování textu CSS pseudo-třídy