Den originale Cascading Style Sheets-specifikation såvel som den meget nyere CSS3-revision er teknologier, der bruges til at forbedre og formatere HTML-websider. CSS blev oprindeligt designet til at håndtere præsentationslaget på en webside på en mere effektiv måde end formatering med HTML, som aldrig var beregnet til at håndtere den komplekse konstruktion af det moderne web. Da CSS2 er en universelt vedtaget udvidelse af CSS1, indebærer udtrykket CSS uden et tal, at CSS2 er inkluderet. CSS3-specifikationen er stadig under udvikling fra juli 2014, så webudviklere er nødt til at overveje funktionssupport varierer mellem browsere.

Kvinde, der arbejder ved skrivebordet i travlt kreativt kontor

CSS3 er bagudkompatibel med CSS

CSS3 er en opdatering til CSS2, der opretholder kompatibilitet med alle CSS-funktioner - CSS3 udskriver ikke nogen af ​​CSS-koder. CSS3-koden er designet til at få websider til at se bedre ud og indlæses hurtigere samt reducere udviklingstiden til at opbygge sider i en brugers browser. CSS3 gør webdesign mindre afhængig af billedfiler til side designelementer og reducerer anmodninger om filoverførsel og downloadtid ved at bruge færre billeder. CSS1 fokuserede på formatering af udseende, hvorimod CSS2 tilføjede positioneringsmuligheder for tekst og objekter. Ældre browserversioner som IE 9 og tidligere understøtter ikke bredt CSS3s tilføjede funktioner, hvilket kan kræve ekstra udviklingstid for at opretholde CSS-tilbagefaldskode.

CSS3 tilføjer afrundede hjørner og gradueringer

Før CSS3 havde webudviklere behov for at designe billedfiler for at tilføje ting som afrundede hjørner til strukturelle grænser og baggrundsbilledgradier; CSS3 inkluderer sammenlignelige funktioner, der kan tilføjes med et par kodelinjer. I CSS skal en webudvikler designe en kant eller gradient, uploade den til billedserveren, placere billedet på siden og bruge CSS til at placere randen korrekt. I CSS3 kan webudvikleren udføre noget lignende med kode som ".roundBorder {border-radius: 10px;}". Baggrundsgradienter er lidt mere komplicerede og kræver forskellige kode for forskellige browsere. For eksempel bruger en hvid-til-sort gradient til Chrome og IE kode som ".gradBG {baggrund: foring-gradient (hvid, sort);}".

CSS3 tilføjer animationsfunktioner og teksteffekter

CSS3 har en håndfuld funktioner, der ikke findes i CSS, for at forbedre, hvordan dine sideelementer ser ud. Med CSS3 kan webudviklere tilføje en tekstskygge til tekst for at gøre det lettere at læse eller tilføje visuel flair og kan tvinge linjeskift inden for længere ord for at få dem til at passe ind i kolonner med ordindpakning. Før CSS3 var webudviklere nødvendige for at kode animation på scriptingsprog som JavaScript og jQuery; CSS3 tilføjer flere animationsfunktioner til designlaget. W3C arbejder stadig på en webanimationsstandard for at udarbejde kompatibilitetsproblemer mellem de forskellige animationsteknikker.

CSS3 Definerer tekstkolonner

CSS3 tilføjer muligheden for at opdele tekstafsnit i flere kolonner for at læse som en avis. I CSS2-specifikationen har webudviklere det vanskeligt med at konstruere tekstsektioner med flere kolonner, fordi standarden ikke er udstyret til automatisk at opdele tekst. Især med websteder, der har responsivt design, en udviklingsteknik, der omarrangerer og ændrer størrelse på indholdet baseret på visningsapparatets skærmopløsning, kan personer med større skærme have svært ved at læse tekstrader, der sprøjter hen over skærmen.