The previous post discussed how to enable styling of the new HTML5 elements in IE by using a simple script. However, if the user has scripting disabled, the layout would probably fall apart badly.
So that means if you care about IE users with scripting disabled, you can't use the new elements, right?
Not necessarily.
There are some tricks to work around the broken DOM and limited styling in IE:
- Know what the DOM looks like and target other elements than the new elements for styling.
- Use the universal selector (
*) to target the right element. - Use
noscript.
What does this mean?
Target other elements for styling
Consider you have the following markup:
<body>
<article>
...
</article>
<nav>
<ul>
...
</ul>
</nav>
</body>Instead of doing this:
* { margin:0; padding:0 }
body { background:silver }
article { border:solid; background:white; margin-left:10em }
nav { position:absolute; top:0; left:0; width:10em }...do this:
* { margin:0; padding:0 }
html { background:silver }
body { border:solid; background:white; margin-left:10em }
ul { position:absolute; top:0; left:0; width:10em }Now of course you're going to use other ul elements than the navigation, so how do we get more specific on which element to target? The obvious solution is to set a class or id on the ul element, but there's another solution which might be more convenient in some cases, which brings me to...
Using the universal selector
Depending on the situation, and whether you care about IE6 or not, you can use the universal selector to target the element you want.
Consider you have the following markup:
<body>
<article>
<header>
<h1>...</h1>
<p>...</p>
</header>
......and you want to style the p that is in header, you would do this in the normal case:
article header p { font-weight:bold }But in IE, the article, header, h1 and p elements are all siblings, so the selector wouldn't match.
So then one would expect this to match, but it doesn't (IE doesn't allow selecting unknown elements using type selectors):
article + header + h1 + p { font-weight:bold }However, this matches:
body > * + * + h1 + p { font-weight:bold }Using noscript
The above techniques shouldn't mess up other browsers (or IE when scripting is enabled), however if you prefer (or if something would screw up) you can use a separate style sheet for IE when scripting is disabled by just using the following markup:
<head>
<!--[if IE]>
<noscript><link rel="stylesheet" href="ie-noscript.css"></noscript>
<![endif]-->
...Conclusion
The above techniques might not be very scalable or might well impact maintanence, but the point of this article is to show that it is possible to use the new elements while still supporting IE with scripting disabled.
This item was originally posted at: http://blog.whatwg.org and is licensed under the MIT license
0 responses so far ↓
There are no comments yet...Kick things off by filling out the form below.
Leave a Comment