CSSWG Minutes Telecon (2024-08-14)
I was just going over the latest CSSWG minutes (you can subscribe to them at W3C.org) and came across a few interesting nuggets I wanted to jot down for
Dialogues Blog
“This isn’t a website. Or even a blog. It’s a conversation.”
HTML Attribute to Allow/Disallow Handwriting Input
A new explainer for a new HTML attribute to handle handwritten inputs. Like this:
Mental Health in Tech Podcast Interview
Mental health is always tough to talk about, especially in an industry that, to me, often rewards ego over vulnerability. I still find it tough even after
Let’s make a simpler, more accessible web
Christian Heilmann gave this talk at Typo3 Developer Days. I'm linking it up because it strikes an already stricken nerve in me. The increasing complexity of
CSS Olympic Rings
It was a few years ago during the 2020 Olympics in Tokyo 2020 that I made a demo of animated 3D Olympic rings. I like it, it looks great, and I love the
CSS Functions and Mixins Module Notes
Most days, I'm writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach
CSS One-Liners to Improve (Almost) Every Project
These sorts of roundups always get me. My wife will flip through Zillow photos of the insides of homes for hours because she likes seeing how different people
"If" CSS Gets Inline Conditionals
A few sirens went off a couple of weeks ago when the CSS Working Group (CSSWG) resolved to add an if() conditional to the CSS Values Module Level 5
Transitioning to Auto Height
I know this is something Chris has wanted forever, so it's no surprise he's already got a fantastic write-up just a day after the news broke. In fact, I first
Poppin' In
Oh, hey there! It’s been a hot minute, hasn’t it? Thought I’d pop in and say hello while we get to know the Popover API a bit.
CSS Length Units
A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound.
The Power of :has() in CSS
Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but
Passkeys: What the Heck and Why?
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari
An Approach to Lazy Loading Custom Elements
We're fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance.
Different Ways to Get CSS Gradient Shadows
It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does
AR, VR, and a Model for 3D in HTML
Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute:
Animating CSS Grid (How To + Examples)
I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers!
Getting Started With SvelteKit
SvelteKit is the latest of what I'd call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing,
More Real-World Uses for :has()
The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS
How to Transition to Manifest V3 for Chrome Extensions
While I am not a regular Chrome extension programmer, I have certainly coded enough extensions and have a wide enough web development portfolio to know my way
Solved With :has(): Vertical Spacing in Long-Form Text
If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely
:has is an unforgiving selector
A little thing happened on the way to publishing the CSS :has() selector to the ol' Almanac. I had originally described :has() as a "forgiving" selector, the
Faking Min Width on a Table Column
The good ol’ <table> tag is the most semantic HTML for showing tabular data. But I find it very hard to control how the table is presented, particularly
Styling Buttons in WordPress Block Themes
A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding CSS box shadows on WordPress blocks and
A Few Times Container Size Queries Would Have Helped Me Out
CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it’s for little experiments or whatnot. They’ve
Setting up a screen reader testing environment on your computer
Sara Soueidan with everything you need, from what screen reading options are out there all the way to setting up virtual machines for them, installing them,
Animated Background Stripes That Transition on Hover
Learn to make background stripes that transition on hover, using a creative mix of CSS gradients, blend modes, and background sizing.
Adding Box Shadows to WordPress Blocks and Elements
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Does WWW still belong in URLs?
For years, a small pedantry war has been raging in our address bars. In one corner are brands like Google, Instagram, and Facebook. This group has chosen to
CSS Infinite and Circular Rotating Image Slider
Image sliders (also called carousels) are everywhere. There are a lot of CSS tricks to create the common slider where the images slide from left to right (or
Digging Deeper Into Container Style Queries
I wrote up some early thoughts on container style queries a little while back. It's still early days. They're already defined in the CSS Containment Module
Using The New Constrained Layout In WordPress Block Themes
One of the main goals of the WordPress Site Editor (and, yes, that is now the “official” name) is to move basic block styling from CSS to structured JSON.
Taming the Cascade With BEM and Modern CSS Selectors
BEM. Like seemingly all techniques in the world of front-end development, writing CSS in a BEM format can be polarizing. But it is – at least in my Twitter
Creating a Settings UI for a Custom WordPress Block
So far, we’ve covered how to work with data from an external API in a custom WordPress block. We walked through the process of fetching that data for use on
Classy and Cool Custom CSS Scrollbars: A Showcase
In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
CSS Grid and Custom Shapes, Part 3
After Part 1 and Part 2, I am back with a third article to explore more fancy shapes. Like the previous articles, we are going to combine CSS Grid with
What CSS Do You Absolutely Have to Know in 2022?
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that've shipped in browsers the past couple of years —
Some Links About CSS Gradients
Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it's like the saved articles in my bookmarks folder are having a
Fancy Image Decorations: Outlines and Complex Animations
We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img>
Holographic Trading Card Effect
Simon Goellner (@simeydotme)'s collection of Holographic Trading Cards have captured our attention.
Creating Animated, Clickable Cards With the :has() Relational Pseudo Class
The CSS :has() pseudo-class can help us solve solve situations that used to take an extra wrapper to achieve, including the clickable card pattern many of us love to use from time to time.
Is There Too Much CSS Now?
As front-end developers, we've wished for a lot of things over the years — ways to center things in CSS, encapsulate styles, set an element’s aspect ratio,
Fancy Image Decorations: Masks and Advanced Hover Effects
Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time
Responsive Animations for Every Screen Size and Device
Before I career jumped into development, I did a bunch of motion graphics work in After Effects. But even with that background, I still found animating on the
Instant Articles, Proprietary Syndication, and a Web Built on User Fidelity Preferences
I love it when there's a sense of synergy in the blogosphere. First, I caught Nick Heer's coverage of Meta ending support for Instant Articles, its
How to Make a Folder “Slit” Effect With CSS
When you put something — say a regular sheet of paper — in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of
Pure CSS Bezier Curve Motion Paths
Besides being elegant, Bezier curves have nice mathematical properties due to their definition and construction. No wonder they are widely used in so many areas! Now, how about using Bezier curves as motion paths with CSS?
Fancy Image Decorations: Single Element Magic
As the title says, we are going to decorate images! There’s a bunch of other articles out there that talk about this, but what we’re covering here is quite a
Some Things I Took Away From An Event Apart 2022 in Denver
An Event Apart 2022 Denver wrapped up yesterday. And while I was unable to make it to all three days this time, I did catch yesterday's action — and it was
Adding Fluid Typography Support to WordPress Block Themes
Fluid typography is a fancy way of “describing font properties, such as size or line height, that scale fluidly according to the size of the viewport”. It’s
How to Safely Share Your Email Address on a Website
Spammers are a huge deal nowadays. If you want to share your contact information without getting overwhelmed by spam email you need a solution. I run into
State of CSS 2022 Survey Now Open
The State of CSS survey recently opened up. Last year, the survey confirmed everyone's assumptions that TailwindCSS is super popular and CSS variables are
Introducing Shoelace, a Framework-Independent Component-Based UX Library
This is a post about Shoelace, a component library by Cory LaViska, but with a twist. It defines all your standard UX components: tabs, modals, accordions,
GIFs Without the .gif: The Most Performant Image and Video Options Right Now
So you want an auto-playing looping video without sound? In popular vernacular this is the very meaning of the word GIF. The word has stuck around but the
How to Create Wavy Shapes & Patterns in CSS
The wave is probably one of the most difficult shapes to make in CSS. We always try to approximate it with properties like border-radius and lots of magic
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
If we browse the WordPress theme directory, a majority of themes showcase cover images. It is a feature in popular demand. The cover page trend is true even
How I Made an Icon System Out of CSS Custom Properties
SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can
More Details on `details`
A lot of chatter around the ol' <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element's display
WebKit Features in Safari 16.0
Whew boy, Safari 16 is officially out in the wild and it packs in a bunch of features, some new and exciting (Subgrid! Container Queries! Font Palettes!) and