Theming: “style it as if there is no JavaScript!”

Tuesday, September 6, 2016 by Darjan

In order to enhance user experience, almost all modern web sites use JavaScript these days. Displaying dynamic forms and other elements using jQuery or some other JavaScript library is quite common. Not only that, those libraries have been regarded standard for web for many years.

As a developer I use different JavaScript/jQuery scripts on my projects. They are usually closely connected with theming (HTML and CSS). Most of those scripts have well-arranged and divided styles and JavaScript code. However, we can bump into many of those who don't have it or it is even us who made troubles with inadequately combining JavaScript and CSS code.  

Therefore, “style it as if there is no JS!”.

These kind of troubles are most noticeable, when there is a lot of JavaScript code running in the background. As a result server spends some time to run the whole JS code, what then causes the web-site »flickering«.

 

To illustrate what's been said, I am going to show you an example:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <!-- content -->
  <div class="container">
    <nav class="menu">
      <ul>
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li><a href="#">Menu item 3</a></li>
        <li><a href="#">Menu item 4</a></li>
        <li><a href="#">Menu item 5</a></li>
      </ul>
    </nav>
    <h1>This is demo page</h1>
    <div class="content">
      <p><a href="#" class="show-menu">Open menu</a></p>
      <p>content </p>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="scripts.js"></script>

</body>

</html>

If we want to hide the menu navigation, because we are going to call it with JavaScript/jQuery code using click event, it's most convenient to apply it directly in CSS, not using JS.

An example of an incorrect use:

$(document).ready(function(){
  $('.menu').hide()
  $('a.show-menu').on('click', function (){
    $('.menu').slideToggle()
  })
})

Let's look at the GIF animation depicting how the navigation appears and finally disappears:

Demo page gif

A correct use:

CSS

.menu { display:none; }

JS

$(document).ready(function(){
  $('a.show-menu').on('click', function (){
    $('.menu').slideToggle()
  })
)}

The menu element was hidden already in the first phase using CSS, which loads immediately after visiting the website. Afterwards we load the rest logic of JS, which will display our menu.

With such correct use the menu will be hidden, even when JavaScript won’t be (up)loaded. This will enable the website to load correctly and avoid “flickering”.
 

How to test a website to find out if it is loading correctly?

The best way to do this is to entirely disable JavaScript support in the browser and once more click through the whole website.

I would recommend using Firefox web browser together with an Add-on “Web Developer”.

First enable Add-on, then go through following steps to disable JavaScript code:

1. Disable

2. Disable JavaScript

3. Disable All JavaScript
 

JavaScript

Now you have to examine your website to find out if there are any elements, which are not supposed to show up or they are displayed incorrectly. Adjust your JS and CSS code in order to get correct display. After enabling JavaScript, website should be displayed correctly.

Many developers are making these mistakes unconsciously, as they are not immediately visible and because the website does load. Those mistakes are easily seen by users with slower internet connections, or even when we use bigger amount of JavaScript code on the website, which could slow down the whole loading of the website and accordingly showing up all mistakes.

Therefore, “style it as if there is no JS!”.