Detailed explanation of CSS (Cascading Style Sheets) progressive enhancement

There are many ways to incorporate progressive enhancement into your work with Cascading Style Sheets (CSS). This article will discuss some of the more successful ones and consider other ways to gradually enhance your site.

Style sheet organization

Many web designers and developers don't think much about how to introduce style sheets into documents, but it is actually an art. With the right approach, you can reap the many benefits of progressive enhancement right away.

Use multiple style sheets

Splitting your styles a little can bring a lot of benefits. Obviously, a stylesheet with over 1500 lines is a bit difficult to maintain, and splitting it into multiple stylesheets can improve workflow (and save you effort). There is another benefit that is rarely mentioned: it helps to obtain more consistent presentation effects on the target media type (Translation: refers to various media types such as computers, printers, televisions, mobile phones, etc.).

The main.css file contains all the style rules of the site. Consider splitting it into independent style sheets containing typography, layout and color, named accordingly: type.css, layout.css, color.css.


(Illustration: How to split a single style sheet into multiple related style sheets)

Once the above separation is completed, you can use some magical tricks to automatically provide a "low-fidelity" experience for outdated browsers (such as IE5/Mac) and many browsers that lack strong support for CSS layout. How to do it? It all depends on how you import the file. Assume that main.css is introduced through the link element:


First, split the above line of reference into three related stylesheets:


In the past, many developers set the media value to "screen" or "projection", making the layout style completely invalid on Netscape 4.x (Annotation: Netscape 4.x does not support complex layouts such as floating and positioning). However, there is a better solution. Before explaining this method in detail, let's take a look at Alternate Media Types.

Optional media types

Progressive enhancement mainly focuses on content, and we want to bring an "enhanced" experience to all devices that support content display. So it's important to consider devices beyond the browser, such as print and mobile devices.

Unfortunately, the mobile device market is still fragmented and immature (don't be naive to think that all handheld browsers will render media type styles targeting "screen"). As a result, a detailed discussion of progressive enhancement in all media would take many pages, if not a book. Don't despair, though: in the mobile world, the differences are starting to unify, and some very smart people are starting to put resources together to help us develop. However, to save time and effort, we will focus on printing devices.

Usually, we need to use another link element to add printing styles:


By convention, the above style sheet contains all printing-related rules, including layout and color rules. Especially for layout, most of the rules in the style sheet are likely to be copied from main.css. In other words, this results in a lot of duplicate code.

You can see the benefit of splitting publication and color styles from layout styles: we no longer need those repeated rules in the print style sheet. In addition to this, another organizational tip can be used to improve the usability of the site, as well as to hide certain layout styles from problematic browsers.

Looking back at our stylesheet, consider the following code:


We did not declare a media type, so Netscape 4.x will read all styles in these three files. However, the Netscape browser understands basic CSS, and we can take advantage of this. We can further organize our styles by moving all the styles contained in layout.css to a new style sheet - appropriately named screen.css. Finally, update the content in layout.css to import screen.css, so that NS4.x and its sibling browsers are no longer smart (because they do not understand the @import directive). (Translation note: What the author is talking about here is to move all the content in layout.css to screen.css, and then introduce screen.css through @import in layout.css. I think the best way is to add it to layout.css Keep the most basic layout styles that can also be understood by NS4.x, and move other advanced layout styles to screen.css).


There is some room for improvement - the media that the stylesheet targets should be declared, which we do by adding the media type to the @import declaration:


The problem is that browsers IE7 and below do not understand this syntax and therefore ignore the above style sheet. If you want to provide the above style sheet to these browsers (which is often desired), you can easily do it using conditional comments, which will Elaborated below. If you have an eye as sharp as an eagle, you may have noticed that single quotes (') are used instead of double quotes (") on both sides of the style sheet name. This little trick allows IE5/Mac to ignore the style sheet. IE5/Mac CSS layout capabilities are very weak (especially support for floating and positioning), and it is perfectly acceptable to hide layout rules from them. After all, they can still obtain color and layout information, which is enough in some cases.

Using the same technique, you can import the print.css file (which, as you might guess, contains specific rules for print layout).


Now not only do we have a beautifully organized style sheet, we also have an effective method for incrementally enhancing your site's design.


(Illustration of how multiple style sheets relate to each other and how to apply them to a document)

How to deal with IE6?

To a lot of folks, Internet Explorer 6 is the new Netscape 4—and everyone wants it to go away.

Let's skip the harping on IE6 issues. The problems with IE6 are well documented and, honestly, not that difficult to fix. Moreover, the adoption of IE7 is quite rapid (especially in the consumer market), and IE8 is already in public beta. This means that one day, we can really say goodbye to the aging IE6.

Whether intentionally or unintentionally, when Microsoft launched IE5, it provided a good tool for progressive enhancement: conditional comments. These clever bits of logic (relegated to HTML comments in all other browsers) not only allow certain snippets of markup code to only work For IE, it also allows these code snippets to only work on specific versions of IE.

As Web standards-aware developers, we should always first test our designs on a majority of existing standards-compliant browsers, and then provide patches for those browsers that can get back on track with minor changes. Everyone's workflow is different, but I find it's best to start every project with a standard set of documents. My basic suite includes the following files:


Then, depending on the project's needs, add browser-specific CSS files to include those "minor modifications." In most projects now, these files are ie7.css and ie6.css. If the project requires support for versions before IE6, I will also create corresponding files for it (such as ie5.5.css, etc.). With these files in place, I started adding style rules to the appropriate stylesheets.

I start my CSS testing in Mozilla Firefox because most of my CSS is written using Firefox's CSS editor sidebar. Once I finished designing the page in Firefox, I immediately opened another browser to test and view it. Most perform perfectly because they adhere to web standards. Then open IE7 to test. In most cases, there aren't many problems. Occasionally, hasLayout needs to be triggered or other minor layout errors need to be corrected. Instead of writing these fixes into the base suite's stylesheet file, I added them to ie7.css and introduced them via conditional comments in the HEAD of the document:


The above conditional comments enable IE7 and below (Translation Note: lte is the abbreviation of less than or equal) to recognize the introduced style. Therefore, when browsing the page with IE7, these patches will be obtained. But if you are using a new version of IE - which may have fixed these problems, for example IE8 abandoned hasLayout and no longer has these problems - these styles will be ignored. On the other hand, these styles can be obtained using IE6. This is good because rendering bugs in IE7 tend to be present in IE6 as well. As mentioned above, IE7 and below versions cannot understand @import with media type. Introducing screen.css in this way is invalid for IE7 and below versions. Therefore, you also need to add an @import statement without media type at the top of the ie7.css file to introduce screen.css.

Once I've patched IE7, I'll open up IE6 and see if I need to patch anything. If necessary, I would add another conditional comment to the document, importing it into ie6.css:


Then, simply add the patches required by IE6 to the corresponding style sheets. These style sheets will be ignored by IE7, but will still affect versions such as IE5.5.

By using conditional comments in this way, you can easily manage the target browsers in your project and keep the CSS patch files independent and free.

Other considerations

CSS progressive enhancement is not limited to how to associate style sheets with documents, but can also be applied to how to write CSS.

For example, consider generated content. Not supported by all browsers, but this is a great way to add some extra design or text. This is not required for the usability of the page, but it can provide some visual or other enhancements.

Take a simple contact form as an example:


(Illustration: HTML form used in this example (code will be given below))

When writing the above HTML code, it is likely that the colon (:) will naturally be written in the label element. Why do this? Is content really added to the label element? Not really. The purpose of this is to provide additional visual clues to the user. For the label element, it is redundant and should be removed:


A more perfectly suitable way is to add the colon back to the document by generating content:


Writing forms in this way gives us flexibility: when we need to remove decorative characters from the entire site, we can simply edit the CSS file without having to find each form (although we once knew where). This trick also degrades well, because without the colon the form doesn't render unusable - a great example of progressive enhancement.

Maybe you have discovered that using advanced CSS selectors (translation: selector, also translated as selector, but I think selectors can better reflect the original meaning, such as operator is translated as operator instead of operator), you can change a specific style Attached to more advanced browsers, this helps enhance the site over time. A good example is the attribute selector, which is not understood (and therefore ignored) in IE6, its contemporaries, and earlier browsers. Egor Kloos used this concept beautifully with his submission titled “Gemination” on CSS Zen Garden:


(Illustration: Comparison of the rendering of Egor Kloos' CSS Zen Garden work ("Double Double") in standard browsers and IE6)

How did he do it? Here is the slightly modified example code:


The difference is obvious and is a beautiful illustration of how progressive enhancement can be used in CSS.

Similarly, Andy Clarke's site has some IE6 tidbits. By using IE's filters and adding some conditional annotations, Andy managed to remove all color from the site and provide a few replaceable images that make for a truly "lo-fi" experience.


(Illustration: Comparison of Andy Clark's site in standard browsers and IE6)

The gray technique in the picture above is this: In the stylesheet for IE6 (and below) added by the conditional comment, add the following statement:


Although the above two examples may contain too many techniques that are not used in daily work, they do a great job of illustrating the concept of how to apply CSS progressive enhancement in practice.

Summarize

As we’ve discussed, there are multiple ways to apply CSS progressive enhancement to your site. The simplest, and probably best, way is to organize your style sheets and think carefully about how you will link them into your document. Once you understand conditional comments, dealing with IE-specific problems will be a piece of cake. If you have a clear understanding of how to use selectors and the scenarios in which they are used, you can make more fine-grained adjustments in CSS.

Armed with this knowledge, you'll be well on your way to becoming a progressive enhancement expert.