As referred in GOV.UK documentation: “Progressive enhancement is a way of building websites and applications. It’s based on the idea that you should start by making your page work with just HTML, and consider everything else an extra […].Make any new web page or feature usable from the start with only HTML – no images, CSS or JavaScript, just HTML.”
As a consequence, at the process of front-end developing with progressive enhancement in mind, by thinking about your coding in layers:
1. Start with plain, well-structured HTML to display all your content, ie all forms should submit, ensure all links can be followed.
2. Next add the CSS to create an advanced layout. This essentially provides your non-Javascript version
3. Javascript should be the final layer that adds enhanced behaviour to those users that have the capability.
You shouldn’t assume the reason for designing a site that works without CSS or JavaScript (or anything else) is because a user chooses to switch these off. There are many situations when extra layers can fail to load or are filtered. This can happen due to:
- temporary network errors
- DNS lookup failures
- overload or downtime affecting the server where the resource is found, meaning it fails to respond in time or at all
- corporate firewalls blocking, removing or altering content (large institutions like banks or government departments may use these)
- mobile network providers resampling images and altering content to speed up load times and reduce bandwidth usage
- personal firewalls or antivirus software altering or blocking content
- internet providers inserting their own code into the page that accidentally conflicts with your own
As for Drupal, it is one of the most comprehensive open source content management platforms powering millions of web sites and applications. By default, Drupal platform provide a pre-defined CSS class in to <html> attribute, such as <html class=”js”>. At this point, a question is raised “What happens when someone want to apply specific style for js and no-js case respectively?”.
Personally, trying to apply difference stylesheets for js and no-js cases, I have applied the following solution:
- At the template.php file, the following hook added:
function ThemeName_preprocess_html(&$variables) {
$variables['classes_array'][] = 'no-js';
}
2. At the ThemeName.js file, the following script added:
(function($) {
Drupal.behaviors.context = {
attach: function(context, settings) {
$('body',context).removeClass('no-js').addClass('js');
}
};
})(jQuery);
To sum up, using the above code lines, whether javascript is not allowed (for any reason), the class=”no-js” will be applied to the attribute, otherwise the class=”js” will be there.
Join the conversation