Posts about CSS

We know that it’s only web designers who habitually resize a browser window to see if a site’s responsive. But why not reward their dedication with a little something special? Add this to your stylesheet:

@media only screen and (min-width: 960px) and (max-width: 970px) {

body {
-webkit-transform : rotate(180deg);
-moz-transform : rotate(180deg);
-o-transform : rotate(180deg);
transform : rotate(180deg); }

}

This could be the most essential CSS3 media query you’ll need today.

Not since the turn of the century, when we largely shifted from using CSS positioning to floats, has CSS layout been so interesting. Here are three great reads from just today that are all worth your time:

• Strong Layout Systems by Eric Meyer

  Jeremy is at An Event Apart in Atlanta, and reports on Eric Meyer’s new talk, Strong Layout Systems in which Eric speaks about flexbox and grids, both new CSS modules that were created specifically to allow us to create layouts.

• Using Flexbox: Mixing Old and New for the Best Browser Support

  Chris Coyer Coyier (who deserves a medal for the work he does (and his name spelling correctly, sorry)) weaves together old and new flexbox syntaxes for better browser support. Anything lower than or equal to Internet Explorer 9 is still tricky though, so you’ll still need to get handy at designing around that problem.

• CSS3 Layout presentation at In Control Orlando

  Back at a conference, this time in Orlando, Zoe Mickley Gillenwater also spoke about CSS layout techniques including Grid Layout and Flexible Box Layout. Her slides are available on Slideshare, then check out her post as it’s full of examples and resources.

PS: If you can remember either The Noodle Incident or Position Is Everything, it’s past your bedtime.

Microsoft launches Windows 8 in just a few days, so now’s a good time to turn our attention to Internet Explorer 10. Here are two links to help you get prepared:

Tweetbot for Mac Alpha is notable for a whole bunch of reasons I won’t get into here. Instead, I found something notable about the CSS the Tapbots team used on the page for their alpha release.

File this one under gotchas.

I’m desktop browser testing a series of layout templates for a current project today. Everything was going really well until I encountered some files where my web fonts stubbornly refused to display in Firefox, but rendered perfectly in every other browser. Luckily I found the reason for the problem and a solution to it.

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

Faruk Ate? in Opera Confirms WebKit Prefix Usage:

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

It’s been almost three years since I launched, what most people thought of as the bat-shit crazy Universal Internet Explorer 6 CSS stylesheet.

About two years ago, I tweeted “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” I meant it too. After-all, CSS isn’t hard to learn and it’s easy to write and write quickly. So why would you need a processor like LESS or Sass?

After pushing my redesign live yesterday, I’ve been asked a few times about why I pulled respond.js (and with it, CSS3 Media Query support for older versions on Internet Explorer) from the new site.

As Jeremy mentioned yesterday, just before An Event Apart in Seattle, I spent a few hours on a spot of guerrilla testing at an AT&T store. Specifically, I was looking at how Windows Phone 7’s Internet Explorer browser handles ‘responsive sites’.

Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.

Yesterday, Mike Davidson announced the sweeping redesign of msnbc.com article pages. The redesign is especially brave from a traditional news outlet business perspective as it emphasizes readability and enjoyment over page views. But I do have a minor gripe with its typography and set out to find a solution.

Yesterday Microsoft announced the third Platform Preview of Internet Explorer 9. I’ve been using this preview for a while, testing how their newest browser stands up to the examples I’ve designed for Hardboiled Web Design.

Today, RIM unveiled its latest mobile browser. It runs WebKit making every mobile platform except one run that rendering engine. With that in mind, I’d like you to try this experiment.

A week ago I was grumbling (again) on Twitter about JavaScript selector engines and enablers for Internet Explorer.

Always an example of the best the web design industry has to offer, this year 24 ways, the advent calendar for web geeks, has its focus firmly set on moving your web design forward.

Writing this week about eating accessibility humble pie and using CSS attribute substring selectors, a comment by clever Craig Cook sent my imagination reeling.

We all make mistakes. Right? Particularly when it comes to accessibility. Often in the rush to ready a site for launch, we forget to check the details that can make a world of difference. That’s what I did when I launched the latest For A Beautiful Web.

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license. (This entry was originally posted on 23rd November 2005 and has been updated in 2009.)

I’m busy working on the slide deck and example site files for our Advanced CSS Styling workshops in Birmingham, Newcastle (and Tokyo). I’m really excited about this new workshop format and wanted to share one of the example site pages.

Smashing Magazine published an excellent primer for CSS3 properties by Inayaili de Leon today which referenced a little of my work. I was pleased, but as today as gone on and I’ve watched the comments roll, my heart started to sink.