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

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -