Take the pain out of CSS-based layouts

I hate dealing with CSS-based layouts. Don’t get me wrong, I’m not saying I’d rather use tables. It’s just that I don’t relish the idea of fussing with the hacks, negative margins, floats, and more to get the page looking good in all browsers.

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

YUI Grid demonstration
The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.

Class Equals Screen Reader Info

I’ve been using a little CSS trickery to hide content and data from the average user. I hate to mention it too often as it can open pandora’s box. There was a recent thread on the Microformat’s discussion list about this very topic. The gist of many programmers is that data worth sharing is data worth displaying.

However, there are times when your UED provides a design that lacks visual hooks for your screen reader users. A good example may be the ever-popular search form. Most sites will have an input and a button that says “search”. The label for this input is nowhere to be found.

The average sighted user can figure out such a simple form but the screen reader needs a bit more help. Here’s a sound clip of a screen reader trying to use the search form on Yahoo! Kids (.mp3). This was further complicated by the missing alt attribute on the image-based submit button.

I’ve also had to work with table based forms that need some assistance. The table is marked up with appropriate table headers and scopes, but the individual inputs lack labels due to the UED.

The simple solution

There are many ways to hide content via CSS. You want to avoid visibility:hidden and display:none. These will also hide it from the screen reader. You could use text-indent:-1000 em. I prefer using position:absolute; top:0; left:-1000em;. This hides the label by pushing it off screen yet the screen reader is still able to use it.

Updated CSS (updated 4/24/2008)

Adding a top position to your hidden may cause the page to jump when the item is focused. Only use a negative left position and leave the top position out of the equation.

Samples

Let’s look at the complicated table with hidden inputs. The table is properly coded with summary and scope. However, the table would still be difficult for a screen reader without form labels.

Here’s a sample of the HTML code:


Here’s the CSS for the labels


.srinfo {position:absolute; top:0; left:-1000em;}

Extending the hidden screen reader concept

I’ve written earlier about how Yahoo! Tech used a hidden collection of links to replicate an inaccessible flash movie. In a nutshell: screen readers cannot see a flash movie that has wmode:transparent. To get around this, we duplicated the flash content and moved it off-screen for screen readers and search engines.

You could also use this technique for providing information specific to screen reader users, such as:

Please note, this page uses JavaScript to continually update stock information. Look for the link: "disable stock updates" to turn this feature off

Hold the Presses, this isn’t perfect!

You can’t just throw anything off screen for the screen readers. The earlier Yahoo Tech example took about made 6 links invisible yet they were still accessible to keyboard users. So, remember, when you use the srinfo class to hide content for screen readers, keep in mind the impact on keyboard users.

Add accessibility to your AJAX applications

In December, I made a number of predictions for the 2007. I confidently predicted that Gez Lemon would discover a solution to AJAX accessibility issues. Gez had earlier defined the virtual buffer’s role in JAWS.

Understanding the virtual buffer is essential for empowering screen reader users, particularly considering the number of Web 2.0 applications that depend on Ajax. Screen readers typically take a snapshot of a web page, and place the content in a virtual buffer to allow the user to interact with the content.
Gez Lemon and Steve Faulkner – http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php

Gez and Steve Faulkner have just released a set of javascript functions that refresh the virtual buffer by working with setAttribute. They discovered this function triggers JAWS 7.1+ screen readers to grab a new snapshot of the page.

The scripts are fairly simple. When the page loads, insert a hidden form input. When your AJAX application completes its duties, change the value of that hidden input with the setAttribute function. This setAttribute activity will refresh the buffer and the screen reader will announce the content that has been changed via an AJAX call.

The updateBuffer function presented here extends the limited improvements in JAWS 7.1 and later, by providing a mechanism to update the virtual buffer for other interface elements, that works regardless of input device. This means that users of JAWS 7.1 and later do not need to explicitly update the virtual buffer in order to interact with Ajax applications.
Gez Lemon and Steve Faulkner

As I also predicted, I believe the YUI Connection Manager will incorporate this type of functionality. This will give enhanced accessibility to thousands of web sites instantaneously.

Image sprites – flexible and accessible packages

User generated ratings and reviews are an important part of all Yahoo! sites. You can find them on just about every page of Yahoo! Tech.  It was important for us to develop a ratings presentation device that was easy to code, accessible, flexible, and as light-weight as possible. Our final design uses a combination of image sprites and negative text-indent to satisfy these requirements.

Product ratings are represented with 1 to 5 stars. Other sites have used inline images; repeating a solid or empty version for each of the five stars. stars image from Yahoo! ShoppingOther sites, such as Yahoo! Shopping, have used a single inline image representing the number of stars.  At best, the image will have an alt attribute that descibes the number of stars. However, the content is locked inside the image. This is an easy approach for coding but isn’t the most accessible approach.

Yahoo! Tech uses the content first approach to design

Content-first design improves accessibility. This approach places the relevant content in semantic markup. It then uses CSS to transform that content into the visual design. Here is a sample rating from Yahoo! Tech: Overall:4/5, Quality:5/5, Support: 3/5. Our CSS transform that simple text into a series of stars and accompanying text. User testing with a screen-reader user led us to remove visual descriptions from the content, i.e."stars" or "bars".

With the content in the page, it was time to look at the visual design.

Ratings are presented in either an unordered list or definition list. We need to place descriptive text in front of the stars and want the stars to be aligned with each other. These considerations lead to using spans with a combination of CSS rules to hide the text, insert a background image, and absolutely position the ratings to the right side of the list item. Let’s look at the code.

The HTML – span

To use a background image for the stars, we need a container that can be manipulated with CSS and not include presentational behaviors of its own. This is why we use the span, a generic inline container. We could use a strong or em, but feel the span offers the best versatility. You never know when the graphic designer will ask for some text to be bolded or emphasized in the same list item.

Sample code for a rating

  • Overall: 4/5

The span’s title will generate a tooltip when the user places their mouse over the rating (not Internet Explorer). Screen readers’ default settings ignore title attributes on non-form items.

The CSS

Spans are inline elements.  To display background images, we need to make them display block, define a height, width, and move the text off the screen. To keep them inline with the text, we are also positioning them absolutely. We could position them relatively or floated the spans. Position absolute works the best for our pages.The parent list item is positioned relatively to give the span a contextual anchor. Negative text-indent will hide the rating text.


.ratingslist {list-style-type:none;}
.ratingslist li {position:relative; padding:3px 5px; }
.ratingslist li span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}

Image sprites display the desired number of stars

The list item is given a class with a number at the end (stars8). This will display an image with four out of five red stars. We are using a scale of 0 to 10 to accomodate half stars. To display other rating variations, we change the modifier, i.e. prostars4, retstars4, bars4, bigstars4, etc…

To simplify the maintenance of the site and reduce server requests; Yahoo! Tech also uses image sprites. Sprites are single images that include multiple icons with a consistent spacing between them. Use background positioning to display the desired chunk of the image. Each sprite represents the possible color variations used on the site: red, blue, and green. Minimizing the color palettes reduces the final image size. For more information on sprites, read CSS Sprites: Image Slicing’s Kiss of Death by Dave Shea. As a further enhancement, alpha transparent png images are used for most browsers and index-transparent gifs are presented in the Internet Explorer 6 style sheets. 

Background images are positioned with the set of numbers after "no repeat." The horizontal positioning is first. Our sprite is vertical, so we are leaving it alone, hence the 0 value. The vertical positiong comes next. If we want to display 2 out of 5 stars, we need to shift the background down to that part of the image (-530px). Here is the CSS for presenting the specific star variant.


/* Ratings images
======================================= */
.stars0 span {background:url(/images/bg-ratings.png) no-repeat 0 -650px;}
.stars1 span {background:url(/images/bg-ratings.png) no-repeat 0 -620px;}
.stars2 span {background:url(/images/bg-ratings.png) no-repeat 0 -590px;}
.stars3 span {background:url(/images/bg-ratings.png) no-repeat 0 -560px;}
.stars4 span {background:url(/images/bg-ratings.png) no-repeat 0 -530px;}
.stars5 span {background:url(/images/bg-ratings.png) no-repeat 0 -500px;}
… (repeated for each variation of the stars and bars)

This approach has allowed the Yahoo! Tech engineers to maintain a consistent presentation with minimal markup. For pages that need special tweaks we can easily adjust the positioning by using descending selectors:


#mytech .ratingslist li span { right:5px;}

Caveats

We’ve only found a few small issues with this approach.

  • You cannot count on background images being displayed on the printed page. Our print style sheet removes the text-indent and background images to display “Overall: 4/5”.
  • When someone includes more than 4 products in the comparison table, the text of some rating parameters will begin to overlap the stars. If they were inline images or if we floated the spans, they may drop to the next line.

Yahoo Tech! ratings are another example of creating accessible and visually dynamic pages by considering the underlying content structure before attacking the styles. Users of all abilities are presented with solid information. That’s how you can deliver a 5 star page every time.

Related Information

The big list of fixed stuff in IE7

The IE7 blog has a new post of items that have been fixed in the upcoming release of IE7. While not on the list, the problem I found with alpha transparent png sprites has been fixed for the final release.

Take a look at the list and think of it as new tools to use.

Bugs we fixed

All bugs on positioniseverything.net except the “escaping floats” bug (which is planned for the future)

  • Peekaboo Bug
  • Internet Explorer and Expanding Box Problem
  • Quirky Percentages
  • Line-height bug
  • Border Chaos
  • Disappearing List-Background bug
  • Guillotine Bug
  • Unscrollable Content bug
  • Duplicate Characters Bug
  • IE and Italics
  • Doubled Float-Margin bug
  • Duplicate Indent bug
  • Three pixel text jog
  • Creeping Text bug
  • Missing First letter bug
  • Phantom box bug

Details on some of the other bugs (from sources other than the positioniseverything.net list) that we fixed:

  • Overflow now works correctly! (That means boxes do not automatically grow any more.)
  • Parser bugs: * html, _property and /**/ comment bug
  • Select control: CSS style-able and not always on top
  • Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
  • Addressed many relative positioning issues
  • Addressed many absolute positioned issues
  • % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
  • <?xml> prolog no longer causes quirks mode
  • HTML element truly independent of the Body (now gets its own width, height etc.)
  • 1 px dotted borders no longer render as dashed
  • Bottom margin bug on hover does not collapse margins
  • Several negative margin issues fixed
  • Recalc issues including relative positioning and/or negative margins are fixed now
  • CLSID attribute of <object> tag no longer limited to 128 characters
  • :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
  • Descendant selector now works properly for grand children when combined with other selectors
  • First-line and first-letter now applies when there is no space between word :first-line and opening brace {
  • Pseudo-classes now are working as expected if selector is excluded
  • The :link selector works now for anchor tag with href set to bookmark
  • Addressed !important issues
  • PositionIsEverything piefecta-rigid.htm now works
  • List-item whitespace bug fixed
  • Fixed Absolutely Buggy II
  • Absolute positioned elements now use always correct containing block for positioning and size information
  • Nested block elements now respect all overflow declarations (hidden, scroll, etc)
  • Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
  • <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
  • We no longer lose the image aspect ratio on refresh
  • Cleaned up our ident parsing according to CSS2.1 rules
  • Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
  • And many more

We also extended our existing implementations to comply with W3C specifications:

  • Enable :hover on all elements not just on <a>
  • Background-attachment: fixed works on all elements – so Eric Meyer’s complexspiral demo works
  • Improved <object> fallback

Finally, we added new features from CSS2.1:

  • Min/max width/height support (also for images, which did not work in IE7b2)
  • Transparent borders
  • Fixed positioning support
  • Selectors: first-child, adjacent, attribute, child
    • A couple of CSS 3 attribute selectors: prefix, suffix and substring since we were working already in the code base (also the general sibling selector)
  • Alpha channel PNG support (Not a CSS feature but too important for designers to not call it out J)

IE Blog

IE7 is still not as good as Firefox, Opera, or Safari. However, Microsoft is planning an aggressive updating campaign and hopefully it won’t be long before we can count on our average user’s browser supporting advanced CSS styles. It’s time to stop complaining about IE6 and begin planning how you will use these new tools.