Mi-am stabilit următoarea sarcină: fără a schimba fișierul HTML: stabiliți clase de stil separate pentru rânduri paralele și ciudate ale tabelelor cu clasa strips.
Traseul standard
Prin atribuirea unui apel acestei funcții la evenimentul de încărcare al paginii, vom obține rezultatul dorit.
Poate că pentru astăzi aceasta este soluția optimă, dar nu lasă codul HTML neatins. Mi-a fost interesant să rezolv problema numai cu ajutorul instrumentelor CSS sau cel puțin să alocăm CSS sarcina de a găsi aceste instrumente.
Soluția perfectă
Pot rezolva problema CSS "curat"? Este posibil ca browserul să accepte CSS3. După ce am studiat specificațiile, găsim o nouă pseudo-clasă: nth-child (). fără îndoială, a apărut sub influența unui subiect și datorită căruia stilurile necesare sunt foarte simplu:
Din păcate, browserele moderne, în majoritatea absolută, încă nu acceptă acest lucru. Și ce despre CSS2? Din păcate, există foarte puține instrumente potrivite aici. O parte a problemei poate fi rezolvată cu ajutorul selectorului +:
Cu toate acestea, această metodă este potrivită numai pentru tabele cu un număr relativ mic și pre-cunoscut de rânduri, în plus, nu poate fi numit convenabil. Ce a mai rămas? Rămâne să utilizați funcțiile suplimentare ale fiecărui browser separat. Am încercat să găsesc o soluție pentru versiunile Windows Internet Explorer, Mozilla și Opera.
Internet Explorer
Nu au existat probleme cu acest browser. Folosind capacitatea IE de a seta dinamic valorile pentru proprietățile CSS cu expresia (). Sarcina alternării liniilor multicolore, de exemplu, este ușor de rezolvat în felul următor:
Pentru a determina această metodă nu este una dintre proprietățile, și întregul stilul rândurilor de masă respective (adăugați oddrows și clase evenrows), codul va trebui să complice sau o tehnologie de utilizare DHTML Comportamente:
Exemplul de mai sus implementează scopul dorit: clasele necesare sunt adăugate la rânduri, în funcție de faptul că șirul este chiar sau nu. Acest comportament al etichetei tr este descris în fișierul stripy.htc:
Tehnologiile utilizate au fost introduse pentru prima dată în Internet Explorer versiunea 5, respectiv, tabelele cu clasa strips vor deveni "zebras", începând cu această versiune.
O extensie similară cu cea a DHTML Behaviors este implementată în browsere cu motorul Gecko. Dezvoltatorii web au dreptul să definească noi elemente pe pagină și să redefinească aspectul, conținutul și comportamentul celor standard. Pentru aceasta, se utilizează XBL (XML Binding Language). Această tehnologie are mai multe posibilități decât Microsoft, și se părea că nu ar exista dificultăți în rezolvarea problemei, dar nu a fost acolo.
În CSS, legarea XBL este setată ca și comportamentul folosind proprietatea -moz-binding:
A rămas în fișierul XBL stripy.xml pentru a descrie comportamentul etichetelor necesare, totuși, în ciuda tuturor eforturilor mele, nu am putut "lega" eticheta tr. nici alte etichete de tabel. Cauza acestei probleme a fost Bugzilla Bug 83830. Legarea TD (cu XBL) nu funcționează deloc. Nu contează cum nu a fost ofensator, dar sa dovedit că XBL nu ar trebui să fie luat în calcul. Din fericire, soluția a fost găsită încă!
Ajutorul a venit de la celebrul web guru Dean Edwards (Dean Edwards), care a creat pachetul XBL. permițând browserelor Gecko să utilizeze tehnologia comportamentelor Microsoft DHTML, ceea ce înseamnă că puteți folosi același fișier stripy.htc pentru a rezolva problema. ca pentru IE!
Pentru aceasta avem nevoie de două XBL-fișier: Moz-behaviors.xml (wrapper direct, puteți lua de pe site-ul Dean Edwards, cantareste mai putin de 7K) și bindings.xml (auxiliar, intermediar fișier CSS «între» și codul Moz-behaviors.xml. vezi mai jos). Acum, pentru a face fișierul .htc să funcționeze în Mozilla, aveți nevoie de următoarele:- În primul rând, trebuie să fie un document XML valid (ca în exemplul de mai sus), deoarece folosește obiectul XMLHttpRequest pentru ao încărca;
- În al doilea rând, ar trebui să fie în același director ca moz-behaviors.xml și bindings.xml;
- și, în al treilea rând, legarea XBL ar trebui să fie încadrată într-un mod similar:
În general, totul funcționează bine, dar comportamentul etichetei tr va continua să nu se poată schimba din cauza bug-ului menționat mai sus, dar inteligentul Edwards a reușit să rezolve această problemă. În cazul nostru, codul CSS trebuie completat:
Conținutul fișierului bindings.xml trebuie să fie:
Acum totul funcționează bine. Tabelele cu clasa stripy vor deveni "zebras" în browserele de pe motorul Gecko, începând cu versiunea 1.0.
Din păcate, acest reprezentant al familiei de ghiduri web nu are mecanisme de extindere comparabile cu concurenții. Da, în cea de-a 9-a versiune sunt widget-uri. dar cu ajutorul lor este imposibil să afecteze cumva funcționarea browser-ului. Ce ar trebui să fac? Opera nu a avut de ales decât să profite de recepția interzisă. Începând cu cea de-a șaptea versiune, browser-ul (ca și IE, de la versiunea 5) avea o "caracteristică" interesantă - abilitatea de a executa scripturi direct din CSS. Pentru a face acest lucru, utilizați orice proprietate CSS, care vă permite să specificați calea către fișier ca valoare. Iată un exemplu al acestei tehnici:
Opera rulează numai scriptul pentru elementele HTML existente și o singură dată. De ce să nu profitați de acest lucru și să împrumutați scenariul menționat mai sus? Am făcut acest lucru, deși recunosc că anumite dificultăți au apărut prin această metodă, și nu toate scenariile erau "ascultători": "
Acest script a fost executat cu succes în Opera și prin CSS:
În acest exemplu, funcția necesară este numită în mod direct (. Prin verificarea dacă (window.opera apare numai în Opera)), și poate fi legat la provocarea la evenimentul onload al paginii, am fost în măsură să realizeze acest lucru, după cum urmează:
Ambele versiuni vor funcționa în versiuni de Opera care suportă proprietatea className a obiectului HTMLElement pentru elementul tr. și anume începând cu versiunea 7.5. Tabelele cu clasa dungată au devenit cu succes "dungi" în cea de-a 9-a versiune a browserului, dar deja în ansamblu 8500 Opera își pierde "capacitatea unică" - această metodă nu mai funcționează. Așa că părea deja închisă, pentru că Opera rămâne deschisă.
Așadar, nu a fost posibil să realizăm tot ce a fost conceput, dar, totuși, nu avem o soluție completă, dar destul de satisfăcătoare. HTML rămâne intact, iar fișierul stil.css poate arăta astfel:
Articole similare
Trimiteți-le prietenilor: