Obviously, I highly recommend all those these books, as they’ve had a pretty large impact on me as a designer & a developer. The best part about them is that they’re all pretty easy reads, they’re not the kind of books you have to spend a week or 2 reading.

Does anyone else have books like this? Or do we all just read blogs now?

Hi all,
I had a new article published over the weekend at Smashing Magazine. Check it out and let me know what you think!

Behavioral CSS

I wrote it quite a while ago and it seems to be showing a bit in the comments, but overall, I’m pretty happy with the way it came out and the reader responses it’s getting. Hope you enjoy Behavioral CSS

Problem

Image replacement can be easily abused; but when used properly (like replacing logo text) it’s a great resource.

Image replacement without extra markup usually means setting text-indent:-9999px on your link. And this works great great. But in a lot of browsers it leaves a focus outline that runs way off the page to the left on click.

We need to keep the outline there for accessibility reasons, so most developers just leave it alone. But there’s a way to make, both, designers and accessibility gurus happy.

view demo

Problem CSS

#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
}

Goal

Solution

By adding overflow:hidden to the link we can cut off the extended :focus outline.

Solution CSS

#branding h1 a{
display:block;
height:70px;
width:289px;
background:url(../images/logo.png) no-repeat 0 0;
text-indent:-9999px;
overflow:hidden;
}

view demo

This panel had representitives from each vendor (not apple) and they each took turns showcasing the upcoming CSS3 support in their browser.

MOZ

• nth-child selector
• color module [opacity, rbga]
• border-image
• border-radius
• box-shadow
• * word-wrap:break-word
• * font-adjust
• @font-face
• @media queries ( @media(width:22em){blah}
• -moz-transform: skewX(20deg);
• -webkit-transform: skewX(20deg);

Future from MOZ

• width calculations
• new layout systems for user interface

Microsoft – IE and CSS

• implementing 2.1
• 1st complete implementation on 2.1

In IE8

• no new CSS3 properties

Future of CSS in IE

• opacity
• backgrounds
• web fonts
• media queries
• mutil-column

Opera

• text-shadow (css2)
• webfonts (css2)

CSS3

• backgrounds and borders
• border-radius: 150px / 50px;
• box-shadows, blur, inset
• border-image
• a box css3 style
• css transitions (animations)

Surfin’ Safari: CSS Animation

Personally, I think animation should be left to JavaScript, but this is actually pretty neat, you have to download the open source version of WebKit to see it, but it’s definitely worth a look into the future of CSS.

Get Your Flickr ID

I’m currently building a refreshed version of cssKarma.com and I want to display my Flickr photos on the site, but I couldn’t find my damn ID to grab the JSON feed. This is a neat little app that can quickly get your Flickr ID.

20 Tips for better Conference Speaking

Cameron Moll lists out 20 great points on how to grab your audience while speaking. Since I know I have this problem from time to time, I thought this was an excellent read and very share–worthy.

Aviary

Aviary is like an online version of PhotoShop. But that’s not why they’re on this list, I think I’ve actually posted this link before; but now they have a real slick new navigation menu that I LOVE. Check this out, it’s very interesting.

Something else to read over: XRDS

I’m not sure exactly how well known it is, but you can put a background image on any HTML element… even an image. I don’t think I’ve ever seen it done on a live site before, but it can be very useful for creating an image template for repeated use; without having to do a ton of photo editing. Like in a portfolio or image gallery.

The goal of this post is to show how you can display a decorative frame around an image with minimal markup (just your img element, and maybe a class).

View Demo

The first thing I like to do when doing any serious CSS for an image is set the display to block. This allows us to do a little more with it since inline elements do have some limitations on them. So let’s do that:

CSS

img{
display:block;
}

Next, we set our background image to the img. I chose a polaroid

CSS

img{
display:block;
background:url(polaroid.png);
}

Then set our padding accordingly so the background image shows through, I also floated it left, for some reason.

CSS

img{
display:block;
background:url(polaroid.png);
padding:19px 25px 80px 17px;
float:left;
}

And there you have it, a quick and easy way to add some *pop* to images on your site.

View Demo

It’s been deprecated for a long time, but it keeps creeping up for things like center aligning an image.

Another popular way to do this is to wrap an extra div around the image and set the text alignment to center. This creates (as you might know, I hate), an added layer of XHTML code that you really don’t need.

.image-wrap{
text-align:center;
}

This goes back to one of my pet peeves about using too many divs. Here’s what I came up with:

CSS

#content-main img{
display:block;
width:auto;
margin:auto;
}

That will center your image, and of course you can add a class in if you don’t want all your images centered.

Just a quick tip today, as I’m getting back into the swing of things after vacation. I hope everyone had a good holiday season.

CSS Deployment 101

Reinhold Weber talks about how to compress a CSS file before you push it to the server. this will shave off some load time by reducing everything to one line and removing much of the white space. It also allows you to modularize your CSS without it effecting HTTP requests, because this script will also combine all files into one once it’s on the server.

Equal Height Columns with jQuery

A very useful bit of jQuery creating equal height columns. Pretty slick integration, I’ll be using this.

Web Directions North

Web Directions is a conference I went to last January, it was very cool. Possibly the best conference I’ve been to so far. It’s coming back this February in Denver; if you have the means, I highly recommend it.

A couple years ago I read through Andy Clarke’s Transcending CSS and it really made me think about semantic naming conventions I had otherwise taken for granted. By now, most of us (at least people reading this blog) practice using semantic markup and meaningful class & ID names. But can we do it better? Probably. There’s always room for improvement.

Andy’s book was (still is) filled with many techniques that I hadn’t seen before. I had fallen into the trap that many designer/developers fall into. I was doing things just because I had seen other others doing it and assumed it was the best way. This is why most people still use <div id="wrap"> even though it’s usually unnecessary.

I’m mainly talking about semantic div naming. Specifically "header" & “footer”. I’ve had a while to think through this, so bear with me here.

Basic semantics

The basis of the semantic web is to look at content first, and then decide which element to use, based on that content. Using a list for navigation rather than a paragraph with line breaks (for a brutal example), using an h2 instead of regular bold text, things like that.

Semantic elements extend beyond just XHTML, it extends into your class and ID names. We’ve all seen articles telling us to use names like "error", rather than "red" and "highlight" rather than "yellow". These names are more meaningful and leave room in the future changing the CSS behind them, while still keeping them meaningful.

The same principle should be applied to ID naming, but for some reason, it hasn’t fully taken off. We’re using names like "header", "footer", and "sidebar" in our every day development. On the surface they’re fine, but in the long run they can really hinder future design changes.

What information can be gathered from these div names?

Header

From the name alone, you can tell that this element is at the top of the page. From experience we can assume it also contains some kind of information about the site (name, logo, tagline, etc.). But it’s definitely at the top of the page.

Footer

Footer tells us this is located at the bottom of the page.

Sidebar

The name "sidebar" contains no information about what it contains, just that it runs along, either the right or left side of the page.

The popular way

<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>

What if you want to put the logo somewhere else? Maybe your copyright and contact information isn’t stylish at the bottom of the page anymore? Or you just want to move that sidebar where your "footer" is? You’ll have to rework the markup, move code around and waste time. This takes a valuable function of out CSS, you should be able to completely redesign the layout of your site without touching the markup (unless you want to add stuff, of course). That’s the true power of CSS.

Advanced Semantics

Andy Clarke proposed that we actually look at the content contained in these divs before give them labels and lock them into a role that could change in the future.

Andy’s suggestion

<div id="branding"></div>
<div id="nav"></div>
<div id="content">
  <div id="content_main"></div>
  <div id="content_sub"></div>
</div>
<div id="site_info"></div>

My edits

I’ve made some suggested changes to this code, I’ll get into the why of that in a little while, but for now, here’s how I changed it:

<div id="branding"></div><!--/branding-->
<div id="nav"></div><!--/nav-->
<div id="content">
  <div id="content-main"></div><!--/content-main-->
  <div id="content-sub"></div><!--/content-sub-->
</div><!--/content-->
<div id="site-info"></div><!--/site-info-->

What information can we gather from these div names? (Let’s just look at the 3 we’re talking about)

Branding

Logo, tagline, topics, information and graphics that brand this as an individual can be found in a div named "branding". Best of all, it gives no positioning–relevant information, so in the future (or present) this area can be moved and modified in any way. As long as the content stays meaningful to branding information (which is not usually something that changes in a redesign/realignment), all will be well on the web.

Content-sub

This is old "sidebar"; "content-sub" is labeled as secondary content, it can be positioned anywhere, and will most likely continue to be secondary information in relation to "content-main". And both are contained in a div labeled as "content". You can always add more elements in there like "content-level-three" to accommodate a growing site. But, I find that "main" and "sub" usually cover everything.

This will clean up your style sheet as well:

#content{}
#content-main{}
#content-sub{}

Site-info

"Site-info" replaces the old "footer". The footer usually contains content about the site: archives, copyright, maybe a contact link, etc. And there’s no rule that says that information needs to be at the bottom of the page (there isn’t, I checked). It’s fine if it’s there, that’s where mine is, but in the future if you want to move it the div name will stay semantic and meaningful.

The changes I made

I made some changes to Andy’s code for a few reasons:

• I can never leave well enough alone.
• I always close out my divs with a comment telling me which div got closed so there’s no confusion in the future.
• The underscores: I switched out the underscores with dashes because I came across an article about using underscores in CSS.

In old browsers the underscore in ID and class names had to be escaped like:

p.urgent\_note {color: maroon;}

Or there can be some bad layout problems. Now, this is a big "Who give a crap" in today’s web since no one uses these old browsers anymore, but I see it as a small change to my CSS to make it slightly more degradable just in case some strange user comes by. And it’s really no extra work to do this, which makes it even better.

Closing

I’ve been using this technique for a while now and I love it. When I did my last redesign, it was just a straight style sheet swap. I don’t know if anyone remembers what that looked like, but this is totally different. It was very simple, fast and I hope some readers out there give it a try.

Thoughts? Want to tell me I’m wrong? I’d love to here it.

Better CSS Font Stacks

A good article on how to jazz up your stacks to try and take advantage of users who have more fonts installed. I’m all for this, and as long as it’s done carefully, can get a nice version of progressive enhancement.

5 Terrible SEO Ideas

Richard Bradshaw goes over some trendy (and terrible) things that are common in SEO such as: keyword stuffing, dupe content, link farms, splash pages, and cloaking.

Fun with Overflows

I think this is a great idea (check out the demo). It creates a very similar interface to that of Plurk, the twitter competitor.

Tweet What you Spend

This is a pretty cool service that uses the Twitter API to track spending. I know it can seem kind of geeky (as is reading articles about CSS…), but tracking your spending is a great way to save money, it gives you a lot of power when you know exactly how your paycheck disappears every month. Provided you don’t mind sharing your expenses with the Twitterverse, this is a good service and very easy to use.