I would be one happy web designer if every single person on the web decided to leave Internet Explorer in favor of standard-compliant browsers like Firefox, Safari, Chrome, and even IE8.
A tooltip could be done easily, no javascript required:
a.tooltip:hover:after {
display:block;
position:absolute;
top:-1em;
content:attr(href);
border:1px solid #000;
background-color: #ccc;
}
(This actually doesn’t work quite as well in Firefox 3.0, but it does in Safari and Chrome).
Instant Semantic Forms:
input[type="text"] {
border:2px solid #fcc;
}
label {
cursor:pointer;
}
label:hover + input[type="text"], input[type="text"]:hover {
border:2px solid #ccf;
}
input[type="text"]:focus {
border:2px solid #aaf;
background-color:#eef;
}
With this XHTML:
You should try that out in compliant browsers, its actually pretty neat.
Or say I wanted a semi-transparent background. One line:
.transparent_back { background-color:rgba(0,0,0,0.5); }
Or if I wanted a box with a border background image:
div.with_border {
border-image: url(images/borderimage.png) 5 5 5 5 round round;
}
Just so you know, the code that is needed to do that for most browsers takes at least five elements or a really big image and three elements. The border image here can be an 11×11 pixel square (two 5 pixels for the corners and 1px to be repeated on the sides) and just one element, making it easier on both the DOM and the bandwidth.
It is absolutely amazing how much easier fancy web design would be if we could actually use these techniques. Until then (I’m guessing 8-10 years), we’ll just have to stick with annoying hacks and javascript to do this for us. Oh, and if your reading this and using Internet Explorer, go to getfirefox.com or google.com/chrome to get the most out of the internet. CSS 3 all the way.
