Jonathan Snook at 2012′s Smashing Conference, talking up modular CSS.
Various external hand-picked links to CSS-based content from around the web. Subscribe via RSS.
Jonathan Snook at 2012′s Smashing Conference, talking up modular CSS.
I haven’t yet delved into the details on shadow DOM. If you have, then you might be interested in this piece that talks about styling shadow DOM elements. Definitely not light reading, and probably far future as far as real-world use, but it’s cool to know that things are moving ahead.
I’ve been meaning to grok this feature for a while now, and integrate it with my CSS animiations along with a setTimeout fallback for older browsers. This article might be a good start.
Russ Weakley with an extensive look at modular CSS techniques. 166 slides, so buckle up.
Philip Walton discusses an approach using Sass for avoiding class name conflicts in selectors when mixing CSS libraries.
Catalin Rosu’s take at responsive drop-down menus, supported in IE8+ and using Sass.
A simple tip from David Baron on helping the web become browser-agnostic.
The code is awful (i.e. don’t ever do this in a real project unless it’s a game or something), but the result is quite impressive.
Lots of different ways to horizontally center a group of elements of unknown width.
When it comes to CSS, this is as creative as it gets. This student (Xiaoyang Kao) actually created a CSS 3D Transforms-based overlay for a real video feed of a swim meet, to mimic what they do with CGI on live broadcasts.
Zoltan Hawryluk with an in-depth look at creating circular animation paths with just two keyframes (a technique Lea Verou discusses in her “10 More CSS3 secrets presentation…”. He also includes a jQuery-based script polyfill for IE
Zomigi creates a nice chart explaining the difference between the 2011 syntax for flexbox and the current one. This is particularly important because of the fact that IE10 was released before the new syntax was formulated. Hmmm, I wonder how IE10 could fix that problem? *cough* auto update *cough*
The slides from Addy’s talk at jQueryTO. Definitely one of the highlights of the conference. Believe it or not, he actually recommended that, in some cases, it would be better to use an image in place of box shadow, if page performance was significantly affected by adding shadows.
Some info from Addy Osmani on Google+ on performance and paint optimization when forcing GPU acceleration (like when you do something like translateZ(0) to smooth out an animation or the jagged edges of a transform).
Someone on Reddit has conducted a test to see if the content of pseudo-elements is indexed by Google in any way. It seems that the conclusion is that Google does not index such content.
“Animations need to be silky, scrolling must be buttery-smooth and your page needs to contain little to no jank.” Some tips from Addy Osmani on repaints and how to diagnose slow repaint times.
Excellent slide show by Russ Weakley covering the topic of floats. Nothing new here for experienced CSS developers, but great for beginners and those who might not fully understand the concepts behind floats and clearing of floats.
Very cool solution for responsive tables by Aaron Gustafson. Very nice idea to use a pseudo-element to grab the data-attribute.
Divya writes in detail covering some solutions for fallbacks on background-clip techniques that don’t degrade gracefully in non-supporting browsers.
Hugo discusses lots of different ways to do a “float: down” sort of effect. I’m not really crazy about many of these solutions, but I think it’s great to problem solve like this, especially when different devs get involved.
When I first saw the title of this one, I immediately assumed I probably wouldn’t like the reasoning. But I stand corrected; these are some really good reasons not to do a responsive design.
We need more articles like this one that lay out exactly the types of things that should be considered before a responsive design begins. Too often, we just start coding, without properly mapping out all the challenges and how we will resolve them.
Great comprehensive discussion of rem units by Matthew Lettini, which also includes some really practical reasons to use them.
Marko Dugonjić discusses “how to handle flexible widths and paddings on a child element, if the container itself is set with flexible lengths” in responsive designs — a question he says has come up a number of times in his workshops and elsewhere.
Philip Walton (remember that name, he’s a smart up and coming front-end blogger) writes on Codrops about so-called “presentational” class names, which many purists feel are wrong to use.
Steven Bradley with an in-depth look at what it means when you do something like left: auto and why it responds like it does.
Some interesting thoughts by Noah Stokes on the whole skeumorphism vs. flat design debate and how it relates to responsive code.
Karl Schellenberg discusses some techniques used on his agency’s website to help delay CSS3 animations.
A new conference where “Eight world-class speakers discuss CSS modules”. Looks interesting. First one is in June in Amsterdam.
Very cool CodePen demo by Bennett Feely, based on a Dribbble concept by Erik Deiner.
I’m not entirely sure how practical this property will be, but it is now officially part of the spec. The all property.
A cool jQuery tip from Ben Nadel to deal with a situation where an inline style is conflicting with a regular style that you want to take effect.
I’m not crazy about this feature, because it does not degrade gracefully thus making it pretty useless until we have cross-browser support. In this post, Cameron McCormack discusses what this feature is all about and adds the news that Firefox will support it in a future release.
Here’s a blog I’ve never seen before. This looks like a pretty comprehensive look at inline-block. The post is a couple of weeks old, but I like the fact that it focuses on one specific CSS feature.
I’ve seen a similar trick to this a couple of times recently, but I like David Storey’s explanation, and the effect is always nice, albeit probably of limited use.
Very interesting bug find my Roger Johansson. I’m convinced it’s a bug, as I couldn’t see any logical reason for this to be happening. I hope Roger submitted the bug to Chrome/WebKit.
This is too cool not to share. Great use of CSS3 transforms in this demo. This is just one example from the new Form Follows Function project by Jongmin Kim.
After reading this one: mind = blown. This is a very enlightening article for anyone who’s had trouble with
z-index. Great stuff from Philip Walton. I’ve insta-subscribed to his RSS feed, and if you know what’s good for you, you’d do the same. :)
A very nice interactive demo and detailed description of CSS3 columns by Tommi Kaikkonen (the same person that did the super-popular interactive typography thing.
A simple tip and screencast from Val Head, covering the animation-fill-mode property for use in CSS3 animations.
Another post I wrote for Treehouse, this time covering how to do callback-like effects with CSS transitions and animations.
This is a very short post by Peter Foti giving what I think is a very good suggestion for readable CSS. The only criticism I have is that you should avoid the ID selector he’s using, and use a class instead. But the imaginary descendant selector he’s indicating (which is great for development code before you minimize and push to production) is a nice piece of advice that might work well with modular CSS where you try to avoid the descendant selector as much as possible.
Trent Walton with a very informative and practical look at the importance of thinking about flexibility (i.e. responsiveness) all through our pages, not just in the basic structure.
Another great demo by Manoela of Codrops. Says “best viewed in WebKit” but it looks and functions great in latest stable Firefox too.
I’ve been wanting to write an introductory-ish tutorial on Sass syntax for a while now. This post by Laura Kalbag (she seems to be everywhere lately!) seems close to what I was intending to write, so if you’ve not yet looked into Sass, this might be a good start.
This tutorial by Peter Langley (aimed at Windows users) might come in handy if you’re creating sprite images and using Sass.
A gallery of sorts of easing functions, so you can pick the one you want. Might come in handy when doing CSS3 animation as it gives you the necessary cubic-bezier code for each easing example.
I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous of Manoela Ilic’s awesome creativity. I will not be jealous […]
This tweet by Paul Irish links to an old example that visually demonstrates improved usability for dropdown menus. This was in response to a modern example of the same thing tweeted by Chris Coyier.