Inhalt

CSS-Wiki.com

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

background-image Hack

ACHTUNG:
Opera hat diesen "Fehler" derweil beseitigt - ein gutes Beispiel dafür, dass man nicht auf Lücken der Browser setzen sollte - werden dann irgendwann geschlossen ;-)? 

Leere Hintergrundgrafik - fehlendes Quot

Die Entdeckung eines eigenen Hacks

Wer den "Post Semicolon Hack" für den Safari kennt, hat vielleicht eine Ahnung, wie ein Hack überhaupt funktionieren könnte: Ein fehlendes Leerzeichen oder ähnliches verhindert je nach Browser, dass entprechende CSS-Anweisungen gerendert werden, und der Browser eben ein Style überliest. 

Der "Pound Safari Post Semicolon Hack" arbeitet so, dass hinter einer Anweisung, hinter dem Semikolon eine Raute notiert wird. Bis zum Safari 2 führt das dazu, dass das komplette folgende CSS ignoriet wird, das danach folgt. Die Raute schient ab dort das CSS abzuschneiden. 

/* alle Browser */  
.klasse { 
    eigenschaft:wert; 
}   
/* alle Browser außer Safari*/  
.klasse { 
   eigenschaft:wert;# 
}   
.klasse { 
   eigenschaft:wert; 
}
                   

Die Raute scheint alles folgende Anweisungen für den Safari zu deaktivieren - es scheint auskommentiert zu sein. 

Opera verschluckt sich an Single-Quote im background-image Anweisung.

div {
   color : blue
   background-image : url(');
   color : red
}
                   

Die fehlende Bildangabe, maßgeblich aber das fehlende zweite "Single-Quot" führt dazu, dass der Opera die Zeile, die nach dieser Anweisung folgt, ignoriert. 

Das hat in diesem Quelltext-Beispiel den Effekt, dass in allen Browsern der Text rot dargestellt werden würde - nur im Opera wird die letzte Anweisung ignoiert - der Text wäre blau. 

Herstellen der Validität

Validiert man diesen CSS-Schnipsel durch den W3C-Validator, meldet dieser allerdings einen Fehler. Dieser ist mit folgendem Workaround zu beheben: 

div {
   color : blue
   background-image : url(\\');
   color : red;
}
                   

Ein Slash selber entwertet das Single-Quot - dieser wird danach allerdings als Fehler gemeldet. Wird ein zweiter Slash hinzugefügt, entwertet der Validator damit den zweiten Slash, welcher ja das Quot entwertet, und man erhält ein gültiges W3C Ergebnis. 

Bewertung

Hier kann man von einem tatsächlichem Hack reden. Von daher ist dieser mit Vorsicht zu einzusetzen - einerseits kann man die Quereffekte nicht erfassen, anderer seits kann die nächste Opera-Version diesen Fehler behoben haben. 

Zumal sollte man sich vor Augen halten, dass man durch den doppelten Back-Slash lediglich den Validator des W3C hinters Licht führt - ob damit wirklich die Standardkonformität gewährleistet ist, ist kritisch zu betrachten. 

Persönlich betrachtet ist es natürlich spannend, einen Hack entdeckt zu haben - zumindest zu glauben, man habe einen entdeckt. Gibt es jemand, der diesen Hack an anderer Stelle schon gesehen hat? Mitteilung wäre super! 

© 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