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ý.
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.
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ímZarovnání textu na střed není (doufám) problém; stačí použít:
.center { text-align: center; }
Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru.
Pokračování textu Zarovnání na střed v kontejneruNavrhovat 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.
Pomocí @media můžete vytvořit responzivní layout v závislosti na šířce obrazovky, čímž můžete celkem dobře poznat, jestli uživatel pracuje na mobilu, tabletu nebo desktopu a podle toho uzpůsobit další prvky (např. větší ikony na mobilu).
V posledních letech ale narážíme na zařízení, která se této definici vymykají. Např. Note zařízení, která mají mobilní displej (320px), ale jdou ovládat hodně přesným perem. Nebo naopak dotykové monitory, které mají 4k rozlišení, ale ovládají se pouze prstem (takže na 16x16px ikonu se prakticky nedá kliknout). Navíc některá zařízení jsou již schopna detekovat ukázání prstem (hover) nebo sílu stisku (3D touch).
Pokračování textu Detekce polohovacích zařízeníObrázek v pozadí prvku lze použít jako náhražku obyčejného obrázku (image) na celou řadu věcí, s jednou výjimkou – zobrazení nebo skrytí obrázku na pozadí není možno animovat pomocí transition (podle W3C je možno animovat pouze barvu a pozici).
Nebo existuje nějaký způsob, jak dát prvku obrázek do pozadí (např. sprite) a zároveň animovat jeho zobrazení? Samozřejmě bez použití JS.
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).
Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.
<div class="imgWrapper">
<!-- autosize DIV around IMG -->
<img src="..." />
</div>
Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.
Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:
.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }
V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.
Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url('link.png') transparent;
}
Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
}
nebo
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
což není validní obrázek a proto
se v pozadí nic nezobrazí */
}
Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:
a { background: url(#); /* Fix IE9 anchor */ }
Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.
V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.
To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.
Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.