Today is I will start to release new series focused on using CSS called “CSS tips and tricks”. This series will be made up from tutorials about how to do interesting and useful stuff only through CSS. All topics will be chosen in order to be used in real-life projects. Some of these tutorials will be shorter while some longer, that will depend on how difficult individual topic will be. As always, I will provide the codes right after the instructions. In most of cases I will also provide a link to Codepen at the bottom if the post so you can see how code works in real-time and play with it. That is all for introduction and let’s take a look at our tutorial #1: Enhancement with Modernizer!
Recently I published a post (odkaz) about how to make your CSS bulletproof. One of the ways available is JavaScript library Modernizer. What this library does is, it runs immediately when page is loaded in browser (it is good to include link to modernizer in head section of page) modernizer appends various classes to html element. Here is an example from my personal pages using Chrome 36:
<html lang="en" class=" js flexbox rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent cssremunit placeholder formvalidation">
– note: I’m using customized version of modernizer to test only specific features I need.
This is snippet from IE9 using pre-packed version:
<html class="js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
As you can see, there is a plenty classes you can now target through you CSS stylesheet. I saw some Web Designers only including modernizer into their html codes and doing nothing afterwords. This way, it is almost the same like not using Modernizr at all. It has no effect (except appending bunch of class). To use this library properly to enhance you website, you have to either test features via JavaScript or apply styles for these classes. Since this series is about CSS, we will do the second.
Bulletproof Flexbox
One interesting way to use Modernizr is to detect if flexbox is available. We will work with second snippet from IE9. As you can see, the second class is “no-flexbox”. That simply means flexbox will not work in IE9. Let’s use this information for our advantage and create bulletproof navigation.
We will start with HTML code. I will skip the document structure and go straight to our navigation. Let’s create nav element with unordered list inside and four links nested inside list items.
<nav role="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Now we will switch to CSS. For first, we will cover the option when flexbox is available. On Modernizr snippet number one you can see class “flexbox”. That means that flexbox will work as it should. We will remove the padding and margin from the html and body to get rid of white space on borders of the page and also set the same for unordered list and set list-style-type to “none”.
html,
body,
ul {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
Next, let’s set the display property of unordered list to “flex”. This will stack all links on one line next to each other.
ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
In this example, our goal is to create centered navigation, so we add justify-content rule with value of “center” to the list. To style the navigation a bit we will also add background with value of #3498db (Peter River or light pastel blue).
ul {
display: flex;
margin: 0;
padding: 0;
justify-content: center; /* centering the links */
list-style-type: none;
background: #3498db; /* Peter River */
}
Next step is to style the links nested in list items. We will set their display property to “block” add padding of “1em”, color of #fff (white), change the font to bold sans-serif with size of “1em” and remove the underline.
li a {
display: block;
padding: 1em;
color: #fff;
font: 700 1em sans-serif;
text-decoration: none;
}
To make our navigation completely functional and looking good, we will add hover and active state. On hover, links will have background of #2980b9 (Belize hole or little bit darker shade of blue) and active state will use #2472a4 (about 5% darker shade of Belize hole).
li a:hover {background: #2980b9;}
li a:active {background: #2472a4;}
Great! Now we have navigation for browsers supporting flexbox. What about the rest? We will use “no-flexbox” class to create different styles for these agents. To make sure our no-flexbox styles will not have impact on default styles, we will use this class as selector in our CSS. First, we will style the nav and set its width to 100%, height approximately to 3.25em and background to #3498db (Peter River).
.no-flexbox nav {
width: 100%;
height: 3.25em;
background: #3498db; /* Peter River */
}
Now it will be a bit of guessing because we will have to center the unordered list. First, set the margin to “auto” and width to something about 26% (by trial and error). This will move list to center of the page.
.no-flexbox ul {
margin: auto;
width: 27%;
}
Last thing to do is to stack our list items on one line. To this set the float property of list items to “left”.
.no-flexbox li {float: left;}
Congratulations! You have clean navigation that works on any browser around and you also successfully enhanced your pages with modernizer and flexbox. If you want to use the code, just include it all in this order to your CSS. All snippets of code are of course free to share and use so you can use. AD
Codepen:
https://codepen.io/d3v3r0/pen/dIzlH
Full-screen version:
https://codepen.io/d3v3r0/full/dIzlH
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
