Need to overlay one HTML element on top of and fully covering another, such as a heading with translucent background on top of an image? Michelle Barker has us covered with this blog post in which she creates an
overlay utility to handle this. She firstly shows how it can be accomplished with positioning, then modernises her code using the
inset CSS logical property, before finally demonstrating a neat CSS Grid based approach.
In web development it’s useful when we can say “if the browser supports X, then we know it also supports Y”.
While bookmarking the mastery.games article yesterday, I started getting the feeling that something was awfully familiar. It was! I’ve seen this layout before – from Tyler Sticka back in 2017 to be precise – but failed to bookmark it at the time.
Very clever responsive
<article> layout (with gutters and breakout images) achieved using CSS Grid,
ch unit and a minimum of fuss. It scales automatically from narrow to wide viewports with no
max-width or media query manual overrides in sight.
For the blog post page (the page you're looking at right now) I wanted a mobile-friendly layout where the text was centered and readable, where the images/code examples are wide.
Some serious CSS Grid positioning, image manipulation and alpha transparency ninjitsu on display here from Stephanie Eckles!
This episode explores creating website heroes - aka “headers” - with one of my favorite ways to use CSS grid layout: by turning it into a canvas.
Modern CSS Solutions for Old CSS Problems
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. Here’s a history of CSS and web design, as I remember it.
Evan Minto notes that flexible grids created with CSS Grid’s
minmax are only intrinsically responsive (responsive to their container rather than the viewport) up to a point, because when the container width is narrower than the minimum width specified in
minmax the grid children overflow.
Great resource from CSS Grid expert Rachel Andrew, with the Patterns and Examples sections which provide quick-start grid layouts being particularly handy.
Léonie Watson explains how the HTML tabindex attribute is used to manage keyboard focus. Of particular interest to me was a clarification of what
tabindex="-1" does (because I always forget).
When tabindex is set to a negative integer like -1, (the element) becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.
See all tags.