Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

Site specific stylesheets in Mozilla

New in Mozilla 1.8 Alpha 3: bug 238099—implement at-rule for matching on site/document URL. Here’s the example:

@-moz-document url-prefix(http://www.mozilla.org/) {
  #q { background: white ! important; color: black ! important; }
}

Drop that in your userContent.css file for black-on-white search fields, but only for pages with URLs starting in http://www.mozilla.org/. Two other selection functions are available: domain(mozilla.org) for all page (and sub-domains) of the mozilla.org domain and url(http://www.mozilla.org/) for just the page matching that exact URL.

The sooner this makes it in to Firefox the better.

Posted 19th August 2004 at 3:33 am

This is Site specific stylesheets in Mozilla by Simon Willison, posted on 19th August 2004.

View blog reactions

Next: A snarky note from the administrator

Previous: Participatory journalism

18 comments

  1. Quick thought: it would be nice if such a mechanism had a way to inform the UA to not use the author stylesheets, or to disregard even the default UA stylesheet.

    Style overrides in user stylesheets are one thing, but if you're really obsessive about using your own styling---but only on specific sites---starting from a blank slate would be easier.

    J. King - 19th August 2004 07:30 - #

  2. Im almost sure this won't be included in 1.0. The follow-up release, 1.1, will probably have it.

    Anne - 19th August 2004 07:55 - #

  3. Wow, it's entirely possible that that's the ugliest CSS rule I've ever seen.

    Phil Wilson - 19th August 2004 10:03 - #

  4. For sure, it's a great addon for me, specially for navigate in sites that i like in the work without getting discovered. Mozilla team is making a great work with all it's products.

    Leandro Ardissone - 19th August 2004 14:43 - #

  5. It certainly offers real possibilities and improvements over CSS-Signatures. But it remains a bit of a geek thing (as with all the user stylesheet problems) for now. One can't expect the average user out there to be able to create a user style sheet. What more is needed is a good interface to allow the user to interact with the page. Omniweb 5.0 has some interesting features in this regard.

    Philippe - 19th August 2004 15:36 - #

  6. There is a good use for this if you have your Windows colors inverted (ie. background color black and foreground color white or light grey). Plenty of sites fail to realize that when they specify a black text color for form fields (input / textarea), they should also specify a BACKGROUND color. And vice versa. You won't believe how often I encounter a page where I get black text on a black input field, or light grey text on a white input field.

    This solution allows me to fix their faults, 'cos not all of them listen to input and apply the easy fix. *sigh*

    Faruk Ates - 20th August 2004 12:23 - #

  7. Another solution might be to use existing CSS2 to style the form fields using the system (Windows) colours. So they would always match what you had set Windows to look like.

    See here for further details in a demo:

    http://www.meyerweb.com/eric/css/tests/css2/sec18- 02.htm

    Chris Hester - 20th August 2004 16:28 - #

  8. As Dylan noted at Moz Dev Day when David Baron showed this to us, it allows the possibility of Mozilla-specific CSS for site developers. Poor Mr. Baron wasn't too enthralled with the observation.

    David Schontzler - 21st August 2004 09:51 - #

  9. In response to Phillipe One can't expect the average user out there to be able to create a user style sheet.:

    I've got two points on this:

    1. How many people who use Mozilla 1.8 alpha builds are average users? (This point will eventually become defunct, but I would say it's crrenty valid
    2. The chromEdit extension makes it incredibly easy to create and manage user stylesheets within an XUL window in mozilla, you can find it here

    Glen Mailer - 21st August 2004 13:33 - #

  10. This feature will not be in Firefox 1.0, because it's only in the bleeding-edge trunk for the backend, and Firefox 1.0 is based off a branch from that trunk (which isn't technically correct but is close enough) at a point when it was particularly bug-free.

    It will be in Firefox 1.1, because Firefox 1.1 will be based off a branch from the bleeding-edge trunk at some point after 1.0 is released.

    Jeff Walden - 22nd August 2004 19:14 - #

  11. Answering to Glen: I am looking at the bigger picture here. Of course, only geeks use nightly builds or the latest Technology Preview. The problems with User Stylesheets, as far as the average user is concerned, are [1] the user has to know what a stylesheet is and [2] how to handle them (experience on mailing lists shows that even webdeveloppers have problems ...), the interaction between the various elements, the cascade, etc, etc...

    Don't get me wrong. This new tool is very very nice, and I already use it with my Firefox nightly trunk build. And as soon as Moz 1.8 final is released, I'll be able to use this for the User Style sheet for my 70 years old neighbour. What I'd like to see, in the future, is a UI for handling user stylesheet, or at least some core features, such as font-sizing/background-colours. ChromEdit, or Edit CSS, are nice extensions; but my neighbour won't be able to edit this.

    Philippe - 23rd August 2004 01:39 - #

  12. Why is it that my style sheets works with IE but when firefox 1.0 loads the page on some of the styles are loaded. But when I view the CSS with one of the extenstions the page loads with the whole style sheet?

    daniel bennett - 27th December 2004 14:35 - #

  13. I'm very excited about the project as I just finished a design theme for csszengarden.com You can have a look at celebrity Blog CSS Zen Graden Theme Design

    Jane Jolin - 29th July 2005 18:21 - #

  14. I'm very excited about the project as I just finished a design theme for csszengarden.com You can have a look at celebrity Blog CSS Zen Graden Theme Design

    Jane Jolin - 29th July 2005 18:29 - #

  15. I have used this to overcome a problem mail.com has with alt text for its button images, which don't display when 'from originating site only' is selected in Firefox options. The resulting alt text happens to be the same colour as the background. Oh, and chatting about this in #Firefox pointed me here and prevented a possible invalid bug report. Big it up for you guys! :)

    mail.com user - 18th October 2005 05:08 - #

  16. I really want to know the same thing as daniel bennet above - "Why is it that my style sheets works with IE but when firefox 1.0 loads the page on some of the styles are loaded. But when I view the CSS with one of the extenstions the page loads with the whole style sheet? " I have Firefox 1.5 and what I design works fine in IE, but not all of the classes will display in Firefox. They are there in the text - but will not render. Can anyone tell me what is the problem?

    Sam Senteney - 2nd January 2006 20:28 - #

  17. Site specific stylesheets are already available in Firefox 1.5.*. It is very surprising that this feature has drawn very little attention, as it can be considered a sort of Greasemonkey for styles. I've just checked the url-prefix and domain keywords, they work just fine (you have to restart ff after making changes in userContent.css for them to take effect). Two things I miss the most: first, location urls are checked against full urls, url-prefixes, or domains, regexps not being supported. Secondly, it would be just GREAT if there were support for (url-dependent) xlst-stylesheets, this would constitute the true equivalent of Greasemonkey for styles. Of course you can still use GM to get around these limitations, but the way over js seems to be an unnecessary complication.

    esquifit - 17th April 2006 20:09 - #

  18. TO DANIEL BENNETT AND SAM SENTENEY

    ONE REASON WHY STYLE SHEETS DON'T WORK IN FIREFOX

    I don't know why classes won't be displaying and my information may be completely irrelevant to both of you but here it is for what it is worth, and for anyone else who ends up here with the problem I had.

    I used a comment line in my style sheet so I would know when I last updated it. As would be usual in documentation, it was the first thing on the page. WRONG!!! This isn't a problem for Internet Explorer but in Firefox, it caused it to ignore the style information. If you want to put comment lines in stylesheets, Firefox needs them to be AFTER the code you want used.

    Lyn - 14th September 2006 03:24 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2004/08/19/specific

A django site