HTML and CSS Reference
In-Depth Information
standardization of
border-radius
, there were several possible ways to declare it
in CSS3.
-moz-border-radius
-o-border-radius
-webkit-border-radius
border-radius
As you can see, the last declaration in this list is the now-standardized version,
and the vendor-specific implementations are prefixed with
-moz-
for Gecko-
based browsers (Firefox),
-o-
for Opera, and
-webkit-
for Webkit-based
browsers (Chrome, Android Browser, Dolphin).
There are more vendor-specific prefixes, but in general, for Android,
-moz-
,
-o-
,
and
-webkit-
should suffice. It's important to always include the standard
implementation.
There are ways to overcome having to declare all four CSS properties when you
need them, which I explain in the section ''CSS Precompilers (SASS),'' later in
this chapter.
CSS Animations and Transitions
CSS3 introduces CSS transitions and transforms for DOM elements. You can
use these to replace the traditional method of animating DOM elements by
manipulating their CSS properties using timers in JavaScript. You may be asking
yourself, why should I use CSS for animation instead of JavaScript? Surely, CSS
should be used for styling, and JavaScript for interaction. The truth is that by
using CSS3 for animations, you can offload a lot of the heavy lifting often
passed onto the device's CPU using JavaScript, to the device's GPU if it has
one. This can make for much smoother animations.
Transitions
CSS transitions allow you to create transitions between two CSS styles. You
invoke the transition by creating a CSS style and adding another to it. The CSS
transition will handle the changes between the two states.
Creating a transition in CSS3 is quite simple. First you create your
div
element.
<div class="test"></div>
