» » » » » Sintaxa CSS – Specificitatea şi moştenirea. Browsere.

Sintaxa CSS – Specificitatea şi moştenirea. Browsere.

CSS
CSS

Specificitatea

Specificitatea descrie ponderile relative ale diferitelor reguli. Ea determină care stiluri sunt aplicate la un element atunci când se aplică mai mult de o regulă. Pa baza specificaţiei, un selector simplu (de exemplu, H1) are o specificitate de 1, selectoare de clasă au o specificitate de 1,0, și selectoarele de identitate o specificitate de 1,0,0. Deoarece valorile specificităţii nu se reportează ca în sistemul zecimal, virgulele sunt folosite pentru a separa „cifre” (de regulă CSS având 11 elemente și 11 clase, ar avea o specificitate de 11,11, nu 121).

Astfel, următorii selectori de reguli duc la specificitatea indicată:

  • Selectori >>> Specificitatea

  • H1 {color: alb;} >>> 1

  • P EM {color: green;} >>> 2

  • .grape {color: red;} >>> 1,0

  • P.bright {color: blue;} >>> 1,1

  • P.bright EM.dark {color:yellow;} >>> 2,2

  • # id218 {color:brown;} >>> 1,0,0

  • style = „” >>> 1,0,0,0

Exemplu de specificitate

Se ia în considerare acest fragment HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=„utf-8”>
    <style>
    #xyz { color: red }
    </style>
  </head>
  <body>
    <p id=„xyz” style=„color: blue”> Pentru a demonstra specificitatea </p>
  </body>
</html>

În exemplul de mai sus, culoarea elementului p ar fi albastru. Declarația în atributul „style” va înlocui pe cea din elementul de stil, deoarece are o specificitate mai mare.

Moștenirea

Moştenirea este un element-cheie în CSS, ea se bazează pe relația ascendent-descendent pentru a opera. Moştenirea este mecanismul prin care proprietățile sunt aplicate nu numai la un element specificat, dar, de asemenea, pentru descendenții săi. Moştenirea se bazează pe ierarhia documentelor, care este ierarhia elementelor (X)HTML într-o pagină bazată pe cuiburi. Elementele descendente pot moșteni valori de proprietate CSS de la orice element de ascendet, incluzându-le. În general, elementele descendente moștenesc proprietăți legate de text, dar proprietățile legate de box nu sunt mostenite. Proprietățile care pot fi moştenite sunt de culoare, font, spațierea literelor, înălţimea liniei, stilul listei, alinierea textului, transformarea textului, vizibilitate, spațiu gol și spațierea cuvintelor. Proprietățile care nu pot fi moștenite sunt de fundal, margine, afișaj, flotare și claritate, înălțime și lățime, marja, înălţimea şi lăţimea minimă şi maximă, aspect, overflow, padding, poziție, decorare text, aliniere verticală și index z.

Mostenirea previne anumite proprietăți de a fi declarate iar şi iar într-o foaie de stil, permiţând dezvoltatorilor de software să scrie mai puțin CSS. Ea îmbunătățește încărcarea rapidă a paginilor web de către utilizatori și permite clienţilor să economisească bani cu costurile de lățime de bandă și de dezvoltare.

Exemplu de moștenire

Avem în vedere următoarea foaie de stil:

h1{color: pink;}

Să presupunem că există un element h1 cu un element de accent (em) în interior:

<h1>Aceasta este pentru <em>a ilustra</em> moştenirea</h1>

În cazul în care nicio culoare nu a fost atribuită elementul em, cuvintele subliniate ” a ilustra” vor moșteni culoarea elementului părinte, h1.h1 în foaia de stil are culoarea roz, prin urmare, elementul va fi, de asemenea, roz.

Spaţiu gol

Spațiul gol dintre proprietăți și selectori este ignorat. Acest fragment de cod:

body{overflow:hidden;background:#000000;}

este funcțional echivalent cu acesta:

body {
    overflow: hidden;
    background: #000000;
}

O modalitate comună de a formata CSS pentru lizibilitate este de a spaţia fiecare proprietate și de a-i oferi propria sa linie.

Suport pentru browser

Pentru că nu toate browserele analizează corect codul CSS, s-au dezvoltat tehnici cunoscute sub numele de hack CSS care pot fie să filtreze browsere specifice, fie să vizeze browsere specifice (în general amândouă tehnici sunt cunoscute ca filtre CSS). Prima poate fi definită ca hack CSS de filtrare, și cea din urmă poate fi definită ca hack CSS de direcționare. Ambele pot fi folosite pentru a ascunde sau a afișa părți ale CSS pentru diferite browsere. Acest lucru se realizează prin exploatarea fie a posibilităţilor CSS de manipulare sau a bug-urilor browserelor, fie profitând de lipsa de suport pentru părți ale specificațiilor CSS. În utilizarea filtrelor CSS, unii designeri au mers atât de departe încât au furnizat diferite CSS pentru anumite browsere pentru a asigura un aspect dorit. Deoarece browserele web foarte timpurii au fost fie complet incapabile de manipulare a CSS, fie au ţinut cont foarte puţin de CSS, designerii actuali de multe ori folosesc în mod curent filtre CSS care să împiedice complet aceste browsere să acceseze oricare CSS. Suportul Internet Explorer pentru CSS a început cu IE 3.0 și a crescut progresiv cu fiecare versiune. Până în 2008, prima versiune beta a Internet Explorer 8 a oferit cel mai bun suport pentru CSS 2.1.

Chiar și astăzi, aceste probleme continuă sa facă proiectarea CSS mai complexă și costisitoare decât a fost destinată iniţial, și testarea cross-browser rămâne o necesitate. Alte motive pentru continua non-adoptare a CSS sunt:. complexitatea sa percepută, nefamiliarizarea autorilor cu sintaxa CSS și a tehnicilor necesare, sprijin slab de instrumente de authoring, riscurile prezentate de neconcordanțele între browsere, și creșterea costurilor de testare.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *