css - Implementing Unobtrusive Javascript -
css - Implementing Unobtrusive Javascript -
i'm reworking old website , focusing on making javascript/jquery unobtrusive possible. i'm looking advice on 1 part of project: uj requires that, if javascript turned off in browser, site content still available user. 1 part of site has big list of items. each item in list has it's own description, uses css display:none hide default. clicking on item toggles visibility of description using jquery .toggle():, person unable utilize javascript (for whatever reason) never see it. if utilize javascript/jquery rather css hide descriptions, momentarily visible when page loads, want avoid. what's best solution?
basically can insert class "no-js" in html
element, so
<html class="no-js" lang="en">
and if javascript enabled on client remove class (using modernizr or simpler code snippet like
<head> <script> (function(d) { d.classname = d.classname.replace(/(^|\b)no-js(\b|$)/, 'js'); }(document.documentelement)); </script> ... </head>
in way can avoid fouc (flash of unstyled content) using .no-js
, .js
class in css rules so:
.yourlistitems { display: block; } .js .yourlistitems { display: none; }
this approach used h5bp note don't need prepend .no-js
class each rule: thinking in terms of "progressive enhancement" , "unobtrusive javascript" code , style first page works without javascript, add together functionality (and style specificity, prepending .js
class)
javascript css unobtrusive
Comments
Post a Comment