Safari Tip 1: Reloading Stylesheets

Safari 2.0 (and probably other versions) does not reload stylesheets when you reload a page, not even if you hold down the shift key when pressing Reload, not even if you quit and restart the browser. This makes it difficult to debug your CSS. You can force Safari to reload the stylesheet by manually loading the stylesheet into the browser as text, reloading it, and then reloading the HTML page. That is,

  1. View source on the HTML document to find the stylesheet link. For instance in this page you’ll see this tag in the head:

    <link rel="stylesheet" href="http://www.elharo.com/blog/wp-content/themes/custom/style.css" type="text/css" media="screen" />

    The stylesheet is at http://www.elharo.com/blog/wp-content/themes/custom/style.css
    If it’s a relative link, adjust accordingly.

  2. Copy the link into the location bar and press the return key.
  3. At this point you should see the old stylesheet Safari has in its cache. Hit reload.
  4. Go back to the original page. Hit reload again.
  5. You’re done! You should now see the newly styled page.

Frankly, this is a pain, which is why I prefer to do most of my CSS hacking in Firefox. However, I have Firefox configured to always use my own font faces and sizes so for font hacking I prefer to use Safari. If only so many sites didn’t insist on using ridiculously small fonts, I might be able to respect the stylesheets they sent me and use Firefox for everything. (Folks, 10 points is barely adequate for a newspaper. 12 points is an absolute minimum for readable web sites, and larger fonts are better.)

8 Responses to “Safari Tip 1: Reloading Stylesheets”

  1. Jon Says:

    fyi: Your example code is appearing under the “skyscraper” AdSence ads in Firefox. In IE, the line has caused layout issues.

    Jon

  2. Elliotte Rusty Harold Says:

    Yes. I see that myself in Firefox. It’s not just a IE issue. I was just about to write a three-paragraph response detailing exaclty what’s happening there and why and what the issues are, but then it occurred to me that makes sesne as an article in itself. Hang tight. :-)

  3. David Says:

    Why not set up two Firefox profiles, one for regular use and one for development? Leave the development one as vanilla as possible.

  4. Elliotte Rusty Harold Says:

    Can I run two profiles simultaneously? i.e. as if they were two different browsers? I rely on having Firefox open for all sorts of tasks just to get my work done. That’s a big reason I use Safari, so I can have one browser for testing and one just for using.

  5. Todd Says:

    Elliotte… I’m always bumping up against Safari’s overzealous chaching issues too! (I guess it’s the price we pay for fast rendering, but as a dev, it’s a pain)

    Here’s a little Safari tip that works for me… Under the Safari menu, you’ll see an item named ‘Empty Cache…’. There’s even a keyboard shortcut… command-option-e. For me this usually flushes cached css and js. Next time you reload, it should refetch the css and js files. Hope it works for you.

  6. David Says:

    Here’s some info:

    http://www.mozilla.org/support/firefox/profile

    You also have the option of creating a separate user account, of course.

  7. Anders Says:

    I have activated Safari debug meny and here you can control a lot of feture as cache and here i have a button to clear style an other, then
    safari have to reload.

    Or do i have to missunderstand the problem…
    // Anders

  8. Steve Root Says:

    If only so many sites didn’t insist on using ridiculously small
    fonts, …. 10 points is barely adequate for a newspaper. 12 points is an
    absolute minimum for readable web sites, and larger fonts are better.)

    I thought it was best practise to specify no font sizes in CSS? Just relying on the relatively sized tags (heading and p) tags. That way users can choose a font size to suit their hardware and personal needs and your layout will always be readable.

Leave a Reply