When I joined Kentico Software as a little Web Developer in 2010, the
Kentico.com 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:
-
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.
-
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.
-
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>
-
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:
-
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…