100 mimořádně užitečných CSS tipů a triků
To, na co při své práci hodně spoléháme jsou právě tipy a triky, bez toho by náš svět byl nudný a plný překážek. Pomáhejme si navzájem tím, že budeme vytvářet nespočet návodů a osvědčených řešení na poli webdesignu. Pojďme tedy navázat na náš seriál tipů a triků o webdesignu zde na webdesign blogu.
Obecné tipy
Ne všechno v tomto seznamu bylo snadné zařadit. Všechny tipy, které jsou relevantní a stojí za zmínku, ale nezapadají čistě do určité kategorie, jsou uvedeny právě v tomto oddíle.
Podmíněné komentáře nám byly darem z nebes právě pro řešení nesrovnalostí a nekompatibilit v aplikaci Internet Explorer.
- Je nesmírně důležité znát všechny důležité vlastnosti CSS, a hlavně mít schopnost je správně použít a využít.
- Pro zvýšení produktivity je vhodné využít dobrý textový editor. Zvýrazňování syntaxe a využití funkcí autocomplete je užitečnou součástí dobře vybaveného kodera. Navíc můžete lépe reagovat v případě překlepu apod. Zkuste se poohlédnout po software, který by vám vyhovoval (Notepad++, PSPad, Coda, Dreamweaver apod.)
- V mnoha ohledech je experimentování matkou inovací. Dejte si čas na hraní, metoda pokus/omyl vám pomůže se snáze naučit a zapamatovat si jednotlivé techniky mnohem rychleji.
- Mnohdy stačí povolit kompresi souborů (gzip) na straně serveru, je-li to ovšem možné. Každopádně to zmenší velikost přenášených souborů, jako je CSS a JavaScript, bez nutnosti jakéhokoliv jiného (programového) zásahu.
- Používejte cache kde je to jenom možné, ušetříte tím velké množství dat, tím dokážete svůj projekt zrychlit a koncový uživatel má z brouzdání lepší zážitek.
- Mezery (bílé znaky) jsou velmi důležité pro čitelnost CSS kódu. Použití mezery pro formátování stylu přidá bajtů na velikosti souboru, ale to není téměř nic oproti tomu, jak se tím zvýší čitelnost.
- Pokud možno, vyhněte se použití in-line zápisu CSS (ať už přímo v atributu elementu, a nebo přímo v <style> elementu). Namísto toho využijte možnosti externího CSS, bude to snazší na údržbu a také se využívá cache prohlížeče.
- Ať už kód zapisujete jakkoliv, buďte konzistentní, vyhnete se tím zbytečným chybám, špatné interpretaci apod.
- Podmíněné komentáře vám mohou pomoci vyřešit potíže s jednotlivými verzemi aplikace Internet Explorer. Filtrování podle vendor-prefixu není zcela ideální, a podmíněné komentáře jsou bezpečnější než ošklivé hacky.
- Tento tip je mírně kontroverzní, ale já doporučuji linkovat CSS pomocí jediného souboru, resp. zamezit použití mnoha přiložených CSS definic. To ve výsledku snižuje počet HTTP požadavků a zlepšuje udržovatelnost, což vaše stránky pocítí hlavně v oblasti zvýšení výkonu.
Tento tip je podporován v rámci Google Page Speed.
- Pokud máte v CSS konfliktní pravidla, je nutné si uvědomit, že následující pravidlo (níže v kódu) má vždy vyšší prioritu. Proto své kritické deklarace pro CSS umisťujte co nejvíce na konec svého souboru.
- Pokud narazíte na problém, a nemůžete přijít na to co jej způsobuje, jednoduše ve svém prohlížeči zapněte doplněk FireBug, a pokračujte ve zkoumání.. až do doby kdy problém zcela identifikujete a opravíte.
- Přesvědčte se, že váš kód funguje ve všech prohlížečích. Použijte nejaktuálnější verze. A hlavně zkontrolujte kompatibilitu v následujících prohlížečích: Internet Explorer, Firefox, Chrome, Safari a Opera
- Následně se ujistěte, že váš kód je čitelný i při vypnutém CSS, že dává smysl a je lehce pochopitelný. Proč? No protože existují i negrafické prohlížeče (Lynx) a jiné čtečky webových stránek a bylo by nevhodné nabízet obsah v nesprávném pořadí a různě rozházený.
- Zajistit, aby váš kód byl uskládán elegantně je samozřejmě důležité, ale mnoho lidí na to zapomíná. Resp. si neuvědomují, že někteří návštěvníci budou mít kaskádové styly ve svém prohlížeči vypnuté, což by vás v jejich očích dost poškodilo.
- Každý prohlížeč má vestavěný debugger. V IE a Firefox se můžete dostat do inspektoru tím, že stisknete F12, pro Chrome, Safari a Opera, stiskněte kombinaci kláves Ctrl + Shift + I.
- Emulátory prohlížečů nemohou nahradit skutečné prohlížeče, takže použijte opravdu skutečné nebo alespoň virtualizované prohlížeče, resp. virtualizované systémy.
- Věděli jste, že PHP kód může vytvářet dynamické CSS soubory? Stačí jenom zajistit, aby soubor deklaroval v záhlaví dokumentu typ text/css.
/* deklarovat výstup jako text/css */ Header('Content-type:text/css'); require('stylesheets/set/style.global.css'); require('stylesheets/set/style.main-menu.css'); require('stylesheets/set/style.footer.css'); require('stylesheets/set/style.forms.css'); - Pojmenování CSS souborů může být ošidné. Jedním z nejlepších způsobů je udržovat krátké názvy souborů a pojmenování dávat co nejvíce popisná, jako style.css, screen.css, nebo print.css.
- Při psaní jakéhokoliv kódu myslete na jeho opakovanou využitelnost. Vždy se může stát, že jej můžete potřebovat v jiném projektu, tak si zkuste trochu ulevit tím, že jej napíšete pořádně. V dalším projektu si tím ušetříte hodně času. Proto se zrodily CSS a JavaScript!
- I když CSS podporuje zápis komentářů, snažte se jim vyhnout. Mnoho textu v komentářích zvyšuje datovou zátěž při přenosu.
Samozřejmě je možné CSS soubory zkomprimovat a pomocí PHP interpretu z nich vynechat komentáře.
- Máte-li problémy si vzpomenout, co je k dispozici v CSS (nebo dokonce v CSS3), udělejte si nějaké taháky. Jsou jednoduché a mohou vám pomoci si zvyknout na syntaxi. Hledejte pomoci google i nějaké on-line css taháky (css cheat sheets)
- Špatný kód pokoří váš web jako nic jiného. Zkuste validovat svůj kód, ať už pomocí vestavěného validátoru stránek ve vašem editoru a nebo pomocí on-line nástrojů (co třeba přímo od W3C?).
- Vendor-prefixy vám validátorem neprojdou, avšak umožňují vám vytvořit cool efekty, což se rozhodně vyplatí - co třeba vyzkoušet -webkit-transform či -moz-transform (užijou si uživatelé Safari, Chrome, a Mozilla Firefox)
- Udržujte své soubory v jednom podadresáři (např. /css). Pokud máte v projektu stovky stránek, zvýší se tím přehlednost a organizovat celého projektu.
Pravidla, selektory, pseudo-třídy a pseudo-elementy
CSS používáme primárně pro grafickou úpravu již vytvořeného kódu. Je však nutné pamatovat i na to, abychom si daný kód připravili dobře a neměli moc práce při samotném kaskádování.
Rovněž je důležité si uvědomit, pro jaké zařízení kaskádu připravujeme (tisk, screen, mobile). Proto se v této části podíváme na jakési běžné standardy a úmluvy týkající se CSS.
- Dobře nastavte html atribut media, pokud deklarujete externí CSS. Tento atribut může souviset s požadavky zařízení na přednačítání (pre-cached) obsahu souboru.
- Pokud zjistíte, že některé prvky používají stejné vlastnosti a hodnoty, seskupte je dohromady pomocí čárky (,). Tím se ušetří mnoho opakování v jednotlivých deklaracích.
Příklad použití:
h1 { color:#000; } h2 { color:#000; }Stačí prokombinovat jako:
h1,h2 { color:#000; } - CSS pro tiskárny (printer) jsou velmi důležité, pokud chcete ušetřit inkoust (a papír) v tiskárnách vašich návštěvníků. Použijte @media print-pravidlo, a odstraňte vše, co není potřebné k tištění.
- Přístupnost také má co dočinění s tím, jak se vyslovuje psaný text. Fonetické (nyní již v CSS zastaralé) speech media může zlepšit využitelnost pro čtení z obrazovky.
- Bohužel, CSS handheld media není široce podporovaný. Pokud chcete, aby vaše webové stránky šlapaly na mobilních zařízeních, nespoléhejte na tuto techniku.
- Udělejte si čas na odstranění duplicitních odkazů v CSS. Bude to nějakou dobu trvat, ale budete mít efektivnější kód a zmenšíte velikost souborů.
- Když řešíte odkazy (link), potom se zaměřte na :link, :visited, :hover, :active pseudo-třídy. Zachovejte uvedené pořadí definice tříd!
- Aby vám web fungoval dobře i na zařízeních s iOS, používejte deklarace min-width a max-width.
- Snažte se maximálně využívat vlastností "inherit" v jednotlivých kaskádových třídách. Zabijete tím několik much jednou ranou.
- Využívejte možnosti přiřadit elementu několik tříd současně. Ušetříte tím spoustu CSS kódování.
CSS
.green { color: green; } .bold { font-weight: bold; }Aplikace v HTML
Toto je tučný a zelený text! - Pokud vás obtěžuje použití podmíněných komentářů pro IE6 (protože je zde nutnost mít extra soubor s deklaracemi), potom použijte hack s hvězdičkou (* html). Je to čisté a validní.
- HTML nápovědy (title) jsou fajn, ale kaskádou upravené bubliny jsou lepší. Zkuste to třeba pomocí :hover pseudo-třídy.
- Použití atributů v selektorech (a[href$='.pdf]) je cesta k úspěchu. Můžete například přidat extra ikonky pro pdf soubory.
- Pomocí těchto selektorů je možné rovněž kaskádou upravit prvky typu mailto nebo skype: [href^="skype:"]
- Renderování CSS trvá dlouho, a načítání selektorů také něco zabere. Snižte zátěž vykreslování tím, že v deklaraci použijete pouze selektory, které požadujete.
- Ne každý se mnou bude souhlasit, ale doporučuji každý selektor zapsat jako svou třídu. Zmenší se tím počet duplicit.
- V zápisu CSS platí konvence nejdříve určit (zapsat) obecné prvky, následně vlastní třídy a až jako poslední ID.
- U pojmenování jednotlivých tříd platí jisté konvence. Je nesmyslné používat třídy jako .redLink, to vede k nesmyslným použitím selektorů v případech, že se změní samotné HTML. Potom to vypadá divně, když máte nazvaný odstavec (paragraph) třídou "redLink".
CSS
.redLink { color: red; }HTML
Úsměvné použití již jednou vytvořené třídy (vlivem vývoje aplikace) na odstavec - i když jasně vidíme, že tento odstavec není "link".
- Opět jedna věc do pranice. Jde o pojmenování jednotlivých tříd. Někdo upřednostňuje pojmenování ve tvaru např. .pseudo-trida, avšak jsou jiní, kteří se budou bít za .pseudoTrida. Já osobně využívám první ze zmíněných případů.
- Univerzální selektor "*" (využívá se v např. reset css templates), zabezpečuje přiřazení jisté vlastnosti jakémukoliv prvku. Zkuste se tomuto selektoru vyhnout jak jen to je možné, zvyšuje to zátěž při renderování.
- Pomocí CSS3 můžete jednoduše zabezpečit orientaci stránky v zařízení (portrait nebo landscape), Tímto způsobem můžete v kapesních zařízeních vytěžit maximum z jejich zobrazovací plochy.
- Apple zařízení jsou unikátní v tom, že podporují <meta name="viewport"> tag.
- Tyto dva CSS3 pseudo-elementy mají budoucnost! :target a :checked, vztahují se totiž jenom k určité události, které si můžete pomocí CSS nastylovat!
- Vkládání obsahu v CSS je jedinečný způsob, jak přiřadit referenci či nějaký popis pro printer-styly. Zkuste ::before a nebo ::after pseudo-elementy.
- ID má v CSS dvojí účel. Jde na něj aplikovat klasické kaskádování - tedy použití klasických metod CSS, a nebo z něj můžete udělat kotvící prvek ve stránce a využívat jej jako identifikátor jediné části (bodu) stránky.
Rozložení a box model
Když zrovna nestylujeme prvky na stránce, pak přemýšlíme všichni o tom, jak by se vlastně prvky na stránce měly zobrazovat. CSS reset templates nám pomáhají k tomu, aby design vypadal vždy ve všech prohlížečích stejně, resp. zminimalizoval dopady multiplatformního prostředí.
Tato kupa užitečných tipů se týká aspektů CSS, které zásadně ovlivňují, jak se jednotlivé části webové stránky zobrazují a jak jsou umístěny.
- Mnohé designy jsou řešeny hodně tabulkově, hodně striktně a obdélníkovým designem. Místo toho by designeři mohli využít "of the box" efektu. Mnoha webům by to prospělo.
- Když vám nepomůže margin: auto v tom, abyste obsah vycentrovali, potom zkuste využít left: 50%; position: absolute; a záporného margin poloviny šířky elementu.
- Nezapomeňte, že šířku tvoří specifikovaná šířka, jakož i šířka okraje a veškeré padding a margin.
- Další kontroverzní tip: nepoužívejte CSS reset templates. Obecně je nebudete potřebovat, pokud budete mít čas, abyste kód napsali opravdu dobře.
- CSS framework jako je Blueprint nebo YUI Grids CSS vám může pomoci urchylit vývoj, ale uživatel musí stahovat kód, který je ve vašem projektu navíc. A projekt ho prostě nepotřebuje.
- Pamatujte, že IE6 nepodporuje fixní pozicování. Musíte si najít jiný způsob, jak toto zabezpečit.
- Prostor - a uspořádání je velmi důležité. Používejte padding a margin pro uspořádání prvků tak, aby mohly "dýchat". Uživatelé to ocení.
- Pokud vám jediná věc dělá potíže a komplikuje život při kódování, vykašlete se na to a použijte jiné standardní řešení - i za cenu drobného ústupku v designu.
- Různé prohlížeče mají různé vlastnosti a jsou v nich implementovány jiné techniky - jako je například zoom. Zkuste si v jednotlivých prohlížečích tuto funkci vyzkoušet - a uvidíte jak se váš web chová.
- Ve většině prohlížečů můžete využít box-shadow, aniž byste museli psát nějaké další HTML značky. V IE toho dosáhnete snadno pomocí filtru: filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
- Zaoblené okraje je v klasickém CSS těžké udělat, avšak pomocí CSS3 to problém není. Použijte vlastnost border-radius
- Pro plovoucí designy je typické, že při velkém rozlišení se z textových odstavců stávají jednořádkové věty. Použijte deklarace min-width a max-width
- WebKit animace a transitions fungují jenom v Safari a Chrome, ale dodají vašemu webu šťávu!
- Pro překrývání jednotlivých elementů použijte z-index vlastnosti CSS. Čím vyšší index, tím výše v pořadí vrstev se prvek umístí.
- Není důležité, jaké rozlišení uživatel má. Stejně má nainstalováno spoustu doplňků a toolbarů, takže plocha pro zobrazení vašich stránek je velmi proměnná. Stejně tak nepředpokládejte, že používají prohlížeče jen v maximalizovaném režimu.
- Odstranění prvku ze stránek pomocí display:none by se mohlo zdát jako rychlý a jednoduchý krok. Ale opět je nutné nezapomenout na čtečky a jiné zařízení, která CSS neberou v úvahu!
- S overflow vlastností zacházejte opatrně! Iphone například funguje na bázi multitouch (dva prsty pro skrolování), což vám u overflow obsahu může pořádně zavařit.
- Už jste slyšeli o Microsoft CSS expressions? To je metoda, jak promíchat DOM s CSS. Raději to rychle zapomeňte, tato vlastnost je zastaralá.
- Snažte se zacházet s vlastností cursor opatrně. Neměňte kurzory tak, jak uživatel nečeká. Na odkaz přece patří "ručička" a ne "cross".
- Horizontální skrolování by se mohlo zdát jako funny řešení vašeho layoutu. Ale pozor, uživatelé na to nejsou zvyklí!
- Až vyběhne na světlo světa IE9, tak začne CSS3 zažívat opravdu krušné chvíle s kompatibilitou. Příliš se na nové koncepty nespoléhejte, používejte stabilní a zaběhlé koncepty.
- CSS umožňuje poskytovat informace na vyžádání. Pokud můžete dát lidem informace po kouscích, s větší pravděpodobností si váš článek přečtou.
- Když stylujete menu, buďte konzistentní. Lidé hledají v menu jakousi strukturu a soudržnost. A nejen lidé, ale i čtečky.
- CSS není cirkus. Vše co pomocí CSS děláte by mělo mít logiku a mělo by vycházet vstříc uživatelům.
- Jakmile doděláte CSS, zkuste se zeptat jiných lidí (přátel, zákazníků) co si o tom myslí a jak na nový design reagují.
Písmo a barvy
Pokud by si jedna věc měla zasloužit vlastní soubor tipů a triků, potom jsou to rozhodně písmo a barvy v CSS. Všichni chceme obsah, který se dá číst a je zároveň konzistentně uspořádán.
V této sekci se budeme učit využívat typografie a barvy, které jsou v konvenčním designu důležité. Budu mluvit o "web-safe" barvách a dávat tipy vztahující se k posledním výstřelkům módy pro vkládání písem.
- Namačkání obsahu příliš blízko k sobě může snížit celkovou čitelnost. Použijte line-height abyste obsah správně "provzdušnili".
- Velmi opatrně zacházejte s letter-spacing. Příliš velké mezery způsobí nečitelnost a příliš malé mezery způsobí překrývání písmen.
- Pokud k tomu nemáte dobrý důvod, potom nepoužívejte UPPER-CASE. Toto je obecně považováno jako byste na lidi "křičeli".
- Přístupné webové stránky mají dobrý kontrast barev. Existují nástroje na měření barvy popředí a pozadí, které vám kontrastní poměr.
- Pamatujte, že výchozí nastavení CSS se liší prohlížeč od prohlížeče. Pokud chcete předejít omylům, pořádně propracujte váš základní stylesheet.
- Dříve dokázaly monitory zobrazit menší počet barev, než je tomu dnes. Bohužel i nyní se ještě najdou případy, kdy ve statistikách vidíme sníženou barevnou hloubku uživatelova monitoru. Pamatujte proto, že existuje pojem "web-safe" colors.
- Při výběru fontu se zaměřte na to, zda jsou obecně dostupné v systému uživatele. Volte nejlépe základní systémové fonty, abyste neměli problémy se zobrazením.
- S příchodem nových systémů (vista, w7) je zde možnost využití nových a skvělých fontů - jako jsou Candara, Calibri a Constantina.
- U aplikací, které stavíte pro smartphony, dávejte při vytváření stylů obzvláště pozor. Nejedná se jen o specifické úpravy, které musíte dělat, ale i o seznam fontů, které můžete používat.
- Pojem web-safe-fonts je věc, kterou vám nikdo nemůže garantovat. Uživatel si může font odinstalovat, a tím pádem jej prohlížeč nebude znát a problém s vykreslováním je na světě.
- Vyhněte se zvýraznění textu pomocí text-decoration, pokud to není skutečný odkaz. Lidé si spojují podtržený text s odkazy, a podtržené slovo by mohlo vyvolat dojem, že odkaz nefunguje.
- Za každou cenu v sobě potlačte touhu použít fonty jako jsou Wingdings nebo Webdings. Sice tím můžete uspořit nějaké kilobajty - jako náhradu za obrázek, avšak pomyslete na čtečky webových stránek a nesmyslný obsah, který tímto generujete.
- Určitě znáte @font-face. A proto i víte, že tato vlastnost se chová v každém prohlížeči jinak a je nutné ji zapisovat jinak. Proto pro každý prohlížeč použijte správný CSS zápis.
- Vlastnost outline je velmi málo podporovaná. A obzvláště stojí mimo pravidla pro přístupnost webu. Raději používejte border-style.
- Smartphony mají mnohem menší podporu fontů. Tedy web-safe-fonts mají pro smartphony ještě nižší rozsah v počtu fontů. Zkuste použít @font-face a přiložit takto vlastní fonty, když je budete výslovně potřebovat.
- Opacity musíte mezi různými prohlížeči vyřešit pomocí vendor-prefixů (tedy -ms-, -moz-, -khtml, filter: alpha(opacity=75);)
- Odrážky seznamu můžete vyřešit i pomocí list-style-type:none; a přidání padding-left a background-image napozicováním doleva.
- Pomozte uživatelům lépe pracovat s input boxy jako je password. Po kliknutí na něj nechejte pozadí zmizet - pomocí pseudo-třídy :focus nastavením vlastnosti background:none
- Nastavte odkazům co největší aktivní plochu. Zvýší to použitelnost a přinese to příjemné prostředí pro uživatele. Pamatujte na to, když designujete linky.
- Pamatujte na to, že pozadí nezastupuje textový obsah. Když budou CSS vypnuté, vaše textové informace v CSS pozadí nebudou vidět.
- U každého prvku formuláře nezapomeňte uvádět labels. Zvýší to přehlednost a i pro čtečky webových stránek to přináší své ovoce.
- Pokud se vám u některých prvků nedaří implementovat klasické opacity, zkuste využít nové CSS3 vlastnosti RGBA transparency - background-color: rgba(0,0,0,0.5);.
- Pro IE6 se zkuste vyhnout definici velikosti písma v px. Pokud bude uživatel používat ZOOM, resp. zvětšovat písmo, potom při interpretaci v px nastane problém (zoom se neprojeví).
- Abyste docílili vyššího kontrastního poměru, můžete zkusit použít více stylesheets pro různé prohlížeče (Firefox, Safari, Opera)
- Je-li pro vás těžké vybrat barvy, zkuste on-line nástroje jako je Adobe Kuler, desktopové nástroje jako ColorSchemer Studio a mobilní aplikace, jako je Palettes Pro.
Styl může být stylový
CSS má za sebou docela dlouhou dobu vývoje. Jednotliví tvůrci prohlížečů, provádí implementace CSS3 specifikace ještě předtím, než ukončila svůj oficiální vývoj, aplikují unikátní proprietární styly (např. transformace WebKit). Do této směsi však stále podporuje webové standardy. Prozatím nebyla lepší doba na to se stát webdesignerem, neměli jsme ještě nikdy tolik možností, jako je máme nyní. V minulosti jsme mohli jen doufat, že naše styly byť jsme je správně použili, budou správně interpretovány. Ale nyní se zdá, že desktopové a mobilní platformy se zlepšují, jako ještě nikdy předtím.
Implementace CSS může být pro někoho hodně frustrující, avšak prozatím je to jeden z mála zábavných jazyků, ve kterém se může jedinec seberealizovat. Můžete si řídit přesně jak bude váš kód vypadat. Vy jste designer a vládce kódu. Takové je CSS ve spojení s HTML.
Přemýšlejte nad aplikací každé hodnoty, kterou v CSS deklarujete. Všechno jde dělat složitě, málokdo umí implementovat CSS v jeho minimalistické podobě. Čím více chyb v CSS uděláte a zároveň odhalíte, tím lepší designer a kodér se z vás stává.
Blíží se nová vlna výborných layoutů, a doufám, že velké množství jich přibude právě díky tomuto článku.
