Trainer thoughts on web design techs and tools

Welcome to CSS3 and the world of trying to make browsers happy! I wish you luck. Here we go.

Check out this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#secondbox {
	width: 580px;
	padding: 9px 15px;
	background-color: #ED8029;
	color: white;
	-webkit-transition: background-color 5s;
	-moz-transition: background-color 5s;
	-o-transition: background-color 5s;
	-ms-transition: background-color 5s;
	transition: background-color 5s;
}
 
#secondbox:hover {
	background-color: #ffffff;
}

The code is for a simple id named secondbox. When you move your mouse on the box, the color fades, or transitions to white in 5 seconds. Then, when you move your mouse away from the box, it starts turning orange again. Cute, huh? :) It should be simple, but as of this writing, we need to add a little more, and that “little more” is called a vendor prefixes.

Basically, vendor prefixes exist to allow browsers and developers to work with CSS properties, like the transition, that are not standardized yet. This is so ridiculous that I can’t believe I actually have to write this! But the browsers are Gods, and we have to conform.

So, add the vendor prefixes and test in each browser.

Webkit powers the Apple Safari and Google Chrome browsers.

  • -moz- is for Mozilla FireFox.
  • -o- is for Opera.
  • -ms- is for Internet Explorer.

Just to add a note, test this in every browser! Just because you have a vendor prefix doesn’t mean that it works in every version of that browser. Internet Explorer 9 won’t touch the transition with a ten foot pole. Internet Explorer 10 is supposed to accept the transition. I will believe it when I see it!

To learn more about web design, consider our CSS3 Training.

No TweetBacks yet. (Be the first to Tweet this post)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | UK: 0808-101-3484 | From outside the USA: 315-849-2724 | Fax: 315-849-2723