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.
Jak 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 layoutuPokud se ve stránce nenačte obrázek, zpravidla to znamená chybu serveru a je potřeba ji opravit. Když je to chyba vašeho serveru, zpravidla to není problém, ale řada stránek načítá obrázky z jiných serverů, např. CDN třetích stran, kde dostupnost nelze moc ovlivnit (a často může být jen dočasná).
Nicméně to návštěvníka nezajímá. Z jeho pohledu stačí, když mu místo nedostupného obrázku zobrazíte něco jiného. HTML k tomuto účelu nabízí atribut ALT, který může (resp. měl by) obsahovat popis toho, co by bylo na obrázku vidět, kdyby se zobrazil. Nicméně obyčejně zobrazený text v základním stylu už dopředu říká „tady něco není v pořádku“ zvláště v okamžiku, kdy máte stránku založenou na speciálním designu.
Námět článku: http://bitsofco.de/styling-broken-images/
Možnost používat CSS proměnné (někdy známé jako CSS Makra) je starý požadavek, který se do teď řešil různými generátory jako jsou SASS nebo LESS. Ty ale mají tu nevýhodu, že stále generují statické definice, které nelze (jednoduše) měnit za běhu programu (tedy na straně klienta).
W3C ale již pracuje na nové specifikaci CSS Custom Properties for Cascading Variables, která umožní využívání proměnných a dokonce i jejich snadnou změnu na straně klienta a tedy dynamickou hromadnou změnu stylů.
A i když jde stále jen o návrh, proměnné můžete již nějakou dobu používat ve Firefoxu (plná podpora v 42+) a také nově v Chrome 49+, Safari 9.1+ a iOS 9.3+. Microsoft podporu zvažuje.
UPDATE: V Edge 15 (Windows Creators Edition) jsou Custom properties plně podporovány. Jediný (stále používaný) prohlížeč, který je tedy neumí, je IE11 (podle statistik v době vydání Creators edition používá IE11 dvakrát tolik lidí než Edge).
Taky pořád čtete, jak optimalizovat CSS tím, že je spojíte do jednoho velkého souboru, který načtete v hlavičce HTML stránky?
No, Google si teď uvědomil, že to není tak úplně nejlepší a snaží se Chrome (a tedy i Operu a Safari) přepsat tak, aby se – světe div se – choval stejně jako Internet Explorer. Vývojáři Microsoftu totiž do IE (ať už záměrně nebo nechtěně) zakomponovali mechanismus, který umožňuje načítat CSS efektivněji po částech.
Pokračování textu CSS rychle a efektivněPokud potřebujete na stránce udělat nějaký obrázek průhledný (ikonu, vodoznak, apod.) asi vás napadne použít GIF nebo PNG, které jsou nejčastěji používanými formáty pro průhledné obrázky.
Bohužel ale GIF podporuje jen 256 barev a PNG je zase bezztrátové, takže generuje hodně velké obrázky.
Existuje ale celá řada alternativ, pomocí kterých můžete ušetřit čas a traffic uživatelů při stahování stránky.
Pokračování textu Jak na průhlednost obrázků?Máte na svém vývojářském počítači (s Windows) zprovozněnou testovací verzi webu a potřebujete ji otestovat na (fyzickém) mobilním zařízení? Stačí správně vše nastavit a můžete testovat.
Námět článku převzat z: http://conceptdev.blogspot.cz/2009/01/monitoring-iphone-web-traffic-with.html
Pokračování textu Testování localhostu na mobilních zařízeních
Pokud máte na stránce nějaké prvky, které mohou být špatně vidět (např. buňky v tabulce nebo náhledy obrázků) a chcete, aby měl uživatel možnost si je zvětšit najetím kurzoru, můžete to buď udělat složitě přes JavaScript, a nebo velice jednoduše přes CSS3. Pokračování textu Automatický zoom prvku na stránce
Ve Firefoxu mohou být tlačítka (input[type=button]) přesně o 2 pixely menší. To je způsobeno „chybou“ v interním výchozím CSS stylu, který neumožnuje změnu line-height u inputů.
Pro ruční nastavení výšky tlačítek použijte tento hack:
/* použij následující styl pouze ve FF */
@−moz−document url−prefix() {
input[type=button] {
height: 16px;
}
}