StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First of all, a disclaimer. I don't really advocate for the solution I present below. The only browser specific CSS I write is for IE (especially IE6), although I wish it wasn't the case.</p> <p>Now, the solution. You asked it to be elegant so I don't know how elegant is it but it's sure going to target Gecko platforms only.</p> <p>The trick is only working when JavaScript is enabled and makes use of Mozilla bindings (<a href="https://developer.mozilla.org/en/XBL/XBL_1.0_Reference" rel="noreferrer">XBL</a>), which are heavily used internally in Firefox and all other Gecko-based products. For a comparison, this is like the behavior CSS property in IE, but much more powerful.</p> <p>Three files are involved in my solution:</p> <ol> <li>ff.html: the file to style</li> <li>ff.xml: the file containg the Gecko bindings</li> <li>ff.css: Firefox specific styling</li> </ol> <p><strong>ff.html</strong></p> <pre><code><!DOCTYPE html> <html> <head> <style type="text/css"> body { -moz-binding: url(ff.xml#load-mozilla-css); } </style> </head> <body> <h1>This should be red in FF</h1> </body> </html> </code></pre> <p><strong>ff.xml</strong></p> <pre><code><?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="load-mozilla-css"> <implementation> <constructor> <![CDATA[ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", "ff.css"); document.getElementsByTagName("head")[0] .appendChild(link); ]]> </constructor> </implementation> </binding> </bindings> </code></pre> <p><strong>ff.css</strong></p> <pre><code>h1 { color: red; } </code></pre> <p><strong>Update:</strong> The above solution is not that good. It would be better if instead of appending a new LINK element it will add <em>that</em> "firefox" class on the BODY element. And it's possible, just by replacing the above JS with the following:</p> <pre><code>this.className += " firefox"; </code></pre> <p><strong>The solution is inspired by <a href="http://dean.edwards.name/moz-behaviors/" rel="noreferrer">Dean Edwards' moz-behaviors</a>.</strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload