使用CSS3
Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.
So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?
It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
Please also consider reading our previous, related article:
Using Browser-Specific Properties
To use most CSS3 properties today, we have to use vendor-specific extensions together with the original properties. The reason is that until now, browsers have only partially implemented new CSS3 properties. Unfortunately, some properties may not even become W3C recommendations in the end, so it’s important to target browser-specific properties by differentiating them from standard properties to (and then replacing them with the standardized ones when they become superfluous).
The disadvantages to this approach are, of course, a messy style
sheet and inconsistent design across Web browsers. After all, we do not
want to revive the need for proprietary browser hacks in our style
sheets. Internet Explorer’s infamous <marquee>, <blink>
and other tags were employed in many style sheets and became legendary
in the 1990s; they still make many existing websites inconsistent or
even unreadable. And we don’t want to put ourselves in the same
situation now, right?
However, websites do not have to look exactly the same in all browsers. And using browser-specific properties to achieve particular effects in certain browsers sometimes makes sense.
The most common extensions are the ones used for Webkit-based browsers (for example, Safari), which start with -webkit-, and Gecko-based browsers (for example, Firefox), which start with -moz-. Konqueror (-khtml-), Opera (-o-) and Internet Explorer (-ms-) have their own proprietary extensions.
As professional designers, we have to bear in mind that using these vendor-specific properties will make our style sheets invalid. So putting them in the final version of a style sheet is rarely a sound idea for design purists. But in some cases, like when experimenting or learning, we can at least consider including them in a style sheet together with standardized CSS properties.
Useful Links
1. Selectors
CSS Selectors are an incredibly powerful tool: they allow us to target specific HTML elements in our markup without having to rely on unnecessary classes, IDs and JavaScripts. Most of them aren’t new to CSS3 but are not as widely used as they should be. Advanced selectors can be helpful if you are trying to achieve a clean, lightweight markup and better separation of structure and presentation. They can reduce the number of classes and IDs in the markup and make it easier for designers to maintain a style sheet.
Attribute selectors
Three new kinds of attribute selectors are a part of CSS3 specs:
[att^="value"]
Matches elements to an attribute that starts with the specified value.[att$="value"]
Matches elements to an attribute that ends with the specified value.[att*="value"]
Matches elements to an attribute that contains the specified value.
tweetCC uses an attribute selector to target links that have a title attribute ending in the words “tweetCC”:
- a[title$="tweetCC"] {
- position: absolute;
- top: 0;
- right: 0;
- display: block;
- width: 140px;
- height: 140px;
- text-indent: -9999px;
- }
Browser support: The only browser that doesn’t support CSS3 attribute selectors is IE6. Both IE7 and IE8, Opera and Webkit- and Gecko-based browsers do. So using them in your style sheet is definitely safe.
Combinators
The only new kind of combinator introduced in CSS3 is the general sibling selector. It targets all siblings of an element that have the same parent.
For example, to add a gray border to all images that are a sibling of a particular div (and both the div and the images should have the same parent), defining the following in your style sheet is enough:
- div~img {
- border: 1px solid #ccc;
- }
Browser support: All major browsers support the general sibling selector except our favorite: Internet Explorer 6.
Pseudo-Classes
Probably the most extensive new addition to CSS are new pseudo-classes. Here are some of the most interesting and useful ones:
:nth-child(n)
Lets you target elements based on their positions in a parent’s list of child elements. You can use a number, a number expression or theoddandevenkeywords (perfect for Zebra-style table rows). So, if you want to match a group of three elements after the forth element, you can simply use:- :nth-child(3n+4) { background-color: #ccc; }
:nth-last-child(n)
Follows the same idea as the previous selector, but matches the last children of a parent element. For example, to target the last two paragraphs in adiv, we would use the following selector:- div p:nth-last-child(-n+2)
:last-child
Matches the last child of a parent, and is equivalent to- :nth-last-child(1)
:checked
Matches elements that are checked; for example, checked boxes.:empty
Matches elements that have no children or are empty.:not(s)
Matches all elements that do not match the specified declaration(s). For example, if we want to make all paragraphs that aren’t of the class “lead” to appear black, we would write:- p:not([class*="lead"]) { color: black; }
.
On his website, Andrea Gandino uses the :last-child pseudo-selector to target the last paragraph of each blog post and apply a margin of 0 to it:
- #primary .text p:last-child {
- margin: 0;
- }
Browser support: Webkit-based and Opera browsers support all new CSS3 pseudo-selectors. Firefox 2 and 3 (Gecko-based) only support :not(s), :last-child, :only-child, :root, :empty, :target, :checked, :enabled and :disabled, but Firefox 3.5 will have wide support of CSS3 selectors. Trident-based browsers (Internet Explorer) have virtually no support of pseudo-selectors.
....
CSS3 properties can greatly improve your workflow, making some of the most time-consuming CSS tasks a breeze and allowing for better, cleaner and more lightweight markup. Some properties are still not widely supported, even by the most recent browsers, but that doesn’t mean we shouldn’t experiment with them or give visitors with modern browsers advanced features and CSS styling.
In this regard, keep in mind that educating our clients is both useful and necessary: websites don’t have to look exactly the same in every browser, and if a difference doesn’t negatively affect the aesthetics or usability of a website, it should be considered. If we continue to waste valuable time and money making every detail pixel-perfect (instead of adopting more flexible and future-oriented solutions), users won’t have an incentive to upgrade their browsers, in which case we would have to wait a long time before older browsers become legacy browsers and robust modern browsers become the standard.
The earlier we experiment with and adapt new CSS3 properties, the earlier they will be supported by popular browsers and the earlier we’ll be able to use them widely.
GO VISIT http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
随机文章：
