08/19/2013 - No Comments!

CSS for designers! (session three)

In this third session with internal design teams, I covered positioning concepts, powerful advanced selectors & an overview of CSS3. There were small hands-on demos throughout this session, reinforcing the discussed concepts as we learned.


Positioning

Positioning is an incredibly prevalent and important concept in CSS. By positioning elements, we are essentially telling them where to appear on the page. The position property accepts four values: static, relative, fixed & absolute. Static is the default position of all elements.

Relative behaves the same as static, unless you add any of the accepted properties: top, bottom, left or right. Relative positioning moves an element relative to its normal position within the document flow.

Fixed position elements are fixed, relative to the browser's viewport. These elements will remains fixed in place, even as a page is scrolled.

Absolute is similar to fixed, but relative to the first parent element with a position other than static in the document. Absolutely positioned elements also require the values of: top, bottom, left or right in order to take effect.

A great visual resource to better understand positioning is learnlayout.com. I highly recommend that anyone new to CSS goes through this website to further grasp these basic concepts.

Z-index

By using the z-index property, you can visually enhance the third dimension effect of a webpage. This is very useful when the need to layer elements in a given layout arises. Z-index values are very forgiving and accept virtually any number, including negative denominations. A best practice for the z-index property is to assign elements numbers in denominations of tens or even hundreds. This leaves ample room for the growth of your website, without having to do much rework in your CSS. Be sure to note that z-index can only be applied to elements with an assigned position other than static.

Floats & Clears

Floats were originally intended for wrapping text around images. At their most basic, a floated element will allow for content to flow alongside it. Floated elements are pulled out of the normal document flow. The float property accepts three values: left, right or none.

Clears are important in handling the behavior of floats. An element with clear applied will essentially cancel out the effect of the preceding float, from that point on in the document, by not allowing floated elements to flow alongside the cleared elements. Clear accepts four values: left, right, both or none.

Advanced Selectors

Recent CSS specs detail 16 pseudo-classes. Using pseudo-classes allows you to dynamically style content, without adding any HTML. This can be very powerful, especially on larger websites, or those using a content management system (CMS). Some of the more common pseudo-classes include:

  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()
  • :only-of-type()

I've written a full blog post on Substring Matching Attribute Selectors, another powerful way to target HTML elements without having to update your HTML or add useless markup.

CSS3 Overview

To those just learning about CSS, the term CSS3 is commonly misunderstood as it's thrown around as the "new, cool skill" to have. Put simply, it is just the latest standard of the CSS language, developed and approved by the World Wide Web Consortium (W3C). The W3C develops and publishes what are widely accepted as the standards of web development and some programming languages. CSS3 is still under development, but has begun to be supported by many browsers, especially on the newer mobile platforms.

Notable CSS3 features

CSS3 has introduced many new & powerful features to those of us crafting web experiences. The majority of these reduce the work of the web designer by allowing for more powerful browser rendering. This means less reliance on images & Javascript, resulting in a noticeable improvement in speed. Making changes is sped up as well, making designing in the browser easier than ever before.

  • Rounded corners
  • Box & text shadows
  • Multiple background images
  • @font-face embedding
  • 2D & 3D transforms
  • Transitions & animations

For the specifics of the above features, I cannot recommend Dan Cederholm's book, CSS3 For Web Designers enough. It is a great place to begin learning about the powerful new features introduced by CSS3, and most importantly, how to properly implement each in a future-friendly manner.

Vendor Prefixes in CSS3

Until the new properties introduced by CSS3 are fully supported by all of the major web browsers, you'll need to use what are known as vendor prefixes when writing CSS declarations. These prefixes target specific browser engines and ensure that your "bleeding edge" use of CSS3 is supported and will have the proper fallbacks in place, when necessary. The need to use vendor prefixes is considered an annoying, but temporary problem. It's best practice to use them now, ensuring your code is future-proofed. Vendor prefixes include:
-moz- /* Firefox and other browsers using Mozilla's browser engine */
-webkit- /* Safari, Chrome and browsers using the Webkit engine */
-o- /* Opera */
-ms- /* Internet Explorer (but not always) */

Resources

  • LearnLayout.com is a quick reference to have bookmarked when learning how to position elements.
  • Nicholas Gallagher wrote a great article on a his new, micro clearfix hack. a must read if you're using floats and clears in a layout.
  • Chris Coyier does a great job of summing up floats in his article, All About Floats.
  • CSS3Please.com is always helpful when writing CSS3 properties or dealing with vendor prefixes.

The next session will be my last, covering the topic of responsive web design and ending with a hands on coding session & Q&A session with the attendees.

Published by: Ray in 2013, CSS, CSS3, Learning