Update from The Haystack

Posted on by
Reply

Well, hello there!

A lot has been going on around here, and the most important thing is arguably the fact that my book is now available. Responsive Design Workflow is now available through various booksellers, also via responsivedesignworkflow.com. The book, which is quicker and easier to read than it was to write, explains the whys and hows of my basic responsive web design workflow, which I have presented about these past couple of years. It was my privilege to work with some great people behind the scenes, including Mr. Responsive Ethan Marcotte (who wrote the foreword), Jake Archibald (who was kind enough to be my tech editor), and Ana Nelson (author of Dexy, the document automation tool I currently use in my work).

The book site/page, which I’m scrambling to complete, will contain errata (my publisher explained that everyone makes mistakes, not just me, so I’ve stopped torturing myself, kind of) and code examples. In fact, I’ve already put the code examples on GitHub so readers don’t have to be the victim of my insane calendar.

Krijn, PPK and I just finished the Mobilism conference, which according to PPK might just have been the last Mobilism ever. We’ll have to see how that works out. It was a fantastic event nevertheless. I presented about web-based mockups, which are an important part of the responsive workflow.

Coming up in several weeks is CSS Day, a one-day event with eight speakers, each of which will be presenting about a specific CSS module. It might not come as a surprise that I’ll be handling Flexbox, as the layout specs have been my favorite CSS topic since I first presented about them in 2009.

I’ll also be speaking at Generate in London, Breaking Development in Nashville, plus a couple of other worthwhile, yet to be announced events. Also in the works: Responsive Design Workflow workshops! Stay tuned.

As for writing, I’ve obviously found time to write everywhere but here: the book, a feature on style guides (with a tutorial on one method of creating and automating them) for .net Magazine, and I’m now a (generally) bi-monthly columnist for the Dutch industry magazine Webdesigner.

In parallel with the above, I’m still doing client work, although the amount of projects I can do is limited since I started working independently two-and-a-half years ago, which even now still takes some getting used to. I have difficulty with saying “no”, but a heavy workload is good training for that.

There’s a family life in there somewhere. Social life is on the to-do list. :)

Cheers,
Stephen

Say something nice (for a change)

Posted on by

With all of the recent discussions about how women in our industry are being treated, I started thinking about how many industry women have affected me somehow in a positive way. There are lots.

Here is a handful. These are women who have inspired me, advised me, offered me help or taught me things, mostly professionally but sometimes personally. They may not know this (they do now). I find each to be brimming with talent. They are smart, professional and just plain nice people. I feel lucky to know them and their work.

A tip of my invisible hat to (In no particular order):

No matter who you are, male or female, green or blue, you are on somebody’s list.

I can’t help but feel that someone, somewhere, will somehow turn this post into something bad. No, I have no ulterior motives for posting this. Nor do I need them.

Sometimes, it’s just important to say something nice.

Your turn. Have a good weekend.

PS: if you’re listed here and don’t appreciate that, please let me know and I will remove your name.

Nesting media queries

Posted on by
6

In my presentation at Mobilism 2011 (slides) I talked about using logical and and or in media queries. Most of us use and, but I found that not as many people knew about the logical or, which in the case of media queries is the comma. In comma-separated media queries, like this one:

@media screen and (min-resolution: 300dpi), screen and (-webkit-min-device-pixel-ratio: 2) { }

the comma is an or. The first query will be evaluated. If not true, the second one will be evaluated. If one of these is true, the styles will be applied.

Another thing I mentioned (which is on the video but unfortunately not in the slides) is that it is possible to nest media queries. Since we can use media queries in the link element as well as in a CSS file itself, I found that doing both allows you some simple nesting. Whenever you want to apply styles based on two conditions which cannot be fulfilled within a single query, this could be useful.

I couldn’t think of any other use cases at the time other than my typical use case of using min-width queries and having specific page components which need to change at a certain max-width. That works just fine. But then just yesterday Ben Callahan provided us all a new use case: working with logical not.

As I discussed at Mobilism, it is possible to create a media query like so:

@media not screen and (min-width: 600px) { }

This might look like it means “if it’s not a screen but it is at least 600px wide, then apply these styles.” In fact, the not negates the entire query. This is according to spec. So this query actually says, “if it’s not a screen which is at least 600px wide, apply these styles.” That’s a huge difference.

Ben sent an article which he and Matt Griffin wrote in which they describe this problem, as in one key example they wanted to target all media types which are not print. You can’t do:

@media not print and (min-width: 60em)

and expect the min-width to still apply, since the not negates the entire query. So, glad with another possible use case for nesting media queries, I suggested the idea to Ben, who promptly added some nesting tests to the slew of media query tests he’d done for the article. As far as I can tell, Ben’s tests work as expected. By linking to a style sheet like so:

<link … media="not print">

and then in that style sheet creating another query like so:

@media all and (min-width: 60em)

you have created a nice little nested conditional, saying, “as long as the media type is not print, if the minimum width is 60em, apply these styles”. Of course, the only styles that will be applied are those in that particular query block in your style sheet.

While I could confirm Ben’s tests worked in a couple of modern browsers (and an actual printer, of course), it obviously will not work in any browser which doesn’t support the not keyword. And as always, I’m sure there are several other caveats to be found. Nevertheless, it’s a useful trick to know.

Hats off to Ben and Matt for their explorations. Great stuff!

NOTE (2012-10-17): As Bruce Lawson pointed out to me, browsers will most likely support nesting of media blocks in the future.