Zer dira CSS estiloak?
CSS (Cascade Style Sheet) estiloak web-orri bati itxura emateko erabiltzen diren aginduak dira. Askok jakingo ez duzuen arren, jatorrian web-orriak formatu zehatz batean (HTML) idatzitako testu dokumentuak besterik ez ziren, haien artean loturak zituztenak.
Dokumentu hauei itxura emateko sortu ziren CSS estiloak. Gaur egun CSS3 espezifikazioa dago martxan. Alegia, nabigatzaile gehienek onartzen dituzte CSS3 bertsioan ezarritako aukerak. Aurrerago ikusiko dugu nork erabakitzen dituen arau hauek eta zergatik ez diren berehala ezartzen. Modu sinplean ulertzeko, adibide batekin ikustea da onena.
ADIBIDEA: gorrian idatzita dagoen paragrafo bat erakutsi nahi dugu.
> Alde batetik HTML hizkuntzan idatzitako paragrafoa beharko dugu:
<p class="red">HAU PARAGRAFO BAT DA</p>> Beste alde batetik CSS hizkuntzan idatzitako agindua beharko dugu:
p.red { color: red; }> EMAITZA: HAU PARAGRAFO BAT DA
ZER DA ESPEZIFIKAZIO BAT?
Espezifikazio batek aukera zehatz batzuk zehazten ditu eta estandar moduan definitzen dira. Alegia, suposatzen da momentu horretatik aurrera onartua dagoela aukera horien erabilera. Adibidez, CSS3 espezifikazioan erabaki zen text-shadow izeneko ezaugarria sortzea, testuei itzala jarri ahal izateko.
Dena den, ez pentsa espezifikazio bat sortzeak berehala erabilgarri dagoela esan nahi duenik. Nabigatzaile bakoitzaren kontua da espezifikazio bakoitzeko ezaugarri berriak ulertzeko gai izatea eta, beraz, urteak pasa daitezke nabigatzaile guztiek arau berriak ongi ulertu eta erakutsi arte. CSS3ren kasuan adibidez, lotura honetan ikus daiteke gaur egun zein den ezaugarri berrien maila nabigatzaileen arabera.
NORK ARAUTZEN DU?
Espezifikazioa sortzeaz World Wide Web partzuergoa arduratzen da. Aditu talde batek aztertzen ditu joera berriak eta erritmo oso mantsoan irizpide berriak zehazten ditu.
ZEIN EZAUGARRI BERRI TOPATUKO DITUGU CSS4 ESPEZIFIKAZIOAN?
Oso interesgarriak suertatu daitezkeen hiru ezaugarriren inguruan arituko gara gaur.
OHARRA: Hemendik aurrerako informazioa ulertzeko CSSren inguruko gutxieneko ezagutzak izatea beharrezkoa da.
:blank sasi-klasea: Azpielementurik ez duen, testurik ez duen edota espazio hutsak besterik ez dituen elementu bat hautatzeko balio du
– HTML zatian, beraz, hutsik dagoen elementu bat beharko dugu:
<p> </p>– Eta CSSa horrelako zerbait izango litzateke:
p:blank { background-color: red; }(hondo gorria jarriko die hutsik dauden paragrafoei)
:has() sasi-klasea: Bere baitan guk erabakitzen dugun elementua duen elementua aukeratzeko balio du
– HTML zatian, beraz, haur elementuren bat duen elementu bat beharko dugu. Adibidez, paragrafo baten barruan dagoen hizki lodidun hitza:
<p> <strong>HITZA</strong> </p> – Eta CSSa horrelako zerbait izango litzateke:
p:has(strong) { color: green; }(bere baitan hizki lodidun hitz bat edo gehiago dituen paragrafo orok kolore berdeko hitzak izango ditu)
:in-range eta :out-of-range Formularioetan, hautatu daitezkeen balioak mugatzeko aukera ezarri daiteke (adibidez, adina 18 urtera artekoa izan dadila). Kasu horietan, baldintza betetzen duten edo ez duten balioak hautatzeko aukera izango dugu
– HTML zatian, beraz, formulario bat beharko dugu, idatz daitezkeen balioak mugatzen dituen elementu batekin:
<form><input type="number"
min="0" max="18"></form>– Eta CSSa horrelako zerbait izango litzateke:
input[type=number]:in-range {
border: green solid 1px;
}
input[type=number]:out-of-range {
outline: red solid 1px;
}(ertz berdea jarriko die muga barruan dauden elementuei eta gorria, aldiz, baldintza betetzen ez dutenei)
NOIZKO EGONGO DA ERABILGARRI?
Oraindik espezifikazioa ez dagoenez bukatuta (izan ere, irailaren 29an aurkeztu zen lehen zirriborroa), oso zaila da aurreikustea zenbat denboran egongo den amaituta.
Dena den, honezkero nabigatzaile batzuetan espezifikazio berriko hainbat ezaugarri erabilgarri daude jada. Dena den, gomendagarria da onarpen maila nahiko altua izan arte aukera berriak ez erabiltzen hastea, garrantzitsua delako gure web-orriaren itxura antzekoa izatea nabigatzailea dena dela.
LOTURA INTERESGARRIAK:
Hainbat lotura interesgarri proposatzen dizkizuegu, gaiarekin lotura dutenak:
- BROWSER SELECTOR TEST: Web-orria bisitatzen dugun nabigatzaileak zein ezaugarri onartzen dituen erakutsiko digu, CSS1, CSS2, CSS3 eta CSS4 espezifikazioen arabera multzokatuta.
- CSS4 ESPEZIFIKAZIOA: World Wide Web partzuergoa lantzen ari den CSS4 espezifikazioaren zirriborro ofiziala.