Firefox and alternate print styles

Alternate Media Styles and a buggy Firefox

One of the nice things about CSS/XHTML is that you can declare alternate stylesheets for use with different media. You can have a website look one way when viewed on a monitor and a different way when printed out. This is usually a good idea, because when you print a website some of the content can become meaningless. What use is a printed out navigation bar? What’s the point in that sidebar full of off site links and adverts? It’s just a waste of ink and paper when printed out.

I created a print.css file, which turned off the menu, changed the font into something more legible on paper and generally did some tidying up (Verdana is optimised for easy reading on screen, it doesn’t work as well on paper). I then attached the style sheets as follows, so that when a user prints out the webpage they get a nicely formatted printout, and when they view it on screen they get a sexy interactive layout:

  <link rel='stylesheet' type='text/css' media="screen, projection"
        title="coughdrop for screen"
        href='/css/coughdrop/index.css' />
  <link rel='stylesheet' type='text/css' media="print"
        title="generic print style"
        href='/css/print/print.css' />

This worked exactly as intended in Internet Explorer, but failed in Firefox, which refused to load the print.css. This was an odd turnout for the books, and after half an hour of research it was apparent that other people were having the very same problems and I’d not come across a single solution. After some tinkering I found out what was going wrong.

Getting Firefox to play ball

The above code is completely valid, but there appears to be a slight bug in Firefox’s implementation. If the title attribute is present in a media="print" link declaration, then Firefox will not load the print stylesheets. Simply removing the title attribute made everything work. Here’s the code make Firefox work properly:

  <link rel='stylesheet' type='text/css' media="screen, projection"
        title="coughdrop for screen"
        href='/css/coughdrop/index.css' />
  <link rel='stylesheet' type='text/css' media="print"
        href='/css/print/print.css' />

Entry Information

Posted:

Sun, 22nd May 2005 at 14:05 UTC

Filed under:

Web Development

Tags:

<link rel='stylesheet' type='text/css' media='screen' title='fixed width, default style' href='/css/fixed.css'> <link rel='alternate stylesheet' type='text/css' media='screen' title='fluid width' href='/css/fluid.css'> <link rel='stylesheet' type='text/css' media='print' href='/css/print.css'>

Comments

skip to comment form

Adam posted 22hrs, 41min, 48sec after the entry and said:
thats a really good idea i will try that as soom as i have done all my college work, and stopped pattting round on the net
Lance Wicks posted 1 days, 18hrs, 19mins after the entry and said:
Many thanks for the post! I had been experiencing the frustration of my print.css not working in FireFox and could not understand why!
All now works, many thanks!
Bruce Bowden posted 4 days, 16hrs, 19mins after the entry and said:
In Safari, all alternate stylesheets must have the same title as the first one, or no title. This may be the same in Firefox. Why is this so?
Matt Wilcox posted 5 days, 0hrs, 21mins after the entry and said:
The title element of a style sheet is exactly that - the title of the style: ‘fixed width’ or ‘fluid width’ for example. If Safari does require identical titles for alternative stylesheets that would be in contradiction with the specification. Forcing all alternative presentations to have identical titles isn’t semantic, in fact it’s completely meaningless.

One thing to remember when specifying alternate stylesheets for the same media type is to correctly label them as alternative styles, eg.
```
<link rel='stylesheet' type='text/css' media='screen'
      title='fixed width, default style'
      href='/css/fixed.css'>
<link rel='alternate stylesheet' type='text/css' media='screen'
      title='fluid width'
      href='/css/fluid.css'>
<link rel='stylesheet' type='text/css' media='print'
      href='/css/print.css'>
```
note the rel attribute on the two styles for which media='screen'
Nathan Smith posted 5 days, 1hrs, 20mins after the entry and said:
The only time an alternate stylesheet should need a title is if you are going to let people dynamically switch to it via JavaScript or a browser. In the case of print CSS, it is handled seamlessly without a title.

By the way, thanks for linking to my article. I’ve added you to my bloglines list.
Matt Wilcox posted 5 days, 4hrs, 29mins after the entry and said:
Yes Nathan you are completely correct, though I also wonder what happens if someone decides they want to provide multiple print styles? That scenario would be rare, but still plausable, and certainly seems allowable in the specs. I don’t see why the combination of one media type and a title attribute should make Firefox fall over.

No problem, thanks for writing the article, and cheers for the add

Archived entry | Matt Wilcox .net