Globale linker

CSS

Noen gode råd?

Det er ikke lett å komme i gang med CSS, det er en helt ny måte å tenke på for en som kanskje er vant til den tabellbaserte utformingen av HTML-sider.

På denne siden har jeg forsøkt å samle sammen noen gode råd for både ny og gammel CSS/HTML-koder.

Ikke bruk bilder for å vise tekst

Det er ingen grunn til å bruke bilder for å vise tekst når så mye kan oppnås med CSS. Brukervennlighetsmessig er det kjempefy! å bruke bilder til elementer som overskrifter og navigasjonselementer. Brukere med synshandikapp har vanskeligheter med å ta seg fram på sider som bruker grafikk til å vise viktig informasjon.

Dessuten gjør du sidene dine mindre søkbare for søkemotorene hvis du «gjemmer» viktig informasjon i bilder.

Ta en liten titt på dette eksempelet som viser rollover-navigasjon med CSS.

Kod inn bilder som er ment som dekorasjon i CSS

Det er mulig å presentere dekorative bilder, bilder som bare er en del av designpynten, som bakgrunnsbilder med CSS. Fordelen med dette er at bakgrunnsbilder lastes etter tekst. Dette gjør det mulig for brukeren å gå i gang med teksten (det er jo derfor han eller hun er der) umiddelbart.

Dette kan virke litt poengløst, men det hjelper faktisk på den nedlastingstiden som brukeren opplever, siden teksten kommer før de dekorative bildene.

Dette vil også være brukervennlig for de blinde og svaksynte, siden deres nettleser derved ikke tolker, for dem, unødvendig bildeinformasjon på siden.

Her er et eksempel på dekorbilde med CSS.

Ikke overdiv bruken av attributtet class

Overdreven bruk av class-attributtet gjør HTML-koden uryddig. Benytt deg av etterkommere-trickset.

Se før og etter eksempel.

Bruk «CSS shorthand properties»

Bruk...

font: 1em/1.2em bold italic serif;

...i stedet for...

font-size: 1em;

				line-height: 1.2em;

				font-weight: bold;

				font-style: italic;

				font-family: serif;

Bruk...

border: 1px solid #000;

...i stedet for...

border-width: 1px;

				border-style: solid;

				border-color: #000;

Bruk...

background: #fff url(image.gif) no-repeat left top;

...i stedet for...

background-color: #fff;

				background-image: url(image.gif);

				background-repeat: no-repeat;

				background-position: left top;

Bruk (gjelder også padding)...

margin: 2px 5px 10px 6px; (top right bottom left)

...i stedet for...

margin-top: 2px;

				margin-right: 5px;

				margin-bottom: 10px;

				margin-left: 6px;

Bruk (gjelder også padding)...

margin: 2px 5px 6px; (top (left og right) bottom)

...i stedet for...

margin-top: 2px;

				margin-right: 5px;

				margin-bottom: 6px;

				margin-left: 2px;

Bruk (gjelder også padding)...

margin: 2px 5px; ((top og bottom) (left og right))

...i stedet for...

margin-top: 2px;

				margin-right: 5px;

				margin-bottom: 2px;

				margin-left: 5px;

Fjern unødvendig tomrom, linjeskift og kommentarer

Hvert eneste tegn og mellomrom «veier» 1 byte. Det høres ikke mye ut, men mange små..... Hvis du er effektiv med å fjerne unødvendig tomrom, osv. i koden, kan du spare opp til 10% (eller kanskje mer?) på filstørrelsen.

Bruk relative banereferanser

Prøv å unngå å bruke absolutte filreferanser som
<a href="http://www.url.no/filnavn.htm">. Dette tar bare unødvendig plass (kilobytemessig (se over)). Bruk heller relative referanser:

<a href="/"> - kaller opp http://www.url.no
<a href="/filnavn.htm" - kaller opp http://www.url.no/filnavn.htm
<a href="mappenavn/filnavn.htm" - kaller opp http://www.url.no/mappenavn/filnavn.htm
<a href="./" - kaller opp index.htm i samme mappe
<a href="../" - kaller opp index.htm i mappen «over»
<a href="../filnavn.htm" - kaller opp filnavn.htm i mappen «over»
<a href="../../" - kaller opp index.htm i mappen to nivåer over.

Fjern unødvendige META-tagger

De fleste META-tagger er unødvendige og du oppnår ikke så mye ved å bruke dem. De viktigste for søkemotorene er keywords- og desctiption-taggene. Selv disse er ikke lenger så viktige på grunn av misbruk, så de fleste søkemotorer legger ikke lenger så mye vekt på disse.

Når du bruker META-tagger prøv å holde content under 200 tegn. Bruker de mer enn 200 tegn «forurenser» du bare for søkemotorene.

En du skal bruke er:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

... som forteller nettleseren hvilket karaktersett som skal brukes for å tolke teksten på siden.

Plasser CSS og JavaScript i eksterne filer

Fjern all CSS fra selve HTML-dokumentet og lagre det som en «filnavn.css»-fil. Link til det i <head>:

<link type="text/css" rel="stylesheet" href="filnavn.css" />

Fjern all JavaScript-kode fra selve HTML-dokumentet og lagre det som en «filnavn.js»-fil. Link til det i <head>:

<script type="text/javascript" src="filnavn.js"></script>

Fordelene her er vesentlige:

hvis CSS-koden/JavaScript-koden ligger i hvert dokument må det lastes inn i nettleseren sammen med HTML'en for hver eneste side. Hvis de er linket lastes de ned kun én gang.
vedlikehold av CSS og JavaScript forenkles ved at vedlikehold foregår i en ekstern fil, istedet for hvert enkelt HTML-dokument hvor CSS/JavaScript er brukt. Forandringer i den eksterne filen vil gjenspeiles i alle HTML-filene som de er linket til.

Bruk / på slutten av mappelinker

Istedet for å skrive...

http://www.2tp.no/webdesign

...skriv...

http://www.2tp.no/webdesign/

Hvorfor? Fordi hvis vi ikke har slashen på slutten vet ikke serveren om vi mener filen «webdesign» eller mappen «webdesign». Ved å putte på slashen vet serveren umiddelbart at her er det snakk om et mappenavn og trenger ikke å bruke ressurser på å prøve å finne ut av det.