ein oder getrennte Stylesheets für unterschiedliche Ausgabemedien?

[Gunnar Bittersmann]

Hi,
Wie macht Ihr Stylesheets für unterschiedliche Ausgabemedien?

(1) eine Datei
    all.css:
        ~~~css @media screen {
            foo {bar:baz}
        }
        @media print {
            foo {bar:quz}
        }

  
    einbinden mit  
        `<link rel="stylesheet" type="text/css" href="http://example.net/all.css" media="all" />`{:.language-html}  
  
  
(2) getrennte Dateien  
    screen.css:  
        `foo {bar:baz}`{:.language-css}  
    und  
    print.css:  
        `foo {bar:quz}`{:.language-css}  
  
    einbinden mit  
        ~~~html
<link rel="stylesheet" type="text/css" href="http://example.net/screen.css" media="screen" />  
        <link rel="stylesheet" type="text/css" href="http://example.net/print.css" media="print" />

IMHO krankt Variante (2) an der einfachen Erweiterung, z.B. für Screenreader. aural.css ist schnell geschrieben, aber
    <link rel="stylesheet" type="text/css" href="http://example.net/aural.css" media="aural" />
muss ja in jede einzelne HTML-Datei eingefügt werden. (Sämtliche Links zu Stylesheets könnten natürlich auch mit SSI o.ä. aus einer Datei eingefügt werden.)

Was seht Ihr als Vor- und Nachteile beider Varianten?

Gunnar

[Sven Rautenberg]

Moin!

Wie macht Ihr Stylesheets für unterschiedliche Ausgabemedien?

(1) eine Datei

Funktioniert mit dem IE auf Mac nicht, weil der kein @media versteht.

Also gezwungenermaßen die Variante mit verschiedenen Dateien je Medium.

• Sven Rautenberg

[Cheatah]

Hi,

Also gezwungenermaßen die Variante mit verschiedenen Dateien je Medium.

... die dann z.B. auch per @import eingebunden werden und @media-Rules enthalten können. There's more than two ways :-)

Cheatah

[Jeena Paradies]

Hallo,

IMHO krankt Variante (2) an der einfachen Erweiterung, z.B. für Screenreader. aural.css ist schnell geschrieben, aber <link rel="stylesheet" type="text/css" href="http://example.net/aural.css" media="aural" /> muss ja in jede einzelne HTML-Datei eingefügt werden.

Ich  verstehe nicht ganz, muss das erste nicht genau so in jede HTML Datei rein? Wo ist da der Unterschied? Und wenn es im nachhinein rein soll, dann dann ist es genau das gleiche wie bei Menüs, wenn man keine Frames einsetzt. Einfach Dateiweites Suchen und Ersetzen und gut ist.

Grüße
Jeena Paradies

[Gunnar Bittersmann]

Einfach Dateiweites Suchen und Ersetzen und gut ist.

Jeena,
Genau das will ich ja aber umgehen.

Na razie,
Gunnar

[Jeena Paradies]

Hallo,

Genau das will ich ja aber umgehen.

warum?

Grüße
Jeena Paradies

[Gunnar Bittersmann]

Genau das [dateiweites Suchen und Ersetzen] will ich ja aber umgehen.
warum?

Jeena,
Die Dateien liegen in der Verzeichnisstruktur in unterschiedlicher Tiefe. Hm, ist wahrscheinlich unter UNIX/Linux trotzdem nur ein Einzeiler.

Allerdings sollten auch andere Personen das verstehen/ändern können.

Ich werd dann wohl die Links zu den Stylesheets serverseitig einbauen, dann müssen Änderungen auch nur an einer Stelle vorgenommen werden.

Danke auch an Sven und Cheatah.

3majcie się, chłopaki.
Gunnar

[Ingo Turski]

Hi,

einbinden mit
        ~~~html

<link rel="stylesheet" type="text/css" href="http://example.net/screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="http://example.net/print.css" media="print" />

>   
>   
> IMHO krankt Variante (2) an der einfachen Erweiterung, z.B. für Screenreader. aural.css ist schnell geschrieben  

nicht nur daran - Du hast auch den Opera im Vollbild-Modus vergessen.  
Ich ziehe für den Druck eine eigene CSS-Datei vor, binde aber das Basis-CSS ohne Media-Angabe ein. Wenn Du das auch so machst, kannst Du (wie Cheatah auch schon andeutete) hierin auch einen Block @media aural angeben.  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)