HTML5 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í HTML5Když 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ímPokud 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/
Stará verze iOS7, která je ale momentálně poslední dostupná pro iPhone 4 a staré iPady, obsahuje nepěkný bug, který znemožňuje použít správně jednotky „vh“.
Námět opravy: styles.css od pburtchaell.
Více o chybných verzích viz caniuse.com.
Pokračování textu Responzivní jednotky „vh“ nefungují na iOS7
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).
Každý správný web designer a HTML kodér zná CSS pseudo třídu :visited, pomocí které můžete označit již navštívené odkazy.
V moderním web designu se ale často setkáváme s tím, že navštívené odkazy jsou záměrně sjednocovány, aby nebylo potřeba vymýšlet odlišný styl pro navštívené a nenavštívené položky.
A v neposlední řadě některé designy ani neumožňují efektivně určit, co už uživatel „navštívil“ a co ne (např. Facebook, Twitter, apod.) nebo je lze navštěvovat opakovaně (např. několikrát denně aktualizované články na iDnes nebo Novinkách).
Nastavit nebo přečíst šířku prvku přes jQuery lze dvěma (zdánlivě rovnocennými) způsoby:
$el.width('100%');
$el.css('width', '100%');
$el.css({width: '100%'}); //alternativní zápis
// předchozího způsobu
Ve většině případů se chovají stejně – v tomto případě prostě nastaví prvku šířku na 100% jeho rodiče.
Pokud ale danému prvky nastavíte vlastnost box-sizing na border-box, najednou se začnou výsledky těchto zůsobů rozcházet a pokud je střídáte pro nastavení stejné velikosti (např. protože kód psali dva různí programátoři, a každý preferuje jiný zápis), může se prvek chovat dost podivně.
Pokračování textu jQuery width() vs. css(‚width‘) při border-box
Chcete použít CSS import, ale nefunguje?
@import(//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css);
Máte problém s programově spouštěnými CSS3 animacemi, které se v některých prohlížečích (typicky Firefox) neanimují správně? A teď nemluvím o tom, že pomalé počítače nezvládnou složitá prolínání a posuny. Pokračování textu Zprovoznění animace
Pro zjištění velikosti stránky nebo okna prohlížeče existuje několik postupů jak v nativním javascriptu tak i v různých knihovnách a frameworcích (např. jQuery). Každá ale vrací trochu jiné rozměry a je důležité vědět, který se dá k čemu použít. Pokračování textu Zjištění velikosti stránky
