simultaneous cross plattform/browser CSS styling
It's no CSS trick. But an easy method to code CSS which saves you lots of time.
I came across this some time ago when I had to code a stylesheet working for 5 different browsers. You know this procedure which is probably the most annoying and timewasting part in making CSS stylesheets:
Edit stylesheet. Save stylesheet. Switch to browser. Reload. Return to stylesheet. Over and over and over again. (And then do the same for all other browsers...)
This was when I had the idea which saved me hours and hours: Using meta refresh to auto reload the html file. The nice thing about this is that you can control everything (including the reloading time) simply from your text editor. Never touch the browser again to reload while coding CSS!
It is just as simple as it sounds:
![]() | setup your index.html file |
![]() | setup an inline stylesheet (so you prevent that it is being cached by the browser and loaded only once; you can outsource it later) |
![]() | Insert two simple lines: <META HTTP-EQUIV=Refresh CONTENT="10; URL=http://localhost/index.html"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> Do not forget to adapt the URL to make it work. |
![]() | Drag you index.html file in any browser you want, open it in your favorite text editor and |
![]() | start coding CSS - while the browser refreshes automatically you see your changes to your stylesheet almost immediately. |
You think your screen is not big enough to put 5 windows in a row? Don't mind! Simply put an anchor Tag (for example ) your HTML code where you want to work at, then you append #jumpto to the URL in the META refresh.
Just copy the following lines in your favorite text editor, fire up the browsers and start coding CSS right away:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <META HTTP-EQUIV=Refresh CONTENT="10; URL=http://localhost/index.html#jumpto">
- <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
- <title>simultaneous css writing</title>
- <style type="text/css">
- <!--
- #container {
- font-family: "Lucida Grande", Geneva, Arial, Helvetica, sans-serif;
- font-size: 0.9em;
- }
- #header{}
- #leftcol{}
- #rightcol{}
- #main{}
- -->
- </style>
- </head>
- <body>
- <div id="container">
- <div id="header">header</div>
- <div id="leftcol">leftcol</div>
- <div id="rightcol">rightcol</div>
- <div id="main">main<a name="jumpto" id="jumpto"></a><p>change the URL in META refresh accordingly to your computer environment</p></div>
- </div>
- </body>
- </html>

