Forskjellig CSS alt etter hvilken browser
- Trådstarter kongen
- Startdato
adeneo
Medlem
Stilark kun for IE
Stilark kun for alt annet enn IE
Stilark kun for IE versjon 7
Stilark kun for IE versjon 6
osv....
En annen metode er å sette klasser på html taggen, som er bedre etter min mening:
Dette gjør at html taggen får klasser dersom det er versjon 8 eller lavere av IE som benyttes, og man kan bruke kun ett stilark med forskjellige stiler for IE. I dette stilarket gjør man:
På denne måten spesifiserer man at dersom #mindiv er child av .ie6 klassen, som den kun er dersom nettleseren er IE6, så bruker man en annen stil.
HTML5 boilerplate bruker en litt mer avansert utgave som ser slik ut:
Det finnes også diverse hacks, slik som å bruke en understrek:
og på enkelte typer stiler kan man sette samme css flere ganger:
Dette gjør at nettlesere som ikke støtter rgba leser kun den første stilen, og ikke forstår den andre stilen, slik at den hoppes over, mens på nettlesere som støtter rgba så leses begge, men den siste, altså den med rgba benyttes fordi den siste stilen er alltid den som gjelder.
Pass på at stiler også har en viss rekkefølge i henhold til selektor, dypere selektorer går først uansett hvor de er i stilarket, det samme gjelder for ID over klasser osv.
HTML:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->Stilark kun for alt annet enn IE
HTML:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->Stilark kun for IE versjon 7
HTML:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->Stilark kun for IE versjon 6
HTML:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->osv....
En annen metode er å sette klasser på html taggen, som er bedre etter min mening:
HTML:
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->Dette gjør at html taggen får klasser dersom det er versjon 8 eller lavere av IE som benyttes, og man kan bruke kun ett stilark med forskjellige stiler for IE. I dette stilarket gjør man:
HTML:
#mindiv { color: blue;}
.ie6 #mindiv { color: red; }På denne måten spesifiserer man at dersom #mindiv er child av .ie6 klassen, som den kun er dersom nettleseren er IE6, så bruker man en annen stil.
HTML5 boilerplate bruker en litt mer avansert utgave som ser slik ut:
HTML:
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->Det finnes også diverse hacks, slik som å bruke en understrek:
HTML:
#mindiv { float: left; margin-left: 10px; _margin-left: 5px; }og på enkelte typer stiler kan man sette samme css flere ganger:
HTML:
#mindiv {background: #fff; background: rgba(255, 255, 255, 0.9);}Dette gjør at nettlesere som ikke støtter rgba leser kun den første stilen, og ikke forstår den andre stilen, slik at den hoppes over, mens på nettlesere som støtter rgba så leses begge, men den siste, altså den med rgba benyttes fordi den siste stilen er alltid den som gjelder.
Pass på at stiler også har en viss rekkefølge i henhold til selektor, dypere selektorer går først uansett hvor de er i stilarket, det samme gjelder for ID over klasser osv.
Sist redigert:
Det virker!