A few days ago, the CSS 2.1 specification finally achieved W3C recommendation status. After many years of hard work, CSS 2.1 is now so well supported that upgrading the spec to recommendation status is mostly a formality. On the same day, the CSS 3 Color Module also become a recommendation. All of this is exciting news, because it means that the web is well on its way to a future filled with glorious CSS 3.
While CSS 2.1 now enjoys extremely broad interoperability, the same is not currently true for CSS 3. While the W3C and browser vendors work furiously to build our tomorrow, here are five CSS 3 features that you can start using in your sites today.
Border Radii
The border-radius property allows you to ostensibly curve the corners of an element. Previously, this was a rather tricky thing to do, involving the use of images and extra markup. Now, you can create a curved box like the one you see below.
The Code
To apply a border radius to an element, simply select the element in your CSS code and apply the border-radius property. Then, give the property an absolute or percentage value. The higher the value, the more curvy your corners will appear. To make this work in some browsers, you will need to include what are called vendor prefixes. These are necessary to protect future compatibility, should the W3C decide to change a CSS 3 property.
.myElement { /* A few vendor-prefixed versions of the property... */ -webkit-border-radius: 20px; -moz-border-radius: 20px; /* ...and the 'real' property last. */ border-radius: 20px; }
Browser Compatibility
Provided that you include the proper vendor prefixes, the border-radius property works in just about every modern browser, including Firefox, Safari, Opera, and Google Chrome. It now also works in Internet Explorer, starting with version 9. Even if the client browser doesn’t support this property, it just means that they will see squared-off corners instead of smooth curves. Remember, webpages don’t need to look exactly the same in every browser; slight cosmetic variations like this are acceptable.
New Color Models
CSS 3 comes with several new properties like border-radius, but it also comes with new units as well. CSS 2.1 offers several different ways to declare colors, such as the hexadecimal format or the named color format. Additionally, CSS 2.1 allowed colors to be specified using a special rgb() function, and CSS 3 builds upon this with rgba(), hsl(), and hsla(). While hsl() allows you to specify color using hue, saturation, and lightness (rather than red, green, and blue colors), it is the a that’s more interesting. In the rgba() and hsla() functions, the a stands for "alpha" and it allows you to adjust the opacity of the color.
The Code
To utilize one of the new color models, simply use them anywhere you might use a color. One example of this is of course the background property, which can set the background of an element to a color. To use the rgba() function, supply the red, green, and blue values, separated by commas. These should be numbers between 0 and 255, or percentages. Finally, add in the alpha value, which should be a number between 0 and 1, inclusive. The higher the number, the more opaque the color will appear, with 1 being completely opaque. These new color values do not require the use of any special vendor prefixes.
.myElement { /* A bright orange color, with some very slight transparency added. */ background: rgba(255, 128, 0, 0.7); }
The hsla() color model also takes four values. The first value is the hue, and is just an integer. The next two values are for the saturation and lightness, and these should be percentages. Finally, the alpha value functions the same as with the rgba() function, and should be a number between 0 and 1, inclusive.
.myElement { /* A solid blue color, with the transparency cut in half. */ color: hsla(240, 100%, 50%, 0.5) } }
Browser Compatibility
These new color models will work in every modern browser. Internet Explorer began supporting CSS 3 color models starting with version 9, and because colors can be more than just aesthetic enhancements, it’s important to make sure they work properly in the majority of clients. So then, what if a browser doesn’t support one of these new color models? As a fallback, you can try something like this:
.myElement { color: rgb(255, 0, 0); color: rgba(255, 0, 0, 0.9); }
Remember, the rgb() function is a part of CSS 2.1, which is already widely supported. If a browser is capable of utilizing the rgba() function, then the second declaration will override the first. If not, then the second declaration will simply be ignored. The only thing missing in this case will be the slight transparency. As I mentioned previously, slight cosmetic variations like this are acceptable.
Box Shadows
The box-shadow property makes it easy to create shadows underneath elements. Prior to CSS 3, this effect was somewhat challenging to produce and almost always required the use of images.
The Code
The box-shadow property takes four values. The first two values are the X and Y offsets, and they determine the angle of the light. The third value is the blur radius. The higher the value, the fuzzier the shadow will appear. These first three properties can be absolute or relative values. The last value is a color. Of course, you could use a hexadecimal color, but the box-shadow property is much more interesting when combined with the new color models in CSS 3. Using the rgba() color model allows the opacity of the shadow to be adjusted, making it appear as though the shadow is naturally blending with the background. Similar to the border-radius property, this property also requires the usage of vendor prefixes.
.myElement { /* A few vendor-prefixed versions of the property... */ -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.7); -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.7); /* ...and the 'real' property last. */ box-shadow: 5px 5px 5px rgba(0,0,0,0.7); }
Browser Compatibility
As is the case with the border-radius property, this CSS 3 feature works in all modern browsers and will work in Internet Explorer 9 and up.
Fonts
Computers have been capable of displaying multiple fonts for several decades now, so it might seem odd that fonts are only just now becoming standardized on the web. However, disagreement on file formats along with complex font licensing issues have turned this into quite a difficult challenge to overcome. Fortunately, CSS 3 has put the spotlight back on web fonts, and the web is rapidly moving into a multi-font future.
The Code
Applying various fonts to blocks of text is nothing new. However, the ability to include new font faces is indeed new, where as before, we were limited to the browser defaults. To include a new font, download the font file that you’d like to include, and then use the @font-face rule to specify a name for the font along with a file path. After that, you can use the font as you normally would.
@font-face { /* Pick a name for your font. */ font-family: orbitron; /* Then, include the file path to the font file. */ src: url('orbitron-light.otf'); } .myElement { /* Finally, apply the new font to an element, with some fallbacks. */ font-family: orbitron, verdana, sans-serif; }
Browser Compatibility
This seems simple enough, and indeed, the @font-face rule works in every browser going all the way back to early versions of Internet Explorer. Including fonts isn’t quite that straightforward due to a few lingering file format compatibility issues, but fortunately, several font services have greatly simplified the process and abstracted away these problems. My favorite font service is Google Web Fonts, and I highly recommend you check it out. You can pick any fully licensed font for free, and then all you have to do is include a CSS file from Google’s fast content delivery network. Once the external CSS file has been included, the new font is available to use in other CSS documents that follow.
Opacity
With CSS 3, you can easily adjust the transparency of an element by using the opacity property. Using CSS 2.1, effects like this were tricky to achieve and in some cases, impossible.
The Code
To dial down the opacity of an element, simply apply the opacity property. Then, give it a value between 0 and 1, inclusive.
.myElement { /* This will make the element 70% opaque, or 30% transparent. */ opacity: 0.7 }
Browser Compatibility
As you might expect, this property enjoys broad support from every modern browser. opacity will work in Internet Explorer 9 and up, but to accomodate older versions of Internet Explorer, this property should be used for aesthetic enhancements only.
No hay comentarios:
Publicar un comentario