Websites består af en række individuelle stykker, herunder billeder, tekst og forskellige dokumenter. Disse dokumenter omfatter ikke kun dem, der kan knyttes til fra forskellige sider, som PDF-filer, men også de dokumenter, der bruges til at konstruere siderne selv, som HTML-dokumenter til at bestemme strukturen af en side og CSS (Cascading Style Sheet) dokumenter at diktere udseendet af en side. Denne artikel vil dykke ind i CSS, der dækker hvad det er, og hvor det bruges på hjemmesider i dag.
En CSS-historieleksjon
CSS blev først udviklet i 1997 som en måde for webudviklere at definere det visuelle udseende af de websider, de oprettede. Det var meningen, at webprofessorer kunne adskille indholdet og strukturen af en websteds kode fra det visuelle design, noget der ikke var muligt før denne gang.
Adskillelsen af struktur og stil gør det muligt for HTML at udføre mere af den funktion, den oprindeligt var baseret på - opmærkning af indhold uden at skulle bekymre sig om selve designet og layoutet af selve siden, noget, der almindeligvis kaldes "look and feel" af siden.
CSS vinde ikke popularitet indtil omkring 2000, da browsere begyndte at bruge mere end de grundlæggende skrifttyper og farveaspekter af dette markupsprog. I dag understøtter alle moderne browsere alle CSS Level 1, mest af CSS Level 2 og endda de fleste aspekter af CSS Level 3. Da CSS fortsætter med at udvikle sig og nye stilarter introduceres, er webbrowsere begyndt at implementere moduler, der bringer ny CSS support ind i disse browsere og give webdesignere kraftfulde nye stylingværktøjer til at arbejde med.
I (mange) år tidligere var der udvalgte webdesignere, der nægtede at bruge CSS til design og udvikling af hjemmesider, men den praksis er alt sammen væk fra branchen i dag. CSS er nu en udbredt standard i webdesign, og du vil være svært presset til at finde nogen, der arbejder i branchen i dag, som ikke har mindst en grundlæggende forståelse af dette sprog.
CSS er en forkortelse
Som allerede nævnt står udtrykket CSS for "Cascading Style Sheet." Lad os bryde denne sætning lidt for at forklare, hvad disse dokumenter gør.
Ordet "stylesheet" refererer til selve dokumentet (som HTML, CSS-filer er egentlig bare tekstdokumenter, der kan redigeres med en række forskellige programmer). Style sheets har været anvendt til dokumentdesign i mange år. De er de tekniske specifikationer for et layout, hvad enten det er print eller online. Udskriv designere har længe brugt stilark til at sikre, at deres mønstre udskrives nøjagtigt til deres specifikationer. Et stilark til en webside tjener det samme formål, men med den ekstra funktionalitet, der også fortæller webbrowseren, hvordan man får dokumentet til at blive vist. I dag kan CSS-stilark også bruge medieforespørgsler til at ændre den måde, en side ser efter forskellige enheder og skærmstørrelser. Dette er utroligt vigtigt, da det gør det muligt for et enkelt HTML-dokument at blive gengivet forskelligt, afhængigt af hvilken skærm der bruges til at få adgang til den.
Cascade er den helt specielle del af udtrykket "cascading style sheet". Et web-stilark er beregnet til at kaskade gennem en række stilarter i det ark, som en flod over et vandfald. Vandet i floden rammer alle klipperne i vandfaldet, men kun dem i bunden påvirker præcis, hvor vandet vil strømme. Det samme gælder for kaskade i websitet stilark.
Hver webside er påvirket af mindst et stilark, selvom webdesigneren ikke anvender stilarter. Dette stilark er brugeragentens stilark - også kendt som standardstile, som webbrowseren vil bruge til at vise en side, hvis der ikke gives andre anvisninger. For eksempel er hyperlinks som standard formateret i blåt og de er understreget. Disse stilarter kommer fra en webbrowsers standard stilark. Hvis webdesigneren giver andre instruktioner, skal browseren dog vide, hvilke instruktioner der har forrang. Alle browsere har deres egne standardtyper, men mange af disse standardindstillinger (som de blå understregede tekstlinks) deles over alle eller de fleste større browsere og versioner.
For et andet eksempel på en browsers standard er standard skrifttypen "Times New Roman", der vises i størrelse 16, i vores webbrowser. Næsten ingen af de sider, vi besøger skærmbilledet i skrifttypefamilien og størrelsen. Dette skyldes, at kaskaden definerer, at de anden stilark, som indstilles af designerne selv, omdefinerer skrifttypestørrelsen og familien, hvilket overstyrer vores webbrowsers standardindstillinger. Ethvert stilark, du opretter til en webside, vil have mere specificitet end en browsers standardstile, så disse standardindstillinger gælder kun, hvis dit stylesheet ikke tilsidesætter dem. Hvis du vil have links til at være blå og understregede, behøver du ikke at gøre noget, da det er standard, men hvis dit websteds CSS-fil siger, at links skal være grønne, vil denne farve tilsidesætte standardblå. Understreget vil forblive i dette eksempel, da du ikke angav andet.
Hvor bruges CSS?
CSS kan også bruges til at definere, hvordan websider skal se, når de ses i andre medier end en webbrowser. Du kan f.eks. Oprette et udskriftsark, der definerer, hvordan websiden skal udskrive. Da websider som navigationsknapper eller webformularer ikke har nogen mening på den udskrevne side, kan et Print Style Sheet bruges til at "slå" fra disse områder, når en side udskrives.Selvom det ikke er en almindelig praksis på mange websteder, er muligheden for at oprette udskriftsformatark stærk og attraktiv (i vores erfaring - de fleste web-fagfolk gør det ikke bare fordi et websteds budgetramme ikke kræver, at dette ekstra arbejde skal udføres ).
Hvorfor er CSS vigtigt?
CSS er et af de mest kraftfulde værktøjer, en webdesigner kan lære, fordi med det kan du påvirke hele det visuelle udseende af et websted. Velskrevne stilark kan opdateres hurtigt og tillade, at websteder ændrer, hvad der prioriteres visuelt på skærmen, hvilket igen viser værdi og fokus for besøgende uden ændringer, der skal foretages til den underliggende HTML-opdeling.
Den største udfordring for CSS er, at der er en del at lære - og med browsere, der skifter hver dag, kan det ikke være fornuftigt i morgen, da nye stilarter bliver understøttet, og andre bliver tabt eller falder af fordel af en eller anden grund .
Fordi CSS kan cascade og kombinere, og overvejer, hvordan forskellige browsere kan fortolke og implementere direktiverne forskelligt, kan CSS være vanskeligere end almindelig HTML til at mestre. CSS ændrer også i browsere på en måde, som HTML virkelig ikke gør. Når du begynder at bruge CSS, vil du imidlertid se, at udnytte kraften i stilark vil give dig utrolig fleksibilitet i, hvordan du opsætter websider og definerer deres udseende. Undervejs vil du samle en "pose med tricks" af stilarter og tilgange, der tidligere har arbejdet for dig, og som du kan vende tilbage til, når du opbygger nye websider i fremtiden.
Originalartikel af Jennifer Krynin. Redigeret af Jeremy Girard den 7/5/17
