En kvinnelig webdesigner på jobb på datamaskinen sin på et moderne kontor
Bildekreditt: monkeybusinessimages/iStock/Getty Images
Den originale Cascading Style Sheets-spesifikasjonen, så vel som dens mye nyere CSS3-revisjon, er teknologier som brukes til å forbedre og formatere HTML-websider. CSS ble opprinnelig designet for å håndtere presentasjonslaget på en webside på en mer effektiv måte enn formatering med HTML, som aldri var ment å håndtere den komplekse konstruksjonen av det moderne nettet. Fordi CSS2 er en universelt vedtatt utvidelse av CSS1, innebærer begrepet CSS uten nummer inkludering av CSS2. CSS3-spesifikasjonen er fortsatt under utvikling fra og med juli 2014, så nettutviklere må vurdere funksjonsstøtten varierer mellom nettlesere.
CSS3 er bakoverkompatibel med CSS
CSS3 er en oppdatering til CSS2 som opprettholder kompatibilitet med alle funksjonene til CSS -- CSS3 forakter ikke noen av CSS-koden. CSS3-koden er designet for å få nettsider til å se bedre ut og lastes raskere, samt redusere utviklingstiden for å bygge sider i en brukers nettleser. CSS3 gjør webdesign mindre avhengig av bildefiler for sidedesignelementer og reduserer filoverføringsforespørsler og nedlastingstid ved å bruke færre bilder. CSS1 fokuserte på utseendeformatering, mens CSS2 la til posisjoneringsmuligheter for tekst og objekter. Eldre nettleserversjoner som IE 9 og tidligere støtter ikke CSS3s ekstra funksjoner, som kan kreve ekstra utviklingstid for å opprettholde CSS-reservekode.
Dagens video
CSS3 legger til avrundede hjørner og gradienter
Før CSS3 trengte webutviklere å designe bildefiler for å legge til ting som avrundede hjørner for strukturelle kanter og bakgrunnsbildegradienter; CSS3 inkluderer sammenlignbare funksjoner som kan legges til med noen få linjer med kode. I CSS må en webutvikler designe en kantlinje eller gradient, laste den opp til bildeserveren, plassere bildet på siden og bruke CSS for å plassere kantlinjen riktig. I CSS3 kan nettutvikleren oppnå noe lignende med kode som ".roundBorder{border-radius: 10px;}". Bakgrunnsgradienter er litt mer kompliserte og krever forskjellig kode for forskjellige nettlesere. For eksempel bruker en hvit-til-svart gradient for Chrome og IE kode som ".gradBG{background: liner-gradient (white, black);}".
CSS3 legger til animasjonsfunksjoner og teksteffekter
CSS3 har en håndfull funksjoner som ikke finnes i CSS for å forbedre hvordan sideelementene dine ser ut. Med CSS3 kan nettutviklere legge til en tekstskygge til tekst for å gjøre det lettere å lese eller legge til visuell stil, og kan tvinge frem linjeskift i lengre ord for å få dem til å passe inn i kolonner med ordbryting. Før CSS3 trengte webutviklere å kode animasjon i skriptspråk som JavaScript og jQuery; CSS3 legger til flere animasjonsfunksjoner til designlaget. W3C jobber fortsatt med en nettanimasjonsstandard for å finne kompatibilitetsproblemer mellom de forskjellige animasjonsteknikkene.
CSS3 Definerer tekstkolonner
CSS3 legger til muligheten til å dele tekstseksjoner i flere kolonner for å lese som en avis. I CSS2-spesifikasjonen har nettutviklere en vanskelig tid med å konstruere tekstseksjoner med flere kolonner fordi standarden ikke er utstyrt for automatisk å dele tekst. Spesielt med nettsteder som har responsiv design, en utviklingsteknikk som omorganiserer og endrer størrelse på innhold basert på ser på enhetens skjermoppløsning, kan personer med større skjermer ha problemer med å lese tekstrader som sprer seg over skjerm.
