Interacțiunea dintre JavaScript și CSS. Proprietăți CSS pentru controlul tipografiei web. conținutul acestui antet nu va fi afișat

Interoperabilitate între JavaScript și CSS

Foile de stil în cascadă (CSS) sunt standardul reprezentare vizuala documente HTML. Foile de stil în cascadă sunt concepute pentru a fi utilizate de către designeri: vă permit să definiți cu precizie fonturile, culorile, marginile, alinierea, opțiunile de chenar și chiar coordonatele elementelor dintr-un document.

Dar sunt de asemenea de interes pentru programatorii care scriu în JavaScript pentru client, deoarece vă permit să creați efecte animate, cum ar fi conținutul documentului care se estompează din marginea dreaptă, de exemplu, sau listele care se prăbușesc și se extind, oferind utilizatorului control asupra cât de mult conținutul este afișat.

Gestionarea stilurilor inline

Cel mai simplu mod de a controla stilurile CSS este de a manipula atributul de stil al elementelor individuale ale documentului. La fel ca majoritatea atributelor HTML, atributul de stil corespunde unei proprietăți cu același nume pe obiectul Element și poate fi manipulat în scripturi JavaScript. Cu toate acestea, proprietatea stil are o caracteristică distinctivă: valoarea sa nu este un șir, ci un obiect CSSStyleDeclaration. Proprietățile acestui obiect reprezintă proprietățile CSS definite în atributul stil HTML.

De exemplu, pentru a afișa conținutul unui element de text e într-un font mare, aldine, albastru, puteți face următoarele pentru a scrie valorile dorite în proprietățile care corespund proprietăților pentru dimensiunea fontului, greutatea fontului și stilul de culoare. :

E.style.fontSize = "24px"; e.style.fontWeight = „bold”; e.style.color = „albastru”;

Când lucrați cu proprietățile de stil ale unui obiect CSSStyleDeclaration, amintiți-vă că toate valorile trebuie specificate ca șiruri. Într-o foaie de stil sau într-un atribut de stil puteți scrie:

Poziție: absolută; familie de fonturi: sans-serif; culoare de fundal: #ffffff;

Pentru a face același lucru pentru elementul e din JavaScript, trebuie să includeți toate valorile între ghilimele:

E.style.position = „absolut”; e.style.fontFamily = "sans-serif"; e.style.backgroundColor = "#ffffff";

Rețineți că punctele și virgulă nu sunt incluse în valorile șirului. Acestea sunt punct și virgulă folosite în sintaxa JavaScript. Punctele și virgulă utilizate în tabele Stiluri CSS, nu este necesar în valori de șir, instalat folosind JavaScript.

De asemenea, rețineți că toate proprietățile de poziționare trebuie să includă unități de măsură. Acesta este:

E.style.left = 300; // Incorect: acesta este un număr, nu un șir e.style.left = "300"; // Incorect: lipsesc unități e.style.left = "300px"; // Dreapta

Unitățile sunt necesare atunci când setați proprietățile de stil în JavaScript - la fel ca atunci când setați proprietățile de stil în foile de stil.

Multe proprietăți ale stilului CSS, cum ar fi dimensiunea fontului, conțin o cratimă în numele lor. JavaScript interpretează o cratimă ca un semn minus, astfel încât următoarea expresie nu poate fi scrisă:

E.style.font-size = "24px"; // Eroare de sintaxă!

Astfel, numele proprietăților obiectului CSSStyleDeclaration sunt ușor diferite de numele proprietăților CSS reale. Dacă un nume de proprietate CSS conține cratime, numele de proprietate al obiectului CSSStyleDeclaration este construit prin eliminarea cratimelor și scrierea cu majuscule a litera imediat următoare fiecăreia. Cu alte cuvinte, proprietatea CSS border-left-width este accesată prin proprietatea borderLeftWidth, iar proprietatea CSS font-family poate fi accesată prin proprietatea fontFamily.

În plus, atunci când o proprietate CSS, cum ar fi float, are un nume care se potrivește cu un cuvânt rezervat JavaScript, numele este prefixat cu „css” pentru a crea un nume valid de proprietate a obiectului CSSStyleDeclaration. Adică să citești sau să schimbi valoarea Proprietăți float CSS element, ar trebui să utilizați proprietatea cssFloat a obiectului CSSStyleDeclaration.

Atributul de stil al unui element HTML este stilul său inline și suprascrie orice reguli de stil în Tabel CSS. Stilurile inline sunt, în general, convenabile de utilizat pentru setarea valorilor de stil și aceasta este abordarea folosită în toate exemplele de mai sus. Scripturile pot citi proprietățile unui obiect CSSStyleDeclaration care reprezintă stiluri inline, dar returnează valori semnificative numai dacă au fost setate anterior de un script JavaScript sau dacă elementul HTML are un atribut de stil inline care stabilește proprietățile dorite.

De exemplu, un document poate include o foaie de stil care setează marginea din stânga pentru toate paragrafele la 30 de pixeli, dar citirea proprietății leftMargin a unuia dintre aceste elemente va returna o linie goală, cu excepția cazului în care acel paragraf are un atribut de stil care înlocuiește valoarea setată de foaia de stil.

Citirea stilului inline al unui element este deosebit de dificilă atunci când citiți proprietăți de stil care au unități și proprietăți de notație scurtă: scriptul trebuie să includă mult mai multe implementare simplă parsarea șirurilor cu stiluri CSS pentru a permite extragerea și utilizare ulterioară valorile. În general, stilul elementului inline este convenabil de utilizat numai pentru setarea stilurilor.

Uneori este mai ușor să citiți sau să scrieți o singură linie în stilul inline al unui element decât să accesați obiectul CSSStyleDeclaration. Pentru a face acest lucru, puteți utiliza metodele getAttribute() și setAttribute() ale obiectului Element sau proprietatea cssText a obiectului CSSStyleDeclaration:

// Ambele instrucțiuni de mai jos setează atributul de stil // al elementului e la șirul s: e.setAttribute("style", s); e.style.cssText = s; // Ambele instrucțiuni de mai jos primesc o valoare atribut de stil// elementul e ca șir: s = e.getAttribute("style"); s = e.style.cssText;

Creare efecte de animație folosind CSS

Una dintre cele mai tipice zone aplicarea CSS este reproducerea efectelor de animație vizuală. Le puteți implementa folosind metodele setTimeout() sau setInterval(), folosindu-le pentru a organiza apeluri multiple către o funcție care schimbă stilul inline al unui element.

// Face elementul e relativ poziționabil și îl deplasează la stânga și la dreapta. // Primul argument poate fi obiectul element sau valoarea atributului id al // elementului dorit. Dacă treceți o funcție ca al doilea argument, aceasta va fi apelată cu e // ca argument când animația se termină de redare. Al treilea argument determină // valoarea offset-ului elementului e. Implicit la 5 pixeli. // Al patrulea argument determină cât de mult ar trebui să se joace efectul. // Implicit efectul durează 500 ms. funcția shake(e, oncomplete, distanță, timp) ( // Procesează argumente if (typeof e === „șir”) e = document.getElementByld(e); if (!time) time = 500; if (!distance) distanta = 5; var originalStyle = e.style.cssText // Salvați stilul original e.style.position = "relativ"; Amintiți-vă de începutul animației animate(); // Începe animația // Această funcție verifică timpul scurs și modifică coordonatele lui // Dacă este timpul să închei animația, restabilește starea inițială elementul e. În caz contrar, schimbă coordonatele lui e și programează următoarea sa funcție animate() ( var now = (new Date()).getTime(); // Obține timpul curent var elapsed = now-start; /. / Cât timp a trecut de la început var fracție = timp scurs // Fracție de timp necesar?

Atât shake() cât și fadeOut() acceptă o funcție opțională sună din nouîn al doilea argument. Dacă se specifică această funcție, aceasta va fi apelată când efectul de animație s-a terminat. Elementul căruia i-a fost aplicat efectul de animație va fi transmis funcției de apel invers ca argument. Următorul Marcaj HTML creează un buton care, atunci când este apăsat, redă un efect de agitare și apoi un efect de dizolvare:

Click pe mine!

Observați cât de similare sunt funcțiile shake() și fadeOut() între ele. Ambele pot servi ca șabloane pentru implementarea efectelor de animație similare folosind proprietăți CSS.

Stiluri calculate

Proprietatea de stil a elementului specifică stilul inline al elementului. Are un avantaj față de toate foile de stil și poate fi folosit cu succes pentru a seta proprietăți CSS pentru a schimba aspectul vizual al unui element. Cu toate acestea, în caz general nu are rost să-l numiți atunci când trebuie să aflați stilurile reale aplicate unui element. Ceea ce este necesar în acest caz se numește stil calculat.

Stilul calculat al unui element este setul de valori ale proprietăților pe care browserul le-a obținut (sau calculat) din stilul inline și toate regulile din toate foile de stil care se aplică elementului: este setul de proprietăți utilizat efectiv la randarea element. La fel ca stilurile inline, stilurile calculate sunt reprezentate de un obiect CSSStyleDeclaration. Cu toate acestea, spre deosebire de stilurile inline, stilurile calculate sunt doar pentru citire. Aceste stiluri nu pot fi modificate, dar obiectul CSSStyleDeclaration calculat vă permite să cunoașteți exact valorile proprietăților stilului pe care browserul le-a folosit la randarea elementului corespunzător.

Puteți obține stilul calculat al unui element folosind metoda getComputedStyle() a obiectului Window. Primul argument al acestei metode este elementul al cărui stil calculat pe care doriți să-l returnați. Cel de-al doilea argument este necesar și de obicei trece șirul nul sau gol, dar poate trece și un șir cu un nume de pseudo-element CSS, cum ar fi „::before”, „::after”, „:first-line” sau „ :prima literă":

Var title = document.getElementById("section1title"); var titlestyles = window.getComputedStyle(element, null);

Valoarea returnată a metodei getComputedStyle() este un obiect CSSStyleDeclaration care reprezintă toate stilurile aplicate elementului (sau pseudo-elementului) specificat. Există multe diferențe semnificative între obiectele CSSStyleDeclaration care reprezintă stiluri inline și stiluri calculate:

Proprietățile de stil calculate sunt doar pentru citire.

Proprietățile stilurilor calculate au valori absolute: Unitățile de măsură relative, cum ar fi procentele și punctele, sunt convertite în valori absolute. Orice proprietate care specifică dimensiunea (cum ar fi lățimea marginii sau dimensiunea fontului) va avea o valoare exprimată în pixeli. Adică, valoarea sa va fi un șir cu sufixul „px”, așa că va trebui să îl implementați analizare, dar nu va trebui să vă faceți griji cu privire la definirea și conversia unităților de măsură. Valorile proprietăților care definesc culoarea vor fi returnate în formatul „rgb(#,#,#)” sau „rgba(#,#,#,#)”.

Proprietățile care sunt notații scurte nu sunt evaluate - doar proprietățile fundamentale pe care se bazează. De exemplu, nu ar trebui să încercați să obțineți valoarea proprietății marginii, ci să accesați proprietățile marginLeft, marginTop etc.

Proprietatea cssText a stilului calculat nu este definită.

Lucrul cu stiluri calculate poate fi destul de dificil, iar accesarea acestora poate să nu returneze întotdeauna informațiile pe care le așteptați. Luați în considerare proprietatea font-family ca exemplu: acceptă o listă de nume de familii de fonturi separate prin virgulă pentru compatibilitate. Când citiți proprietatea fontFamily a unui stil calculat, așteptați valoarea celui mai specific stil familiei de fonturi aplicate elementului. Și în acest caz, poate fi returnată o valoare precum „arial, helvetica, sans-serif”, care nu spune nimic despre tipul fontului real utilizat.

Gestionarea foilor de stil

Până acum am văzut cum să setăm și să obținem valorile proprietăților în stil CSS și clasele individuale de elemente. Cu toate acestea, există și posibilitatea de a manipula foile de stil CSS în sine. De obicei, acest lucru nu este necesar, dar uneori poate fi util și această secțiune va descrie pe scurt tehnicile posibile.

Când lucrați cu foile de stil în sine, veți întâlni două tipuri de obiecte. Primul tip este obiectele Element, care reprezintă elemente și care conțin sau fac referire la foi de stil. Acestea sunt elemente normale ale documentului, iar dacă definiți un atribut id pe ele, le puteți selecta folosind metoda document.getElementById().

Al doilea tip de obiect sunt obiectele CSSStyleSheet, care reprezintă foile de stil în sine. Proprietatea document.styleSheets returnează un obiect asemănător matricei numai în citire care conține obiecte CSSStyleSheet reprezentând foile de stil ale documentului. Dacă definiți un atribut de titlu pe un element sau care definește sau face referire la o foaie de stil, acel obiect va fi disponibil ca o proprietate a obiectului CSSStyleSheet cu numele specificat în atributul titlu.

Următoarele secțiuni descriu ce operații pot fi efectuate asupra acestor elemente și obiecte foaie de stil.

Activarea sau dezactivarea foilor de stil

Cea mai simplă tehnică de lucru cu foi de stil este și cea mai portabilă și fiabilă. Elementele și obiectele CSSStyleSheet definesc o proprietate dezactivată care poate fi citită și scrisă de scripturile JavaScript. După cum sugerează și numele, dacă proprietatea dezactivată este setată la true, foaia de stil este dezactivată și va fi ignorată de browser.

Acest lucru este demonstrat în mod clar de funcția disableStylesheet() de mai jos. Dacă îi dați un număr, îl va interpreta ca un index în tabloul document.styleSheets. Dacă îi treceți un șir, îl va interpreta ca Selector CSS, trecând-o la metoda document.querySelectorAll() și setând proprietatea dezactivată a tuturor elementelor primite la true:

Funcția disableStylesheet(ss) ( if (tip de ss === „număr”) document.styleSheets.disabled = true; else ( var sheets = document.querySelectorAll(ss); for (var i = 0; i

Obținerea, inserarea și eliminarea regulilor din foile de stil

Pe lângă capacitatea de a activa sau dezactiva foile de stil, obiectul CSSStyleSheet definește și un API pentru preluarea, inserarea și eliminarea regulilor de stil din foile de stil. IE8 și versiunile anterioare implementează un API ușor diferit de cel standard implementat de alte browsere.

În general, manipularea directă a foilor de stil este rareori utilă. În loc să adăugați reguli noi la foile de stil, de obicei este mai bine să le lăsați statice și să lucrați cu proprietatea className a elementului. În același timp, dacă este necesar să se ofere utilizatorului posibilitatea control total foi de stil pentru pagini web, poate fi necesar să aranjați manipularea dinamică a tabelelor.

Obiectele CSSStyleSheet sunt stocate în matricea document.styleSheets. Obiectul CSSStyle Sheet are o proprietate cssRules care stochează o serie de reguli de stil:

Var firstRule = document.styleSheets.cssRules;

În IE, această proprietate se numește reguli, nu cssRules.

Elementele cssRules sau ale matricei de reguli sunt obiecte CSSRule. În API-ul standard, un obiect CSSRule poate reprezenta orice tip de regulă CSS, inclusiv regulile @, cum ar fi directivele @import și @page. Cu toate acestea, în IE, matricea de reguli poate conține doar regulile reale ale foii de stil.

Obiectul CSSRule are două proprietăți care pot fi utilizate într-un mod portabil. (În API-ul standard, regulile non-stil nu au aceste proprietăți, așa că poate fi necesar să le omiteți atunci când parcurgeți foaia de stil.) Proprietatea selectorText este un selector CSS pentru a acestei reguli, iar proprietatea stil este o referință la un obiect CSSStyleDeclaration care poate fi scris, care descrie stilurile asociate cu acest selector. Ca o reamintire, CSSStyleDeclaration este același tip care este folosit pentru a reprezenta stilurile inline și calculate.

Obiectul CSSStyleDeclaration poate fi folosit pentru a citi stiluri existente sau pentru a crea noi stiluri în reguli. Adesea, atunci când parcurgeți o foaie de stil, textul regulii în sine este cel care interesează, nu reprezentarea analizată a acesteia. În acest caz, puteți utiliza proprietatea cssText a obiectului CSSStyleDeclaration, care conține regulile din reprezentarea textului.

Pe lângă posibilitatea de a prelua și modifica regulile existente ale foii de stil, aveți posibilitatea de a adăuga reguli și de a elimina reguli din foaia de stil. Interfața standard a aplicației definește metodele insertRule() și deleteRule() care vă permit să adăugați și să eliminați reguli:

Document.styleSheets.insertRule("H1 ( text-weight: bold; )", 0);

Browserul IE nu acceptă metodele insertRule() și deleteRule(), dar definește funcțiile addRule() și removeRule() care sunt aproape echivalente cu acestea. Singura diferență majoră (în afară de numele funcțiilor) este că addRule() se așteaptă să primească un selector și un stil în forma textîn două argumente separate.

Crearea de foi de stil noi

În cele din urmă, puteți crea foi de stil complet noi și le puteți adăuga în document. În majoritatea browserelor, această operație este efectuată folosind tehnici standard implementate în DOM: un nou element este creat și inserat în documentul din secțiune, apoi conținutul foii de stil este adăugat folosind proprietatea innerHTML. Cu toate acestea, în IE8 și mai târziu versiuni anterioare un nou obiect CSSStyleSheet trebuie creat folosind o metodă non-standard document.createStyleSheet()și adăugați text în foaia de stil folosind proprietatea cssText.

Exemplul de mai jos demonstrează crearea de noi tabele:

// Adaugă o foaie de stil la document și o umple cu stilurile specificate. // Argumentul stiluri poate fi un șir sau un obiect. Dacă este un șir, // este interpretat ca text foaie de stil. Dacă este un obiect, atunci fiecare // proprietate a acestuia trebuie să definească o regulă de stil care să fie adăugată la tabel. // Numele proprietăților sunt selectoare, iar valorile lor sunt funcția de stiluri corespunzătoare addStylesheet(styles) ( // Mai întâi trebuie să creați o nouă foaie de stil var styleElt, styleSheet; if (document.createStyleSheet) ( //Dacă IE API este definit, folosește-l styleSheet = document .createStyleSheet() else ( var head = document.getElementsByTagName("head"); styleElt = document.createElement("style"); // Element nou head.appendChild(styleElt); // Inserați în // Acum noul tabel este la sfârșitul matricei styleSheet = document.styleSheets;

) // Inserați stiluri în tabel if (typeof styles === „șir”) ( // Argumentul conține definiția textului foii de stil if (styleElt) styleElt.innerHTML = styles; else styleSheet.cssText = styles; // IE API ) else ( // Obiect argument cu reguli de inserare var i = 0; for(selector în stiluri) ( if (styleSheet.insertRule) ( var rule = selector + " (" + stiluri + ")"; styleSheet.insertRule (regulă, i++ ) else ( styleSheet.addRule(selector, stiluri, i++); ) ) ) )

O zi bună, dragi abonați! În html este posibil să faci un obiect vizibil sau invizibil, și există diverse opțiuni

și afișează conținutul diferit.

Deci, să începem.

Să ne imaginăm o situație: trebuie să încadrăm o bucată de text destul de mare într-un bloc de 200 pe 300 de pixeli (în principiu, poate fi orice).

Dacă setăm blocul cu ajutorul stilurilor la o lățime de 200 și o înălțime de 300 de pixeli, atunci se va întinde în înălțime la fel de mult ca și conținutul din bloc. Dar avem nevoie de strict 300 de pixeli în înălțime! În acest caz, facem următoarele:

Pentru blocul nostru setăm proprietatea overflow cu valoarea scroll . Blocul devine dimensiunea de care avem nevoie, tot conținutul se încadrează în el și apar bare de defilare.

Valorile proprietăților de depășire sunt prezentate mai jos:

overflow – controlează dimensiunea unui obiect dacă conținutul acestuia nu poate fi afișat în întregime.

Valori:

auto – determinat de browser.

vizibil – dimensiunea este întinsă în așa măsură încât tot conținutul este vizibil.

ascuns – orice depășește limitele elementului pur și simplu nu este afișat.

defilare – Se afișează tot conținutul și apar bare de defilare.

Pentru cazul nostru specific, un exemplu:

XHTML

#st1( overflow: scroll; width:200px; height:300px; ) Un fragment destul de mare de text

Există o proprietate care vă permite să controlați vizibilitatea conținutului elementului.

overflow – controlează dimensiunea unui obiect dacă conținutul acestuia nu poate fi afișat în întregime.

Pentru cazul nostru specific, un exemplu:

vizibilitate - controlează în CSS vizibilitatea conținutului unui element.

conținutul acestui antet nu va fi afișat

Următoarea proprietate care vă permite să controlați vizibilitatea unui bloc este afișarea.

overflow – controlează dimensiunea unui obiect dacă conținutul acestuia nu poate fi afișat în întregime.

display - determină modul în care va fi afișat elementul

none - elementul nu este afișat

bloc - întrerupe linia înainte și după element (adică elementul nu poate fi pe aceeași linie cu alte elemente)

inline - nu rupe linia

Să presupunem că avem text, printre acest text există o etichetă sau poate fi un link și avem nevoie ca conținutul acestei etichete sau link să fie afișat pe o linie separată, apoi pentru ele vom seta proprietate de afișare cu blocul de valori. Și invers, dacă este necesar, să spunem că eticheta nu se află pe o linie separată, ci în aceeași cu textul, atunci îi setăm proprietatea de afișare cu valoarea inline .

Pentru cazul nostru specific, un exemplu:

va fi pe aceeași linie cu textul afișat pe o linie separată

Valoarea none merită o atenție specială. Dacă setăm proprietatea de afișare la orice element cu valoarea none, atunci acest element nu va fi afișat. Mai mult, spre deosebire de proprietatea de vizibilitate cu valoarea ascunsă, acest element nu va fi afișat complet (proprietatea de vizibilitate cu valoarea ascunsă nu va afișa conținutul elementului, iar elementul în sine își va lua locul în pagină).

Rezumat: Acces la foile de stil. Proprietățile foii de stil. Adăugarea și eliminarea regulilor. Schimbarea stilurilor de elemente. Numele claselor de elemente.

Să aruncăm o privire (în acest moment) exemplu teoretic - să existe un site web unde să fie prezentate o serie de articole tehnice. Vrem să evidențiem unele dintre aceste articole cu un carusel animat, dar cum rămâne cu utilizatorii care nu au JavaScript activat dintr-un anumit motiv? Reamintind ceea ce am învățat despre JavaScript discret, dorim ca funcționalitatea site-ului Web să funcționeze și pentru acei utilizatori, dar este posibil să dorim să proiectăm site-ul diferit pentru acești utilizatori, astfel încât aceștia să poată utiliza site-ul confortabil, chiar și fără un carusel.

Dacă doriți să ștergeți această regulă, puteți apela funcția stylesheet.deleteRule(index), unde index va fi indexul regulii care va fi ștearsă.

În exemplul de prezentare a articolelor, puteți crea o regulă care face ca proprietatea de afișare să fie egală cu niciunul pentru toate articolele despre HTML și JavaScript - uitați-vă la exemplul carusel (http://dev.opera.com/articles/view/dynamic- style-css-javascript/carousel .html) pentru a-l vedea în acțiune.

Notă: IE nu implementează reguli conform standardelor. Folosește reguli în loc de atributul cssRules. IE folosește, de asemenea, removeRule în loc de deleteRule și addRule( selector , rule, index) în loc de insertRule .

Schimbarea stilurilor de elemente

Acum ar trebui să înțelegeți cum să editați foile de stil asociate unei pagini și să creați și să modificați regulile CSS în cadrul acestora. Ce se întâmplă dacă doriți să schimbați un anumit element din DOM? Folosind API-ul DOM puteți accesa anumite elemente ale paginii. Revenind la exemplul carusel, puteți observa că funcțiile sunt definite în așa fel încât atunci când dați clic pe un articol, acel articol este evidențiat, în timp ce textul principal al articolului este afișat mai jos.

Folosind DOM, accesăm obiectul de stil, care descrie stilul documentului. Acest obiect de stil este definit ca CSSStyleDeclaration; explicatie detaliata Acest lucru poate fi găsit în documentația W3C pentru interfața CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Obiectul de stil nu funcționează în același mod ca unele dintre celelalte proprietăți definite pe elementul HTML. Spre deosebire de element.href sau element.id care returnează șiruri, element.style returnează un obiect. Aceasta înseamnă că nu este posibil să setați un stil prin alocarea unui șir la element.style .

Obiectul de stil are atribute care corespund diferitelor proprietăți CSS specificate. De exemplu, style.color returnează culoarea specificată pe element. Făcând element.style.color = „roșu”;

Puteți schimba dinamic stilul. Mai jos este o funcție care transformă în roșu culoarea unui element atunci când trece id-ul elementului.

funcția colorElementRed(id) ( var el = document.getElementById(id); el.style.color = "red"; )

De asemenea, puteți utiliza setAttribute(key, value) pentru a stila un element. De exemplu, setați culoarea unui element la roșu apelând element.setAttribute("stil", "culoare: roșu"); , dar aveți grijă, deoarece aceasta elimină orice modificări aduse obiectului de stil. Când stilul unui element este specificat în acest fel, este la fel ca și cum l-am specifica ca declarație de atribut de stil element html

. Acest stil va fi aplicat numai atunci când importanța și specificitatea regulii sunt mai mari decât alte reguli aplicate elementului (specificitatea este explicată în Capitolul 28 despre Moștenirea și cascada CSS).

Unii dintre voi s-ar putea să vă întrebați ce se întâmplă atunci când o proprietate este stabilită

Și în aceeași zi, oamenii de știință au făcut griji gravitației. Coincidență? Nu în caz contrar. Modelul din articolul precedent a acoperit 90% din cazurile de mai multe etape, iar simplitatea sa este destul de evidentă. Dar ați dori să auziți despre un model care funcționează ~100% din timp și este, de asemenea, ridicol de complicat? Atunci te invit să mergi cu mine la următorul paragraf...

Lipsesc 10%

În timp ce CSS-ul se încarcă, analizatorul se blochează, ceea ce înseamnă că randarea este blocată pentru tot conținutul ulterior. Conform paginii demo din articolul de mai sus, randarea este împărțită în următoarele etape.

Telefoane mobile Calculatoare

Acest lucru este grozav pe mobil, unde fiecare CSS pentru o secțiune se blochează pe sine și toate secțiunile ulterioare, dar pe desktop, CSS-ul pentru principal și comentariile din coloana din stânga împiedică redarea despre mine în coloana din dreapta, chiar dacă CSS-ul pentru despre mine se încarcă primul. Acest lucru se datorează faptului că ordinea de blocare este determinată de ordinea în cod sursa, dar pentru acest design ar fi bine ca coloana din dreapta să apară înaintea celei din stânga.

Trebuie să construim un arbore de dependență în care redarea fiecărui element este blocată înainte de randarea altor elemente specifice. De asemenea, dependențele ar trebui să se poată schimba atunci când lățimea ferestrei de vizualizare se modifică. Sună tentant, nu-i așa?

Acest lucru se poate face folosind proprietăți CSS personalizate...

Proprietăți CSS personalizate

Dar pentru conversația noastră de astăzi este suficient să știm asta...

Html ( fundal: var(--gloop, roșu); )

Aici setăm fundalul paginii la valoarea din proprietatea personalizată --gloop, iar dacă nu are una, setăm-o la roșu ca alternativă. Ca urmare, fundalul va fi roșu. Dar dacă adaugi:

:rădăcină ( --gloop: verde; )

...am setat proprietatea personalizată --gloop la verde, deci pagina este acum verde. Dar dacă adaugi:

:root ( --gloop: initial; )

Valoarea inițială este tratată într-un mod special aici. De fapt, suprascrie --gloop, astfel încât fundalul paginii este acum din nou roșu.

Construirea unui arbore de dependență de randare folosind proprietăți CSS personalizate

În timp ce terminam acest titlu, m-am bucurat deja cât de inteligent sunt.

HTML [ "/main.css", "/comments.css", "/about-me.css", "/footer.css" ].map(url => ( const link = document.createElement("link" ); link.rel = "stylesheet"; link.href = url;

Deci, puteți încărca /initial.css folosind sau încorpora, deoarece încă blochează randarea. Dar încărcăm toate celelalte foi de stil în mod asincron.

initial.css principal, .comments, .about-me, footer (afișare: niciunul; ) :root ( --main-blocker: niciunul; --comments-blocker: niciunul; --about-me-blocker: niciunul; - -footer-blocker: none ) /* Alte stiluri inițiale... */;

Ascundem secțiunile pe care nu suntem încă pregătiți să le afișam, apoi pentru fiecare secțiune creăm o proprietate personalizată de „blocare”.

main.css :root ( --main-blocker: initial; ) main ( display: var(--main-blocker, block); ) /* Alte stiluri de conținut principal... */

Conținutul principal nu are dependențe de afișare. Odată ce CSS-ul este încărcat, blocantul său este anulat (cu inițiala) și redat.

comments.css :root ( --comments-blocker: var(--main-blocker); ) .comments (afisare: var(--comments-blocker, block); ) /* Alte stiluri de comentarii... */

Comentariile nu ar trebui să fie afișate înaintea conținutului principal, astfel încât blocarea comentariilor este asociată cu --main-blocker . Block.comments devine vizibil de îndată ce acest CSS este încărcat și --main-blocker este anulat

about-me.css :root ( --about-me-blocker: var(--comments-blocker); ) .about-me (afisare: var(--about-me-blocker, block); )

Similar cu codul de mai sus, .about-me depinde de CSS și de comentarii. Dar când pagina este mai largă, este redată în două coloane, așa că nu mai avem nevoie ca .about-me să depindem de comentarii pentru afișare:

@media (min-width: 600px) ( :root ( --about-me-blocker: initial; ) ) /* Alte stiluri pentru about-me... */

Gata! Când lățimea ferestrei de vizualizare este de peste 600 px, .about-me este redat imediat după încărcarea CSS-ului său.

footer.css :rădăcină ( --footer-blocker: var(--main-blocker, var(--about-me-blocker)); ) subsol (afișare: var(--footer-blocker, bloc); ) / * Alte stiluri... */

Subsolul ar trebui să apară după conținutul principal și secțiunile despre mine. Pentru a face acest lucru, --footer-blocker își ia valoarea din --main-blocker , dar imediat după anulare --main-blocker --footer-blocker cade înapoi la valoarea luată din --about-me-blocker .

Demo

Necesar Chrome Canary sau Firefox.

În această demonstrație, CSS-ul este încărcat asincron, durând aproximativ 0-5 secunde pentru a încărca fiecare fișier. În ciuda acestui fapt, pagina nu va apărea niciodată în neregulă, iar fiecare secțiune va apărea cât mai curând posibil, în funcție de lățimea browserului.

Dar... este acest lucru practic?

Această metodă este mult mai complexă, cu beneficii minime și probleme uriașe de compatibilitate inversă. Dar demonstrează puterea proprietăților CSS personalizate pe care soluții precum variabilele de compilare Sass nu pot.

Dacă chiar vrei să faci ceva asemănător astăzi, atunci poți să-ți asumi cea mai mare parte a muncii încărcare asincronă CSS utilizând loadCSS și adăugând clase odată ce anumite stiluri sunt încărcate (), deși acest lucru va duce la o mulțime de probleme specifice rezolvate prin hack-uri.

Bănuiesc că acest articol poate fi considerat un „exemplu distractiv”, dar abia am început să descoperim puterea proprietăților personalizate CSS.

Mulțumesc lui Remy Sharp pentru corecții. Voi avea vreodată un articol fără greșeli de ortografie? Nidokgah.

Puteți seta atributele diferitelor stiluri direct în marcaj sau puteți utiliza o foaie de stil. Proprietatea poate fi folosită pentru a atribui a Clasa CSS la un stil de meniu care controlează un aspect al aspectului controlului. Următorul exemplu arată cum să specificați o proprietate pentru un număr de proprietăți care puteți apoi referire într-o foaie de stil.

...

Rețineți că este cea mai bună practică fie să specificați stiluri inline în marcaj, fie să utilizați proprietatea și să specificați stiluri folosind o foaie de stil. Nu este recomandat să specificați atât stiluri inline, cât și să utilizați o foaie de stil, deoarece ar putea rezulta un comportament neașteptat. Pentru o discuție generală despre utilizarea CSS cu controalele serverului, consultați Controalele serverului Web ASP.NET și stilurile CSS.

Comportamentul și stilurile meniului

Pentru a controla aspectul porțiunii dinamice a meniului, puteți utiliza proprietățile stilului cu cuvântul „Dynamic” în nume:

Următorul exemplu creează o colecție de patru stiluri care se aplică primelor patru niveluri de elemente de meniu și ar putea fi referite într-o foaie de stil folosind valoarea.

Primul stil din colecție se aplică elementelor de meniu de la primul nivel; cel de-al doilea stil se aplică elementelor de meniu de al doilea nivel și așa mai departe. Rețineți că nu există o moștenire între stilurile de nivel, astfel încât stilurile aplicate la un nivel nu afectează nivelurile ulterioare.

Următorul exemplu creează o colecție de trei stiluri care se aplică primelor trei niveluri de elemente de meniu și care pot fi referite într-o foaie de stil.