Hjemmesider består af et antal individuelle stykker, herunder billeder, tekst og forskellige dokumenter. Disse dokumenter inkluderer ikke kun dem, der kan linkes til fra forskellige sider, som f.eks. PDF-filer, men også de dokumenter, der bruges til at konstruere siderne selv, som f.eks. HTML-dokumenter at bestemme strukturen på en side og CSS (Cascading Style Sheet) -dokumenter til at diktere udseendet af en side. Denne artikel vil dykke ned i CSS og dække, hvad det er, og hvor det bruges på websteder i dag.
En CSS-historielektion
CSS blev først udviklet i 1997 som en måde for webudviklere at definere det visuelle udseende på de websider, de oprettede. Det var meningen, at web-professionelle kunne adskille indholdet og struktur af en websides kode fra det visuelle design, noget der ikke havde været muligt før dette tidspunkt.
Adskillelsen af struktur og stil gør det muligt for HTML at udføre mere af den funktion, som den oprindeligt var baseret på - markeringen af indhold uden at skulle bekymre sig om designet og layoutet af selve siden, noget der almindeligvis kaldes "look and feel" af side.
Udviklingen af CSS
CSS blev ikke mere populær indtil omkring 2000, da webbrowsere begyndte at bruge mere end de grundlæggende skrifttyper og farveaspekter af dette markup-sprog. I dag understøtter alle moderne browsere hele CSS niveau 1, det meste af CSS niveau 2 og endda de fleste aspekter af CSS niveau 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 giver 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 denne praksis er næsten undtagen fra branchen i dag. CSS er nu en meget anvendt standard inden for webdesign, og du ville være hårdt presset med at finde nogen, der arbejder i branchen i dag, og som ikke i det mindste havde 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 nedbryde denne sætning lidt for mere detaljeret at forklare, hvad disse dokumenter gør.
Ordet "stilark" henviser til selve dokumentet (som HTML er CSS-filer egentlig kun tekstdokumenter, der kan redigeres med en række forskellige programmer). Styleark har været brugt til dokumentdesign i mange år. De er de tekniske specifikationer for et layout, hvad enten det er tryk eller online. Printdesignere har længe brugt stilark for at sikre, at deres design er trykt nøjagtigt efter deres specifikationer. Et typografiark til en webside tjener det samme formål, men med den ekstra funktionalitet at fortælle webbrowseren, hvordan man gengiver det dokument, der vises. I dag kan CSS-stilark også bruges medieforespørgsler for at ændre den måde en side ser ud til forskellige enheder og skærmstørrelser. Dette er utroligt vigtigt, da det gør det muligt at gengive et enkelt HTML-dokument forskelligt i henhold til skærmen, der bruges til at få adgang til det.
Kaskade er den virkelig 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 nøjagtigt, hvor vandet vil strømme. Det samme er tilfældet med kaskaden i typografiark på websteder.
Designer Style Sheets tilsidesætter Browserens standard Style Sheets
Hver webside er påvirket af mindst et typografiark, selvom webdesigneren ikke anvender nogen typografier. Dette stilark er brugeragentens stilark - også kendt som standardformaterne, som webbrowseren bruger til at vise en side, hvis der ikke gives andre instruktioner. For eksempel er hyperlinks som standard stylet i blåt, og de er understregede. Disse stilarter kommer fra en webbrowsers standardformatark. Hvis webdesigneren giver andre instruktioner, skal browseren dog vide, hvilke instruktioner der har forrang. Alle browsere har deres egne standardformater, men mange af disse standardindstillinger (som de blå understregede tekstlinks) deles på tværs af alle eller de fleste større browsere og versioner.
For et andet eksempel på en browserstandard er standardskrifttypen i vores webbrowser "Times New Roman"vises i størrelse 16. Næsten ingen af de sider, vi besøger, er dog i den skriftfamilie og størrelse. Dette skyldes, at kaskaden definerer, at de andet stilark, som er indstillet af designerne selv, skal omdefinere skriftstørrelsen og familie, der tilsidesætter vores webbrowsers standardindstillinger. Alle typografiark, du opretter til en webside, vil have mere specificitet end en browsers standardformater, så disse standarder gælder kun, hvis dit typografiark ikke tilsidesætter dem. Hvis du ønsker, at links skal være blå og understregede, behøver du ikke 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åt. Understreget forbliver i dette eksempel, da du ikke har angivet andet.
Hvor bruges CSS?
CSS kan også bruges til at definere, hvordan websider skal se ud, når de vises i andre medier end en webbrowser. For eksempel kan du oprette et udskrivningsark, der definerer, hvordan websiden skal udskrives. Da websideartikler som navigationsknapper eller webformularer ikke har noget formål på den udskrevne side, kan et udskrivningsark bruges til at "slukke" for disse områder, når en side udskrives. Selvom det ikke rigtig er en almindelig praksis på mange websteder, er muligheden for at oprette typografiark til udskrivning stærk og attraktiv (i vores erfaring - de fleste web-professionelle gør det ikke bare fordi et websteds budgetomfang ikke kræver dette ekstra arbejde være færdig).
Hvorfor er CSS vigtigt?
CSS er et af de mest kraftfulde værktøjer, som en webdesigner kan lære, fordi du med det kan påvirke hele et visuelt udseende på et websted. Velskrevne stilark kan opdateres hurtigt og giver websteder mulighed for at ændre det, der prioriteres visuelt på skærm, som igen viser værdi og fokus for besøgende, uden at der skal foretages ændringer i underliggende HTML-markering.
Den største udfordring ved CSS er, at der er en hel del at lære - og når browsere skifter hver dag, fungerer det godt i dag giver måske ikke mening i morgen, da nye stilarter bliver understøttet, og andre falder eller falder ud af favør af en eller anden grund eller en anden.
CSS-læringskurven er det værd
Fordi CSS kan kaskade og kombineres, og i betragtning af hvordan forskellige browsere kan fortolke og implementere direktiverne forskelligt, kan CSS være vanskeligere at lære end almindelig HTML. CSS ændres også i browsere på en måde, som HTML virkelig ikke gør. Når du først begynder at bruge CSS, vil du dog se, at udnyttelse af stilen i stilark vil give dig utrolig fleksibilitet i, hvordan du layouter websider og definerer deres udseende. Undervejs vil du samle en "pose med tricks" af stilarter og tilgange, der har fungeret for dig tidligere, og som du kan vende dig til igen som du oprette nye websider i fremtiden.