Compatibilitate W3C DOM - CSS Vederea Modelului de Obiect

Ultima actualizare majora 20 Iulie 2010.

Tabel mobil.

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.

Aceste tabele de compatibilitate detaliaza suportul pentru W3C CSSOM specificatii de vizualizare in toate browserele moderne.

  1. Proprietati WindowView.
  2. Proprietati ScreenView.
  3. Metode DocumentView si ElementView.
  4. Proprietati ElementView.
  5. Pozitia mouseului.

Proprietati WindowView

Aceste proprietati contin dimensiunile intregii ferestre ale browserului.

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
innerWidth si innerHeight
Dimensiunile portuluid e vizualizare (interiorul ferestrei browserului)

Pagina de test 		No da da da da da va fi testat 
window.innerWidth
window.innerHeight
outerWidth si outerHeight
Dimensiunile intregii ferestre a browserului(inclusiv bara de task)

Pagina de test 		No da da da da da va fi testat 
window.outerWidth
window.outerHeight
pageXOffset si pageYOffset
Suma pixelilor a paginilor care au fost derulate

Pagina de test 		No da da da da da va fi testat 
window.pageXOffset
window.pageYOffset
screenX and screenY
Pozitia ferestrei browserului pe ecran

Pagina de test 		No da da da da Incorect va fi testat 
window.screenX
window.screenY
  • Opera calzuleaza coordonatele ferestrei de tab specifice relativ cu cuprinsul ferestrei browserului. Aceasta este de inteles avand in vedere functionarea sa cu ferestre, dar strict vorbind, este un bug. Ar trebui sa dea coordonatele ferestrei cuprinzatoare a browserului relativ fata de ecran.
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 ScreenView

Aceste proprietati au informatii despre ecran.

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
availWidth si availHeight
Latimea si lungimea disponibile pe ecran(cu exceptia barii de task a OS)

Pagina de test 		da da da da da va fi testat 
screen.availWidth
screen.availHeight
colorDepth
Adancimea culorii (in biti) ecranului

Pagina de test 		da da Incorect da da da va fi testat 
screen.colorDepth
  • Firefox 3.6 returneaza 24, in timp ce sistemul meu returneaza clar 32; toate celelalte browsere sunt de acord cu mine. Acest bug a mai fost intalnit, intr-o versiune mult anterioara a Firefox. Nu imi mai aduc aminte care.
    A fost ceva coect cu Firefox din cauza unui canal alfa sau ceva, dar atata timp cat celelalte browsere pe acelasi computer redau 32 eu continui sa vad Firefox ca si vinovat aici.
    Oricum, aceste proprietati sunt folosite numai in programe de statistica in browsere web, si acolo oamenii s-au obisnuit cu “32” chiar daca nu inteleg ce inseamna. Nimeni nu o foloseste niciodata de capul lor.
pixelDepth
In general la fel ca colorDepth

Pagina de test 		No da da Incorect da da da va fi testat 
screen.pixelDepth

Diferenta dintre colorDepth si pixelDepth este importanta doar pe masini Unix(mai vechi?) , unde vechiul X-clients poate permite aplicatiilor sa defineasca propria schema de culori. Daca este cazul, colorDepth se potriveste adancimii culorii aplicatiei iar pixelDepth adancimea culorii monitorului. In toate celelalte cazuri sunt egale.
width si height
Latimea si lungimea ecranului

Pagina de test 		da da da da da va fi testat 
screen.width
screen.height
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

Metode DocumentView si ElementView

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
elementFromPoint()
Returneaza elementul localizat la coordonatele date

Pagina de test 		da da Incorect da da Incorect da va fi testat 
document.elementFromPoint(100,100)

De ce coordonate are nevoie elementFromPoint()? Standardul pare sa fie clientX/Y.

  • Safari 4 si Opera 10.10 necesita pageX/Y.

Aceasta metoda este ca un dar pentru scripturile drag and drop. Cand utilizatorul lasa elementul tras, isi da seama care element este localizat la punctul de eliberare si porneste de acolo. Nu sunt necesare alte calcule complicate.

Totusi, trebuie sa ascundem temporar elementul tras. Dupa definitie este cel mai ridicat element pe coordonatele cerute, si trebuie sa stim e este sub el. Trucul de baza este:

releaseElement: function(e) { // called onmouseup
	var evt = e || window.event;
	draggedObject.style.display = 'none';
	var receiver = document.elementFromPoint(evt.clientX,evt.clientY);
	if (receiver.nodeType == 3) { // Opera
		receiver = receiver.parentNode;
	}
	draggedObject.style.display = '';

Acum receiver contine elementul pe care utilizatorul a lasat elementul tras.
getBoundingClientRect()
Reda dreptunghiul cuprinzator

Pagina de test 		da aproape da da da va fi testat 
x.getBoundingClientRect()

Returneaza un obiect care contine top, left, right, si bottom (toate relative fata de stanga portului de vizualizare) a dreptunghiului combinat al elementului x. In esenta, browserul calculeaza toate dreptunghiurile(vezi mai jos getClientRects()), si getBoundingClientRect() returneaza cele mai de jos (sus, stanga) sau cele mai de sus (jos, dreapta) valori gasite.

IE manevreaza coect, daca acceptam calculul incoect a dreptunghiurilor individuale.

  • Firefox nu rotunjeste coordonatele sus/jos.
getClientRects()
Reda dreptunghiurile unui element

Pagina de test 		cu bug-uri da aproape da da da va fi testat 
x.getClientRects()

Returneaza o lista cu obiectele Dreptunghiulare care contin top, left, right, si bottom (toate relative fata de stanga sus a portului de vizualizare) ale dreptunghiurilor elementului x.

Trucul aici este ca, un element inline cum ar fi <em> contine un dreptunghi pentru fiecare chenar inline (linie), si ca toate aceste dreptunghiuri sunt returnate.

  • IE5-7 returneaza mult prea multe dreptunghiuri pentru primele paragrafe de test. Numarul coect este 5 (pentru 5 linii), dar IE5.5 returneaza 9 si IE6/7 14. IE8b2 returneaza coect.
  • Mai departe, IE5-7 imparte de asemenea un element block-level cum ar fi un <p>intr-un dreptunghi pe linie. Aceasta este incoect: un element block-level ar trebui raportat ca dreptunghi.
  • In sfarsit, in IE 5-7 dreptunghiurile sunt deplasate cu 2 pixeli. In conformitate cu John Resig aceasta este cauzata de rame (invizibile, dar totusi prezente) ale elementului <html>.
  • Firefox nu aduna coordonatele sus/jos.
scrollIntoView()

Face ca un element sa se deruleze in imagine

(Nu este parte a specificatiei)



Pagina de test 		da da da da da va fi testat 
x.scrollIntoView()

Elementul x se deruleaza in vedere.

In esenta elementul x se comporta ca si cum ar fi tinta unui #hash: se deruleaza pana la stanga sus absolut.

  • Safari iPhone manevreaza coordonatele Y coect, dar deruleaza de asemenea spre marginea stanga a paginii, lucru care face ca aceasta metoda sa fie greu de folosit cand utilizatorul face zoom in.
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 ElementView

Aceste proprietati ofera informatii despre dimensiunile unui nod Element (tag HTML).

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
clientLeft si clientTop
Pozitia coltului superior stanga a campului care il contine relativ fata de coltul superior stang a intregului element(inclusiv ramei)

Pagina de test 		da da da da da va fi testat 
x.clientLeft
x.clientTop
clientWidth si clientHeight
Latimea si inaltimea campului de continut, exceptand rama si bara de derulare, dar incluzand umplutura

Pagina de test 		da da da da da va fi testat 
x.clientWidth
x.clientHeight
offsetLeft si offsetTop
Pozitia de sus si cea din stanga a elementului relativ fata de offsetParent.

Pagina de test 		Incorect da da da da da va fi testat 
x.offsetLeft
x.offsetTop
  • Cand calculam offsetTop, IE5-7 nu ia in considerare elementele cu position: relative ca offsetParents, si se muta la urmatorul offsetParent din lant. offsetLeft este calculat coect.
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
offsetParent
Elementul stramos relativ fata de offsetLeft/Top-ul calculat.

Pagina de test 		da da da da da va fi testat 
x.offsetParent

Cand calculam offsetParent al x browserul muta ramificatia DOM in sus catre stramosul lui x pana cand intalneste urmatoarele elemente. Acel element devineoffsetParent-ul lui x.

  • <body>
  • Un element cu o pozitie alta decat static.
  • Un <table>, <th> sau <td>, dar numai daca x are position: static.

Elementul <body> nu are un offsetParent. Chiar si asa elementul <html>intra cateodata in lantul offsetParent, chir daca nu ca offsetParent al elementului <body>.

In IE si Opera elementele cu position: fixed nu au un offsetParent.
offsetWidth si offsetHeight
Latimea si inaltimea intregului element, cu tot cu rama

Pagina de test 		da da da da da va fi testat 
x.offsetWidth
x.offsetHeight
scrollLeft si scrollTop
Cumulul de pixeli pe care l-a derulat elementul. Citire/scriere.

Pagina de test 		da da da da da va fi testat 
x.scrollLeft
x.scrollTop
x.scrollTop = 20
scrollWidth si scrollHeight
Latimea si inaltimea intregului camp de continut, inclusiv acele parti care sunt momentan ascunse.
Daca nu exista continut ascuns ar trebui sa fie egal cu clientX/Y.

Pagina de test 		Incorect da da da da Incorect aproape va fi testat 
x.scrollWidth
x.scrollHeight

Cand derulam elementul pana jos, scrollHeight ar trebui sa fie egal scrollTop + clientHeight.

Daca elementul nu are bara de derulare scrollWidth/Height ar trebui sa fie egal cu clientWidth/Height.

  • Cand elementul nu are bara de derulare IE face scrollHeight egal cu inaltimea actuala a continutului; si nu inaltimea elementului. scrollWidth este coect, cu exceptie in IE8, unde este deplasat cu 5 pixeli.
  • Opera reda valori incoecte, ciudate.
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

Pozitia mouseului

Calcularea pozitiei mouseului (relativ fata de ce ?) a fost o zona de dezastru JavaScript . Din fericire browserele au depus eforturi pentru a evita asta.

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
clientX,clientY
fereastra

Pagina de test 		da da da da da va fi testat 
event.clientX
event.clientY

Returneaza coordonatele mouseului relative fata de fereastra.

Pe iPhone aceasta pereche returneaza aceleasi valori ca pageX/Y. Aceasta are sens: pe iPhone zona ecranului este aceasi ca zona ferestrei si aceasi ca zona documentului.
offsetX, offsetY
tinta

Relativ fata de partea sus/stanga a cutiti de umplutura.



Pagina de test 		cu bug-uri da No cutie de rama cutie de rama cutie de continut va fi testat 
event.offsetX
event.offsetY

Returneaza coordonatele mouseului relativa fata de tinta evenimentului.

Dar maie xact care punct din rama ca punct de referinta? Specificati aspune stanga/sus a ramei de umplutura(i.e. cutia formata de continut si umplutura, dar fara margine). IE8/9 este singurul browser care a reusit asta.

  • In IE 7 si versiunile anterioare coordonatele sunt calculate relativ fata de elementul tinta cand acel element este un candidat perfect pentru a fi un offsetParent. Daca nu e cazul, coordonatele sunt calculate fata de offsetParent.

    Bug: Cand elementul gasit de aceasta regula are position: relative, IE se muta la urmatorul elementoffsetParent pentru calcularea offsetY, dar nu si offsetX.

    (Da, cititi asta de doua ori. Este complicat.)
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
pageX, pageY
document

Pagina de test 		No da da da da da va fi testat 
event.pageX
event.pageY

Returneaza coordonatele mouseului relativ fata de document. In marea majoritate a timpului asta este informatia pe care o doriti. Pentru a o primii in IE, adaugati compensarea derularii documentului fata de clientX/Y.
screenX, screenY
ecran

Pagina de test 		da da da da da va fi testat 
event.screenX
event.screenY

Returneaza coordonatele mouseului relative fata de ecran.

Pe iPhone aceasta este aproape egal cu pageX/Y, chiar daca de obicei sunt diferente de 1 sau 2 pixeli. Egalitatea are sens: pe iPhone zona ecranului este la fel ca zona ferestrei la fel ca zona documentului.
x, y
Egal cu clientX/Y

Pagina de test 		da pagina X/Y No da da da va fi testat

Nimeni nu poate explica de ce avem nevoie de x/y cand avem clientX/Y. Abordarea Firefox fata de aceasta proprietate este cea mai sanatoasa.
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
Carpet cleaning Noblesville Carpet cleaning Carmel Carpet cleaning Fishers