In my last article on CSS3 I wrote about creating rounded corners using CSS3. Using only a few lines of code, you can accomplish what used to require several image files, complicated tables and many lines of code. The comments on that article ranged from very positive to warnings for using something not yet Recommended by the W3C.
One comment in particular grabbed my attention. A reader noted that if you use CSS3 then it, “should be at your own risk.” This struck me as an interesting comment. The implication there is that your site could get damaged; comparable to walking into a construction site without a hard hat. I fail to see the risk here. What’s the worst that could happen? Maybe one day Firefox, Chrome and Safari suddenly stop supporting the code? In that case, you pop open your CSS file, amend a few lines of code to the current standard, and you’re right back in business. No harm, no foul.
Personally, I see the greater risk in not experimenting with new methods. If a new proposal provides a ways and means to do something quicker, cleaner and with less code then I am all for it. However, some see Microsoft’s lack of CSS3 support a major limiting factor.
During further research on CSS3, I ran into some examples of how MS has their own code, which is an alternative to CSS3. For this article, I plan to show examples of how to use opacity and hover effects in CSS3. As you can probably already guess, this will not work in Internet Explorer. Suggested workarounds come in the form of:
Alpha Filter(“filter: progid:DXImageTransform.Microsoft.Alpha”)
A quick glance and you can immediately spot the word, “Microsoft” in there, which makes it propriety code. It also contains many more characters than:
img { opacity: 0.6; }
img:hover { opacity: 1; }
With MS going their own way, it reminds me of the Blu Ray vs HD scenario. Look who lost the battle there. Blu Ray became the standard and everyone who bought HD players…well…enough said.
The rounded corners code that I wrote about in the last article (-moz-border-radius: 5px;) does contain “moz,” which implies to me that it’s Mozilla-developed code. But with Mozilla being an open source project, the term propriety doesn’t apply.
If I were to propose the question of, “Which code do you think will adopt faster? MS code or Mozilla code?” I think the answer is to plain to see: it’s the Mozilla code. Case in point is the gradient color code.
In one of my first articles for HTMLGoodies, I wrote about adding gradient colors to your site. In that article, I provided as an example the MS way of doing it:
<body style=”filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr=’#C0CFE2′, startColorstr=’#FFFFFF’, gradientType=’0′);”>
Of course, I had to state that this code does not work in all browsers. Really, it only works in IE.
A reader from the first CSS3 article commented that you can use the following in CSS3 to create a gradient effect (I have not tested this yet):
-webkit-gradient and moz-linear-gradient
Note the difference between the two. The MS code is long and complex. The CSS3 version is short and sweet. MS has a notorious history of creating complex code; which would you rather use? Microsoft’s gradient code has existed for several years and no other browser currently supports it. Meanwhile, CSS3 is gaining popularity and acceptance across several popular browsers; except for IE.
In the long run, which do you think will win out? Are we looking at another Blu Ray vs HD head-to-head battle? Is this the Mozilla vs MS for the future of web development? If so, I’m in the Mozilla camp. And so are the readers of my personal site in which I am implementing CSS3 code; over 45% of my readers use Firefox (IE accounts for less than 20%). An interesting side note is that my audience is primarily 15 to 30 year old males (people who play video games). I think MS and IE have the corporate market locked in solid. So, if you’re running a site geared toward 40 to 60 year old office dwellers who still wear pressed shirts and slacks to work, then you got a winner in IE. If you’re looking to the future, then MS best adopt to CSS3, or risk the same fate of the HD player.
By the way, the example code I used before for an opaque effect on an image will work on fonts as well. Here’s an example for use in an <h3> tag.
h3 {
text-align:left;
color:olive;
font: 8pt “Verdana”;
opacity: 1;
}h3:hover { opacity: 0.6; }
A suggestion is to use this on links to compliment your already existing hover effect:
A:hover { text-decoration:underline; opacity: 0.6 }
I’ll be reading your comments as time permits. Let me know if there are any other CSS3 tricks you’d like to learn.
