Bold on Hover... Without the Layout Shift
When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more
Apple declined to implement 16 Web APIs in Safari due to privacy concerns
Why? Fingerprinting. Rather than these APIs being used for what they are meant for, they end up being used for gross ad tech. As in, "hey, we don't know
Pausing a GIF with details/summary
Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a
Levels of Fix
On the web, we have the opportunity to do work that fixes things for people. It's fascinating to me how different the scope of those fixes can be.
How to Italicize Text
HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.
Develop, Preview, Test
Guillermo:
On dependency
Rob Weychert:
Irregular-shaped Links with Subgrid
Michelle Barker covers a situation where you need offset rectangles part of a clickable area. The tricky part is having just the rectangles be clickable. That
Tradeoffs and Shifting Complexity
This is a masterclass from Dave:
Memorize Scroll Position Across Page Loads
Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation.
Frontity is React for WordPress
Some developers just prefer working in React. I don't blame them really, because I like React too. Maybe that's what they learned first. I've been using it
A little bit of plain Javascript can do a lot
Julia Evans:
Improving Chromium's browser compatibility in 2020
This is exactly what I love to hear from any browser vendor:
Bootstrap 5
It's always notable when the world biggest CSS framework goes up a major version (it's in alpha now).
Links on Performance II
Just had a couple of good performance links burning a hole in my pocket, so blogging them like a good little blogger.
Quick Tips for High Contrast Mode
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
The Return of the 90s Web
One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It's probably one of the best decisions I've
Line-Animated Hamburger Menu
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the "three lines" thing you're well familiar
Some Typography Links III
I just can't stop opening excellent typography-related articles, which means I need to subject you to blog posts that round them up so I can clean up my open
The Mad Magazine Fold-In Effect in CSS
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page
Rough Notation
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are
Just another +1 for subgrid
I'd say 85% of my grid usage is in one of these two categories...
Web Engine Diversity and Ecosystem Health
As front-end developers, our job is working with browsers. Knowing how many we have and the health of them is always of great interest. As far as numbers go,
What is Developer Experience (DX)?
Developer Experience¹ is a term² with a self-declaring meaning — the experience of developers — but it eludes definition in the sense that people invoke it at
My Flywheel Landing Page
Flywheel is my WordPress hosting partner here. I use Local every day for my WordPress local development environment and use their hosting for all my WordPress
Learn Z-Index Using a Visualization Tool
There are some neat interactive demos in here from Thiru Manikandan. There are a couple of very tricky things with z-index that never fail to confuse. In
On Adding IDs to Headings
Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often
CUBE CSS
A CSS methodology from Andy Bell:
CSS :is() and :where() are coming to browsers
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
The Trickery it Takes to Create eBook-Like Text Columns
There's some interesting CSS trickery in Jason Pamental's latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book
Jetpack Scan
Fresh from the Jetpack team at Automattic, today, comes Jetpack Scan. Jetpack Scan scans all the files on your site looking for anything suspicious or
Overlapping Header with CSS Grid
Snook shows off a classic design with an oversized header up top, and a content area that is "pulled up" into that header area. My mind goes to the same place:
Increment Issue 13: Frontend
Increment is a beautiful quarterly magazine (print and web) published by Stripe "about how teams build and operate software systems at scale". While there is
The Many Bad (and Good!) Patterns for Close Buttons
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this:
HTML Responsive Images Guide
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.
The Fastest Google Fonts
When you use font-display: swap;, which Google Fonts does when you use the default &display=swap part of the URL , you're already saying, "I'm cool with
Radio Buttons Are Like Selects; Checkboxes Are Like Multiple Selects
I was reading Anna Kaley's "Listboxes vs. Dropdown Lists" post the other day. It's a fairly straightforward comparison between different UI implementations of
Using BugHerd to Track Visual Feedback on Websites
BugHerd is about collecting visual feedback for websites.
WordPress Block Transforms
This has been the year of Gutenberg for us here at CSS-Tricks. In fact, that's a goal we set at the end of last year. We're much further along that I thought
User agents
Jeremy beating the classic drum:
Unprefixed `appearance `
It's interesting how third-parties are sometimes super involved in pushing browser things forward. One big story there was how Bloomberg hired Igalia to
First Steps into a Possible CSS Masonry Layout
It's not at the level of demand as, say, container queries, but being able to make "masonry" layouts in CSS has been a big ask for CSS developers for a long
CSS fix for 100vh in mobile WebKit
A surprisingly common response when asking people about things they'd fix about anything in CSS, is to improve the handling of viewport units.
Equal Width Columns in CSS Grid are Kinda Weird
Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you'd have equal-width columns, but that's a rare day. What
React Single File Components Are Here
Shawn Wang is talking about RedwoodJS here:
Why does writing matter in remote work?
Talk to anyone who has an active blog and I bet they'll tell you it's been valuable to them. Maybe it's opened doors. Maybe it's got them a job. Maybe it's
Accepting Payments (including Recurring Payments) on WordPress.com
I'm a fan of building websites with the least amount of technical debt and things you have to be responsible for as possible for what you wanna do. Sometimes
How I Put the Scroll Percentage in the Browser Title Bar
Some nice trickery from Knut Melvær.
min(), max(), and clamp() are CSS magic!
Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with
How to Create Custom WordPress Editor Blocks in 2020
Peter Tasker on creating blocks right now:
Static Hoisting
The other day in "Static or not?" I said:
`lh` and `rlh` units
There's some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is "equal to the computed value of line-height" and rlh is
List Style Recipes
Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a
No-Comma Color Functions in CSS
There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more
Playing With (Fake) Container Queries With watched-box & resizeasaurus
Heydon's <watched-box> is a damn fantastic tool. It's a custom element that essentially does container queries by way of class names that get added to
CSS-Tricks Chronicle XXXVIII
Hey hey, these "chronicle" posts are little roundups of news that I haven't gotten a chance to link up yet. They are often things that I've done off-site,
How to Redirect a Search Form to a Site-Scoped Google Search
This is just a tiny little trick that might be helpful on a site where you don't have the time or desire to build out a really good on-site search solution.
Static or Not?
A quick opinion piece by Kev Quirk: Why I Don’t Use A Static Site Generator. Kev uses WordPress:
The Cost of Javascript Frameworks
I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it
@property
The @property is totally new to me, but I see it's headed to Chrome, so I suppose it's good to know about!