I humbly submit to the esteemed authors of this site to please consider that 90% of everybody uses IE6. I hate it, it sucks, IE is the devil incarnate, it is a clear violation of the monopolistic power of Microsoft. It isn’t a browser its an application platform. I wish it ill.

Having said that, we are stuck with it. I recommend a new approach from the good people who produce this site: would you consider a satay section to provide some solace and support for techniques we may deploy without a trip to css-destroy?

You can do this with the Opera browser, without installing anything else on it (ie. it’ll work with a freshly-installed out-of-the-box Opera). Opera lets you pick your own stylesheets when viewing page (“User mode”); one of them shows the structural elements of a page; printing will print with the stylesheet(s) you have selected.

Adding a new stylesheet to the list is a bit more complicated (you have to add entries to an .ini file, see here: http://nontroppo.org/wiki/OperaUserCSS )... works, though.

You might consider using Jesse Ruderman’s “Ancestors” bookmarklet, available from http://www.squarefree.com/bookmarklets/webdevel.html , which shows you the full ancestor tree of every element on a page when you hover over it. This, combined with his “Edit styles” bookmarklet (also available on that page), gives you a great deal of power and flexibility when testing new styles on a page.

Thanks for putting this together, Derek. I’d been using the Web Dev Toolbar for months without even noticing all that…

Just to make this all even more cool (imho):

Two more extensions in Firefox and Mozilla make it possible to Edit the CSS in this way and then make the changes a permanent addition to any site.

These are URIid: http://extensionroom.mozdev.org/more-info/uriid and ChromEdit: http://extensionroom.mozdev.org/more-info/chromedit.

ChromEdit just provides a quick way to get into the userContent.css—css rules in this file will override those of webpages. (you may need to use !important in some cases, I think)

URIid lets you make rules specific to web sites using a unique id it assigns to every site.

Just to give a quick example: say you want to change the typeface on ALA’s sidebar list of lists. (They are so tiny!)

You’d use the methods Derek described to find the class / id names and figure out the right CSS to use. Then you’d put those rules in the userContent, prefacing the selector of each one with #www-alistapart-com .

End result to put in userContent.css:

#www-alistapart-com #sidebar dl, ul {
font-family: “Verdana”;
}

Then restart your browser to let those changes take effect.

Instant customized webpage! You can go pretty far with well written sites (think CSS Zen Garden). You can also find several simple rules on the URIid page above for changing the background color of Google.

Dave Shea made the same mistake, which is why he’s not my favorite person. He claims that his dropdowns on Mezzoblue (or “Mess of Blue”) will work in Mozilla, Opera, and Safari. They don’t work in Opera.

Am I wrong, or won’t the clever adjacent selector rules shown at the article’s end fail in the ever popular IE 6? I thought IE had problems with adjacent selectors, which would make selecting the first cell of the second row in the third table pretty hard. Is there an alternative way around this short of ritual suicide? :)

The majority of the comments above don’t give praise where [I think] praise is due. Just the shear fact that the super handy “Developer Toolbar” was pointed out to us makes it worth it’s weight in gold. A simple two-second add-on to Firefox (or Mozilla) and you’ve got your web development IDE! I haven’t tried yet, but I see no point in coding CSS in one text editor only to switch back and forth (thank dog for Ctrl+Tab) to see the results.

I have have to admit the CPU (my old PIII anyway) is a bit dogged out in CSS Edit mode, but it sure beats the traditional method of creating a style sheet and jumping back and forth to view the page.

That’s without even touching on the purpose of this article, helping create perfect print versions of our sites.
Upon first look, I thought there would be an option on the dev toolbar to switch to a “Print View” which would scrunch the page down to 8 1/2” by 11” sizing, then you can edit the @media=“print” version of the CSS rather than the screen version. It’s a minor complaint considering the greatness of the toolbar, I give it a 9/10.

>> Having said that, we are stuck with it.
>> I recommend a new approach from the good
>> people who produce this site

Nobody is stuck testing/developing in IE, only stuck having to hack your CSS to look good in IE… pretty big difference. There is no reason (nor logic) why a web developer would choose to ignore standards compliant web browsers in favor of web development in a buggy, IE browser. It sounds like self-inflicted punishment to me.

Jonah wrote: “(By the way, is it just me or is there no longer a #contentBox at Boxes and Arrows?”

Actually - #contentBox is still there. Its found on the individual article pages which is where the “create your own print style sheet” customization would be most useful… Nice work on the attribute selector to hide some of the “other” content on that main page!

i usually like server generated documents because they cator to things like displaying link URLs in the pages they generate for.

Most of us have had to have experienced printing out an article filled with links to external resources, sometimes vital to understanding the article, and then later realizing that we have no idea what those links’ urls are once we are reading it over. sitepoint’s printable page for example printed a number next to given links in the article, and then later on at the bottom of said article gave the url to the corresponding numbers… for instance if i were linking to ALA in the article it would say ala[1] and then at the bottom:

In my mind, “printing it my way” shouldn’t include:
- Downloading and installing a new browser and toolbar
- Learning more about CSS
- Learning a bunch more about the code of a site I just want to print from
- Creating new code for each new site (or page type) that I want to print

Why in the world would someone want to go to all this trouble just to print a web page “better”?

I’ve already got basic printing capabilities with my browser. I can also turn images off, and if sites are coded properly, I can change font sizes. I also have some other options depending on what I’m trying to capture in print: things like screen captures and copy & paste often come in handy if I’m just trying to print part of a page. While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.

User-specified, site specific, print stylesheets aren’t realistic. The article is an exercise in what is theoretically and maybe technically possible, but it is not pragmatic. Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis. They just want to click the print icon (or hit ctrl-p) and have done with it. They’re busy people.

Now, if you can tell me how my site could provide our users more flexibility in printing without putting such a heavy burden on every user, THAT would be valuable! :-)_

Lyle: re: “While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.”

I get the sense from your comment (and other people’s comments) that this may not have been clear enough in the article: this was never intended to be a method for “the masses”/end-users printing, it is aimed directly at web developers. These web developers most likely have Firefox installed and already have a working knowledge of CSS - enough to make this technique work. After all, we are users too, and why shouldn’t we use the tools we have to make our end-user experience better?

re: “Why in the world would someone want to go to all this trouble just to print a web page “better”?”

The first time I tried to do this, it was because an article I wanted to print was 7 pages long, mostly filled with items that were irrelevant to the article - images, ads, site navigation, and other related items. There wasn’t a print friendly version, so I ended up taking it into my own hands and used the tools I had at my disposal. When I was done, I had an article that printed in two pages and only contained what I wanted on it. That’s why I started doing it elsewhere as well…

re: “Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis”

Agreed. The first time I used this technique, it took me about 20 minutes to get the article I wanted to print into a form with which I was happy. Any that I have done recently have taken less than 5 minutes, and I save them for later so that I don’t have to use the approach on a regular basis.

Now, if I had claimed that this was a way to bring better print versions to the all end users, well then, yes, I would have been kidding… ;)

For what it’s worth I use IE6 and have no problem applying my own stylesheet.

Actually, I cheat, I use a free ‘shell’ for IE called MyIE2 that extends (and fixes) it tremendously. Tabbed browsing, filtering, mouse gestures, load Gecko engine, etc. It also offers it’s own plugin architecture and among “Show Blocks”, “Toggle Tables”, and “Rulers” is “My Style”; a one-button stylesheet substitution.

I make most use of “My Style” to ‘correct’ otherwise difficult to read sites. Tiny-white-text-on-a-black-background? No more! Too many fancy effects applied to the content, so it’s more akin to a ransom note then a coherent series of paragraphs? Fixed! And yes, after restyling, ‘bout everything is suitable for printing.

I like the idea of this, but am not sure I can quite spend the time creating custom style sheets for each site I print from, especially given how often sites change structure. I do quite like the idea, in principle, of a custom print style sheet though - something I have not yet added to my version of Opera ...

This is the way I use Firefox posibility’s very often. To everyone: try it and you’ll never choose another way. While I say this, maybe this isn’t the best option. Try it, compare it, en use it if it’s in your opinion the best method.

As someone who is still learning the ins and outs of CSS, I would frequently grab a site and its CSS, and disect it by adding different colored borders to the various block level elements in order to disect the site (as I’m sure all you gurus once did before you were gurus). Now I can do that with just a button click! Coolness!

Mmmbeer hit the nail on the head with “display:none” rather than “visibility: hidden” (at least for me). Worked like a charm - thanks! No more annoying whitespace!

The print stylesheet I’m designing will hopefully keep people from having to cut/paste or jump through assorted hoops just to get an article’s text. These media-specific CSSs made a lot of sense, especially after reading Molly Holzschlag’s and Eric Raymond’s books - their approach seems to be “make it simple to code *and* use. Appealing and pragmatic.