Posts about CSS

Over the next few weeks, I’m going to share some of the things that I’ve learned while designing and developing Inspired Guides, starting today with using HTML entities as separators in breadcrumb navigation.

I always vowed that I wouldn’t update Transcending CSS, but there’s always been something about that old book that disappointed me and now I have the chance to fix it.

The Guardian’s Kaelig Deloumeau-Prigent recently wrote about their struggles and strategy for dealing with Internet Explorer 8. People visiting my site using Internet Explorer 8 are few and far between these days, but those that do could be good customers, so with our redesign I wanted to make a real effort to give them a good experience.

Apple doesn’t have what many of us would consider to be a fully responsive website, but that doesn’t mean they don’t sometimes use two of Ethan’s ingredients; flexible media and CSS3 media queries, to improve the placement of some elements on an otherwise fixed page.

Exactly ten years ago today, on October 20th 2003, A List Apart published Doug Bowman’s Sliding Doors of CSS.

I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do. In practical terms that means working through what are sometimes dozens of static visuals to identify patterns of typography, use of colour and layouts, both smaller modules and whole page compositions. From these patterns I classify and identify elements and compose stylesheets based on them.

Following up on my M M M Madness post, here are two good links to more on CSS filters:

• Creating iOS 7 effects with CSS3: translucency and transparency

  John Allsopp recreates iOS7’s translucency and blur using CSS filters. I suspect we’ll see a lot more of this design aesthetic on the web in the months to come.

• Create impact with CSS filters video presentation from Alex Danilo

  Alex Danilo’s presentation on CSS filters from Web Directions Code in Australia is well worth your time too.

My prediction? Designers are going to go CSS filter crazy over the next year.

While I was preparing the slides from my full day CSS3 For Responsive Web Design at Smashing Magazine, I got very excited by the new filters in CSS. (313 onwards in my slide deck.) These filters — not to be confused with those legacy, proprietary Microsoft filters — are now well on their way to becoming part of a standard.

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:

The Stuff and Nonsense nutty boys header is pretty tall and I decided I wanted to reduce its height for small screens, such as phones, in landscape orientation. When I wrote the CSS to make this happen I made some nutty assumptions. In the spirit of sharing our mistakes:

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:

• Base
• Layout
• Module
• State
• Theme

He establishes a naming convention for these categories of styles. Jon says:

I like to use a prefix to differentiate between Layout, State, and Module Rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles.

I like this idea a lot because, 1; I’ve had a fascination with naming conventions, and 2; I’ve long had a problem with mixing styles for layout with styles for ‘atmosphere’ (colour, texture and typography,) something we’ve all done for years.

To me, using classes makes sense when we need to ‘classify’ items such as modules on a page. They make sense for groups of styles in a theme too. But it doesn’t make sense to me to use classes for the layout outline of a page, particularly when many times we add the elements they style purely for layout reasons and especially in a responsive context. It feels somehow messy.

Years ago, when oft-used browsers only supported element, class and id selectors, we didn’t have much choice. Now that browsers from Internet Explorer 7 up have solid support for CSS attribute selectors, we can bind our styles to elements based on their attributes. That’s why we’ve seen more and more people binding styles using ARIA role attributes. For example:

<div role="navigation">…</div>

[role="main"] {
/* styles */ }

Reading SMACSS got me thinking. Why not abstract layout styles even further than Jon suggested, by using HTML5’s data- attributes instead of classes. Something like:

<div data-layout="content">…</div>

[data-layout="content"] {
/* styles */ }

Conceptually, this fully separates styles for layout from every aspect of atmosphere. Although I’m aware that there are no practical advantages to using data-, to me it somehow feels cleaner.

I’m not 100% sure if this could be a legitimate use for data-. What are the experts’ opinion? I’d be interested in hearing if you’ve used this approach already and what you think might be the possible advantages and disadvantages?

Faruk Ate? in Opera Confirms WebKit Prefix Usage:

I’m left feeling that this is just Browser War II, and what grace we’d regained by switching to Feature Detection rather than UA sniffing will be lost once again as a result of these moves.

With some luck, things will just become better for the users of those browsers who will once more pretend to be someone they aren’t, and us web authors aren’t inconvenienced too much. Meanwhile, it is left—again—up to web authors to invent the tools to placate the browser vendors who gave us this mess in the first place.

I commend Opera for finally admitting — through their decision to adopt WebKit Prefixes — that their real motives are the corporate motives we always knew them to be. That they’re not the standards champions they pretend to be. That they’re prepared to break a fragile, but working standard for corporate gain.^[1]

What their actions also tell us is that despite hiring some of the best minds in the business^[2], their strategy of evangelists and ‘web openers’ has resoundingly failed to convince developers that Opera is relevant. If that wasn’t the reality, they would have no need to adopt another platform vendor’s prefixes.

What Opera forgets in its colossal arrogance, is that vendor specific prefixes were intended to give developers a choice to support a browser platform — or not.

We were never ‘required’ to include a full set of prefixes.

Excluding Opera didn’t qualify as ‘invalid.’

If I choose to exclude Opera (or Webkit or Mozilla or Microsoft,) that’s my choice and my right.

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’.