@media screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait) { /* css */ }

And that’s not even the whole thing, you still need vendor prefixes to get it to work. This brings me to my point.

This intense form of a media query is getting dangerously close to targeting a specific device, which defeats the entire point of responsive design. It’s all about setting breakpoints, but if your breakpoints get too granular, it’s no better than targeting an iPhone directly. We have starting points because you need to have starting points, something like 800px, 480px, 320px, right? Typical breakpoints for your media queries. We’re missing the mark a little with using them out of the box like that though.

Not to point blame at any boilerplates, I think they’re actually really great to get you started, but when you use them out of the box, you start to get in trouble. They’re meant to be customized. — and wow, at least change that pink highlight.

The intention of breakpoints is to identify points where your design gets a little messed up, let’s say at 600px wide your design gets too cramped. In that case your first breakpoint would be at 600px. It’s different for every design. If you follow that basic model, you don’t have to worry about what a reference pixel for a device is. If the resolution for a device is 800px and your breakpoint is at 600px, it will look at intended. Don’t worry so much, you’re already doing it right.

As some may know, I’ve been writing a JavaScript book and I’ve been studying a lot of the basic history of the Web. Since its early conception we (as a community) have been hacking things together to deal with a device market that is struggling to get its sea legs. Normally what happens is that we’ll have a period of instability followed by developers & designers scrambling to rethink what they do and hacking something together to make it 100%, then it will get standardized and all the work you did to take a project from 95% to 100% is seen as a pile of dirty hacks (anyone remember the war between JavaScript and jScript?).

Now we use something called feature detection, which is a million times better.

When you work in the browser vs. on the server there are certain things you can’t control and you need to manage bottlenecks in the process rather than forcing control over an uncontrollable situation. The devices will do what they’ll do and if you try and plan for them all you’ll:

1. Go insane
2. Go broke purchasing all the devices
3. Create so much extra code that it will be unmanageable
4. Bog down performance
5. Ruin your JavaScript
6. Get to a point where it’s more efficient to detect for a device and serve up new markup on the server (and nobody wants crap that again)

What the moral of the story? I don’t know, stop over-thinking everything. It’s great to explore new stuff, but even better when you can recognize when new stuff isn’t that much better than the old stuff.

I’d like to preface my thoughts here with a saying that the publisher did send me a free copy of the book with the intention of writing up a review somewhere. However, if I thought the book was crap I would have sent it right back. You can be assured that it’s a quality book and appears to be targeting at a mid-level CSS-minded designer/developer.

If you don’t want to read through the whole review, I’d recommend scanning the chapter listing and if there’s anything that you need real work on, go ahead and buy it. I will say that even in something I’m researching quite a bit about, I did learn elements of media queries that I didn’t know beforehand.

Chapter Listing

1. Introducing CSS3
2. Media Queries
3. Selectors
4. Pseudo-classes and Pseudo-elements
5. Web Fonts
6. Text Effects and Typographic Styles
7. Multiple Columns
8. Background Images
9. Border and Box effects
10. Color and Opacity
11. Gradients
12. 2D Transformations
13. Transitions and Animations
14. 3D Transformations
15. Flexible Box Layout
16. Template Layout
17. The Future of CSS

Overall Content Structure

I really liked the chapter order for the book, it made pretty good sense. Starting off with some basic things like selectors and pseudo-classes/elements; the things that are basically “hey, this is what this looks like”. There isn’t a whole lot you can say about CSS selectors, believe me, I’ve tried.

Many of the selectors mentioned in the book have been around for a very long time (in Web years), and to be honest, I was confident that they where actually in the original spec for CSS 2.1. That was a small point of confusion.

However out of place in the overall flow, I did much prefer the chapter on media queries being so far in the front (Ch. 2). After the introduction is seemed like it was amping up to be one of those books where you don’t get to the really cool stuff until the end, and by the time you’re there, your tired of reading.

There are a lot of surprisingly basic things to cover in CSS3 and I think Peter did a good job of architecting the information in a meaningful manner.

Things I Really Liked

I really liked the chapter on media queries and Peter’s writing style; he made everything pretty easy to follow.

The chapter on WebFonts included very current examples like the bullproof @font-face syntax, which makes the book seem very timely.

Stuff I didn’t find super-useful

Being completely honest, I’m tried of hearing about the template layout model. I first read about it in Andy Clarke’s Transcending CSS book… 4 years ago (?). It’s very cool, and kinda rocks, but being at a point where we can’t get border radius and gradient working in all browsers, it’s a far shot away to start using a new layout model.

The gradient chapter is a little out of date (I think the webkit syntax is changing), but that’s what happens with books; they get old pretty fast. Other than that there isn’t a whole lot negative about the book. It’s a little late to the game in regards to how long we’ve been dealing with CSS3, but that also means the information is pretty solidified.

Conclusion

Overall, I did really like the book. It was well written and put together in a unique way. I am however torn in telling you if you should go out and buy it right now because I sort of feel like we’ve all being practicing most of the techniques in the book for a long time. I found myself getting a little bored at times reading about the color formats, selectors and older things like that.

If you’re like me, you’re really reading a book like this for the cutting edge elements that haven’t been blogged about over and over again (chapters 13-17) and you don’t want to read through the CSS3 spec (and you shouldn’t, because it’s awful). Those chapters are actually very good and give you a strong base in what’s coming down the pipe. You can also use the other chapters to tighten up your general CSS3 knowledge.

I almost feel like I wasn’t the real target audience for the book, but with that being said, I did still learn enough stuff to justify the price tag. So should you buy it? Yea, you should buy it.

Also, I really like the cover art.

But I digress.

CSS Performance

We’ve all seen the mass of articles & tutorials about JavaScript performance, how to optimize jQuery, and the JS Performance test suite. The market is flooded, ok, we get it. JavaScript is a beast of the Web that needs to be constantly tamed. It’s getting better, especially with lightning-fast JS engine , V8 looming around in Chome and NodeJS.

CSS performance is constantly overshadowed by JS performance (and rightly so), but that doesn’t mean we shouldn’t at least take a look at it every now-and-then as a form of checks and balances for our front-end code. After all, something like 90% of the load time for a site happens on the front-end and unless you’re Google, it’s probably not all JavaScript (little bit of a big there, sorry fellas).

OOCSS

Object Oriented CSS goes a little like this:

The CSS

.rounded{ border-radius:7px; }
.box-shadow{ -moz-box-shadow:0 2px 2px #333;box-shadow:0 2px 0 #333; }
.left{ float:left; }

The HTML

<div class="rounded box-shadow left"></div> <!--/.rounded .box-shadow .left-->

You’re basically just separating out the individual properties you’ll be using and modifying the HTML to reflect them. It’s very similar to a framework model in building and styling a site.

Whether you like it or not, there it is. There’s a lot of debate over this method, pluses and minuses, loves and hates. The most popular argument against it is that you’re embedding style information into your HTML and semi-collapses the progressive enhancement model of structure — presentation — behavior.

It’s tough for me to totally buy into OOCSS for that reason. I stick very closely to progressive enhancement while I’m building a site and really only stray from that when I’m styling for a CMS and I need classes like: “left”, “right”, “clear”, etc., which get applied by the user later on.

So, when styling for use in a CMS, I really do think OOCSS is dead-on. I’ve yet to fully use it just because I question it’s maintainability. But from a strictly performance stand point: Is OOCSS better? Yea, it’s better. It does perform better across the board than almost all of the CSS selectors (especially the advanced ones).

Lastly, on performance

We can all go through ySlow and JSLint to see where we may have some front-end memory leaks but getting down to the granularity of the way we’re constructing a page (OOCSS vs. non-OOCSS) is tough without running the explicit performance tests.

As the Web gets more and more advanced and browsers like Chrome pave the way for faster sites, I have no idea what the real answer for CSS performance is, but I do know that browsers will not help you write better code. We still need to explore the best practices, be it front-end, back-end or somewhere in the middle.

I’d like to get into this in more detail, but I have a group of tourists screaming at eachother in French next to me (trying out a new coffee shop), so I defer to the comments if you’re at all interesting in the OOCSS debate.

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.