Issue 255
The display property, responsive images, accessibility, styling selects.
News
Issue 255
Online conferences and meetups are really becoming a thing. I presented yesterday at An Event Apart, and the slides are below. Later this week I'll be presenting at the Fronteers online meetup, which is open to everyone whether you are a Fronteers member or not. Come along!
Lots of interesting stuff to read in the newsletter today, I hope you find something useful there.
Rachel Andrew, CSS Layout News
Learn
Now You See It: Understanding Display
I spoke last night at the first An Event Apart Online Together. My talk is all about the display property and you can find the slides, code, and resources here.
CSS :is() and :where() are coming to browsers | Web Platform News
An explanation of the is() and where() pseudo-classes.
Accessibility — Smashing Magazine
A new Smashing Guide, pulling together some of our content on a topic. This time our relevant content on accessibility.
How to Create a Motion Hover Effect for a Background Image Grid | Codrops
This effect looks very cool, however you might want to wrap it in a prefers-reduced-motion media query (which you can also use from JavaScript), as I can imagine some folk finding it unpleasant.
Striking a Balance Between Native and Custom Select Elements | CSS-Tricks
A comprehensive article showing how to enhance a select element to show a styled select.
A Guide to the Responsive Images Syntax in HTML | CSS-Tricks
A useful guide to using Responsive Images on CSS Tricks.
Interesting
Sorted CSS Colors
A tool that lets you explore the CSS named color values.
CSS Grid: Newspaper Layout
Another lovely piece of work from Olivia, this one also uses some multicol which makes me happy to see.
Our Sponsor
Earlybird pricing! Learn CSS layout with me.
I've been completely rewriting and re-recording my CSS Layout course. You can learn Grid, Flexbox, browser support and much more by coding along with me in these lessons.
The first lessons are now online and if you sign up for the complete course with code EARLYBIRD, you will get a $40 discount and be first to see all of the new material as soon as it goes online.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.