HTML and CSS Reference
In-Depth Information
Figure 7-11.
The Demo page with a gradient background
Striping the Book List
Recall from Chapter
4
that the list of books was styled using an
:nth-child
selector so alternating elements
would have a different background. In older browsers that do not support this, you can accomplish this the
old-fashioned way, by iterating the list in JavaScript and changing the style on alternating elements.
The trick, however, is determining if the
:nth-child
selector, is available as Modernizr does not provide this.
■
The solution provided here is based on a post by lea Verou. i had to adjust this to work with iE, however.
For more details, check out the article at
http://lea.verou.me/2011/07/detecting-css-selectors-support-my-jsconf-eu-talk/
.
Note
eXerCISe 7-5. StrIpING the BOOK LISt
1.
open the
Index.cshtml
file and add the following code to the
script
element at
the bottom of the file after the existing function:
function supportsSelector(selector) {
var el = document.createElement('div');
el.innerHTML = ['­', '<style>', selector, '{}', '</style>'].join('');
try
{
el = document.body.appendChild(el);
var style = el.getElementsByTagName('style')[0],
ret = !!(style.sheet.rules || style.sheet.cssRules)[0];
}