Tuesday 22 January 2019

Targeting only Firefox with CSS




Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:






Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.




Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…


Answer



OK, I've found it. This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.





@-moz-document url-prefix() {
h1 {
color: red;
}

}

This should be red in FF






It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: Mozilla CSS Extensions.


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...