Přejít k navigační liště

Zdroják » Webdesign » Webdesignérův průvodce po CSS3: první díl

Webdesignérův průvodce po CSS3: první díl

Články Webdesign

V minulém díle jsme si povídali co je CSS3, jak se vyvíjí, jak funguje a i to, jaký je stav implementace v prohlížečích. Dneska se podíváme na takové ty webdesignérské laskominy. Zkrátka na drobnosti, které nám mohou ušetřit hromadu nervů a času a navíc vypadají „zatraceně“ dobře.

Většina následujících laskomin slouží hlavně k tomu, že v nových prohlížečích nabídneme návštěvníkovi hezčí web. Neměli byste je používat pro věci, které jsou na stránce zcela nezbytné, protože uživatelé starších prohlížečů je neuvidí – pokud si tedy nedáte extra práci a nedoděláte to i pro ně. Je skutečně jen málo případů, kdy to dává smysl. Pokud byste ale chtěli něco takového dělat, určitě se podívejte na Modernizr. V případe IE pak můžete vyzkoušet úžasný skript CSS3Pie, který spoustu CSS3 laskomin bez větších problémů zprovozní i v IE6–8.

Již minule jsme také zmiňovali vendor prefixy. Dneska je budeme hodně používat. Nezapomeňte však vždy napsat standardní CSS3 definici až za vendor prefixy! (Odpověď na otázku Proč? najdete v článku Chrise Coyiera.)

Ale dost povídání, pojďme si ten webdesignérský život pořádně osladit.

border-radius

S tzv. webem 2.0 přišla éra kulatých rohů a všichni z nás si jistě pamatují, jak náročné je bylo vytvořit. Člověk často potřeboval 4 spany navíc, jen kvůli nim. Kdo má rád sémantiku a udržitelný kód, tak nad takovou konstrukcí musel jen zoufale lomit rukama.

CSS3 nás nechá udělat kulaté rohy jednoduchým zápisem:

border-radius: 5px;

A bum, věc, které tohle přidáme do stylů, bude najednou mít všechny 4 rohy hezky kulaté. Tedy, v Safari 5, Opeře a, pozor, IE9! Pro starší Safari musíte použít -webkit-border-radius, pro Firefox pak  -moz-border-radius.

Také můžete zacílit jen jeden roh, třeba ten dolní levý: border-bottom-left-radius: 5px; (Pozor pak ovšem na syntaxi u Mozilly, má ji trošku odlišnou:  -moz-border-radius-bottomleft: 5px;)

Border-radius funguje ve všech majoritních prohlížečích, s výjimkou IE8– (ale vážně, zkuste ten CSS3Pie).

Gradients

Další věc, kterou často potřebujeme nakódovat, jsou přechody. CSS3 je umožňuje definovat v kódu (zatím to podporuje Webkit a Mozilla), pro zbytek můžete použít starý dobrý obrázek či jednoduchou barvu na pozadí.

background-color: #aa0000; /* barva, která se použije, když nefungují ani gradienty, ani se nenačte obrázek */
background-image: url(gradient.png); /* obrázek, když nefungují gradienty */
background-image: -webkit-gradient(linear, left top, left bottom, from(#aa0000), to(#bb0000));
background-image: -moz-linear-gradient(top, #aa0000, #bb0000);

Je to trošku komplikované, a navíc Mozilla i Webkit s gradienty zacházejí trošku jinak. Každopádně jde o to, že nastavíte odkud kam má gradient vést a určíte počáteční a koncovou barvu. V našem příkladě jsme udělali jednoduchý lineární přechod shora dolů.

CSS gradienty toho umí ovšem MNOHEM víc než jen lineární přechod (proto je také jejich zápis složitý). Hezké vysvětlení i s obrázky: Mozilla gradients, Webkit gradients. A pokud se vám to nechce studovat, zkuste použít CSS gradients generátor.

Gradienty fungují v novém Webkitu (Safari 4,5, Google Chrome) a v Mozille od jádra Gecko 1.9.2. (Firefox 3.6).

text-shadow

Když se povede udělat pěkný stín u textu (třeba že vypadá, že je zapuštěn do obrazovky), vypadá to zatraceně dobře. Dlouho to však bylo možné udělat jen obrázkem. Sláva a hurá CSS3, už to můžeme udělat i v kódu. Ale opatrně, text-shadow umí design nejen vylepšit, ale i zničit.

text-shadow: 1px 1px 2px #000;

Zápis je naprosto jednoduchý: První dvě čísla značí, o kolik bude stín posunut na ose X a Y od původního textu. Třetí číslo udává, jak bude velký, a na konci je pochopitelně jeho barva.

Text-shadow podporují všechny majoritní prohlížeče, s výjimkou IE.

box-shadow

Pokud text-shadow přidával stín k textu, box-shadow ho přidává k boxu (jak překvapivé).

-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;

Princip je stejný jako u text-shadow, podpora v prohlížečích ta­ké.

multiple-backgrounds

Jak často by se vám hodilo nadefinovat jednomu elementu několik pozadí? Ostatně – pamatujete si všichni techniku Sliding Doors, ne? S CSS3 to už nemůže být jednodušší.

background: url('left.jpg') top left no-repeat,
url('right.jpg') top right no-repeat,
url('middle.jpg') top center repeat-x;

Obrázků na pozadí si můžete nadefinovat kolik chcete a funguje to hezky všude kromě IE8 a nižších (Pozn. aut.: Všimněte si, že IE9 udělalo skutečně skok kupředu a ani multiple-backgrounds mu nedělají problém. Ostatně na posledním An Event Apart mu ve stoje aplaudoval sál plný webdesignérů.)

background-size

Další zajímavá věc u pozadí je, že nyní můžeme nastavit obrázku na pozadí velikost. Otevírá to cestu k mnoha zajímavým řešením, hlavně ve spojení s Responsive Web Design (pozn. aut.: o tom ale jindy – nejdříve na přednášce na WebExpo, o něco později i tady v seriálu).

background:url(obrazek.png) bottom right no-repeat;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
-webkit-background-size: 100px 100px;
background-size: 100px 100px;

Jak to funguje je zřejmé. Prostě nastavíte, jak veliký má obrázek být a on tak veliký bude. Funguje to úplně stejně jako u obrázku v HTML.

Podpora je zase všude kromě IE8 a nižších. Podrobně rozepsaný přehled podpory včetně zajímavých detailů najdete u Petera Paula Kocha na QuirksMode.

RGBA a HSLA

CSS3 přináší revoluci ještě do jedné věci – do definování průhlednosti. Už nepotřebujete poloprůhledná PNG či hrátky s opacity, stačí nadefinovat barvu pomocí RGBA (případně HSLA). RGB všichni známe, HSL je zápis pro barvy nikoli podle intenzity barevných složek, ale pomocí odstínu, sytosti a jasu (Hue, Saturation, Lightness). Viz. např.: CSS3info.

Více se používá RGBA a to A na konci znamená „alfa kanál“. Tedy definice průhlednosti.

color: rgba(200, 54, 54, 0.5);

Použijete normální zápis jako při definici barvy s rgb, akorát zadáte parametr navíc a nastavíte průhlednost. Hodnota je od 0 do 1 – jedna je neprůhledná, nula je zcela průhledná.

Podporu pro RGBA najdete zase kromě IE8 a nižších všude, pokud chcete používat HSLA, musíte počítat i s absencí IE9.

Tolik asi k lahůdkám a drobnostem

CSS3 toho zavádí mnohem víc, ale většina z těchto věcí si zaslouží samostatný článek. A také jej dostane! Příště se podíváme na základní CSS animace a transformace. A budete zírat!

Nedávno se tu na Zdrojáku pod článkem Martina Michálka probíralo, jak řešit „bordel“, který vendor prefixy dělají v CSS. Martin včera vydal poměrně podrobný článek, ve kterém se nad tématem zamýšlí podrobněji. Všem, kterým záleží na přehlednosti a čitelnosti jejich kódu vřele doporučuji.

PS: Myslíte, že tu chybí Web Fonts? Zkuste zavzpomínat na loňské WebExpo. Možná by si ale vývoj okolo Web Fonts po roce zasloužil samostatný článek. Co říkáte?

Chystáte se na CSS3?

Komentáře

Subscribe
Upozornit na
guest
20 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
JakubS

Firefox nezvládá aplikovat -moz-border-radius na obrázky (a i v případě obrázkového pozadí -zaoblený okraj je nepovedený).

CSS3 se stále hodí jen na pasaní WOW článků (ikdyž se rozhodnete odepřít IEčkářům nové efekty a zjednodušit si práci díky CSS3 dříve nebo později zjistíte že vám to práci spíš komplikuje)

pisatel

suhlasim,
CSS3 je fajn a dalo by sa vyuzit, keby bol implementovany vo vsetkych prehliadacoch, ktore sa bezne pouzivaju.
nehovorme o tom, ze teraz sa subezne pouzivaju tri verzie IE (6,7 a 8) a pribudne k nim neskor este 9tka – a ze IE6 nevie skoro nic? kopec bugov, prehliadnost PNG-24, hover na vsetky elementy.
aky ma vyznam spravit web pekne v CSS3 (pre IE9, FF, Operu, Safari a Chrome), ked aj tak budem musiet robit dalsi kod pre IE6–8. radsej to napisem „po starom“ pre vsetky browseri.

Martin Malý

Existuje přístup, který se nazývá „graceful degradation“, a ten zjednodušeně řečeno říká, že při vytváření webu můžete použít aktuální techniky, a prohlížeče, které je neumí, je zkrátka nezobrazí. Například – použijte bez obav CSS3 a kulaté rohy; pokud na takový web vleze někdo s IE6, bude mít rohy holt hranaté. Více na http://zdrojak.root.cz/clanky/graceful-degradation-vs-progressive-enhancement/

Čelo

Mému srdci je „graceful degradation“ bližší a jsem rád, že prosadit jej není již takový problém jako bylo dříve.

pisatel

neviem, az prilis velakrat sme u klientov narazili prave na tomto. priklad telefonatu:
klient: „nefunguje mi stranka“
my: „ako nefunguje?“
klient: „mam hranate rohy“
my: „vysvetlovali sme Vam, ze v Internet Exploreri 6 sa to nezobrazi s oblymi rohmi“
klient: „ja to chcem s oblymi rohmi, opravte to.“
do istej miery rozumiem, ze klient zaplati a chce, aby sa to zobrazovalo vsade rovnako. ono, aj do IE6 sa uz da vela veci natlacit, obcas to stoji viac trosku viac kodu, ale bugy uz opravuem automaticky, na 99% su to veci, ktore sa cyklicky opakuju (double margin, 3px margin bug, ghost text bug, PNG-24 hack, etc).
je tu skratka stale vysoke % ludi, ktori pouzivaju (ci uz dobrovolne alebo z donutenia…alebo aj neznalosti) starsie verzie prehliadacov.
uzivatelia „modernych prehliadacov (firefox, opera, chrome) su ovela „poctivejsi“ v updatovani na novsie verzie. ale IE6/7 s nami ostane este dlho a preto si myslim, ze CSS3 sa bude presadzovat ako celok pomaly. pretoze, ako mi pomoze, ze v niektorych prehliadacoch mozem pouzit multibackground, ked v ostatnych to aj tak musim osetrit vrstvenim boxov (div-ov)? :)

Martin Michálek

IE6/7 s nami ostane este dlho a preto si myslim, ze CSS3 sa bude presadzovat ako celok pomaly

Nemůžu než opakovat co už jsem psal v komentáři výše. :)

Není zlepšení uživatelského prožitku pro majitele moderních prohlížečů dostatečným důvodem pro nasazení CSS3 hned teď?

Čelo

Procento klientů pracujících s IE6 postupně klesá. Osobně jsem letos pro IE6 „ladil“ spíše ze zvyku. Klienti jsou minimálně na sedmičce či čím dál častěji na Firefoxu. Ale chápu, že jinde to může být jinak.

mikiqex

Problém je, že spousta sofistikovaných intranetových aplikací třeba ve veřejné správě je optimalizováno tvrdě pro IE6 a v jiném prohlížeči to prostě nejede. Má zkušenost je ale 2 roky stará, takže se rád budu mýlit :)
Každopádně přítelkyně někdy tou dobou nainstalovala na úřadě své mámě Firefox a ta pak dostala od „ajťáků“ sprda, že Firefox tam nemá co dělat… :-/

Čelo

Osobně mi to právě přijde, že se to během posledních dvou let docela posunulo. Ale asi jako všude prostě hodně záleží na typu klienta.

Rejpal

A to jako na úřadě si smí uživatel do své stanice instalovat programy?

w0ndr

Na to ale existuje jednoducha technika prace s klientem. Chcete kulaty rohy a dalsi „css3“ veci i v ie6. Samozrejme neni to problem, ale bude vas to stat vic penez, protoze upravy zaberou vic casu. Takze si rozmyslete jestli vam za to tech 5% uzivatelu stoji.

Imho pokud nekdo dnes pouziva ie6, tak si nic jinyho nez hranaty rohy nezaslouzi :D (a ti, kteri ho pouzivaji z donuceni treba v praci to holt musi prezit)

noname

Je třeba umět klienta poslat slušně do prdele. Osobně když jsem takový problém měl, tak jsem
a) mu pokusil předejít tím, že jsem mu instaloval IE8
b) vysvětlil problém, že se tedy jedná o jeho problém s 10 let starým prohlížečem, který i MS výrazně doporučuje nahradit a který není dále nijak podporován
c) napsat to do specifikace projektu

Když si dále stěžuje, tak jej upozorním, že v (c) je to takto vyspecifikováno, má-li s tím problém, je to možné vyřešit a že to bude třeba 50 člověkohodin navíc. Pakliže mu onen kulatý roh za to stojí, klidně mu jej udělám ($$$)

Kout

ad a) Přesně to jsem udělal (trošku na černo, pod záminkou testování) a ušetřil si spoustu vysvětlování. Samozřejmě to nejde udělat všude a vždy.
ad b) Rovněž jsem už jednou na výhrady reagoval upozorněním, že užívá prohlížeč z roku 2001, což i pastevce uvede do obrazu
ad c) Díky za tip.

Martin Michálek

ikdyž se rozhodnete odepřít IEčkářům nové efekty a zjednodušit si práci díky CSS3 dříve nebo později zjistíte že vám to práci spíš komplikuje

Třeba pak bude kodér mít trochu více práce, ale nestojí mu to za to, když tím zlepší uživatelský prožitek významné části návštěvníků?

(Ta část, která používá moderní prohlížeče, už například nebude muset tahat obrázky, kterými simulujeme kulaté rohy a další CSS3 vlastnosti.)

JakubS

Určitě ano,

bohužel ani ve FF nění implementace jednotlivých dostupných CSS3 vlastností dokončená.

Nedávno jsem si vylámal zuby na kombinaci border-radiusu box-shadow a obrázcích -po několika hodinách laborování jsem se vrátil k osvědčeným postupům.

Martin Michálek

Honzo, díky za osvětu a taky backlink. .-)

Nezkoušel jsi CSS3Pie nasazovat na alespoň středně velkém projektu? Nechci chytračit ani strašit, protože jsem jej nezkusil ani na projektu malém, ale mám dost velké obavy o výkon.

Ty .htc skripty jsou žrout výkonu a při představě, že by CSS3Pie někdo bez uvažování nasadil na layout, kde je deset stínovaných boxíků s kulatými rohy, se mi ježí vlasy. :-)

karf

Mám za to, že HTC skripty samy o sobě nemusí být žrouty výkonu, jsou to opět jenom javascripty, takže záleží na tom, jak to je napsané. Já to shodou okolností právě zvažuju nasadit na jeden projekt (namísto DD_roundies, které jsem občas použil), tak jsem se koukal do zdrojáku a nevypadá to zle. V podstatě jsou tam na příslušné elementy navázány události, podle kterých se podle potřeby překreslí přidružený VML prvek. Kritickým místem můžou být onmouseentery, které přidávají třídy .hover pro interakce, ale ani to obvykle nezpůsobuje problém. Uvidíme.

Mnohem horší jsou expressions, které se chovají zběsile, ale to je myslím něco trochu jiného.

richinek

Doporučuji vkládat k příkladům i obrázky, je to názornější. Jinak perfektní seriál.

farin

Znal jsem takovou pisnicku, kde se zpiva:

kulate obdelniky, fialovy les a zluta reka

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.