Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/02711.jsonl.gz/4

CSS nabízí dělení slov pomocí
word-wrap: word-break, ale tato možnost rozdělí slovo přesně tam, kde končí řádek. Což pak v běžném textu nevypadá dobře a hlavně negramaticky.
Tento dlouhý text se nev
ejde na jeden řádek a pr
oto bude rozdělen na tři.
Od roku 1999 ale existuje Unicode a HTML specifikace, která umožňuje vložit do textu tzv. neviditelné mezery (zero-width space), které označí místa, kde je možno slovo rozdělit a přitom se nezobrazí, pokud je slovo na jedné řádce. Alternativnou je pak měkký rozdělovník (soft hyphen), který kromě rozdělení slova vloží na konec řádky pomlčku, která se běžně používá pro rozdělení slov.
Pokračování textu Dělení slov na přání
Každý uživatel jQuery asi zná jeho metodu
css(), která mění styl dané prvku nebo prvků. Tato metoda má ale dvě nevýhody: 1) mění styl každého jednotlivého prvku (což může být pomalé u hodně prvků) a nefunguje na později přidané prvky a 2) mění jen statický vzhled a neumí přidat pravidla pro
hover,
focus apod. nebo dokonce responzivní pravidla pro
@media.
Zde přichází CSSX, které místo změny stylu prvků přidává CSS styl do dokumentu, který pak funguje stejně jako načtení
*.css souboru.
Pokračování textu CSSX: Změna CSS přes Javascript
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
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
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.
Pokračování textu Animace zobrazení obrázku na pozadí
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
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ě
Zdá se vám, že na některých prohlížečích je vaše pracně vybrané písmo rozmazané nebo dokonce nečitelné? Nebo vám vaši zákazníci či klienti tvrdí, že máte hnusné písmo na stránkách, i když je to písmo vybrané skvělým grafikem?
Námět článku: http://szafranek.net/…/font-smoothing-explained/
Pokračování textu Problém s rozmazaným nebo nečitelným písmem
Pro responzivní stránky je nejlepší použít vektorové obrázky SVG. Stále ale ještě existují prohlížeče, které ho nepodporují a tak je potřeba zajistit, aby se zobrazilo alespoň PNG (i když ve špatné kvalitě).
Pokračování textu SVG s fallbackem na PNG
Od roku 1999 umějí prohlížeče, počínaje tehdy vydaným IE5, zobrazovat ikonu webu, tzv. favicon.
Původně šlo o 16x16px obrázek uložený ve speciálním, Microsoftem vytvořeným, formátu obsahujícím BMP obrázek a masku průhlednosti (známý jako *.ICO). Od té doby se ale hodně změnilo a s malou ikonou si již nevystačíte.
Pokračování textu Favicon, aneb jedna ikona nestačí