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 = ['&shy;', '<style>', selector, '{}', '</style>'].join('');
try
{
el = document.body.appendChild(el);
var style = el.getElementsByTagName('style')[0],
ret = !!(style.sheet.rules || style.sheet.cssRules)[0];
}
 
 
Search WWH ::




Custom Search