Mivel a tulajdonság pontos megvalósítása még változhat, ezért — ahogy már megszokhattuk — az egyes layout-motor fejlesztők itt is egyedi neveket vezettek be. A Webkit alapú böngészők esetén -webkit-transition, a Gecko alapúaknál -moz-transition, a Presto esetében pedig -o-transition a tulajdonság pontos neve. Szerencsére paraméterezésük minden motor esetén megegyezik. Akik fejből tudják, hogy melyik böngésző melyik layout-motort használja, azok az előző mondatból már kikövetkeztették, hogy a Chrome, a Safari, a Firefox és az Opera a szerencsés nyertesek. Viszont hozzátartozik az igazsághoz, hogy mivel a Gecko csak az 1.9.3 verziótól támogatja, ezért a Firefox csak a még meg nem jelent 3.7-es verziótól tudja az itt leírtakat. Az Opera pedig, bár elvileg támogatja, gyakorlatilag nem mindig a várakozásoknak megfelelően jeleníti meg az átmeneteket. Így végeredményben azt kell mondanom, hogy a példák maradéktalan élvezetéhez Webkit alapú böngésző (azaz Chrome vagy Safari) javasolt. Ha beállítjuk CSS-ben az alapértelmezett színt, akkor Opera alatt is a várakozásoknak megfelelően működik. A többi böngészőnél ez nem fontos.

A hosszas bevezető után lássuk a két példánkat, amelyeken keresztül a dolog működését szemléltetjük. Az alábbi képek élesebbek, ha az egeret föléjük mozgatjuk, egyébként elhalványodnak. Ami a lényeg: ez a változás nem egyből, hanem fél másodperc alatt zajlik le. (Akinél egyből megtörténik, annak a böngészője nem támogatja ezt a tulajdonságot).

A fenti példa létrehozásához a következő kódot alkalmaztam:

img {
	opacity: .5;
	-webkit-transition: opacity .5s ease-in;
	-moz-transition: opacity .5s ease-in;
	-o-transition: opacity .5s ease-in;
}
img:hover {
	opacity: 1;
}

Most lássunk egy példát egy olyan űrlapra, ahol az éppen kiválasztott beviteli mező háttere megváltozik:

A varázslat a következő beállításoknak köszönhető:

input, textarea {
    background-color: white;
	-webkit-transition: background-color .5s linear;
	-moz-transition: background-color .5s linear;
	-o-transition: background-color .5s linear;
}
input:focus, textarea:focus {
	background: #eeeeee;
}

Most következzen a kód magyarázata. A fenti példákban a transition ún. shorthand formáját alkalmaztam, azaz egyben adtam meg több beállítást:

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Lássuk az egyes tulajdonságokat külön-külön:

transition-property

Itt kell megadnunk azt a tulajdonságot, amelyre az átmenetet alkalmazni akarjuk. Ez lehet egy szín (color), lehet az áttetszőség (opacity), de lehet az elem szinte bármely tulajdonsága, mint például a  left, a border-width, stb. Nyilvánvalóan nem értelmezhető viszont az olyan tulajdonságokra, amelyekből nem lehet átmeneteket képezni, mint például a position, a display, stb.

transition-duration

Itt állíthatjuk be, hogy mennyi idő alatt menjen végbe az átmenet. Például 1.5s beállítása esetén — nem meglepő módon — másfél másodperc alatt fog az átmenet lezajlani.

transition-timing-function

Itt egy függvényt adhatunk meg az átmenet sebességének meghatározására. Ha a linear beállítást használjuk, akkor az átmenet egyenletes sebességgel megy végbe. Az ease-in hatására az átmenet lassan kezdődik és később gyorsul fel. Az ease-out ennek az ellenkezője: gyorsan indul, és a végén lassabb. Vagy megadhatunk tetszőleges Bézier-görbét a sebesség meghatározásához: cubic-bezier(x1, y1, x2, y2).

transition-delay

Ha azt szeretnénk, hogy az átmenet ne egyből, hanem egy bizonyos idő elteltével kezdődjön, akkor ennek a tulajdonságnak is érteket kell adnunk. A fenti példákban ezt nem használtam.

A transition tulajdonságok részletes leírását az egyes layout-motorok szemszögéből ezeken a linkeken találjátok: Webkit, Gecko, Presto.

A CSS 3 tehát ismét kezünkbe adott egy lehetőséget, hogy egy, a modern web designban népszerű, effektet jQuery vagy egyéb Javascript megoldás nélkül alkalmazhassunk. Ráadásul mivel az ehhez hasonló effektek ritkán nélkülözhetetlen elemei egy weboldalnak, még azért sem kell aggódnunk, hogy mi van akkor ha egy nem kompatibilis böngészőben az átmenet nem fokozatosan, hanem egyből végbemegy. A web design szakma egyre inkább egyetért abban, hogy itt az ideje a weboldal építésnél azt a szemléletet magunkévá tenni, hogy a funkcionalitásnak működnie kell minden népszerű böngészőben, viszont ha a egy-két spéci effekt csak a legkorszerűbb böngészőkben látható az még nem a világ vége.

-moz-transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Egy kép többet ér ezer szónál, ezért kezdjük az ismerkedést egy példával. Igyekeztem egy olyan példafájlt szerkeszteni, ahol együtt tudom bemutatni mindazt, amiről ebben a posztban írni szeretnék. Elég nehéz volt minden lehetőségre olyan példát kitalálni, ami akár hasznos is lehet a való életben, de remélem, hogy ez a pszeudo-osztályok többségében sikerült. A példafájl első látásra valószínűleg kínai lesz, de az alábbi magyarázatokkal talán hasznosnak bizonyul.

:target Bizonyára ismeritek az egyes oldalakon belül elhelyezhető ún. “horgonyokat”, amelyek lehetővé teszik, hogy egy link ne egy adott oldalra, hanem az oldalon belül valahova mutasson. Ha egy ilyen linkre kattintunk, akkor az URL végén #valami látható, ahol a valami a horgony neve. Pl. a http://www.css-3.hu/wp-content/code-samples/css-pseudo-class.html#section1 jelenik meg a címsorban ha a példa fájl tartalomjegyzékének első hivatkozására kattintunk, ahol a link célpontjaként az első bekezdésre mutató horgony van beállítva. Az ilyen “célpontokhoz” lehet stílusokat rendelni a :target pszeudo-osztállyal. Ezt a lehetőséget a példában arra használtam fel, hogy a horgony célpontját képező h3 fejlécnek saját stílust adjak. Tehát ha a felhasználó a tartalomjegyzékről egy adott horgonyra ugrik, akkor a horgony mellett megjelenik egy piros csík, jelezve, hogy “ide ugrottál”. A szükséges kód a következő volt:

h3:target {
border-left: red thick solid;
padding-left: 20px;
}

:nth-child A CSS pszeudo-osztályokkal foglalkozó korábbi posztban foglalkoztam a :first-child pszeudo-osztállyal, ami lehetővé tette, hogy egy elemre akkor vonatkozzon a megadott stílus, ha ő a DOM struktúrában a szülő elemének az első gyermeke. Ezt a lehetőséget bővíti ki az :nth-child pszeudo-osztály, úgy hogy ne csak az első, hanem tetszőleges sorszámú elem vagy elemek legyenek kiválaszthatóak. A 3. elem kiválasztása például az :nth-child(3) megadásával történhet. De itt még nem ér véget az örömünk, ugyanis ennél lényegesen többet tud ez a pszeudo-osztály! A zárójelek között ugyanis nem csak egy konstanst adhatunk meg, hanem egy an+b alakú kifejezést, tehát előírhatjuk, hogy a stílus minden valahányadik elemre vonatkozzon. A példában ezt a táblázat páros sorainak alászínezésére használtam föl, a következő kóddal:

tbody tr:nth-child(2n+2) {
background-color: #C4EAEA;
}

Minden 2. sort akartam alászínezni, és mivel az n 0-ról indul (erre nincs befolyásunk), ezért kellett a +2.

:only-of-type Ez az érdekes pszeudo-osztály azokat az elemeket választja ki, akik egyedüliként léteznek adott típusúként a szülő elemükön belül. A példába tettem egy olyan sort, amiben csak egy kép van és egy olyat, amiben három. Az :only-of-type segítségével beállítottam, hogy abban az esetben, ha csak egy kép van az adott sorban, akkor az kapjon egy bordó keretet. Ehhez a következő kódot használtam.

img:only-of-type {
border: #990000 solid thick;
}

Persze lehet vitatkozni azon, hogy ennek mennyi haszna van, de el tudok képzelni olyan design-t, ahol más stílust akarunk adni egy elemnek ha egyedül áll, és mást, ha több egyforma is van belőle.

:not() Ez is egy érdekes pszeudo-osztály. Segítségével a stílus hatálya alól kizárhatunk egy adott osztálynak megfelelő elemet. A példában ezt arra használtam fel, hogy lent, a Hozzászólások részben minden olyan hozzászólás-fejlécet szürkével jelenítsek meg, amelyet nem az admin írt, azaz nem rendelkezik az admin_comment osztállyal. Ez a kizárás a következő kóddal valósult meg:

.comment_header:not(.admin_comment) {
color: gray;
}

Kompatibilitás tekintetében egész jól állunk a pszeudo-osztályokkal. Az Internet Explorer kivételével minden fontos böngésző támogatja őket. De még őt is rá lehet a legtöbb CSS 3 pszeudo-osztály támogatására egy javascript framework, például a jquery használatával. Az Operának a :target pszeudo-osztállyal gyűlik meg a baja egy kicsit, mert nem frissíti megfelelően a stílusokat a Back és a Forward gombok használatakor. Ezeket leszámítva minden működik, de itt is érvényes az, ami a CSS 3 megoldásokra általában: mivel a szabvány még nem végéleges, ne használjuk olyan dolgokra amelyek működése nélkülözhetetlen a weboldalunkon.

::selection {
background: #FFFF00;
color: #00FF00;
}

::-moz-selection {
background: #FFFF00;
color: #00FF00;
}

Az egyszerűen selection néven futó tulajdonságot a Webkit és a Presto érti, a Gecko számára pedig a -moz-selection tuladonságra van szükségünk. Az eredményt mindenki kipróbálhatja az alábbi szövegen.

A dolog gyakorlati haszna elenyésző, de ha a designt odáig akarjuk finomítani, hogy a kijelölés színét is szeretnénk az oldal színvilágához igazítani, akkor nem teljesen haszontalan. Talán még az is lehet, hogy visszakerül a CSS 3 specifikációi közé.

A CSS 3 @font-face szabálya – bizonyos feltételekkel, de erről majd később – megoldja a problémát. Az alapötlet egyszerű. Fel kell töltenünk a kívánt betűtípus-fájlt egy olyan helyre, ahová hivatkozhatunk a stíluslapunkról, majd azt a forrásfájlt belinkeljük a stíluslapra, például így:

@font-face {
    font-family: "Myriad Pro Light";
    src: url('Myriad-Pro-Light.otf');
}

Ezután már használhatjuk is a Myriad Pro Light betűtípust a stíluslapunkon, és ha nincs meg a felhasználó gépén, akkor a CSS 3 kompatibilis böngészőnk tudni fogja, hogy hol keresse a font-fájlt:

Ez Myriad Pro Light-tal jelenik meg, ha a böngésződ is úgy akarja!

Idáig minden szép és jó volna, de sajnos ez itt még nem a kánaán. Két probléma sötétíti be a @font-face szabály napfényes egét. Az egyik probléma technikai: van amikor nem az jelenik meg, aminek kellene. Bizonyos esetekben a megírt szöveg helyett egy zagyva karakterhalmazt kapunk. Aztán lefrissítjük az oldalt és minden rendben. Aztán lefrissítjük mégegyszer és megint rossz. Ezt sikerült a Firefox-szal és a Safarival is produkálni. Remélhetőleg ezt is megoldják hamarosan.

A második probléma jogi természetű. Jelenleg alig van olyan font, amely licencszerződése engedélyezné a @font-face-es felhasználást. Persze vannak nagyon jó ingyenes fontok is, amelyeknél ez megengedett, de a mainstream designer fontok esetében ez egy komoly korlát. Főleg a fizetős munkáknál, ahol nagyon nem szeretnénk, hogy később az ügyfélt azért zaklassák, mert mi nem olvastuk el a felhasználási feltételeket. De a @font-face-ben akkora lehetőség van, hogy szerintem erre is találnak megoldást.

Ja, és működik mind a 4 CSS 3-as böngészőben: Chrome, Firefox, Opera, Safari. Sőt, még a Konqueror-ban is. Sőt, még az Internet Explorer-ben is (hű, először írom le ezt a nevet ebben a blogban ), de hogy ne bízzuk el magunkat, neki .eot formátumban kell a font. Minden más böngésző az .otf és .ttf formátumokat fogadja el, és az .eot-ot nem. De nem kell választanunk, mindkettőt deklarálhatjuk a stíluslapunkban, feltéve, hogy mindkét formátumban megvan a fontunk.

Az előbbi megoldás azért nem jó, mert sem a keresők, sem a felolvasóprogramok nem tudják a képen szereplő szöveget olvasni, utóbbi pedig azért nem, mert ha valahol ki van kapcsolva a CSS, akkor a szöveg kétszer jelenik meg. A CSS 3 text-shadow tulajdonsága az egyike azon kevés CSS 3 attribútumnak, amelyek már mind a 4 CSS-3-mat támogató böngészőben elérhetők. Sőt a Konqueror és az iCab is támogatják. Használata rendkívül egyszerű, mint azt a következő példa is mutatja:

.shadowText {
    text-shadow: 2px 2px 2px #000;
}

Ez a kódrészlet az árnyékot a szöveghez képest 2 pixellel jobbra, 2 pixellel lefelé jeleníti meg, és 2 pixelnyi homályosítást (blur) végez rajta. A #000 az árnyék színe, amelyet tetszés szerint változtathatunk. Egyébként ezt a beállítást használom a blog poszt-címeihez is – aki CSS-3-képes böngészőt használ, láthatja. Itt látható egy külön példa, egyszer CSS 3-mal megvalósítva, egyszer pedig a CSS-mas megvalósítás screen-shotja, azok számára, akik nem CSS 3 kompatibilis böngészőt használnak.

Végezetül egy stilisztikai jó tanács: mint minden díszítőelemet ezt is csak mértékkel ajánlott használni. Ha minden sorunk ilyen, azzal lerontjuk a design-t, ahelyett, hogy javítanánk, ráadásul még a szövegünk is nehezebben lesz olvasható.

Aki a CSS-3 csodáit szeretné élvezni, annak Gecko, Presto vagy WebKit motor által hajtott böngészőre van szüksége. Ez ma már nem olyan nagy követelmény, ugyanis az Opera a Presto-ra épül, a Firefox a Gecko-ra, a Safari és a Chrome pedig a WebKit-re. Persze mindegyik böngészőből a legújabb verzióra van szükség, ugyanis a korábbi verziók csak kevés CSS-3 szabályt tudnak értelmezni, vagy még annyit sem. A Wikipedián található egy nagyon jó áttekintés arról, hogy ki mit tud CSS-3-ból (és 2-ből és 1-ből, mert akármily meglepő, még a CSS 2 támogatása sem teljeskörű).