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.
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.
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.
CSS3 Related Interview Questions
|XML Interview Questions||CSS3 Interview Questions|
|HTML Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||WordPress Interview Questions|
|Pure.CSS Interview Questions||XHTML Interview Questions|
The Css3 Lowdown
Styling Images 150 And Links By Type
Improving Efficiency Using Pseudo-classes
Different Screen Size, Different Design
Flexing Your Layout Muscles
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.