Blogdump 1 (Stupid Browser Tricks)

In my travels on the net I come across a lot of scraps of useful information, small stuff that really matters but in and of itself is not useful for a full article. So I clip it and save it and when I hit writers block I'll do a blogdump with all the stuff in my scrapbook :) Today's cool tricks: one-line rounded borders and dynamically load style sheets, among other things.

Stupid Browser Tricks

Load this page in firefox then load it in IE. IE doesn't do rounded borders with a style tag, but Firefox will. If you're defining a visible border in a style, just add... "-moz-border-radius: 5px" to get a rounded border style. 0px means square borders, the larger the number the more rounded the border becomes.

border-radius is in the CSS 3.0 draft so firefox is just showing us a glimpse of the future.

For all its many faults, IE does have a saving grace in that it allows for conditional HTML which makes it a little easier to work around it's inability to honor many web standards. Since IE version 5, IE has honored the following conditionals...

<!--[if IE]>IE specific code goes here<![endif]-->
<!--[if IE 5]>IE version 5 specific code goes here<![endif]-->
<!--[if IE 5.0]>Same as above<![endif]-->
<!--[if IE 5.5]>IE version 5.5 specific<![endif]-->
<!--[if IE 6]>IE version 6 specific<![endif]-->
<!--[if IE 7]>IE version 7 specific<![endif]-->
You can also use conditionals...
gte is >=
lte is <=
lt is <
gt is >
<!--[if gte IE 6]>All versions of IE 6 and higher<![endif]-->
<!--[if lt IE 6]>All versions of IE less than version 6<![endif]-->

Of course Mozilla isn't perfect (yet), you still have to jump through some strange hoops to get where you want to go. For instance, this last week I had cause to be looking into watching the mouse wheel in javascript. Not so hard in IE, a little out of the ordinary for Firefox.

if (window.addEventListener) {
   window.addEventListener("DOMMouseScroll", handleMouseWheel, false); 
} else { 
   document.onmousewheel = handleMouseWheel; 
}

Did I mention you can have more than one class name in the class attribute? Well you can! class="big out" will apply classes .big and .out to the element. Write one stupid article and get it totally invalidated by that one little trick and you tend to obsess over it :)

In the, "cool this is interesting" department. The folks over at 37signals have found a way to set the styles based on the browser.

I thought it was interesting, but if I were going to do this, I'd use javascript to find the browser then dynamically attach the appropriate external css file so your css file only has specific styles for that browser making it a smaller and faster download.

var head = document.getElementsByTagName("head")[0];         
var css = document.createElement('link');
css.type = 'text/css';
css.rel = 'stylesheet';
css.href = 'FireFox.css';
css.id = 'loadcss';
css.media = 'screen';
head.appendChild(css);

See the problem with posting tech stuff on the web? Someone always has a better solution :) It should be noted however that if I had never stumbled across the 37signals article I never would have thought to do dynamic stylesheet insertions so it all balances out.

And that should round out this week's blogdump.

Happy Coding!