Some really great CSS tips from Rich on sizing display text for multiple viewports.
This philosophy doesn’t apply to every website out there, but it sure as hell applies to a lot of them.
Eric is excited about the imminent arrival of grid layout in browsers. And after reading the answers to these sure-to-be-frequently asked questions, you’ll be excited too!
I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.
A whole lotta CSS properties and values gathered together in one place. The one-page view is a bit overwhelming, but search and collections can get you to the right bit lickety-split.
A really terrific piece by Heydon that serves as a rousing defence of the cascade in CSS. It’s set up in opposition to methodologies like BEM (and there’s plenty of back’n’forth in the comments), but the truth is that every project is different so the more approaches you have in your toolkit, the better. For many projects, something like BEM is a good idea. For others, not so much.
Funnily enough, I’ve been working something recently where I’ve been embracing the approach that Heydon describes—although, to be fair, it’s a personal project where I don’t have to think about other developers touching the HTML or CSS.
Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.
Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.
The video of Charlotte’s excellent pattern library talk that she presented yesterday in Berlin.
Monica takes a look at the options out there for loading web fonts and settles on a smart asynchronous lazy-loading approach.
Adam Silver has written a free online book all about writing maintainable CSS. It dives straight into naming things and takes it from there.
MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.
If you have to use a carousel, it doesn’t have to be complicated. Chris runs through some of the options out there. It turns out you can get surprisingly far with CSS alone.
This use-case for blend modes is making me thirsty.
Also: look who’s blogging again!
This is a very thoughtful analysis of different approaches to writing maintainable CSS, which—let’s face it—is the hard bit.
I often joke that I don’t want to hire a code ninja. Ninjas come in the middle of the night and leave a bloody mess.
I want a code janitor. Someone who walks the hallways of code, cleaning up pieces, dusting up neglected parts, shinning up others, tossing unnecessary bits. I prefer this gentler, more accurate analogy. This is the person you want on your team. This is a person you want in your code reviews.
Also, can I just say how refreshing it is to read an article that doesn’t treat the cascade like a disease to be wiped out? This article even goes so far as to suggest that the cascade might actually be a feature—shock! horror!
The cascade can help, if you understand and organize it. This is the same as any sophisticated software design. You can look at what you’re building and make responsible decisions on your build and design. You decide what can be at a top-level and needs to be inherited by other, smaller, pieces.
There’s a lot of really good stuff in here to mull over.
My hope for this article is to encourage developers to think ahead. We’re all in this together, and the best we can do is learn from one another.
This uses generated content in CSS to make the
aria-label attributes visible on small screens—clever!
This is an unintuitive—but very handy—use of of the
flex-grow property. The use-case outlined here is fairly common.
Part 3: We might not need quantity queries thanks to Flexbox | Charlotte Jackson, Front-end developer
I love the way that Charlotte is documenting her learning process. In this third part of the quantity queries + flexbox saga, it turns out that flexbox is capable of doing the magic all by itself!
A step-by-step walkthrough of layering on enhancements to a site. The article shows the code used, but it isn’t really the code that matters—it’s the thought and planning that went into it.
Equal parts clever and scary. By using
autocomplete in HTML and some offscreen positioning in CSS, it’s possible to extract some unexpected personal information.
I expect browsers will be closing these holes pretty quickly.
This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.
It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.