Making Better User Interfaces with CSS3

0
170

For far too long, we developers have hacked around CSS to get the effects we need in our code. We’ve used JavaScript or server-side code to stripe table rows or put focus and blur effects on our forms. We’ve had to litter our tags with additional class attributes just so we could identify which of our fifty form inputs we want to style.

But no more! CSS3 has some amazing selectors that make some of this work trivial. In case you forgot, a selector is a pattern that you use to help you find elements in the HTML  document so you can apply styles to those elements. We’ll use these new selectors to style a table. Then we’ll take a look at how we can use some other CSS3 features to improve our site’s print style sheets, and we’ll split content into multiple columns.

We’ll look at these CSS features in this chapter:

:nth-of-type [p:nth-of-type(2n+l){color: red;}]
Finds all n elements of a certain type. [C2, F3.5, S3, IE9, 09.5,IOS3, A2]
:first-child [p:first-child{color:blue;}]
Finds the first child element. [C2, F3.5, S3, IE9, Q9.5, IOS3, A2]

:nth-child [p:nth-child(2n+l){color: red;}]
Finds a specific child element counting forward. [C2, F3.5, S3, IE9,
09.5, IOS3, A2]
:last-child [p:last-child{color:blue;}]
Finds the last child element. [C2, F3.5, S3, IE9, 09.5, IOS3, A2]
:nth-last-child [p:nth-last-child(2){color: red;}]
Finds a specific child element counting backward. [C2, F3.5, S3,
IE9, 09.5, IOS3, A2]
:first-of-type [p:first-of-type{color:blue;}]
Finds the first element of the given type. [C2, F3.5, S3, IE9, 09.5,
IOS3, A2
:last-of-type [p:last-of-type{color:blue;}]
Finds the last element of the given type. [C2, F3.5, S3, IE9, 09.5,
IOS3, A2
Column support [#content{ column-count: 2; column-gap: 20px;
column-rule: 1 px solid #ddccb5;}]
Divides a content area into multiple columns. [C2, F3.5, S3, 09.5,
IOS3, A2
:after [span.weight:after { content: “lbs”; color: #bbb;}]
Used with content to insert content after the specified element. [C2,
F3.5, S3, IE8, 09.5, IOS3, A2]
Media Queries [media=”only all and (max-width: 480)”]
Apply styles based on device settings. [C3, F3.5, S4, IE9, OlO.l,
IOS3, A2