9 svar · 450 visningar · startad av lillebror
Hej! :) Just nu håller jag på med storstädning i min kod för det tenderar till att bli lite rörigt ibland när man utvecklar och det går fort fram. Då är det bra att stanna upp en stund.
Det jag undrar över nu är hur ni strukturerar era CSS-filer. Har ni en enda stor fil eller har ni flera stycken för olika style-element exempelvis?
Följande använder jag mig av:
<style type="text/css" media="all">
@import "css/flygfyren.css";
@import "css/forms.css";
</style>
Jag brukar ha olika filer för olika media. Plus en för IE som jag laddar in via en villkorlig kommentar. :)
Btw, när du skriver media="all", menar du verkligen det? Har du stilregler för aural, handheld, braille och embossed också? Annars borde man egentligen skriva vilka medier man riktar sig till, tex media="screen, projection, print". ;)
Precis vad jag funderade på!
Alltså! Om man skriver så här:
<style type="text/css" media="screen">
@import "styling.css";
@import "dennasida.css";
</style>
Läser alla "moderna" webläsare BÅDA, då?
Kan man skriva så här:
<link rel="stylesheet" href="styling.css" type="text/css">
<link rel="stylesheet" href="dennasida.css" type="text/css">
Funkar det överhuvudtaget? Tolkas båda?
Är det den som skrivs först som har högst prioritet om det skulle förekomma styling för samma element?
Fattar helt enkelt inte!
zcorpan skrev:
Btw, när du skriver media="all", menar du verkligen det? Har du stilregler för aural, handheld, braille och embossed också? Annars borde man egentligen skriva vilka medier man riktar sig till, tex media="screen, projection, print". ;)
Det hade jag faktiskt ingen aning om. Du vet kanske hur det kan vara när man lär sig i början, man klippar och klistrar och ändrar tills "man tror" att man har något som är korrekt :) Men din fråga är befogad eftersom jag överhuvudtaget inte har reflekterat så mycket över denna mediaparameter! :e Vad borde det stå om CSS-filen är för en vanlig xhtml-sida?
lillebror skrev:
Vad borde det stå om CSS-filen är för en vanlig xhtml-sida?
Om CSS-filen är för en xhtml-sida som ska visas i en webbläsare på en vanlig datorskärm så är media="screen" att föredra.
Det beror på.
Jag brukar skriva media="screen, projection" till mina vanliga style sheets.
Till utskrifterna tar jag bort meny och stylar om texten till text med serifer som är lättare att läsa på papper än typsnitt utan serifer, samt tar bort footer och header samt lägger till en h1 rubrik med sitenamnet högst upp på sidan (för övrigt bra för sökmotorerna).
Det ska vara lätt att skriva ut, alltså lägger jag till media="print" sheets.
Än så länge har jag inte börjat skriva för handdatorer, men det finns en jättebra tutorial om det på a list apart.
Jag funderar på att lägga till ett för oral, dvs snack också, vilken även kan tolkas av Opera 8:as full screen reader och som man kan göra snygga presentationer av (powerpoint style), men detta har jag aldrig gjort eftersom min sida riktar sig till designer, vänner och kompisar och jag inte ens har snackat/träffat en person som inte kan snacka i hela mitt liv faktiskt. (har sett på tv)
Så sähär ser min deklaration ut:
<style type="text/css" title="All">
@import url('inc/styles/styles2.css') screen,projection;
@import url('inc/styles/text.css') all;
@import url('inc/styles/printMe.css') print;
@import "guestbooks/guestbooks.css" all;
</style>
Om jag sedan vill vara IE vänlig så skriver jag
<style type="text/css" title="All">
@import url('inc/styles/styles2.css');
@import url('inc/styles/text.css');
@import url('inc/styles/printMe.css') print;
@import "guestbooks/guestbooks.css" all;
</style>
och struntar i att den inte klarar av print mediet (tyvärr, men det är ju MS), hehe.
Både
"guestbooks/guestbooks.css"
url('guestbooks/guestbooks.css')
och
url(guestbooks/guestbooks.css)
funkar, bara så ni vet ;).
Jag brukar aldrig lägga style sheets externt om de innehåller konflikter. Ska du ha konfliker är det:
där nummer tre gäller över alla andra. Jag tror även du kan även använda !important i externa sheets i fall du har konflikter mellan två externa style sheets, annars gäller regeln; sist deklarerad gäller inom både (1) och (2).
Tex.
<p class="red">text</p>
.red { color: blue; }
.red { color: red; }
Stycket kommer i så fall ha röd text.
Du kan även använda dig av
<?xml-stylesheet type="text/css" href="styles/1.css" media="screen,projection"?>
<?xml-stylesheet type="text/css" href="styles/1-print.css" media="print"?>
om du använder application/xhtml+xml mime type till dina XHTML 1.1 (och senare) sidor. Då funkar det bara i moderna webbläsare, så på min egna sida så har jag både <link> till IE och <?xml-stylesheet?> i fall det är en modern webbläsare som kommer gåendes. (kollar i accept headern som webbläsaren skickar till servern)
Hoppas det här svarade på era funderingar :). Sök efter mitt namn så hittar ni hur man fixar mimetypen i ASP .Net forumet.
//Henke
Opera använder "projection" i helskärmsläge, och "handheld" i "Small screen".
echoSwe, varför inte använda LINK istället för @import? Om du skriver media="screen,projection" så läser inte NN4 in stilmallen.
XML PI (<?xml-stylesheet ... ?>) fungerar för all XML, alltså även XHTML 1.0. ;)
Det var väl typ det jag sade?
Vem använder NN4 nu för tiden...
I fall de gör de så kommer de inte till min sida. Jag har inte ens haft en IE5.x som har besökt mig, så det är nog inget problem. Har aldrig haft en NN heller. Har haft några safari... Har haft ca. 700 unika ip adresser hitills.
Ja, det stämmer med xml. ;)
Om du använder LINK så fungerar det med IE också...
...
echoSwe skrev:
Då funkar det bara i moderna webbläsare, så på min egna sida så har jag både <link> till IE [...]