This is a journey from six years of conventional web design practice to the way we'll build sites in the future. Only it's not set in the future. You're soaking in it.

From the beginning, we've done whatever we had to do to make our sites work in every browser. In the world of non-standard HTML Design, we bolt every word, every image into place by manipulating table cells.

And we solve problems by replacing them with new ones. Netscape 4 ignores the CSS {margin: 0;} declaration? Extend the BODY tag with the Four Horsemen of Non-Validation: LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. IE4 doesn't fully support the CSS border property? Fake it by...

continue reading ...

I took pretty aggressive notes during the panel that came after mine. Enjoy!

(You can tell I was paying more attention to the two people who were talking about things I hadn't heard much about before; less notes from their portions. Both were very good.)

Tantek Çelik

• Good CSS: standards • Bad CSS: abuses, misuses, amazing screwups (tables poorly mixed with css) • Ugly CSS: necessary: hacks, workarounds, wishes they never existed • CSS2.1 is now a W3C Candidate Recommendation: this is big news. CSS2? forget it. 2.1 incorporates changes, errata, adds the colour orange. • CSS2.1 reflects reality of current implementations • CSS validator updates, updates for validating...

continue reading ...

This article was prompted by the growing crop of CSS "tips and tricks" articles that have surfaced in the last two years. Typical of these are the three column design making use of left and right fixed columns hanging on their margins; and the use of @import, instead of JavaScript, to feed appropriate style sheets to differently enabled browsers.

These ideas are very cool and their authors should rightly be heaped with praise, but I can't help feeling we've been here before.

Remember when you figured out how to make a table of images display without the gap? Or how about when you worked out the browser's table rendering algorithm and started using...

continue reading ...

If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments.

You will also find below links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran....

continue reading ...

They're the corkscrew in every graphic designer's Swiss Army knife. Much used, oft maligned but always popular, drop shadows are a staple of graphic design. Although easy to accomplish with image-editing software, they're not of much use in the fast-changing world of web design. On the web, adaptability and ease of use dictate trends - and static images with a fixed background effect are not very adaptable.

But what if we had a technique to build flexible CSS drop shadows that can be applied to arbitrary block elements? That can expand as the content of the block changes shape? Compatible with most modern browsers? With better results for standards-compliant...

continue reading ...

The Web Standards Project's ( WaSP) Browser Upgrade Initiative ( BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach.

"Tables are dead..."

Several designers have taken Jeffrey Zeldman's lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and...

continue reading ...

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2's current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

One of those cases is tabbed navigation. It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. You're most likely aware that CSS can be used to tame a plain unordered list. Maybe you've even seen lists styled as tabs, looking something like this:...

continue reading ...

Alright you Nielsenites you, that didn't go quite like I expected. It's probably my fault for calling it ‘Best Practices' in the first place - what we're looking to create is more a crib sheet of practical advice, something for reference when a designer gets stuck while using CSS specifically.

"A lot of these ‘best practices' are just arbitary favouritism for a particular way of working." - jgraham

I'd tend to agree. While nobody wants a blue, underlined link world, and we'll be debating for ages the best way to size fonts, this is what I was getting at: "a CSS Best Practice is a one sentence action...

continue reading ...

One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it.

With web standards, you can't do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout. To divide structural markup from presentation, CSS is the way to go - but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers....

continue reading ...

One of the questions I get asked the most often regarding my personal site's design is the following:

How do you get the right column's background color to extend all the way down the page?

It's a simple concept, really - one that many of you may already be familiar with. But for those who aren't, the following technique can be a handy little trick.

Vertical stretch

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a <div>, the <div> will only expand down the page 200 pixels.

This becomes an interesting...

continue reading ...

PNG files would make transparency effects a snap, except for one tiny little quirk: support for the format is great in every browser but one. Unless, of course, you resort to using some of the hacks and workarounds now available.

A List Apart ran Cross-Browser Variable Opacity with PNG: A Real Solution almost two years ago, and since that time other methods have come to light offering similar solutions of varying stripes to work around Windows IE's lack of Alpha transparency support. ( 1, 2)

Since I'm a fan of valid code, I generally haven't bothered messing around with the proprietary solutions, and the extra weight of an .htc behavior file is a bit more than my...

continue reading ...

I've been thinking about how to put this together for a while, so I think I'll open it up to everyone for contributions, then build an actual resource out of it somehow.

Here's the idea: a CSS Best Practice is a one sentence action statement, a "thou shalt" or "thou shalt not" (paraphrased, of course) that highlights a specific issue, be it browser compatibility, code integrity, or whatever else can actually be considered factual (instead of opinion). It's followed by a paragraph that goes more in depth about why or why not someone would want to follow the action, with links to further reading. This is the stuff that, if you know it ahead...

continue reading ...

If the design of this site looks relatively coherent, congratulations! Your browser does a good-to-excellent job of supporting web standards like CSS-1, HTML 4.01/XHTML 1.0, and scripting languages. If this site is readable and usable but looks as plain as an Amish coat, your browser does not support web standards. Fortunately, you can easily upgrade to one that does. Before you start shrieking, perhaps you'll hear us out.

What have you done?

We've upgraded the design of A List Apart to comply with web standards, some of which (like CSS1) date back to 1996. This, of course, is the year 2001.

Why doesn't it work in old browsers?

They were not built to comply...

continue reading ...

There was a good intro to this post at one point in time, but thanks to a Safari caching bug when using Movable Type and comment spam, it's long gone. Hopefully the rest of this will make sense without the introduction. Oh well.

Now, about forward compatibility. The recent flap about the XHTML 2.0 draft says a lot about this. Things are deprecated to the point that no site built using valid 1.0 will work if I switch doctypes? So what am I gaining by supporting 1.0 now?

Sites from 5 years ago still work in today's browsers (aside from those that took advantage of browser–specific quirks back in the day) so why change coding practices? What works is what matters,...

continue reading ...

It's a thrilling experience to see your words translated into a foreign tongue, even more so when the language is completely unrecognizable to you. With the first Zen Garden translation (Greek, thanks to Akis Apostoliadis) just about ready for prime–time, and the second one (French, thanks to Nic Steenhout) under way, I've had to start thinking about foreign characters.

French is a snap, since all non–English entities like â, ç, ö and so forth have well–supported character entity codes, as well as even better–supported numeric equivalents. Most of the Germanic and other European languages are built in to modern operating systems...

continue reading ...

We believe in total empowerment of the user to decide what content they want to look at. – Microsoft Product Manager Shawn Sanford, as quoted by NewsBytes

Microsoft thinks they can improve my writing. This makes me want to get a gun and go to war. – Dave Winer, Scripting.com

Smart Tags can be developed by anybody, are completely under the user's control, and can do some very useful things. – Executive Editor David Coursey, writing for ZDNet AnchorDesk

This is exactly like what Microsoft did in the past...leveraging what they have on the desktop into another market... – Gartner analyst Michael Silver, as quoted by News.com

The dustup surrounding...

continue reading ...

Sometimes it's nice to get a lot for a little. Macros let you do that. Instead of typing laborious HTML as you write your entries, a macro can do all the work for you so you can concentrate on writing. Perhaps you want to use a set of icons within your posts but don't care to write <img> tags all day long. Or maybe you'd like to link up to Google queries without having to type out the full URL. This plugin allows you to do that and much more.

...

continue reading ...