Ce este CSS?

Cascading Style Sheets (CSS) este un limbaj de foi de stil utilizat pentru a descrie prezentarea unui document scris într-un limbaj de marcare, cum ar fi HTML sau XML. CSS este o tehnologie fundamentală a World Wide Web, alături de HTML și JavaScript.

CSS este conceput pentru a permite separarea conținutului și a prezentării, inclusiv a aspectului, culorilor și fonturilor. Această separare poate îmbunătăți accesibilitatea conținutului. De asemenea, oferă mai multă flexibilitate și control în specificarea caracteristicilor de prezentare.

În același timp, permite ca mai multe pagini web să împartă formatarea prin specificarea CSS-ului relevant într-un fișier .css separat. Asta duce la reducerea complexității și repetiției conținutului structural. Nu în cele din urmă, permite ca fișierul .css să fie pus în memoria cache. Acest lucru îmbunătățește viteza de încărcare a paginii între paginile care împart fișierul și formatarea acestuia.

Accesibilitatea CSS

Separarea formatării și a conținutului face posibilă prezentarea aceleiași pagini de marcaje în stiluri diferite pentru varii metode de redare. Prin metode de redare, ne referim la ecrane, suport de hârtie, voce (prin intermediul unui browser bazat pe vorbire sau al unui cititor de ecran) și dispozitive tactile Braille. CSS are, de asemenea, reguli de formatare alternativă în cazul în care conținutul este accesat pe un dispozitiv mobil.

Denumirea „cascading” provine de la schema de prioritate specificată pentru a determina ce regulă de stil se aplică dacă mai multe reguli se potrivesc unui anumit element. Această schemă de prioritate în cascadă este previzibilă.

Istoria CSS

CSS a fost propus pentru prima dată de Håkon Wium Lie la 10 octombrie 1994. La acea vreme, Lie lucra cu Tim Berners-Lee la CERN. În aceeași perioadă au fost propuse și alte câteva limbaje de foi de stil pentru web.  Discuțiile în cadrul Consorțiului World Wide Web au dus la publicarea în 1996 a primei recomandări W3C CSS (CSS1). Propunerea lui Bert Bos a avut cea mai mare influență. Acesta a devenit co-autor al CSS1 și este considerat co-creatorul CSS.

Foile de stil au existat într-o formă sau alta încă de la începuturile limbajului standard de marcare generalizată (SGML) în anii 1980. CSS a fost dezvoltat pentru a oferi foi de stil pentru web. O cerință pentru un limbaj de foi de stil a fost ca acestea să provină din diferite surse de pe web. Prin urmare, limbajele de foi de stil existente, cum ar fi DSSSL și FOSI, nu erau adecvate. CSS, pe de altă parte, permite ca stilul unui document să fie influențat de mai multe foi de stil prin intermediul stilurilor „în cascadă”.

Evoluția CSS

Pe măsură ce HTML s-a dezvoltat, a ajuns să cuprindă o varietate mare de capacități stilistice pentru a răspunde cerințelor dezvoltatorilor web. Această evoluție a oferit proiectantului un control mai bun asupra aspectului site-ului, cu prețul unui HTML mai complex.

Variațiile în implementările browserelor web, cum ar fi ViolaWWWWW și WorldWideWeb, au îngreunat aspectul consecvent al site-ului. Utilizatorii au avut mai puțin control asupra modului în care era afișat conținutul web. Browserul/editorul dezvoltat de Tim Berners-Lee avea foi de stil care erau codificate în program. 

Prin urmare, foile de stil nu puteau fi legate de documentele de pe web. Robert Cailliau, tot de la CERN, a dorit să separe structura de prezentare. Astfel, foi de stil diferite să poată descrie prezentări diferite pentru tipărire, prezentări pe ecran și editoare.

Îmbunătățirea capacităților de prezentare pe web a fost un subiect de interes pentru mulți din comunitatea web. Nouă limbaje diferite de foi de stil au fost propuse pe lista de discuții www-style. Dintre aceste nouă propuneri, două au avut o influență deosebită asupra a ceea ce a devenit CSS: Cascading HTML Style Sheets și Stream-based Style Sheet Proposal (SSP).

Două browsere au servit ca bancuri de testare pentru propunerile inițiale. Lie a lucrat cu Yves Lafon pentru a implementa CSS în browserul Arena al lui Dave Raggett. Bert Bos și-a implementat propria propunere SSP în browserul Argo. Ulterior, Lie și Bos au lucrat împreună pentru a dezvolta standardul CSS. Llitera „H” a fost eliminată din denumire deoarece aceste foi de stil puteau fi aplicate și la alte limbaje de marcare în afară de HTML.

Suport pentru browser

Fiecare browser web utilizează un motor de prezentare pentru a reda paginile web. Suportul pentru funcționalitatea CSS nu este consecvent între ele. Au fost dezvoltate mai multe tehnici de codare pentru a viza browsere specifice cu soluții de rezolvare. Adoptarea de noi funcționalități poate fi împiedicată de lipsa de suport în browserele principale. De exemplu, Internet Explorer a întârziat adăugarea suportului pentru multe caracteristici CSS 3. Acest lucru a dus la încetinirea adoptării acestor caracteristici și a afectat reputația browserului în rândul dezvoltatorilor.

Pentru a asigura o bună experiență utilizatorilor, dezvoltatorii web își testează adesea site-urile pe mai multe sisteme de operare, browsere și versiuni de browsere. Acest lucru duce la creșterea timpului și complexității dezvoltării. Instrumente precum BrowserStack au fost create pentru a reduce complexitatea menținerii acestor medii.

În plus față de aceste instrumente de testare, multe site-uri mențin liste de suport pentru browsere pentru proprietăți CSS specifice, inclusiv CanIUse și MDN Web Docs. De asemenea, CSS 3 definește interogări de caracteristici. Acest lucru oferă o directivă @supports ce permite dezvoltatorilor să vizeze browserele cu suport pentru anumite funcționalități direct în CSS-ul lor.

Ce facem când CSS nu este acceptat?

CSS care nu este acceptat de browserele mai vechi poate fi, de asemenea, uneori corectat cu ajutorul JavaScript polyfills. Acestea reprezintă bucăți de cod JavaScript concepute pentru a face browserele să se comporte în mod consecvent. Aceste soluții de rezolvare – și necesitatea de a susține funcționalitatea de rezervă – pot adăuga complexitate proiectelor de dezvoltare.  Prin urmare, companiile definesc frecvent o listă de versiuni de browsere pe care le vor susține și pe care nu le vor susține.

Pe măsură ce site-urile web adoptă standarde de cod mai noi care sunt incompatibile cu browserele mai vechi, aceste browsere pot fi împiedicate să acceseze multe dintre resursele de pe web (uneori în mod intenționat). Multe dintre cele mai populare site-uri de pe internet nu sunt doar degradate din punct de vedere vizual pe browserele mai vechi din cauza suportului CSS deficitar, ci nu funcționează deloc, în mare parte din cauza evoluției JavaScript și a altor tehnologii web.

Scurt rezumat

CSS controlează elementele de prezentare, cum ar fi aspectul, culorile și fonturile. Acest lucru nu a fost întotdeauna așa. În primele zile ale Web-ului, fiecare pagină era asamblată de o bucată independentă de HTML, iar opțiunile de aspect erau limitate. Fonturile și culorile nu puteau fi manipulate. 

Pe măsură ce Web-ul ajungea la o audiență mai largă, designerii au început să ceară control mai mare asupra aspectului unei pagini. În ciuda protestelor unor oameni precum Andressen, aceștia au obținut ceea ce și-au dorit. Costul a fost un HTML mai complex. Acesta era mai dificil de codificat, necesita multă muncă pentru întreținere și se încărca mai greu.

Foile de stil au fost sugerate ca soluție. Aceasta nu era o idee nouă. Când Web-ul a fost conceput pentru prima dată, Robert Cailliau a văzut necesitatea a trei tipuri de foi de stil: una pentru editare, una pentru prezentare și una pentru imprimare. Foile de stil erau, de asemenea, în concordanță cu ideea conform căreia structura ar trebui să fie separată de prezentare, o idee exprimată pentru prima dată de părintele limbajului de marcare, William Tunnicliffe.

Concluzie

CSS a reinventat designul web. Site-urile care utilizează foi de stil sunt mai ușor de construit și de întreținut. Codul mai compact se încarcă mai repede și este mai ușor de indexat de către motoarele de căutare. În cele din urmă, CSS asigură consecvența în ceea ce privește navigarea și designul, oferind o experiență mai bună utilizatorilor. La urma urmei, stilul înseamnă substanță.

Acesta a fost și articolul de astăzi. Pentru mai multe articole interesante, nu uita să arunci un ochi peste blog-ul nostru, în special pe categoria Web-ul în 100 de pași. De asemenea, ne găsești și pe TikTok, și pe Instagram!