CSS3 Basics!-part2
 |
| CSS3 is the latest evolution of the Cascading Style Sheets |
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.
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.
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;
}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;
}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:name="code">: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:name="code">div p:nth-last-child(-n+2):last-child
Matches the last child of a parent, and is equivalent toname="code">: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:
.name="code">p:not([class*="lead"]) { color: black; }
: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;
}: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.Pseudo-Elements
The only pseudo-element introduced in CSS3 is::selection. It lets you target elements that have been highlighted by the user.Browser support: No current Internet Explorer or Firefox browsers support the
::selection pseudo-element. Safari, Opera and Chrome do.2. RGBA And Opacity
RGBA lets you specify not only the color but the opacity of an element. Some browsers still don’t support it, so it’s good practice to specify before the RGBa color another color without transparency that older browsers will understand.
Tim Van Damme uses RGBA colors on hover effects on links
On his website, Tim Van Damme uses RGBA colors on hover effects; for example, on the network links on his home page:
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.
Here is an example of how we would add 80% opacity to a
div:div {
opacity: 0.8;
}3. Multi-Column Layout
This new CSS3 selector lets you achieve multi-column layouts without having to use multipledivs. The browser interprets the properties and create the columns, giving the text a newspaper-like flow.
tweetCC uses CSS3 multi-column selector on its home page
tweetCC displays introductory text in four columns on its home page. The four columns aren’t floated
divs; instead, the Web designer uses the CSS3 multi-column layout as follows:.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}column-count), the width of each column (column-width, not used in the example) and the gap between columns (column-gap). If column-count is not set, the browser accommodates as many columns that fit in the available width.To add a vertical separator between columns, we can use the
column-rule property, which functions pretty much as a border property:div {
column-rule: 1px solid #00000;
}Related properties:
column-break-after, column-break-before, column-span, column-fill.Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+.
4. Multiple Backgrounds
CSS3 lets you apply multiple layered backgrounds to an element using multiple properties such asbackground-image, background-repeat, background-size, background-position, background-origin and background-clip.The easiest way to add multiple backgrounds to an element is to use the shorthand code. You can specify all of the above properties in a single declaration, but the most commonly used are image, position and repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}A more complex version of the same property would be:
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}(100% 2em) is the background-size value; the background image in the top-left corner would stretch the full width of the div and be 2em high.Because very few browsers support it, and because not displaying backgrounds on a website can really impair a website’s visual impact, this is not a widely used CSS3 property. However, it could greatly improve a Web designer’s workflow and significantly reduce the amount of markup that would otherwise be needed to achieve the same effect.
Browser support: multiple backgrounds only work on Safari and Konqueror.
Useful Links
- Layering multiple background images
- Multiple backgrounds with CSS3 and CSS3.info
- Introduction to CSS3, Part 6: Backgrounds
5. Word Wrap
Theword-wrap property is used to prevent long words from overflowing. It can have one of two values: normal and break-word. The normal value (the default) breaks words only at allowed break points, like hyphens. If break-word is used, the word can be broken where needed to fit the given space and prevent overflowing.
The WordPress admin area uses
word-wrap in data tables.In the WordPress admin area, the
word-wrap property is used for elements in tables; for example, in lists on Posts and Pages:.widefat * {
word-wrap: break-word;
}word-wrap is supported by Internet Explorer and Safari. Firefox will support it in version 3.5.6. Text Shadow
Despite existing since CSS2,text-shadow is not a widely
used CSS property. But it will very likely be widely adopted with CSS3.
The property gives designers a new cross-browser tool to add dimension
to designs and make text stand out.You need to make sure, though, that the text in your design is readable in case the user’s browser doesn’t support advanced CSS3 properties. Give the text and background color enough contrast in case the
text-shadow property isn’t rendered or understood properly by the browser.
Beakapp uses the
text-shadow property on its website: for the content area.BeakApp.com uses the
text-shadow property for the content area, adding depth and dimension to the text
and making it stand out without the use of an image replacement
technique. This property is visible only in Safari and Google Chrome.The CSS for the website’s main navigation shows the following:
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;
}To apply multiple shadows to a text, separate the shadows with a comma. For example:
p {
text-shadow: red 4px 4px 2px,
yellow -4px -4px 2px,
green -4px 4px 2px;
}text-shadow. Internet Explorer doesn’t support it, and Firefox will only support it in version 3.5.7. @font-face-Attribute
Despite being one of the most highly anticipated CSS3 features (even though it’s been around since CSS2),@font-face
is still not as widely adopted on the Web as other CSS3 properties.
This is due mainly to font licensing and copyright issues: embedded
fonts are easily downloaded from the Web, a major concern to type
foundries.However, a solution to the licensing issues seems to be on the way. TypeKit promises to come up with a solution that would make it easier for designers and type foundries to agree on licensing issues that would significantly enrich the typography in Web design and make the
@font-face attribute usable in practice.
Mozilla Labs JetPack website resorts to the
font-face rule to use the DroidSans typefaceOne of the few websites that use the property is the new JetPack MozillaLabs.
@font-face{
font-family: 'DroidSans';
src: url('../fonts/DroidSans.ttf') format('truetype');
}After the
@font-face rule, you can call the font with a normal font-family property in your style sheet:p {
font-family: "DroidSans";
}@font-face, it will revert to the next font specified in the font-family property (CSS font stacks). This may be okay for some websites, if the @font-face
font is a luxury for supported browsers; but if the font plays a major
role in the design or is a key part of the visual identity of the
company, you will probably want to use another solution, such as sIFR or Cufón.
Bear in mind, though, that these tools are more appropriate for
headings and short passages of text, and copying and pasting this kind
of content is difficult and not user-friendly.
Wouldn’t it be nice to have such type for body copy on the Web? Dave Shea experiments with Cufón and Museo Sans. Beautiful!
Browser support:
@font-face is supported by Safari 3.1+. Internet Explorer supports it if EOT fonts are used. Opera 10 and Firefox 3.5 should support it.
Comments
Post a Comment