Introducing CSS3 into Your Web Projects

CSS3 is super terrific! It is the most recent standard of CSS (Cascading Style Sheets) and it contains a powerful set of tools to help us code designs using minimal hacks and less image bloat. This allows us to cut down on page loads and can help users to have a better experience when they visit a website, regardless of whether it is on mobile, tablet or desktop.

CSS3 has a lot of practical uses that we can employ to problems that we as developers face daily. Of course with using any new web technology we may run into issues when it comes to browser support. The good news is that there are some very smart and talented people out there that have created fallbacks to appease these deprecated browsers while allowing us the freedom to use these new technologies. We will cover a few examples on how to put CSS3 to work for you. Now lets get started!

CSS3: background-size

Let’s say we have an image that needs to fill the entire background of a div, and when a user resizes their browser, we would like the background image to scale accordingly. We can use the CSS3 background-size property and its value contain to do this. The contain value will scale an image and maintain its aspect ratio while staying within its background positioning area. Here’s what our CSS would look like:

.selector
{
  background: transparent url(images/super-sweet-background.jpg) no-repeat top left;
  background-size: contain;
}

Browser support for background-size is fairly strong across the board. If you need to support IE8 then you can utilize the background-size-polyfill created by Louis-Rémi Babé. Download and include the .htc file from his Git project page. Here’s how our updated CSS would look:

.selector
{
  background: #000 url(images/super-sweet-background.jpg) no-repeat top left;
  background-size: contain;
  -ms-behavior: url(backgroundsize.min.htc);
}

Note that the url to the .htc file path is relative to the document and not to the CSS file. Babé recommends using absolute urls to avoid confusion. This is only one example on how to use the background-size property, to learn more head on over to the Mozilla’s Developer Network.

CSS3: nth-child

nth-child is a pseudo-class that can help you style lists or children of a parent by allowing you to specifically target individual elements or assign a pattern to target multiple elements. This can be an extremely useful tool when it comes to styling navigations, photos, lists, etc. Here is an example of a standard unordered list with 10 items:

 
    • List Item 1

 

  • List Item 2

 

 

  • List Item 3

 

 

  • List Item 4

 

 

  • List Item 5

 

 

  • List Item 6

 

 

  • List Item 7

 

 

  • List Item 8

 

 

  • List Item 9

 

 

  • List Item 10

 

 

 

For this example we only want to show the third list item text colored red, to do this we can use the nth-child property in our CSS like so:

.my-list li:nth-child(3)
{
  color: #f00; 
}

Pretty sweet! Another nifty thing we can do is create a pattern by using an equation instead of just one value. In our next example we’ll apply our red font coloring to every third list item but we don’t want to start until the second list item, so we can use the following:

.my-list li:nth-child(3n+2)
{
  color: #f00; 
}

Bam! Now we have every third list text item colored red starting at the third list item! Breakdown: n=0, and when we start to apply the math to our unordered list we get:

3(0) + 2 = 2 
3(1) + 2 = 5 
3(2) + 2 = 8

As far as browser support goes, we will need to deal with IE8 and below. There’s a few different ways you could handle this but for this example we’ll use Selectivzr by Keith Clark. Selectivzr uses JavaScript to emulate CSS3 pseudo-classes and attribute selectors in Internet Explorer versions 6 – 8. All we need to do is include a link to jQuery (version 1.3+) and put the selectivzr.js file in an IE Conditional AFTER our stylesheets:

 

To learn more about nth-child, check out Chris Coyier’s comprehensive article on the subject at his wonderful site CSS Tricks.

CSS3: transitions

Transitions are a nice way to use movement to add subtle interactions to elements on your web page. We can add effects when “transitioning” from one style to another using nothing but good ol’ CSS! In our example we have a basic button that when hovered over will expand. Here is our markup:

Button

Here is the CSS for our button’s layout:

.my-button
{
  display: block;
  padding: 14px 10px 10px;
  width: 150px;
  height: 30px;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #ccc;
}

Next we will add the transition property including our vendor prefix properties*:

.my-button
{
  display: block;
  padding: 10px;
  width: 150px;
  height: 30px;
  text-align: center;
  background: #ccc; 

-webkit-transition: width 0.2s linear;
-moz-transition: width 0.2s linear;
-o-transition: width 0.2s linear;
transition: width 0.2s linear; 

*Time Saver: I didn’t type out all those vendor prefix properties, I used an online tool called Prefixr 🙂

Our transition declaration says to transition the width property at a duration of 0.2 seconds using a linear speed effect. Linear means that the effect will maintain the same speed from start to finish.

Next we will add a CSS rule for our button’s hover state and add a width we would like our button to expand to when it’s hovered on:

.my-button:hover
{
  width: 220px;
}

Click here to see the result.

CSS3 transitions have decent browser support but are not supported in IE versions 9 and below. To remedy this issue we will use a browser feature detection script known as Modernizr and it contains yepnope.js, which will allow us to conditionally load a jQuery animation fallback for browsers that don’t support CSS3 transitions.
In the head of our html we will include our Modernizr.js file:

We can then use a conditional to test if CSS transitions are supported by the user’s browser. If the browser does, we will load a stylesheet with CSS transitions. If the browser does not, then we will can load a stylesheet with no CSS transitions, jQuery, and a jQuery animation fallback:

Here’s the code that we have in our pseudoTransitions.js file:

$('.my-button').hover( function() {
  $(this).stop().animate({
    width: '220px'
    }, 500);
  }, function() {
    $(this).stop().animate({
      width: '150px'
    }, 500);	
  });

When a user hovers over our button with the class “.my-button,” then animate the width of that button to 220 pixels. If the user’s mouse hovers off of that button, then animate the width back to the original size of 150 pixels.

We’ve only scratched the surface of what CSS3 can do for you. A good rule of thumb is to try introducing something new from CSS3 into every project you work on and build from there. To get a more comprehensive look at how CSS3 can enhance your projects, I highly recommend Dan Cederholm’s book CSS3 for Web Designers and Chris Coyier’s website CSS Tricks. Thanks for tuning in!

« Prev Article
Next Article »