SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The .no-js class: how to add it correctly?

    Hello,

    I'd like to style my page so that people with js turned off still have a nice result. A few elements will have to be modified to achieve that. I'm going to write my css like that:

    Code:
    .no-js element {
    ...
    }
    I am now curious how to add the .no-js class to my <html> element.

    I saw that line in html5boilerplate:
    Code:
    <html class="no-js" lang="en">
    It doesn't make sense to me add it as a default setting, since everybody will see the .no-js result. Am I missing something? What is the correct way to style for people with js off?

    SHouldn't I rather detect if js is on and add features based on .yes-js class?

    Cheers.


  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    From what I understand the JS will remove that class when running hence that 'no-js' will only be present if (JS has been disabled) allowing you to style a pure HTML and CSS page without any client side-scripting.

  3. #3
    SitePoint Guru Dashman's Avatar
    Join Date
    Jan 2006
    Location
    Manchester, UK
    Posts
    627
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I usually do what I understand to be the reverse of what you are wanting to do. Using jQuery, I add the class of js to the html tag in the following way:
    HTML Code:
    <html>
    <head>
    <script src="jquery-1.4.2.js" charset="utf-8"></script>
    <script>$('html').addClass('js');</script>
    ...
    </head>
    I know that scripts should only be loaded towards the end of your page, but I see no harm loading one script at this point, especially if it is minified or you are using a CDN and the rest of the scripts in the footer.

    That way, you write your CSS in the usual way, and then only add the .js selector to the elements you want to be manipulated/affected by JS:

    Code:
    .js element{
    ...
    }
    This is by far the best method to achieve this sort of thing out of any I have tried.

    Hope it helps.

    D

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use that line at the end of your script, it works.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •