Compatibilitate W3C DOM - CSS

Ultima actualizare majora 19 Iulie 2010.

Puteti vedea de asemenea versiunea anterioara.

Cover of my book

Daca doriti niste exemple practice despre ce puteti face cu W3C DOM, cititi cartea mea ppk on JavaScript, in special capitolul 8.

Acest tabel de compatibilitate detaliaza suportul pentru modulele W3C DOM CSS Level 2 si extensiile Microsoft asortate in toate browserele moderne.

Aceasta pagina contine cinci tabele. Primele trei sunt destul de importante, ultimele doua nu sunt.

  1. Primul este despre caile de accesare a stilurilor elementelor individuale HTML.
  2. Cum sa accesam foi de stil intregi.
  3. Cum schimbam foile de stil.
  4. Unele proprietati ale foilor de stil si regulile stilurilor.
  5. In sfarsite niste metode diverse mai putin importante.

Stilurile elementelor

Manipularea de baza a elementelor incepe cu accesarea stilurilor elementelor HTML individuale. Proprietatea importanta style ofera acces la stilurile inline ale elementelor. Ca sa aflam ce elemente non-inline se aplica unui element este mai dificil. Vezi pagina Get styles pentru exemple practice.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
currentStyle
Stilul curent al elementului, acest stil este totusi setat

Pagina de test Microsoft
da nu nu nu da va fi testat
x.currentStyle

Returneaza stilul actual al elementului x, chiar daca nu este un stil inline. De aceea raporteaza rezultatul tuturor declaratiilor de stil care functioneaza pe elementul x.

getComputedStyle()
Stilul curent al elementului, acest stil este totusi setat

Pagina de test W3C
nu da da da da da va fi testat
window.getComputedStyle(x,null).color

Citeste stilul de culoare curent al elementului x. Toate unitatile sunt convertite prima oara in pixeli.

style
Stilul inline al elementului

Pagina de test
aproape da da da da da va fi testat
x.style

Acceseaza stilurile inline ale elementului x. Stilurile definite in foi de stil integrate, legate sau importate nu sunt raportate.

Puteti seta de asemenea : x.style.color = '#0000cc'. Aceasta seteaza stilul inline, care binenteles suprascrie toate celelalte reguli.

  • Konqueror are probleme cu citirea stilului border pe care il folosesc in testul meu. Totusi, in general style functioneaza coect in ambele browsere.
  • IE5.5 si 6 au probleme cu setarea noii reguli border, dar banuiesc ca este cauzat de template-ul meu si nu de testul in sine. In genral ele suporta schimbarile de style mereu.
nu da nu nu nu da va fi testat
x.style = 'font-size: 150%'

Schimba stilurile inline la doar font-size: 150%.

Read only da da da da da va fi testat
document.styleSheets[1].cssRules[0].style

Acceseaza stilurile in prima regula a celei de a doua foaie de stil. Si acestea pot fi setate:
document.styleSheets[1].cssRules[0].style.color = '#0000cc'

(IE foloseste rules in loc de cssRules, evident.)

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Accesarea foilor de stil

Puteti accesa si schimba foi de stil intregi. Vezi pagina Change style sheet pentru o introducere asupra acestor proprietati si probleme inevitabile de compatibilitate cu browserele.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
cssRules[]
O matrice cu toate regulile dintr-o foaie de stil.

Pagina de test
nu da da da da da va fi testat
document.styleSheets[1].cssRules[1]

Acceseaza a doua regula a celei de a doua foaie de stil din document.

imports[]
O matrice cu toate foile de stil importate dintr-o foaie de stil

Pagina de test
da nu nu nu nu va fi testat
document.styleSheets[1].imports

Acceseaza toate foile de stil care sunt importate de a doua foaie de stil din document.

rules[]
O matrice cu toate regulile dintr-o foaie de stil.

Pagina de test
Incorect nu da da nu va fi testat
document.styleSheets[1].rules[1]

Acceseaza a doua regula a celei de a doua foaie de stil din document.

rules nu contine declaratii @import, in timp ce cssRules contine.

  • IE nu considera @imports ca reguli, dar imparte selectori ca p#test, ul in doua reguli. Acest comportament persista in IE9, chiar daca cssRules functioneaza coect.
styleSheets[]
O matrice cu toate foile de stil dintr-un document

Pagina de test
da da da da da va fi testat
document.styleSheets[1]

Acceseaza a doua foaie de stil (legata sau inserata) din document.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Schimbarea foilor de stil

Puteti schimba foi de stil intregi, ceea ce inseamna ca stilurile pe care le schimbati se vor apica intregii pagini HTML, nu numai unui singur element. Sunt cateva incompatibilitati usoare cu browserele aici.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
addRule()
Adauga o regula intr-o foaie de stil in modul Microsoft

Pagina de test
da nu da da nu va fi testat
document.styleSheets[1].addRule('pre', 'font: 14px verdana')

Adauga regula pre {font: 14px verdana} la a doua foaie de stil din document.

deleteRule()
Sterge o regula dintr-o foaie de stil in modul W3C

Pagina de test
nu da da da da da va fi testat
document.styleSheets[1].deleteRule(1)

Sterge a doua regula a celei de a doua foaie de stil din document.

insertRule()
Adauga o regula intr-o foaie de stil in modul W3C

Pagina de test
nu da da da da da va fi testat
var x = document.styleSheets[1];
x.insertRule('pre {font: 14px verdana}',x.cssRules.length)

Adauga regula pre {font: 14px verdana}in a doua foaie de stil din documenr la ultima pozitie(length a matricii cssRules ).

Din pacate al doilea argument este necesar. Ar trebui sa se impliciteze la cssRules.length.

removeRule()
Sterge o regula dintr-o foaie de stil in modul Microsoft

Pagina de test
da nu da da nu va fi testat
document.styleSheets[1].removeRule(1)

Elimina a doua regula din a doua foaie de stil din document.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Proprietatile foilor de stil

Foile de stil si regulile lor au mai multe proprietati. Nu sunt foarte interesante, si incompatibilitatile cu browserele fac ca ele sa nu poata fi folosite prea mult.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
cssText
CSS-ul unei reguli ca sir.

Pagina de test
da da da da da va fi testat
x.style.cssText

Returneaza tot stilul inline al elementului x.

da nu nu nu nu va fi testat
document.styleSheets[1].cssText

Returneaza intregul continut al foii de stil.

nu da da da da da va fi testat
document.styleSheets[1].cssRules[1].cssText

Returneaza intregul text al regulii (de exemplu pre {font: 14px verdana;}).

(Evident, IE necesita rules in loc de cssRules.)

da da da da da va fi testat
document.styleSheets[1].cssRules[1].style.cssText

Returneaza toate declaratiile regulii(de exemplu font: 14px verdana;).

(Evident, IE necesita rules in loc de cssRules.)

disabled
Verifica daca foaia de stil este dezactivata

Pagina de test
da da da da da va fi testat
document.styleSheets[1].disabled = true

Dezactiveaza a doua foaie de stil din document. (Setarea ca si false activeaza din nou foaia de stil).

href
href-ul unei foi de stil

Pagina de test
da+ da da da da da va fi testat
document.styleSheet[0].href

Ia href-ul foii de stil. Aceasta este calea relativa in IE; un URL complet in alte browsere.

  • IE pana la vs 8 va permite sa schimbati href-ul.
selectorText
Selectorul unei reguli ca sir

Pagina de test
da Incorect da da da da+ va fi testat
document.styleSheets[1].cssRules[1].selectorText

Ia textul selectorului a celeli de a doua reguli din a doua foaie de stil din document.

Notati ca unele browsere returneaza texte de selectori cu LITERE MARI chiar si cand foaia de stil contine selectori cu litere mici. Folositi selectorText.toLowerCase() pentru toate comparatiile.

  • Opera va permite sa setati selectorText.
  • IE imparte toti selectorii cu virgula in mai multe reguli(p#test, li devine doua reguli, una pentru p#test, una pentru li). Aceasta nu este calculata ca si bug in acest test; IE arata selectorText coect inconformitate cu regulile sale.
  • IE9, totusi, persista in acest comportament chiar daca suportul sau pentru cssRules ar trebui sa fie in conformitate cu standardele si de aceea returneaza p#test, ul. Ce returneaza, totusi , este p#test. Presupun ca acesta este un bug in implementarea selectorText, si nu in foaie de stil propriu zisa(i.e. regula se aplica la ambele p#test si ul.)
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Diverse

Lucruri diverse. In general nu sunt importante.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
createStyleSheet()
Creaza o foaie de stil

Pagina de test
da nu nu nu nu va fi testat
document.createStyleSheet('extrastyle.css')

Creaza o alta foaie de stil si o introduce in matriceaappend it to the  styleSheets[] .

getPropertyPriority()
Ia prioritatea proprietatii(!important sau nu)

Pagina de test
nu da da da da da va fi testat
document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')

Returneaza important cand stilul este marcat !important. Returneaza gol in caz contrar.

(Evident, IE necesita rules in loc de cssRules.)

getPropertyValue()
Ia valoarea proprietatii unui stil

Pagina de test
nu da da da da da va fi testat
document.getElementById('test').style.getPropertyValue('color')
document.styleSheets[1].cssRules[1].style.getPropertyValue('color')

Ia declaratia culoare a obiectului de stil. Aceasta functioneaza pe toate obiectele de stil. Binenteles, citirea style.color este mult mai facila.

ownerNode
Proprietarul unei foi de stil

Pagina de test
nu da da da da da va fi testat
document.styleSheets[1].ownerNode

Acceseaza nodulproprietarului foii de stil, de obicei un tag <link> sau <style>.

parentStyleSheet
Foaia de stil o declaratie este parte din

Pagina de test
nu da da da da da va fi testat
document.styleSheets[1].cssRules[1].parentStyleSheet

Acceseaza foaia de stil tata a regulii, care este din nou document.styleSheets[1].

removeProperty()
Elimina o declaratie de stil in totalitate

Pagina de test
nu da da da da Incomplet va fi testat
document.styleSheets[1].cssRules[1].style.removeProperty('color')
document.getElementById('test').style.removeProperty('color')

Elimina declaratia de culoare din a doua regula a celei de a doua foaie de stil de pe pagina sau elementul cu ID="test".

  • Opera refuza sa elimine ultima proprietate ramasa a regulii.
setProperty()
Seteaza o proprietate de stil

Pagina de test
nu da da da da va fi testat
x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color','#00cc00',null)

Seteaza culoarea lui x sau a doua regula in a doua foaie de stil in verde.

Ca de obicei , null este necesar. (Valori implicite, careva?) Puteti folosii important in loc.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
Commercial cleaning Guide