Quick Intro to CSS3

Front-end developers are constantly raising level of sophistication of Graphic User Interfaces (GUI). Ever-changing web design fashion demands continual evolution of web standards and technologies. Often to implement even a simple design feature requires increasing of burden on web servers, e.g. round corners of boxes or text effects. Finally CSS3 was developed to solve this problem and moved a lot of visual design features to the client side, where it’s supposed to be by common sense.

New features of CSS3 are already supported by modern popular browsers, such as Safari, Google Chrome and Mozilla Firefox. We can start using them today without waiting when IE9 will appear on the scene, and as usual with its new set of bugs :)

New selectors and pseudo-classes of CSS3 can help to easily locate elements of the document and in many cases even replace JavaScript. Those who used to work with jQuery, Prototype and other JS libraries already know some useful CSS3 pseudo-classes such as: :nth-child, :root, :checked, :disabled, :first-of-type etc.

New CSS3 properties allow implementation of many visual effects that was earlier impossible to do without graphics or JS. Some features of CSS3 such as “border-radius”, “border-image”, “box-shadow”, “gradient”, “RGBa”, Multi-Column Layout and Multiple Backgrounds already became popular and well covered by web design bloggers. Let’s take a look at something that’s really cool in CSS3 and will be appreciated by any front-end engineer and GUI developer:

@font-face

The new CSS3 @font-face implementation allows using any licensed TrueType “.tff” or OpenType “.otf” fonts as an external file. Here is an example of how to use some custom font:

@font-face {
	font-family: myfont;
	src: url(myfont.tff);
}
#myID {
	font-family: myfont, sans-serif;
}

Example of using @font-face

transform

Transform property is designed to transform elements using transform functions, e.g.:

• translate(x[,y]) - translating, or relocating, an element by x from the left, and y from the top.
• rotate(x,y) - rotating an element from its original position (defined by property transform-origin) by the specified angle value. The values are angles: degrees, turns or grads.
• scale(x[,y]) - scales an element by x width and y height. If only one value is declared, the scaling will be proportional.
• skew(x[,y]) - specifies a skew along the X and Y axes. The values are angles: degrees, turns or grads.

Syntax of these functions:

transform: rotate(5deg) translate(2px,4px) scale(1.5,2) skew(15deg, 4deg);

Webkit, Gecko based browsers and Opera support transform and other properties with help of specific prefixes accordingly:

• -webkit-transform
• -moz-transform
• -o-transform

Example of using transform

transform-origin

Transform-origin property defines the center of rotation of the element, e.g.:

transform-origin: 50% 0;

CSS3 Animation: @-keyframes "animation name"

CSS3 animation is an effect that changes some element’s style from one to another. keyframes rule defines key-frame positions and their duration. For example:

@-webkit-keyframes hop {
0% {top: 0;}
20% {top: 300px;}
100% {top: 0}
}
#orb:hover {
-webkit-animation-name: hop;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
}

In this example we created CSS3 animation with the name “hop”, which moves some element to 300 pixels up and returns it back to its original position. Then we assigned the animation to the element #orb with the following properties:

• animation-name – name of the animation
• animation-duration – duration of the animation
• animation-iteration-count – number of the animation cycles.
• infinite - means unlimited number of cycles.

Unfortunately CSS animation works only in WebKit-based browsers at this time. Example of using CSS3 Animation

CSS3 Variables

Another new thing in CSS3 is using variables in CSS code, e.g.:

@variables {
myColor: #f0f0f0;
/* we declared variable myColor and assigned some value to it */

}
div.container { background-color: var(myColor);
/* we called variable myColor */
}

Attribute Selectors

Three additional attribute selections for matching substrings of the attribute value were introduced in CSS3,. Here is an example:
Selecting DOM elements with title prefix of “v”:

p[title^=v] {
   font-size:16px;
}

Selecting DOM elements with attribute suffix of “t”:

p[attr$=t] {
   color: red;
} 

Selecting DOM elements with title containing at least one instance of “m”:

p[title*=m] {
   text-transform: uppercase;
}

New Pseudo-classes of CSS3

:nth-child(N) and :nth-of-type(N)

The new pseudo-classes allow to assign styles to selected elements using formula. The syntax for both is :nth-child(an+b). The difference between them is that :nth-of-type() considers elements of the given type only.

/* first, third, fifth, etc.
/* Any type of element */
p:nth-child(2n+1) {
    background: #F00;
}
/* first, fourth, seventh, etc.
/* Only li elements */
p li:nth-of-type(3n+1) {
    background: #f0f0f0;
}

:nth-child(N), :nth-last-child(N), :nth-of-type(N), :nth-last-of-type(N) are very powerful pseudo-classes that allow front-end developers to select multiple elements according to their positions in a document tree. N can be a keyword, a number, or formula an+b. The difference between the nth- and nth-last- is that nth- pseudo-classes count from the top of the document tree down, selecting elements with N-1 siblings before them; the nth-last- pseudo-classes count from the bottom up, selecting elements with N-1 siblings after them.

Other New Pseudo-classes

• :only-child - matches an element if it’s the only child element of its parent.
• :only-of-type - matches an element that’s the only child element of its type.
• :root - matches the element that’s the root element of the document. In HTML documents, this selector matches the html element.
• :empty - matches elements that have no children. Element nodes and non-empty text nodes are considered to be children; empty text nodes, comments, and processing instructions are not counted as children. A text node is considered empty if it has no data.
• :target - matches an element that’s the target of a fragment identifier in the document’s URI. The fragment identifier in a URI comprises # character followed by an identifier name that matches the value of an id attribute of an element within the document. E.g.: http://www.sample.com/index.html#section2, the following selector would match the element that had an id attribute of "section2".
• :enabled - matches user interface elements that are enabled. Element is enabled when it can be activated or can be selected, clicked on or accept text input.
• :disabled - matches user interface elements that are disabled. Element is disabled when it can’t be activated or can’t be selected, be clicked on or accept text input.
• :checked - matches elements like checkboxes or radio buttons that are checked or in the "on" state. In HTML, this state corresponds to the selected and checked attributes.
• :not(S) - matches elements that aren’t matched by the specified selector. E.g.: input:not([type="submit"]), matches all input elements, except input elements with a type="submit".

All major Webkit and Gecko based browsers already support the new pseudo-classes. Regarding Internet Explorer 6-8 we can use JS library Selectivizr that allows to take advantage of CSS3 selectors now by emulating these pseudo-classes via JavaScript.

Conclusion

It will take some time before specs and support of CSS3 will be completed by every major vendor of web browsers. But we can begin to use all exciting features of CSS3 now for browsers that already support them without affecting of functionality of websites in older browsers. Wise and professional approach to front-end development using principles of graceful degradation and progressive enhancement will help us to create rich and attractive websites with new CSS3 features.