Guide: Selektiv CSS

Tastaturkriger

30. mai 2006

For at nettleseren skal plukke den CSS-en som er lagd for den - kun den - må vi bruke @import. Dette er en veldig undervurdert kommando fordi man slipper å gjøre komprimisser for at designet skal vises nogenlunde korrekt i alle browsere.

Vi trenger følgende: stilark/stil.css, stilark/import.css og stilark/style.css.

I <head> setter vi:
<link href="stilark/stil.css" rel="stylesheet" type="text/css" />
<link href="stilark/import.css" rel="stylesheet" type="text/css" />

I stilark/stil.css setter du "standard" designet. Her tar du utgangspunkt i en browser, f.eks. IE og lager siden slik du vil ha den.

I stilark/import.css legger vi til @import url("style.css") all;. Nå vil alle browsere utenom IE forstå hva som står i import.css, og IE vil derfor bare droppe den. Ingen skade skjedd for IE.

Firefox, Opera og andre brukebare browsere derimot forstår denne kommandoen og gjør som den sier; inkulderer style.css.

Fordi import.css kommer etter stil.css vil nettleseren tolke det som at style.css skal inkluderes etter stil.css. Et element som er plassert helt nederst vil overstyre det samme elementet plassert over den.

Eksempel:
p { border: 1px solid #000000; }
blir overstyrt av
p { border: 3px solid #00FF00; }
fordi den er plassert lengre nede i stilarket.

Nå kan vi overstyre hva vi vil - vi kan til og med bytte ut dårlige GIF-bilder med PNG.

På http://imfo.ru/csstest/css_hacks/import.php finner du mange flere hacks for å inkludere forskjellige stilark.

comicz

epleterte

1.511 71

30. mai 2006

Flotte greier, må innrømme at dette var noe jeg ikke har satt meg skikkelig inn i. Takk for gode tips :-)

nso

popålol

Administrator

6.158 5.589

30. mai 2006

Det er jo utrolig tåpelig hvis man skal tenke på ressursbruk. Alle nettlesere utenom IE laster da altså ned en ekstra fil og tolker den - for så å overskrive og gjøre den forrige filen overflødig.

Deezire

Tastaturkriger

Trådstarter

5.279 2.045

30. mai 2006

Sitat av nso

Vis hele sitatet...

Sant det, men eneste måten CSS kan overstyres på.

NoRemorse

1.293 26

30. mai 2006

Sitat av Deezire

Sant det, men eneste måten CSS kan overstyres på.

Vis hele sitatet...

Nope, det finnes mange andre måter. Du kan f.eks. bruke div>#tagid { } , den hopper IE elegant over, men ikke de andre nettleserne. Det er jo bare å ta et søk på google så finner du raskt gode oversikter over forskjellige css hacks og hvordan de fungerer. Løsningen din er forsåvidt også en hack siden den utnytter en feil i IE sin støtte av css.

astoever

219 111

31. mai 2006

Import er sexah, bruker det hele tiden.

Jeg har en ekstra liten CSS fil for IE, for å endre noen vidder (box-model gah). IE filen inneholder -bare de endringene-. Den overskriver ikke regler satt av forrige stylesheet med mindre du instruerer den om å gjøre det. Ehm, kronglete å forklare. Det systemet er fint for meg.

For noen som fikk håpet opp, så bruker jeg da PHP for å sjekke browser

Sist endret av astoever; 31. mai 2006 kl. 01:34.

comicz

epleterte

1.511 71

31. mai 2006

Egentlig trenger man ikke å overstyre i det hele tatt dersom man har PHP til rådighet, en browsersjekk før stilarket hentes inn på vanlig vis fungerer jo fint. Ulempen blir at man må vedlikeholde flere like stilark, og noe av vitsen med CSS blir borte. alexandrs løsning innebærer små forandringer på- eller tillegg til det allerede definerte stilarket, og nsos klager på ressursbruk kan motargumenteres forutsatt at man ønsker å jobbe for lik oppførsel i forskjellige browsere på dette viset.

elodin

master namer

1.185 387

31. mai 2006

Man kan også legge inn litt CSS for IE i HTMLen.

Kode

<div id="boks1">

<!--[if IE]>
<style>
#boks1 {
margin-left: 9px;
}
</style>
<![endif]-->

</div>

Margin-left overstyrt i IE.

▼ ... noen uker senere ... ▼

mongeland

2.324 57

18. juni 2006

Sitat av helk

Man kan også legge inn litt CSS for IE i HTMLen.
...

Margin-left overstyrt i IE.

Vis hele sitatet...

Da lager man jo heller

Kode

<!--[if IE]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->

som blir mer korrekt HTML og lettere kode.

Sist endret av mongeland; 18. juni 2006 kl. 02:24.