Benefits of CSS3 - CSS3

we hope it’s now clear why progressive enhancement as a general development methodology is not only acceptable but good, but we haven’t really talked about the benefits of CSS3 in particular. The advantages of using CSS3 over alternative, older techniques extends far beyond just how cool CSS3 can make your pages look—though that’s certainly not a benefit to be ignored. CSS3 allows you to create some really beautiful effects, adding a layer of polish and richness to your web designs.

But most of the visual effects that CSS3 allows you to create can be accomplished without CSS3, using alternative tools such as images, JavaScript, or Flash. So there needs to be some other reason beyond that “it looks cool” to use CSS3.

And there is another reason. Lots of them, actually. It basically comes down to this: using CSS3, you can decrease not only the time you spend developing and maintaining pages, but also the time spent in loading those pages. Simultaneously, you can increase usability and accessibility, make your pages more adaptable across devices, and even enhance your search engine placement. Let’s look at each of these benefits in more detail.

Reduced Development and Maintenance Time
By providing the same visual effects, many CSS3 techniques can be a replacement for “called” images. For instance, to create a drop shadow behind a box, you no longer need to create one or more images to use as backgrounds on that box. Instead, just use the CSS3 box-shadow property to generate a shadow. This frees you from having to spend the time creating, slicing, and optimizing those images.

You can also tweak CSS more quickly than images if you need to make changes down the road, or simply test out different variations. If your client wants to see how that drop shadow looks if it was blurrier, or a little farther displaced from the box, or red instead of gray, you can create each of these variations in a matter of seconds using CSS3, rather than having to fire up Photoshop to modify and reexport images.

Some CSS3 techniques also allow you to do away with scripts or Flash—a nice efficiency boost, as you don’t need to spend time hunting for the perfect script, configuring it for your site, and testing it.

Finally, many CSS3 techniques can streamline your markup by requiring fewer nested divs and classes, and this also can translate into a little less work time for you. For instance, it’s now possible to put multiple background images on a single element, so you don’t have to add extra nested elements in just the right configuration and style them all separately. Also, you can use CSS3 selectors to target elements in the HTML based on their position in the document tree, so you don’t have to take the time to create a set of classes, apply them to all the necessary elements, and then make sure they’re used correctly on new content down the road.

Increased Page Performance
Less markup and fewer images means fewer kilobytes for users to download, resulting in faster-loading pages. Fewer images, scripts, and Flash files also mean fewer HTTP requests, which is one of the best ways to speed up your pages. In fact, the Yahoo! Exceptional Performance Team called reducing HTTP requests “the most important guideline for improving performance for first time visitors”

When the browser fetches your page from the host server, it’s making an HTTP request. Every time the browser finds another file used in that web page—a style sheet, image file, script, and so forth—it has to go back to the server to get this file. This trip takes time and has a much bigger impact on page loading speed than simply how many total kilobytes all of the components take up. What this means is that, in general, a page with 10 images at 10 kilobytes each, for a total of 100 kilobytes to download, is going to take a lot longer to load than a page with one 100-kilobyte image—or probably even one 200-kilobyte image.

Using CSS3, it’s quite possible to make a graphically rich site that uses not a single image, drastically cutting the number of HTTP requests and increasing how fast your pages load.

Now, We are not saying that every bit of CSS3 you add will make your pages faster; it depends on what you’d be using instead of CSS3, if anything, as well as on exactly how you implement the CSS3 version. For instance, a font file that’s linked to with the @font-face rule, which you’ll learn about in Chapter 3, is another HTTP request and another thing the user has to download, and font files can sometimes be very large. So, in some cases, using @font-face could slow your pages down. On the other hand, if you were going to be using dozens or hundreds of images of text instead of @font-face, having users download one font file is often much faster. It may also be faster than a JavaScript or Flash-based text replacement method. This is one of those instances where the loss or gain in speed depends on what you’re comparing the CSS3 version against, as well as which fonts you’re using, if you’re subsetting the characters within them, and other factors of your particular implementation of @font-face.

Some graphically rich CSS3 techniques, such as gradients, can reduce HTTP requests but may also make the browser processor work very hard to render the effects, making the browser sluggish and decreasing usability. Don’t overuse complex effects, and test thoroughly those that you do implement.

But the point is that many CSS3 techniques can greatly improve your page performance in almost all instances. This alone is a great reason to start using CSS3, because users really care about page loading speed. Recently, both Bing and Google ran similar experiments in which they deliberately delayed their server response time by different amounts of milliseconds to see how it would affect user experience. They found that the longer users wait, the less engaged they are with a page, evidenced by making fewer search queries and clicking on fewer results, and the more likely they are to leave. Even delays of under half a second have an impact.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

CSS3 Topics