Targeting DOM Elements with Special CSS Classes Enhanced by Modernizr

When I joined Kentico Software as a little Web Developer in 2010, the web site redesign was the first project I worked on. To be honest, my CSS and HTML skills still had a way to go, so writing CSS stylesheets for Internet Explorer 6 was the darkest nightmare I've ever had. One day, my older colleague showed me a wonderful feature – Kentico CMS generates CSS classes recognizing web browser versions. There was an “IE6” class in the body element! I was overjoyed about that. Today I'm going to provide you with a list of special CSS classes you can find in the body element, and moreover, I'd like to show you how to enhance this feature using the Modernizr JavaScript library.

Even though I'm a more experienced Web Developer than three years ago, I still feel excited about this feature. You can easily target your CSS code by browser, by CMS mode, by LTR or RTL direction of text, or by the current culture. Targeting browsers is not recommended but in some special cases I find it very useful, especially in the case of Internet Explorer.

If you incorporate the Modernizr JavaScript library into your project, you are able to target your CSS code by browser or device features. And this is even more powerful! Modernizr generates CSS classes into html element so there is no conflict between Kentico CMS and Modernizr CSS classes. You can target almost everything.

Let's be more specific…

Kentico CMS special CSS classes

Kentico CMS automatically generates a body element like this into your Master page template:

<body class="LTR Safari Chrome Safari24 Chrome24 ENUS ContentBody">

The code above looks quite confusing, but don't worry, I'll explain.

I'm using browser Chrome v24. You can see the general “Chrome” class and the more specific “Chrome24” class, which is perfect. But what about the “Safari” and “Safari24” classes? This could be misleading; these classes are generated in the Chrome browser because of historical reasons. If a browser's core is Webkit, you always get the “Safari” class. Personally, I'd like to see a “Webkit” class instead of the “Safari” class.

Classes by browser

Safari Safari, Safari“version number”
Chrome Chrome, Chrome“version number”
Firefox Gecko, Gecko“version number”
Opera Opera, Opera“version number”
Internet Explorer IE, IE“version number”

Classes by CMS mode

Design tab DesignMode
Page tab EditMode

Sometimes it's possible that your live site stylesheet affects the Kentico CMS User Interface in the Design or Page tabs. Use the “DesignMode” or the “EditMode” classes to fix it.

Classes by text direction (depends on current culture)

Left-to-right LTR
Right-to-left RTL

Classes by culture

Depends on culture ENUS, ENGB, NLNL, DECH, etc.

Enhanced by Modernizr

In the past few years, we have been faced with new trends and technologies in the Web industry - HTML5, CSS3 and a diversity of connected devices. The Web has become unpredictable. The Modernizr JavaScript library helps us make this unpredictability transparent by detecting HTML5 and CSS3 features in the user’s web browser. Modernizr runs on page load and generates CSS classes into the html element. It recognizes features like Flexible Box Model, CSS Transformations, CSS Gradients, Canvas, etc. See the Modernizr Documentation. The generated code might look like this:

<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths">

Now, I’m going to show you how to integrate Modernizr into Kentico CMS:

  1. Go to the Modernizr Download page. On that page you can configure and download your own Custom Build according to what features you need to test.
  2. Upload the downloaded JavaScript Library to your Kentico CMS Web Project. I recommend you copy it to the ~/CMSScripts folder. But it’s up to your preferences.
  3. Go to CMSDesk -> Content -> Root document with the Master page on it -> Master page. There is a textarea between <head> and </head> tags. Place the following code in the textarea:
    <script src="path to the Modernizr library" type="text/javascript"></script>
  4. Now, be careful. You should add the “no-js” class to the html element. Kentico CMS doesn’t support editing the html element in the Portal Engine. But here are two options for how to do it anyway:
    • Navigate to the ~/CMSPages folder and edit PortalTemplate.aspx file.

      Replace this:
      <html xmlns="" <%=XmlNamespace%>>

      With this:
      <html class="no-js" xmlns="" <%=XmlNamespace%>>
      If you’re using the html5 doctype, delete the xmlns="" attribute.
      Please note, if you edit PortalTemplate.aspx, all sites in your Kentico CMS installation will be affected.
    • Download and import the “HTML Tag Code” Web part into your Kentico CMS 7 project. Then put the Web part on a page and simply put “class=’no-js’” in the “Html Tag Code” property field.
  5. Now Modernizr is ready to use.

I hope this article has been useful for you. Kentico CMS special CSS classes and Modernizr are helpful features when creating stylesheets for today's web sites. But it is not the only benefit of combining Kentico CMS and Modernizr. Modernizr optionally includes YepNope.js for conditional loading of external JavaScript and CSS files. Maybe, this could be topic for another article…

Share this article on   LinkedIn Google+

Milan Kačurák

My intention is to give you practical information about web site development in Kentico. <a href="">Find more information about me on my personal web site</a>.


Milan Kačurák commented on

Hi Brenden, sorry for my late answer.
If you follow all instructions above you will be able to target DOM elements according to browser type or capabilities because there will be special class names in html and body tags.
There is no magic like "enabling" box-shadow CSS property in IE6.
Please, visit Modernizr web site ( get know how it exactly works. :)

Brenden Kehren commented on

Nice article! Not having used Modernizr before (used and it worked but cumbersome), should I just be able to follow the instructions above and it will "magically" make the other older browsers work and look like the new ones? Or is there some other coding I need to do?