Paul Mischler (misch) wrote,
Paul Mischler
misch

Cooks Illustrated recently launched a new website.

Although it's true that they made the site a little bit more aesthetically pleasing, they made a number of changes to the site that didn't look so good.

Being the geek that I am, I looked into the code of the page and saw some ways that they could improve their page design.  I e-mailed them (well, at least I think I e-mailed them, I can't find the e-mail I sent) a few weeks ago with my suggestions for the page:

1. Set the "print" version of the page to have the recipe title in bold text.  The old site had bold text, and when you print something out and stick it in your binder, it's far easier to find it the next time.

2. Get rid of the ridiculous spacing between the letters in the title.  (Seriously, 1.85px of spacing?)

3. Bigger title font size. (15.5 px?)

4. (And this one is a technical flaw) the recipe instructions text is already numbered.  On the page, they've enclosed the list of instructions in an <ol> (ordered list) tag.  The text of the instructions already has the number present.  When printed out, the instructions look like this:
  1. 1. Do A
  2. 2. Do B
  3. 3. Do C
Of course, their normal CSS sets the ol to list-style-type: none;, which suppresses the numbering of the list.  The printing CSS doesn't have the restriction.

Not surprisingly (since it looks like I never sent the e-mail), my suggestions weren't incorporated.

What's a geek to do?!?!

With Firefox, the answer is simple: userContent.css.

Firefox allows you to specify custom CSS code and apply it to all sites, all sites across a domain, or web pages with a specific URL.


The userContent.css file is located in your Firefox profile's chrome directory.  In this text file, you can place direct snippets of CSS code.

Example: Disable all blink text

blink { text-decoration: none ! important; }


Change CSS for a particular domain:

@-moz-document domain(paulmischler.com) {
  font-size: 14px !important;
}


and for a particular page (or set of pages):
@-moz-document url-prefix(http://cooksillustrated.com/recipes/print/detail.asp) {
 h1 {
     font-weight: bold ! important;
     color: #000000 ! important;
     letter-spacing: normal ! important;
     font-size: 24px ! important;
 }

 ol {
    list-style-type: none ! important;
 }
}
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 3 comments