Ar pažįstamas jausmas, kai koduodamas dizainą susiduri su problema, kuri iš pirmo žvilgsnio atrodo lengvai išsprendžiama, tačiau vėliau pasirodo, jog ją išspręsti yra kur kas sunkiau negu atrodo? Ar neerzina vien mintis, kad, pavyzdžiui, kampų apvalinimui tenka naudoti įvairius metodus, kurie ne visada tinka visoms naršyklėms? Nejaugi visos sudėtingesnės dizaino detalės turi būti pagrįstos paveikslėliais? Regis, šios ir panašios problemos mums kankins dar labai ilgai, tačiau ar iš tikrųjų neturime jokios išeities?

Laimei, žvelgdami į ateitį galime pasidžiaugti, jog W3 kuria CSS3, o tai reiškia, kad mes, tinklalapių dizaineriai ir web „developeriai“, galėsime kurti sudėtingos struktūros dizainus su atokvėpiu.

Ar jau galime naudoti CSS3 savo tinklalapiuose?

Pirmiausia supraskime, jog CSS3 dar kuriamas, todėl tai, ką sužinosite šiame straipsnyje, po metų ar dviejų gali būti netikslu. Tačiau gyvenkime dabartimi ir išsiaiškinkime, ką šiuo metu galime pritaikyti ir įvertinkime situaciją.

Internet Explorer niekaip nespėja į traukinį

Kadangi CSS3 dar nėra užbaigtas, naivu manyti, jog visos naršyklės jau privalo turėti bent minimalų CSS3 palaikymą. Tačiau Opera, Safari, Firefox ir Chrome naršyklių kūrėjai ėmėsi iniciatyvos stengdamiesi integruoti dalinį CSS3 palaikymą. Deja, Microsoft su Internet Explorer eilinį kartą spjaudo tinklalapių kūrėjams ir dizaineriams į veidus: nei IE7, nei Microsoft paskutinėje IE8 versijoje vis dar negalima naudoti CSS3 savybių kampams apvalinti, šešėliams pridėti. Atlikęs CSS selektorių testą su Firefox 3.5.6 ir IE 8.0 naršyklėmis gavau neįtikėtinus rezultatus.

Firefox 3.5.6: passed 578 out of 578 tests.

Internet Explorer 8.0: passed 349 out of 578 tests.

Tačiau būkime teisingi ir pažiūrėkime, kaip šį testą atlaiko Opera 9.64, Safari 4.0 ir Chrome 4.0.

Opera 9.64: passed 578 out of 578 tests.

Safari 4.0: passed 578 out of 578 tests.

Chrome 4.0: passed 578 out of 578 tests.

Akivaizdu, kad šiame teste „pasišiukšlino“ Internet Explorer 8 naršyklė, surinkdama kiek daugiau negu pusę užskaitytų patikrinimų. Prieš pradėdami mane vadinti ciniku, aklai peikiančiu Microsoft už jų neva neatsakingą Internet Explorer naršyklės plėtojimą ir kūrimą, pagalvokite, kokia iš tikrųjų situacija susiklostė. Tinklalapių kūrėjai ir dizaineriai vis dar kariauja su niekaip nemirštančia Internet Explorer 6, kuri riboja tinlalapių funkcionalumo tobulinimą ir būtiniausių savybių palaikymą (pav.: IE6 negaliojantis png paveikslėlių permatomumas (angl. „transparency“), CSS selektorių nepalaikymas ir kitos klaidos). Internet Explorer 8 vėl meta iššūkį nepalaikydama patrauklių CSS3 savybių, kurios labai palengvintų tinklalapių kūrėjų ir dizainerių darbą. Taigi ar tai nereiškia, jog Internet Explorer, nepaisant išleidžiamų naujų versijų, vis atsilieka nuo kitų moderniųjų naršyklių?

Kai bebūtų, aš tikiuosi, kad per šiuos ir kitus metus situacija radikaliai pasikeis į gerąją pusę. CSS3 palaikymo problemą Microsoft žada išspręsti kitoje IE versijoje — Internet Explorer 9. Tačiau iki to laiko tenkinkimės tuo, jog visgi yra naršyklių, kuriose CSS3 palaikymas kiek žymesnis.

Ką konkrečiai jau galime naudoti

Šiuo metu galime pritaikyti gana nemažai CSS3 naujovių. Pavyzdžiui, galime nurodyti kampų suapvalinimą pikseliais (angl. „border-radius“), šešėlius (taip taip, nebereikės šešėliams kurti naudoti atskirų paveikslėlių!), priskirti rėmelio (angl. „border“) fono paveikslėlį, nustatyti daugiau kaip vieną fono paveikslėlį tam tikram elementui, nustatyti elemento spalvą su RGBa (Red, Green, Blue ir alpha)... O ką jau bekalbėti apie struktūrines CSS3 pseudo-klases ir selektorius! Kaip matote, atsiveria daug naujų galimybių kurti ir tobulinti tinklalapių dizainams, todėl pernelyg negaišdami laiko imkimės detalaus šių savybių ir funkcijų nagrinėjimo.

Elementų rėmeliai

Kiek anksčiau minėjau, kad su CSS3 jau galime labai paprastai apvalinti elemento kampus, tačiau tai ne viskas, ką sugeba CSS3. Pagal CSS2.1 sintaksę, rėmelius nurodome su savybe border (border-top, border-right, border-bottom, border-left). Naujojoje CSS specifikacijoje, CSS3, galime nurodyti rėmelio užlinkimą su savybe border-radius (border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius).

Čia svarbu atsiminti, jog naršyklių kūrėjai prie šių naujųjų CSS3 savybių prideda priešdėlį (angl. „prefix“), kadangi, kaip jau rašiau anksčiau, CSS3 specifikacija dar nėra oficialiai užbaigta. Mozilla Firefox naršyklei priešdėlis yra -moz-, tuo tarpu Apple Safari ir Google Chrome naudoja -webkit-. Opera 9.6 ir Internet Explorer 8, deja, šių savybių visiškai nepalaiko. Panagrinėkime keletą pavyzdžių, kad įsimintumėme ir suprastume, kaip viską pritaikyti praktikoje.

Kadangi šiame straipsnyje visas dėmesys skirtas CSS, HTML struktūros nerodysiu, nes viskas gana elementaru. Mums svarbu susipažinti su naujomis CSS3 savybėmis, o ne nagrinėti puikiai pažįstamą HTML kodą. Taigi pradžioje, tarkime, turime paprastą paieškos formą (laukelį paieškos raktažodžiams įvesti ir mygtuką išsiųsti formos duomenims).

.textfield 
	{ 
		width: 250px; 
		background: #ebf3f0; 
		border: 1px solid #94bfab; 
		color: #3e9ea4; 
		padding: 5px; 
	}
	
	.button 
	{ 
		background: #239aa1; 
		border: 1px solid #107980; 
		color: white; 
		padding: 5px 12px; 
		margin: 0 0 0 10px; 
	}

Čia atitinkamai .textfield — laukelio klasė, .button — mygtuko klasė. Pasinaudoję anksčiau minėta informacija, pritaikykime abiejoms klasėms CSS3 savybes, kurios suapvalintų elementų kampus.

.textfield 
	{ 
		width: 250px; 
		background: #ebf3f0; 
		border: 1px solid #94bfab; 
		color: #3e9ea4; 
		padding: 5px; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	.button 
	{ 
		background: #239aa1; 
		border: 1px solid #107980; 
		color: white; 
		padding: 5px 12px; 
		margin: 0 0 0 10px; 
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

Pritaikius border-radius savybę (su atitinkamu priešdėliu -moz- arba -webkit-), apvalinami visi elemento kampai. Kuo didesnį užlenkimą pikseliais nurodysite, tuo elementas bus apvalesnis.

Šiek tiek paeksperimentuokime nurodydami skirtingas užlenkimo reikšmes kiekvienam kampui.

	.textfield 
	{ 
		width: 250px; 
		background: #ebf3f0; 
		border: 1px solid #94bfab; 
		color: #3e9ea4; 
		padding: 5px; 
		-moz-border-radius-topleft: 15px;
		-moz-border-radius-topright: 0px;
		-moz-border-radius-bottomleft: 5px;
		-moz-border-radius-bottomright: 0px;
		-webkit-border-top-left-radius: 15px;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-left-radius: 5px;
		-webkit-border-bottom-right-radius: 0px;
	}
	
	.button 
	{ 
		background: #239aa1; 
		border: 1px solid #107980; 
		color: white; 
		padding: 5px 12px; 
		margin: 0 0 0 10px; 
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-topright: 15px;
		-moz-border-radius-bottomleft: 0px;
		-moz-border-radius-bottomright: 5px;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-top-right-radius: 15px;
		-webkit-border-bottom-left-radius: 0px;
		-webkit-border-bottom-right-radius: 5px;
	}

Atidžiau pažiūrėję ir palyginę, kaip rašomos savybės Mozilla Firefox bei Safari/Chrome naršyklėms, pastebėsite, jog Firefox naršyklei skirtos savybės šiek tiek skiriasi nuo oficialaus W3c pateikto CSS3 specifikacijos standarto. Ten nurodytos tokios savybės: border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius. Safari ir Chrome naršyklių kūrėjai laikosi pateiktų taisyklių, tačiau Firefox narškyklės (-moz-) atveju kažkodėl savybes reikia rašyti kitaip: border-radius-topright, border-radius-bottomright, border-radius-bottomleft, border-radius-topleft. Kodėl Mozilla Firefox kūrėjai taip nusprendė, likau nesupratęs.

Taip pat turbūt atkreipėte dėmesį į tai, jog prirašėme daug savybių, norėdami gauti anksčiau parodytą efektą. Kaip ir margin ar padding savybių atveju, galime pasinaudoti savybių trumpiniu (angl. „shorthand“), t.y. vienai savybei priskirdami 4 reikšmes. Žemiau pateiktas CSS kodo pavyzdys analogiškas anksčiau pateiktajam.

	.textfield 
	{ 
		width: 250px; 
		background: #ebf3f0; 
		border: 1px solid #94bfab; 
		color: #3e9ea4; 
		padding: 5px; 
		-moz-border-radius: 15px 0 0 5px;
		-webkit-border-radius: 15px 0 0 5px;
	}
	
	.button 
	{ 
		background: #239aa1; 
		border: 1px solid #107980; 
		color: white; 
		padding: 5px 12px; 
		margin: 0 0 0 10px; 
		-moz-border-radius: 0 15px 5px 0;
		-webkit-border-radius: 0 15px 5px 0;
	}

Nauji selektoriai

CSS3 mums suteikia galimybę išskirti tam tikrus elementus, kuriuos norime stilizuoti. Pavyzdžiui, tarkime, kad norime išskirti visas nuorodas, kurių atributas „title“ turi specifinę reikšmę, prasidedančią žodžiu „egrafika“. Arba atvirkščiai — žodžiu, baigiančiu „egrafika“. Tad čia pateiksiu tris variantus.

• E[atributas^="reikšmė"]
  imami E elementai (pav.: a, p, div), kurių nurodytas atributas turi reikšmę, prasidedančią žodžiu reikšmė.
• E[atributas$="reikšmė"]
  imami E elementai , kurių nurodytas atributas turi reikšmę, besibaigiančią žodžiu reikšmė.
• E[atributas*="reikšmė"]
  imami E elementai, kurių nurodytas atributas turi reikšmę, kurioje kur nors yra reikšmės fragmentas pavadinimu reikšmė.

CSS3 turi ir daugiau naujų selektorių, tačiau jie, manau, po kol kas nėra esminiai. Norėdami sužinoti apie juos daugiau, galite peržiūrėti CSS3 selektorių specifikaciją.

Tokie selektoriai jau buvo matyti anksčiau, tiesa?

Beje, verta paminėti, jog panašūs selektoriai egzistuoja ir CSS 2.1 specifikacijoje. Pavyzdžiui:

• E[atributas]
  imami E elementai, turintys nurodytą atributą (nepriklausomai nuo jame esančios reikšmės).
• E[atributas="reikšmė"]
  imami E elementai, turintys nurodytą atributą ir jame esančią reikšmę.

Tad dabar panagrinėkime paprastą pavyzdį. Pirmiausia pateiksiu HTML kodą, o tada naudodami CSS3 selektorius išskirsime norimus elementus.

<a href="#pagr" title="Pagrindinis">Pagrindinis</a>
<a href="#nauj" title="Naujienos">Naujienos</a>
<a href="#akc" title="akcijos-naujos">Naujausios akcijos</a>
<a href="#akc-visos" title="akcijos-visos">Visos akcijos</a>
<a href="#naujos" title="visos-akcijos-naujos">Akcijos</a>

Tarkime, kad norime išskirti trečią ir ketvirtą nuorodas. Matome, jog abi nuorodos turi „title“ atributą, kurio reikšmė prasideda žodžiu „akcijos“. Tad su CSS3 galime šiuos elementus išskirti taip:

a[title^="akcijos"] { }

Norėdami išskirti trečiąją ir penktąją nuorodas, užrašome CSS kodą taip:

a[title$="naujos"] { }

Ir galiausiai, jei norime išskirti trečiąją, ketvirtąją ir penktąją nuorodas, selektorių užrašome taip:

a[title*="akcijos"] { }

Kyla klausimas, kam reikia tokių selektorių, jeigu turime standartinius #E ir .E (E — pasirinktas elementas)? Juk, regis, jų turėtų užtekti. Deja, taip yra ne visada. Pavyzdžiui, turime HTML kode daug div elementų, turinčių klasę, prasidedančią žodžiu „egrafika“: „egrafika-list“, „egrafika-block“, „egrafika-code“, „egrafika-text“ ir t. t. Norėdami jiems visiems įvesti kažkokią bendrą savybę, su CSS turėtume paimti elementus tokiu principu:

.egrafika-list, .egrafika-block, .egrafika-code, .egrafika-text { color: #333; }

Galbūt toks variantas neatrodo ypatingai „griozdiškas“, tačiau kas atsitiktų, jeigu turėtume 20 ar daugiau panašių klasių (abejoju, ar prasminga turėti tiek daug skirtingų klasių panašiai paskirčiai, bet visada yra išimčių)? Žinoma, reiktų visas klases išvardinti, tačiau, laimei, CSS3 šią problemą puikiai išsprendžia.

div[class^="egrafika"] { color: #333; }

Šešėliai

Kol neturėjome CSS3, tradiciškai šešėlius sukurdavome su Photoshop ar kita grafikos programa, išsaugodavome paveikslėlį ir jį naudodavome tinklalapyje. Tačiau nuo šiol galime šešėlius sukurti su CSS3!

Elementų šešėliai

Tarkime, kad turime blokinį elementą su apibrėžtu ilgiu ir pločiu.

#blokas 
{ 
	width: 500px; 
	height: 200px; 
	background: #ebf3f0; 
	border: 1px solid #DDD; 
}

Šešėliui prideti naudojame savybę „box-shadow“. Kaip ir su apvalintais kampais, turime priešdėlius (angl. „prefix“) -moz- ir -webkit-.

#blokas 
{ 
	width: 500px; 
	height: 200px; 
	background: #ebf3f0; 
	border: 1px solid #DDD; 
	-webkit-box-shadow: 5px 5px 10px #DDD;
	-moz-box-shadow: 5px 5px 10px #DDD;
	box-shadow: 5px 5px 10px #DDD;	
}

Pirmosios dvi reikšmės nurodo, kur paslinktas šešėlis atitinkamai X ir Y ašyje nuo elemento. Trečioji reikšmė apibrėžia šešėlio „išsiliejimą“ (angl. „bluriness“). Ir galiausiai, žinoma, nurodome šešėlio spalvą. Beje, šešėlio poziciją galime nurodyti ir neigiamomis reikšmėmis.

#blokas 
{ 
	width: 500px; 
	height: 200px; 
	background: #ebf3f0; 
	border: 1px solid #DDD; 
	-webkit-box-shadow: -5px -5px 10px #DDD;
	-moz-box-shadow: -5px -5px 10px #DDD;
	box-shadow: -5px -5px 10px #DDD;	
}

Teksto šešėliai

Šešėlį galime sukurti ne tik elementams, tačiau ir tekstui. Tam naudojama savybė „text-shadow“, kuri veikia analogiškai „box-shadow“. Šiam pavyzdžiui naudosime tą patį bloką, kurį sukūrėme anksčiau.

#blokas 
{ 
	width: 480px; 
	height: 180px; 
	padding: 10px; 
	background: #ebf3f0; 
	border: 1px solid #DDD; 
	color: #315c85;
	font-size: 0.9em;
	line-height: 1.6em;
	-webkit-box-shadow: -5px -5px 10px #DDD;
	-moz-box-shadow: -5px -5px 10px #DDD;
	box-shadow: -5px -5px 10px #DDD;
	text-shadow: 2px 2px 3px #BBB;
}

Atkreipkite dėmesį, jog „text-shadow“ savybei nereikia papildomų prefiksų -moz- ir -webkit-.

Permatomumas (angl. „transparency“)

Paprastai spalvą su permatomumu galime įgyvendinti sukūrę permatomą *.png ar *.gif paveikslėlį ir jį naudoti kaip foną elementams. Su CSS3 galime tai nurodyti tiesiogiai aprašuose. Šiam pavyzdžiui ant anksčiau naudoto bloko „uždėsime“ kitą bloką.

Spalvas CSS kalboje galime nurodyti raktažodžiais (pav.: black, white, red), HEX kodu (pav.: #333333) arba RGB (pav.: rgb(0, 0, 0)). CSS3 specifikacijoje atsiranda dar vienas būdas nurodyti spalvai, įtraukiant ir permatomumą — rgba(red, green, blue, alpha). Kitaip sakant, galime nurodyti 4 kanalus: raudonos spalvos, žalios, mėlynos ir alpha. Alpha kanalas nurodo, koks matomumas skalėje nuo 0 iki 1. Tad tarkime, kad norime nurodyti spalvą su 50% matomumu, kuris atitiks 0.5 alpha kanalo reikšmę.

#blokas-antras
{
	width: 200px;
	height: 100px;
	position: absolute;
	top: 40px;
	left: 550px;
	background: #d46e00;
	background: rgba(212, 110, 0, 0.5);
}

Atkreipkite dėmesį, jog čia „background“ savybė nurodyta du kartus siekiant suderinamumo tarp skirtingų naršyklių, kadangi rgba nepalaiko Microsoft Internet Explorer 6-8 versijos. Taigi jeigu naršyklė palaiko rgba, anksčiau nurodyta „background“ reikšmė bus perrašyta.

Beje, rgba galima nurodyti ne tik fono spalvai, tačiau ir teksto.

selektorius { color: #000; color: rgba(0, 0, 0, 0.5); }

Tiesa, turime galimybę matomumą nurodyti ir atskirai.

selektorius { color: #000; opacity: 0.5; }

Rėmeliai su paveikslėliais

Naudodami CSS3 savybę „border-image“ galime nurodyti paveikslėlį, kuris naudojamas bloko rėmeliui. Kadangi nenoriu šio apžvalginio straipsnio apie CSS3 padaryti per dideliu, apsiribosime vienu pavyzdžiu, o ateityje, be abejonės, skirsime daugiau laiko būtent šiai savybei.

Tarkime, turime tokį paveikslėlį rėmeliams:

border-image: url(border.png) 27 27 27 27 round round;

Kadangi dabar plačiau šios savybės nenagrinėsime, pateiksiu keletą nuorodų.

• http://www.css3.info/preview/border-image/
• http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image
• http://ejohn.org/blog/border-image-in-firefox/

Apibendrinimas

Kaip matote, CSS3 suteikia galimybę lengviau pagražinti tinklalapio dizainą išvengiant senų, atgyvenusių metodų (pavyzdžiui, elementų kampų apvalinimui). Čia apžvelgėme tik keletą naujų savybių, tačiau būkite užtikrinti, kad ateityje nagrinėsime dar daugiau įdomių savybių bei sudėtingesnių panaudojimo būdų. Iki kito karto, sėkmės!