259: How to use variable fonts
I have a terrible confession to make. Send me to jail and lock away the key because, despite how much I rant about variable fonts, I’ve never really used them. I’ve read tutorials and demos and I love seeing what’s …
CSS-Tricks is joining the DigitalOcean community! We are so excited to be joining forces. Learn more about this change here. As a special welcome offer, enjoy $100 of free credit to try DigitalOcean on us.
An email newsletter with the most interesting news, ideas, fresh content, thoughts, and incredibly mature jokes from Team CSS-Tricks. This is your ticket to saying up to date with web dev.
I have a terrible confession to make. Send me to jail and lock away the key because, despite how much I rant about variable fonts, I’ve never really used them. I’ve read tutorials and demos and I love seeing what’s …
[Robin]: I’ve been in my fair share of meetings over the years; those that were unfocused and a bit rambling, those that were unclear about why they even needed to be meetings in the first place, or heck meetings that …
[Robin]: When it comes to web development I feel like images have been in a state of constant flux over the past few years. What’s the best way to add an image to a website? Well, that question is much …
[Robin]: Max Böck asks when should we use @container
or @media
queries?
…While I think container queries will eventually replace most “low level” responsive logic, there are still a lot of good usecases for trusty media queries.
A combination
[Robin]: Exciting news! This week Astro was formally introduced — it’s a static site builder that is, well, pretty gosh darn exciting:
…In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue,
For some reason this week I’ve been returning to the very basics of HTML and CSS, going over a lot of blog posts that remind me that there’s still some gaps I have in my knowledge when it comes to …
[Robin]: Earlier this week I stumbled upon a problem where the only solution I could think of was a hypothetical one: an :nth-letter
selector in CSS. It would work something like this:
.element:nth-letter(2) {
color: red;
}
Similar to :nth-child
…
[Robin]: Stefánia Péter made a neat website called CSS Hell. It tells us what to avoid when writing CSS and I like this note about specificity:
…Developers often write overly specific selectors just to be 10000% sure their
[Robin]: First up this week, Una Kravets wrote about how marvelous the future will be with container queries:
…Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
[Robin]: This week I’ve been thinking about this post from the team at gov.uk where they write about how they made a button to show and hide the password of an input. They do that by toggling between the …
[Robin]: I thought I knew everything when it comes to responsive images, but this article by Addy Osmani sure proved me wrong. He writes about how images impact performance and how that ties into Google’s Core Web Vitals but goes …
[Robin]: Imagine you could jump into the future — let’s say ten years — and watch how you write CSS. What would that look like? How much of the language do you expect will change over that period of time? …
[Robin]: It’s been a long and winding road, but container queries are starting to arrive. They just landed in Chrome Canary. I first spotted this news on Andy Bell’s blog a few weeks ago when he made a great …
[Robin]: My favorite website at the moment is Volume, “a publishing platform for high-quality illustrated books.” It’s a place where you can kickstart book-related projects but what gets made at the end are these enormous and beautiful bits of …
The Space Jam website has been a time capsule. You’d head to spacejam.com suddenly be teleported back to 1996; a time before CSS, a time when using <table>
elements to make grids and layouts on a page was cool, …
[Robin]: Someone emailed me the other day out of the blue and noticed an odd pattern: apparently whenever I write about just about anything design systems related or about front-end development, the conversation always comes back to my frustrations with …
First up this week, Tatiana Mac wrote about taking a no-motion-first approach to animations where she argues that animations can be neat and fun and great but for some folks animations are horrible and can cause them actual discomfort or …
[Robin]: hsl()
is my new favorite design tool. Okay, so it’s not entirely new — hsl()
has been around for a while — but I’ve caught myself using this new color format lately and, from now on, I’ll be …
[Robin]: I still haven’t found myself reaching for Web Components yet and I’m not sure why. I assume because most of my time is spent with either Static Site Generators or very large Single Page Applications written in React. But …
[Robin]: The first thing that caught my eye this week was this new HTML element called <popup>
. Šime Vidas wrote about this in the Weekly Platform News:
…A popup is a temporary (transient) and “light-dismissable” UI element that