用HTML5无罪，挺CSS3有理

Kainy — Thu, 16 Dec 2010 15:34:45 +0000

新特性无法很好地在现有浏览器中展现，是阻碍网页设计者采用最新技术的最大因素。除非你能够接受自己设计的网页在不同浏览器中有不同的外观，才有可能在现有环境下开始使用HTML5和CSS3。

虽然HTML5还停留在草案阶段；然而换一种思路，如果你在等待CSS3的“完成”，也许将无法在有生之年看到那天的到来——要知道CSS2至今都未能为所有浏览器所支持！

本文作者的观点是：应该让每个用户获得效益最大化。对于那些使用前沿浏览器的用户，我们有什么理由不充分发挥哪些浏览器所提供的新特性？（呵呵，貌似和我《比较拉风的特效尝试》中的观点相似，渐进增强与平稳退化）.

说是这样说，但要推进新技术普及，比较务实的做法还是提供平滑过渡的方法，故文章大部分内容是关于HTML5和css3跨浏览器降级兼容方案，有兴趣者可继续往下看：

以下内容来自：http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt

Not every HTML5 or CSS3 feature has widespread browser support, naturally. To compensate for this, enterprising developers have created a number of tools to let you use these technologies today, without leaving behind users who still live in the stone age.

Prologue

HTML5 Semantic Elements

The good news is that, except for Internet Explorer, you can create more semantic markup by using the new HTML5 elements — even in browsers which don’t officially support them. Just remember to set the correct display mode: block. The following snippet should reference all necessary elements:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
   display: block;
}

IE Conditional Comments

Implementing many of the solutions in this tutorial involves including some JavaScript for specific Internet Explorer releases. Here is a quick overview: the test expression is enclosed in square brackets. We can check for specific versions or versions above or below a stated version. lt and gt mean lower than and greater than, respectively, while lte and gte mean lower than or equal to and greater than or equal to.

Here are some quick examples:

[if IE 6]

Checks if the browser is Internet Explorer 6.

[if gt IE 6]

Checks for a version of Internet Explorer greater than 6.

Tool 1: HTML5 Shiv

In anything IE, excluding the most recent version (IE9), you cannot apply styles to elements that the browser does not recognize. Your spiffy, new HTML5 elements, in all their glory, are impervious to CSS rules in that environment. This is where Remy Sharp’s html5shiv (sometimes called html5 shim) comes to the rescue. Simply include it in your page’s section and you will be able to style the new HTML5 elements perfectly.

Notice how the conditional comments only load the html5shiv code on the condition that the version of Internet Explorer is lower than 9. Other browsers, such as Firefox and Chrome, will also ignore this tag and won’t execute the script, thus saving bandwidth.

html5 shiv is based on a simple workaround: it directs IE to create the elements with JavaScript (they don’t even need to be inserted into the DOM).

document.createElement('header');

At this point, they can be styled normally. Additionally, the more recent versions integrate IE Print Protector, which fixes a bug where the HTML5 elements disappear when printing the page..

Tool 2: Modernizr

Modernizr allows you to provide “backup” styling in browsers that do not support certain HTML5 and CSS3 features.

Modernizr is perhaps the best known of these tools, but it is also fairly misunderstood (the name does not help). Take a deep breath: contrary to popular misconception, Modernizr does not enable HTML5 and CSS3 functionalities in browsers that do not support them (although it does include html5shiv to allow you to use HTML5 elements in IE < 9).

Apart from the html5shiv functionality, Modernizr does one thing and one thing only: it runs a series of feature detection tests when loaded, and then inserts the results into the class attribute of the tag.

Modernizr’s primary purpose is to allow you to offer “backup” styling in browsers that do not support certain HTML5 and CSS3 features. This is somewhat different than traditional graceful degradation, where we use the same CSS styling in all browsers, and then engineer it so that, when specific capabilities are missing, the result is still acceptable.

Now for an example of how Modernizr operates: if a browser supports border-radius and the column-countproperty, the following classes will be applied:

On the other hand, if the same properties are not supported — say, in IE7 — you will find:

At this point, you can then use these classes to apply unique styling in browsers with different capabilities. For instance, if you want to apply a different style to a paragraph, depending on whether CSS columns are supported, you can do:

  .csscolumns p {
    /* Style when columns available */
   }

  .no-csscolumns p {
    /* Style when columns not available */
   }

If a browser does not support columns, the .csscolumns class will not be present in the body, and the browser will never have a chance to apply the rule which uses it.

Some might object that this brings us back to the old times of building a different site for each browser. It is true that nothing stops you from writing so many style declarations that use advanced CSS3 features that your stylesheet becomes virtually empty when these rules cannot be applied.

If you want to use Modernizr in a way that makes sense, you must rely on your design talent to conceive alternative styles that don’t break the design and don’t require throwing away the rest of the stylesheet. For example, you might try replacing drop shadows on letters, when they are not available, with a bold typeface or transparency with a different color.

Usage

To use Modernizr, include the minified file, and apply a class of no-js to the element. This last precaution allows you to provide styles for when JavaScript is completely deactivated; obviously, in those cases, Modernizr can’t help you at all. If JavaScript is enabled, Modernizr will kick in and replace the no-js with the results of its feature detection operations.






. . . . .

If you’re willing to accept that all websites needn’t display identically across all browsers, you’ll find that Modernizr is an essential tool in your web dev belt!

Tool 3: IE 6 Universal CSS

On the same note, designer Andy Clarke has devised an elegant solution for solving IE6′s lack of standard compliance. Called “Universal IE6″, this stylesheet focuses exclusively on typography. The key is to use conditional comments to hide all other stylesheets from IE 6.


/* Stylesheets for browsers other than Internet Explorer 6 */

Important Note: Remember to include the latest version, as instructions for older ones are still floating around the web. The final results looks like so:

You have zero work to do to support IE 6 on a new site.

This approach has a pretty obvious advantage compared to classical alternate stylesheets: you have zero work to do to support IE 6 on a new site. The disadvantage, of course, is that the site displays very little of your design. Further, your HTML foundations also has to be rock-solid, in order for the page to be usable even with most styling disabled.

Note that Universal IE6 CSS does not include any styling for HTML5-only elements such as

. It is not a problem unless you are relying on those elements exclusively to obtain block level display for some parts of the page. Generally, you would always wrap your text also at least in a paragraph or list element.

This solution is clearly not for everybody, and you might find clients who flat out disagree with their site lookingbrokenwhen viewed in IE6.

You might also argue that, at this point, you can just as well drop IE6 support entirely. Andy Clarke has summarized his answers to these objections here.

This approach works best for content-centric sites, and catastrophically for web applications; but then again, building a modern web application to work well on IE 6 is a challenge in itself.

Tool 4: Selectivizr

Our next champion is a JavaScript utility which aims to introduce new capabilities into older browsers (well, actually just IE 6-8): Selectivizr works in tandem with other JavaScript libraries such as jQuery, Dojo or MooTools to add support for a range of more advanced CSS selectors.

I’ve listed a few below, though note that the full list of capabilities will be dependent upon your preferred JavaScript library.

:hover
:focus
:first-child
:last-child
:first-line
:first-letter

To use Selectivizr, download it from their home page and include it within your section, together with one of the support libraries. Here is an example with jQuery:

Selectivizr works in tandem with other JavaScript libraries to provide CSS3 support for IE 6-8.

This point is very important: Selectivizr cannot work alone; it requires your preferred library to be present. Luckily, it is compatible with the huge majority of popular JavaScript libraries. Chances are, if you are using JavaScript on your site, you probably have an appropriate library already included.

DOMAssisant

On the other hand, if you won’t be using a library as well, an alternative solution is to use the light weightDOMAssistant, although you might still prefer your usual JavaScript library for greater ease in managing files.

Be careful though, as the precise selectors that Selectivizr makes available depends on which supporting library is chosen. According to the home page, right now the greatest range of selectors is available with MooTools, while unfortunately jQuery makes the least number of selectors available. It must also be said that some of the selectors that are not available with jQuery are quite exotic and rarely used in the real world usage. Refer to our “30 CSS Selectors you Must Memorize” article for a full list of selectors.

As it happens, with most JavaScript solutions for CSS woes, some restrictions apply.

For Selectivizr to perform its magic, stylesheets must be loaded from the same domain as HTML pages. This rules out, for instance, hosting stylesheets and other assets on a CDN.
You are forced to use the element to include your stylesheets (as opposed to

Freetao's Blog » HTML