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,
- 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. - Copy the link into the location bar and press the return key.
- At this point you should see the old stylesheet Safari has in its cache. Hit reload.
- Go back to the original page. Hit reload again.
- 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.)
January 26th, 2006 at 10:10 AM
fyi: Your example code is appearing under the “skyscraper” AdSence ads in Firefox. In IE, the line has caused layout issues.
Jon
January 26th, 2006 at 10:40 AM
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. :-)
January 26th, 2006 at 11:16 AM
Why not set up two Firefox profiles, one for regular use and one for development? Leave the development one as vanilla as possible.
January 26th, 2006 at 11:29 AM
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.
January 26th, 2006 at 11:31 AM
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.
January 26th, 2006 at 6:05 PM
Here’s some info:
http://www.mozilla.org/support/firefox/profile
You also have the option of creating a separate user account, of course.
January 31st, 2007 at 2:42 PM
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
April 7th, 2007 at 5:57 AM
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.