Archiv štítku: javascript

Stylování nenačteného obrázku

Pokud 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/

Pokračování textu Stylování nenačteného obrázku

Proměnné v CSS již dnes

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).

Pokračování textu Proměnné v CSS již dnes

Označení navštívených odkazů

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).

Pokračování textu Označení navštívených odkazů

jQuery width() vs. css(‚width‘) při border-box

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

Oprava nefungujícího onChange v selectu

Pokud chcete JavaScriptem hlídat výběr hodnoty ze selectu (ComboBoxu) a hned poté něco provést, možná narazíte na to, že některou (konkrétně první) položku nelze vybrat (tedy vybrat lze, ale nevyvolá požadovanou akci).

To je proto, že většina prohlížečů se vám snaží usnadnit práci a automaticky vybere první položku v seznamu. A pokud je již jednou vybrána, je logické, že při jejím opětovném výběru nedojde ke změně („change“). Pokračování textu Oprava nefungujícího onChange v selectu

Oříznutí textu trojtečkou

Pokud máte nějaký text, který může být dlouhý, ale vy máte jen omezený prostor (např. zobrazení uživatelského jména pod fotkou), můžete ho nechat automaticky oříznout a nechat prohlížeč doplnit trojtečku (ellipsis).

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Všechny uvedené vlastnosti jsou potřeba a pokud třeba jen jednu z nich zapomenete, nebude oříznutí správně fungovat. Proč? Pokračování textu Oříznutí textu trojtečkou