Inhalt

CSS-Wiki.com

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

CSS-Hack für Firefox

Firefox stand in der Vergangenheit stets für eine gute CSS-Unterstützung. Dies ist weitgehend auch so geblieben, allerdings gibt es derweil doch Abweichungen zu anderen Browsern, beispielsweise bei der Darstellung von Submit-Input-Elementen <input type="submit"> beziehungsweise Buttons <button></button>, sodass auch CSS-Hacks für den Firefox benötigt werden.

In der Vergangenheit war der Einsatz der Pseudo-Klasse :root ein Weg, spezielle Anweisungen nur für den Firefox zu hinterlegen, was früher außer vom Firefox nur vom Safari und dem Konquerer unterstützt wurde und somit eine Einschränkung auf die wenigen Browser zuließ. Derweil wird :root aber auch von Opera und vom Internet Explorer ab der Version 9 unterstützt, dass dieser CSS-Hack heute nicht mehr hilfreich ist.

@document-Regel: url-prefix()

Mit CSS3 entstand das Conditional Rules Module. Der Gedanke dahinter ist, dass man eine bestimmte CSS-Regel auf bestimmte Abschnitte in der URL beziehen kann. So könnte zum Beispiel die gleiche Homepage, die auf zwei unterschiedlichen Domains zu finden ist, mit unterschiedlichen CSS-Abschnitten versehen werden.

Ein Parameter dabei ist url-prefix(). Darüber könnte "ausgelesen" werden, ob die Seite mit https aufgerufen wird. Dies kann hilfreich sein, um Hintergrundgrafiken über eine absolute https-URL einzubinden und damit Konflikte mit einem Sicherheitszertifikat zu vermeiden.

Diesen Parameter kann man als generellen Firefox-CSS-Hack nutzen: Lässt man den Wert in den Klammern für url-prefix() leer, trifft die Regel immer zu. Da die @document-Regel mit dem Vendor-Präfix -moz- hinterlegt werden kann, wird eine solche Regel ausschließlich vom Firefox ausgelesen und stellt damit einen sicheren CSS-Hack für den Firefox dar. Auch wenn nicht wirklich zukunftssicher, da die Firefox-Entwickler die @-moz-document-Unterstützung auch irgendwann wieder entfernen können.

Beispiel für CSS-Firefox-Hack

HTML-Code

<div class="firefox-demo">eine Box</div>

CSS-Code

div.firefox-demo {
    border: 1px solid black;
    padding: 1em;

    background-color: lightgreen;
}

/* Nur Firefox */
@-moz-document url-prefix() {
    div.firefox-demo {
        background-color: lightsalmon;
    }
}

Darstellung

eine Box

Die oben notierte CSS-Regel führt dazu, dass lediglich im Firefox die Hintergrundfarbe in einem hellen Lachs-Ton angezeigt wird, alle anderen Browser zeigen eine hellgrüne Hintergrundfarbe an.

Das Prinzip ist von daher relativ einfach, alle speziellen CSS-Regeln, die für den Firefox benötigt werden, können also innerhalb der @-moz-document url-prefix()-Regel hinterlegt werden. Fertig ist der Firefox-CSS-Hack ;-)

Weiterführende Links

© 2008-2017 - 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 || hosted by Host Europe

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