Inhalt

CSS-Wiki.com

CSS Wiki.com CSS 2.1 und CSS 3 Alle CSS­Eigenschaften auf einen Blick! CSS-Wiki.com

CSS-Datei speziell für Safari

Reguläre CSS-Datei-Verlinkung

Die reguläre Einbindung von CSS-Dateien über den Link-Tag sieht wie folgt aus: 

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

Mit der MIME-Type-Angabe type="text/css" gibt man dem Browser bekannt, dass die Datei, die über den link-Tag eingebunden ist, eine CSS-Datei ist, und deswegen auch als CSS interpretiert wird. 

MIME-Typ: type="text/safari"

Eine Abweichung in der MIME-Type-Angabe führt dazu, dass eine CSS-Datei für den Safari eingebunden wird. Genau genommen bindet diese Angabe das CSS nicht explizit für den Safari ein, sondern verhindert die Einbindung in Firefox, Internet Explorer, Netscape und Co. Bis in die 9.x Versionen von Opera galt dies auch dafür, dies wurde allerdings auch derweil "behoben" und funktioniert heute nur noch für den Safari. Und das auch noch in der 4er Version. 

HTML Code-Beispiel

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

Safari benötigt für die Einbindung der CSS-Datei nicht die korrekte Schreibweise des MIME-Types. Schlüsselwort ist für den Safari ist das rel-Attribut: rel="stylesheet".

Deswegen ist auch folgende Schreibweise korrekt, der W3C-Validator bestätigt einen standardkonformen Quelltext: 

<link rel="stylesheet" type="text/no-mime-type" href="sf.css" />

Die MIME-Type-Angabe ist allerdings zwingend notwendig - wird diese weggelassen - was kein Verstoß gegen den Standard wäre - wird die CSS-Datei auch von allen anderen Browsern eingelesen und interpretiert. 

Achtung: Auch der alte Operas kommen ohne MIME-Type aus

Als kritisch ist zu betrachten, dass ältere Operaversionen ebenfalls diese Art der Einbindung unterstützen. Individuelle Angaben treffen also alte Operas und Safari. 

Allerdings hat man mit dem Safari-Hack die Möglichkeit, in dieser speziellen CSS-Datei Anweisungen separat für Opera und Safari zu schreiben. Im Gegensatz zum Safari-Hack im Haupt-CSS muss hier nicht mal der Ausgleich für die Internet Explorer geschaffen werden. 

CSS Code-Beispiel

/* Opera */
#inhalt div {
   width: 19.25em;
}
/* Safari */
html* #inhalt div {
   width: 17.1em;
}

Bewertung

Da - aktuell relevante Browser betrachtet - nur ältere Opera-Versionen und Safari diese CSS-Datei-Einbindung unterstützen, ist dies eine elegante Möglichkeit, spezielles CSS für Safari zu schreiben. Allerdings ist die Unterstützung von älteren Operaversionen kritisch zu betrachten, unerwünschte Nebeneffekte sind nicht vermeidbar.? 

Bei der weiteren technischen Entwicklung, egal ob neue Browser oder Browserversionen auf den Markt kommen, muss man im Auge behalten, dass dieser "Hack" auch von anderen Browsern unterstützt werden könnte. 

© 2008-2019 - Stephan Heller [daik.de]

Quatsch? Unsinn! Wie jetzt gleich?

Wir versuchen, alles zu testen und nur richtige Dinge zu schreiben, vielleicht haben wir aber hier und dort was übersehen, die Beschreibung ist in der Ausdruckweise nicht vollständig, oder es gibt Anregungen, was hier stehen sollte oder welcher Link noch fehlt.

Wir freuen uns über jede Anregung! Kurze Mail an mail@css-hack.de.


 
Anbieter: daik.de || Impressum || Datenschutz || hosted by Host Europe

CSS-Wiki.com || Foto Studio Köln || Barrierefreier kostenloser Webcounter