{"version":"https://jsonfeed.org/version/1","title":"Aaron Gustafson: Content tagged CSS","description":"The latest 20 posts and links tagged CSS.","home_page_url":"https://www.aaron-gustafson.com","feed_url":"https://www.aaron-gustafson.com/feeds/css.json","author":{"name":"Aaron Gustafson","url":"https://www.aaron-gustafson.com"},"icon":"https://www.aaron-gustafson.com/i/og-logo.png","favicon":"https://www.aaron-gustafson.com/favicon.png","expired":false,"items":[{"id":"https://www.aaron-gustafson.com/notebook/passing-your-css-theme-to-canvas/","title":"✍🏻 Passing Your CSS Theme to `canvas`","summary":"While working on a recent project I noticed an issue with a canvas-based audio visualization when I toggled between light and dark modes. I couldn’t find any articles on to make canvas respond nicely to user preferences, so I thought I’d share (in brief) how I solved it.","content_html":"

While working on a recent project I noticed an issue with a canvas-based audio visualization when I toggled between light and dark modes. When I’d originally set it up I was browsing in dark mode and the light visualization stroke showed up perfectly on the dark background, but it was invisible when viewed using the light theme (which I’d neglected to test). I searched around, but didn’t find any articles on easy ways to make canvas respond nicely to user preferences, so I thought I’d share (in brief) how I solved it.

\n

# The CSS Setup

\n

The theming of this particular project uses CSS custom properties. For simplicty I’m going to set up two named colors and then use two theme-specific custom properties to apply them in the default light theme and the dark theme:

\n
:root {\n  --color-dark: #222;\n  --color-light: rgba(255, 255, 255, 0.5);\n\n  --color-background: var(--color-light);\n  --color-foreground: var(--color-dark);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-background: var(--color-dark);\n    --color-foreground: var(--color-light);\n  }\n}
\n

# Applying the Theme to Canvas

\n

To get the theme into my canvas-related code, I set up a theme object to hold the values:

\n
const theme = {};
\n

Next, I wrote a function to pull in the theme colors using window.getComputedStyle(). After defining the function, I call it immediately to populate the theme object:

\n
function importTheme() {\n  theme.foreground =\n    window\n      .getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--color-foreground\")\n      .trim() || \"black\";\n  theme.background =\n    window\n      .getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--color-background\")\n      .trim() || \"white\";\n}\nimportTheme();
\n

I set this up with just two theme colors, but you can import as many (or few) as you like. Be sure to set a sensible default or fallback for each color though, just in case your theme’s custom property names change.

\n

With this in place, I can set my canvas animation’s colors by referencing them from the theme object. For example:

\n
context.fillStyle = theme.foreground;
\n

# Keeping Things in Sync

\n

The final bit of magic comes when you add an event listener to a MediaQueryList:

\n
const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\nmediaQuery.addEventListener(\"change\", importTheme);
\n

Here I’ve used matchMedia() to get a MediaQueryList object. Typically we use the matches property of this object to establish whether the media query currently matches or not. A lesser-known option, however, is that you can attach an event listener to it that will be triggered whenever the query’s status changes. So cool! With this in place, the canvas contents will update whenever the user’s theme changes. Here’s an example of that:

\n
\n

https://www.youtube.com/watch?v=pALIuO5uHUA

\n

This video demonstrates how a canvas element rendering a dark sine wave against a light background can miraculously transform into a light sine wave against a dark background using CSS custom properties and a bit of JavaScript.

\n
\n

# Demo

\n

I put together a quick demo of this in a fork of Alvin Shaw’s Canvas Sine Wave Experiment:

\n
\n
\n
\n

Hopefully this is helpful to someone out there. Happy theming!

\n","social_text":"Need to pipe your CSS theme into a `canvas` element? Here’s how I did it.","url":"https://www.aaron-gustafson.com/notebook/passing-your-css-theme-to-canvas/","tags":["accessibility","animation","CSS","design","JavaScript"],"date_published":"2025-05-01T21:49:27Z"},{"id":"https://www.aaron-gustafson.com/publications/books/learning-web-design-sixth-edition/","title":"📗 Learning Web Design","content_html":"

Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You'll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you'll have the skills to create a simple site with multicolumn pages that adapt for mobile devices.

\n","url":"https://www.oreilly.com/library/view/learning-web-design/9781098137670/","tags":["accessibility","CSS","HTML","JavaScript","progressive enhancement","responsive web design","web design","web development","web standards"],"date_published":"2025-05-01T00:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/don-t-use-js-for-that-moving-features-to-css-and-html-by-kilian-valkhof/","title":"🔗 Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof","content_html":"

This is a fantastic run-through of HTML and CSS features that help reduce our dependence on JavaScript (and improve #accessibility). Great work Kilian!

\n","social_text":"This is a fantastic run-through of #HTML and #CSS features that help reduce our dependence on #JavaScript (and improve #accessibility).","url":"https://www.aaron-gustafson.com/notebook/links/don-t-use-js-for-that-moving-features-to-css-and-html-by-kilian-valkhof/","external_url":"https://www.youtube.com/watch?v=IP_rtWEMR0o","tags":["HTML","CSS","JavaScript","progressive enhancement"],"date_published":"2024-07-29T17:22:19Z"},{"id":"https://www.aaron-gustafson.com/notebook/on-crowdstrike-dependencies-and-building-robust-products-on-the-web/","title":"✍🏻 On CrowdStrike, dependencies, and building robust products on the web","summary":"The CrowdStrike meltdown last week should be a cautionary tale for web designers and web developers.","content_html":"

I have no opinion on CrowdStrike as a company or service. I’ve never used their products. In fact, prior to the incident last week, I had only a passing familiarity with their name — likely from headlines in the tech press I’d scrolled past at some point in time. I now have a vague understanding of what they do, but that’s only based on what I learned about the cause of the incident. In reflecting on this unfortunate incident, I can’t help but think of the lesson it holds for web designers and developers.

\n

The incident was caused when a bug in CrowdStrike’s code made it out into production. The results were catastrophic: It caused roughly 8.5 million servers to crash. Hospitals weren’t able to serve the people that needed them. Airline passengers were stranded. People couldn’t access their money in banks. Folks in distress could not get the emergency services they needed. On top of that, the financial fallout is estimated to be somewhere around US$10 billion.

\n

Bugs happen. I’d hate to be the person who was responsible for that particular bug (or the people in the quality assurance team that should have caught it), but the reality is that none of us who write code write perfect code. We all make mistakes and sometimes those mistakes make it into production. Other times, the code we write works perfectly during development and testing, but causes an unexpected issue in production. Sometimes only in very specific “edge case” circumstances that we didn’t have the foresight to consider.

\n

Which brings me to the lesson I took away from the CrowdStrike incident: minimize the impact dependencies can have on your customers’ ability to complete critical tasks. In other words, develop dependency awareness.

\n

The web is a hostile operating environment. Sometimes network connections are slow to resolve or time out completely, which may cause issues with your JavaScript, may result in broken images or videos, or could make it so your user never receives your CSS. Sometimes 3rd party scripts ship bugs that can hose your site completely. Sometimes a customer’s browser plugin can wreak havoc on your site by adjusting markup or injecting code. If any (or all) of those things were to happen, could your customers still accomplish their key tasks? Could they even understand your site at all?

\n

This is why it’s so critical to start with a fully-functional website that relies only on semantic, accessible HTML and regular ol’ links and form submissions. They aren’t sexy, but they’re solid. Then progressively enhance that experience to improve things when the CSS is downloaded. And improve some more when your JavaScript executes properly. Build an awareness for the kinds of dependencies you have in your code so you can ensure there is always a fallback.

\n

When I think about building robust websites like this, I often think of the Chrysler Imperial. The 1964-1966 model is one of the few cars that has been outright banned from entering demolition derby events. It is just too well built. It just takes the hits and keeps on driving. We should aspire to that kind of resilience in the websites we build.

\n

Bugs happen. Can your site withstand them? Or will you let the failure of a single dependency (a.k.a., site fragility) ruin your customers’ day?

\n

https://www.youtube.com/watch?v=-9GGDOUDLhc&start=7&end=17

\n","social_text":"The #CrowdStrike meltdown last week should be a cautionary tale for #WebDesigners and #WebDevleopers.","url":"https://www.aaron-gustafson.com/notebook/on-crowdstrike-dependencies-and-building-robust-products-on-the-web/","tags":["progressive enhancement","hazards","CSS","JavaScript","web design","web development"],"date_published":"2024-07-25T17:20:26Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/an-even-faster-microsoft-edge/","title":"🔗 An even faster Microsoft Edge","content_html":"

Progressive enhancement for the win! This post from the Edge team demonstrates that producing markup directly rather than relying on JavaScript to do it for you is faster — even in the browser UI!

\n
\n

In this project, we built an entirely new markup-first architecture that minimizes the size of our bundles of code, and the amount of JavaScript code that runs during the initialization path of the UI. This new internal UI architecture is more modular, and we now rely on a repository of web components that are tuned for performance on modern web engines.  We also came up with a set of web platform patterns that allow us to ship new browser features that stay within our markup-first architecture and that use optimal web platform capabilities.

\n
\n","social_text":"Progressive enhancement for the win! This post from the Edge team demonstrates that producing markup directly rather than relying on JavaScript to do it for you is faster — even in the browser UI!","url":"https://www.aaron-gustafson.com/notebook/links/an-even-faster-microsoft-edge/","external_url":"https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/","tags":["progressive enhancement","browsers","HTML","CSS"],"date_published":"2024-05-29T16:32:54Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/better-form-ux-with-the-css-property-field-sizing-/","title":"🔗 Better form UX with the CSS property `field-sizing`","content_html":"

Form fan that I am, I’m excited to have CSS that enables fields (especially textarea) to grow to accommodate the content someone’s in the process of entering into it.

\n

I distinctly remember spending a good deal of time putting together a proof-of-concept for Twitter DMs to show how it could be done via JavaScript without killing performance, but this is far more elegant.

\n","social_text":"Form fan that I am, I’m excited to have CSS that enables fields (especially `textarea`) to grow to accommodate the content someone’s entered.","url":"https://www.aaron-gustafson.com/notebook/links/better-form-ux-with-the-css-property-field-sizing-/","external_url":"https://blog.stephaniestimac.com/posts/2024/01/css-field-sizing/","tags":["forms","CSS"],"date_published":"2024-04-01T22:21:10Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/purepwa-a-radical-u-turn-in-web-development/","title":"🔗 PurePWA — A Radical U-Turn in Web Development","content_html":"

I love experiments that showcase the power of the web platform and this is no exception: a pure web standards-powered Progressive Web App (PWA) replete with straightforward web components, view transitions, and more.

\n","social_text":"I love experiments that showcase the power of the web platform and this is no exception: a pure #WebStandards-powered #ProgressiveWebApp","url":"https://www.aaron-gustafson.com/notebook/links/purepwa-a-radical-u-turn-in-web-development/","external_url":"https://medium.com/@neerventure/purepwa-a-radical-u-turn-in-web-development-a386c0dc092e","tags":["progressive web apps","HTML","web components","CSS","JavaScript"],"image":"https://miro.medium.com/v2/resize:fit:1200/1*ZEDw2ropDtOTGm_RUIMJlg.png","date_published":"2024-02-02T18:38:09Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/big-beautiful-beefy-focus-states-with-focus-visible/","title":"🔗 Big, beautiful, beefy focus states with :focus-visible","content_html":"

I always love seeing how folks approach focus indicators. This is a brief rundown of how Dave does it on his own site.

\n","social_text":"Dave’s “chonky” take on focus states, starring `:focus-visible`","url":"https://www.aaron-gustafson.com/notebook/links/big-beautiful-beefy-focus-states-with-focus-visible/","external_url":"https://daverupert.com/2024/01/focus-visible-love/","tags":["accessibility","CSS"],"date_published":"2024-02-02T18:32:14Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/css-media-query-for-scripting-support/","title":"🔗 CSS Media Query for Scripting Support","content_html":"

The new scripting media query looks like a powerful addition to the progressive enhancement toolbox.

\n","social_text":"The new `scripting` media query looks like a powerful addition to the progressive enhancement toolbox.","url":"https://www.aaron-gustafson.com/notebook/links/css-media-query-for-scripting-support/","external_url":"https://blog.stephaniestimac.com/posts/2023/12/css-media-query-scripting/","tags":["CSS","JavaScript"],"image":"https://blog.stephaniestimac.com","date_published":"2024-01-05T23:12:57Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/nuclear-anchored-sidenotes/","title":"🔗 Nuclear Anchored Sidenotes","content_html":"

I always learn a ton from Eric’s methodical approach to CSS. This one’s no different and is a wonderful introduction to anchor positioning. Love it!

\n","social_text":"I always learn a ton from Eric’s methodical approach to CSS. This one’s no different and is a wonderful introduction to anchor positioning. Love it!","url":"https://www.aaron-gustafson.com/notebook/links/nuclear-anchored-sidenotes/","external_url":"https://meyerweb.com/eric/thoughts/2023/09/12/nuclear-anchored-sidenotes/","tags":["CSS","HTML"],"image":"https://meyerweb.com/ui/i/hamonshu/fb-og-image.png","date_published":"2023-11-14T23:41:57Z"},{"id":"https://www.aaron-gustafson.com/notebook/please-size-your-inline-svgs/","title":"✍🏻 Please size your inline SVGs","summary":"If you don’t explicitly set the dimensions of your inline SVGs, they’ll render full width when your CSS isn’t applied properly.","content_html":"

While it is a bit of an edge case, every now and then I’ll hit a site—yes, even a high profile one—and the CSS will fail to load for some reason. When this happens, inevitably every inline SVG resource on the page will grow to fill the entire width of my viewport, making for a really awkward experience.

\n

# What’s the issue?

\n

Not to pick on anyone in particular, but consider this example from a recent talk I gave:

\n
\n

\"\"

\n
The U.S. Transportation Safety Administration’s TSA PreCheck® landing page, with CSS applied.
\n
\n

When CSS fails to load, however, check out what happens:

\n
\n

\"\"

\n
The U.S. Transportation Safety Administration’s TSA PreCheck® landing page, without CSS applied. Note the **huge** SVG.
\n
\n

Yeah, that’s an inline SVG. You see, without any explicit dimensions set, the SVG will naturally grow to become as large as possible. Chances are you’re constraining that growth in CSS somewhere, but when your CSS fails to apply for any reason, every inline SVG on your site will swell like Violet Beauregarde after eating Willy Wonka’s “three-course dinner” chewing gum.

\n

# How do we solve this?

\n

Thankfully, this is a pretty easy situation to avoid: just set an explicit width and height. To use an example from this site, instead of saying

\n
<svg viewBox=\"0 0 38 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"></svg>
\n

You can explicitly set the width and height in the svg element like this:

\n
<svg\n  width=\"38\"\n  height=\"48\"\n  viewBox=\"0 0 38 48\"\n  version=\"1.1\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n></svg>
\n

What you set these values to will likely vary depending on how the icon is being used. In a pinch, you could also pull the values directly from the viewbox value. And using that value, you could even make the inline values dynamic within your template, reading in the viewbox values and tweaking them to a ratio specific to the context.

\n

Setting the SVG’s dimensions inline like this doesn’t restrict their flexibility either. You can still use CSS to override these inline values and set the SVG to whatever size you wish:

\n
svg {\n  inline-size: 200px;\n  block-size: 200px;\n}
\n

I’ve thrown together a quick comparison over on CodePen so you can see the three different states:

\n
\n
\n

And now that you know, please, please, please take a few minutes to make this small, simple change to your websites. While not a catastrophic issue, taking care to control how your sites render in the worst of circumstances goes a long way to demonstrating thoughtful consideration of your users.

\n
\n

Update: For more in-depth info on this topic (and scenarios where CSS isn’t applied to your SVGs), be sure to check out this piece from Sara Soueidan.

\n","social_text":"#ProTip: If you don’t explicitly set the dimensions of your inline SVGs, they’ll render full width when your CSS isn’t applied properly.","url":"https://www.aaron-gustafson.com/notebook/please-size-your-inline-svgs/","tags":["CSS","design","HTML","SVG","web design"],"image":"https://www.aaron-gustafson.com/i/posts/2023-08-21/hero.jpg","date_published":"2023-08-21T21:11:09Z"},{"id":"https://www.aaron-gustafson.com/notebook/design-for-developers/","title":"✍🏻 Design for Developers","summary":"One of my favorite web designers, Stephanie Stimac, asked me to write the foreword for her amazing new book. With her permission, and Manning’s, I’m reprinting the foreword here.","content_html":"

One of my favorite web designers, Stephanie Stimac, asked me to write the foreword for her amazing new book, Design for Developers. With her permission, and Manning’s, I’m reprinting it here.

\n
\n

I’ve worked on the web for a long time. When I say a long time, I mean a long time. As in my first browser was on the command line old. As in my first back-end development was a CGI script old. With my nearly three decades of building dozens upon dozens of projects for the web, the one skill I’ve found most valuable is the ability to bridge the gaps between the worlds of design, user experience, and development.

\n

Each of these fields attract practitioners from different education and/or hobbyist backgrounds. This can be a point of tension, as folks in each camp tend to see their own field as having the greatest influence on a web project’s success. The reality is that web exists in the nexus of these fields, relying equally on what each of these practices bring to the table. I have found that the most valuable people in any web project are those that understand enough of each field to be able to operate in that nexus, ensuring each team is communicating effectively with the other teams and that everyone is working together toward a shared goal.

\n

Which brings me to Stephanie Stimac’s Design for Developers. This book is an invaluable resource for developers looking to level up in their understanding of what it takes to build for the web today. It provides a crash course in design and user experience in a way that will both improve your fluency with these topics and give you the necessary skills to become productive in these spaces as well. Beyond that superficial perspective, however, this book provides the foundation for leveling up your career and becoming the person who thrives in the space between design, user experience, and development.

\n

Stephanie is the perfect person to provide you with these insights as well. Not only is she an excellent communicator, she also has years of working experience as a designer, developer, user experience practitioner, and an educator. She’s even worked behind the scenes on web browsers and the web standards they implement, giving her an incredible depth of understanding when it comes to the web and the tools we rely on to build it.

\n

Whether you’re a longtime developer looking to grow a new branch on your skill tree or you’re starting out and looking to get a solid foundation in what it takes to build for the web, Design for Developers is sure to provide you with a wealth of knowledge to help you on your way.

\n
\n","social_text":"One of my favorite web designers, @seaotta, asked me to write the foreword for her amazing new book, Design for Developers. With her permission, and Manning’s, I’ve reprinted it on my site.","url":"https://www.aaron-gustafson.com/notebook/design-for-developers/","tags":["design","web design","web development","CSS","HTML"],"image":"https://www.aaron-gustafson.com/i/books/design-for-developers.jpg","date_published":"2023-07-18T16:19:37Z"},{"id":"https://www.aaron-gustafson.com/publications/books/design-for-developers/","title":"📗 Design for Developers","content_html":"

Whether you’re a longtime developer looking to grow a new branch on your skill tree or you’re starting out and looking to get a solid foundation in what it takes to build for the web, Design for Developers is sure to provide you with a wealth of knowledge to help you on your way.

\n","url":"http://mng.bz/zXqB","tags":["web design","web development","CSS"],"date_published":"2023-05-30T17:00:00Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/some-simple-ways-to-make-content-look-good/","title":"🔗 Some simple ways to make content look good","content_html":"

This is an excellent round-up of simple CSS tweaks you can make to improve the legibility of your content. I learned a few things and you will too.

\n","social_text":"This is an excellent round-up of simple CSS tweaks you can make to improve the legibility of your content. I learned a few things and you will too.","url":"https://www.aaron-gustafson.com/notebook/links/some-simple-ways-to-make-content-look-good/","external_url":"https://set.studio/some-simple-ways-to-make-content-look-good/","tags":["CSS"],"date_published":"2023-03-10T19:26:58Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/the-web-needs-a-native-visually-hidden/","title":"🔗 The Web Needs a Native .visually-hidden","content_html":"

Seven years after Sara pitched it to the CSS Working Group, we still need a declarative (and intuitive) way to visually-hide content.

\n

Ben explores multiple potential paths in this piece.

\n","social_text":"Seven years after Sara pitched it to the CSS Working Group, we still need a declarative (and intuitive) way to visually-hide content.","url":"https://www.aaron-gustafson.com/notebook/links/the-web-needs-a-native-visually-hidden/","external_url":"https://benmyers.dev/blog/native-visually-hidden/","tags":["CSS","accessibility"],"image":"https://res.cloudinary.com/bendmyers/image/upload/v1677690154/benmyers.dev/native-visually-hidden.png","date_published":"2023-03-03T19:14:15Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/css-image-/","title":"🔗 CSS image()","content_html":"

The CSS4 image() function is really cool! It enables us to inject portions (fragments) of images, change image direction (flip), provide solid color fallbacks & more.

\n

This is a great writeup from Kevin Powell.

\n","social_text":"The #CSS4 image() function is really cool! It enables us to inject portions (fragments) of images, change image direction (flip), provide solid color fallbacks & more.","url":"https://www.aaron-gustafson.com/notebook/links/css-image-/","external_url":"https://12daysofweb.dev/2022/css-image/","tags":["CSS","web design"],"image":"https://12daysofweb.dev/img/og/css-image.png","date_published":"2023-03-02T20:09:05Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/ten-modern-layouts-in-one-line-of-css/","title":"🔗 Ten modern layouts in one line of CSS","content_html":"

Una did a great job in putting together this simple, but highly useful resource. If you struggle with Flexbox & Grid, this is a great place to start.

\n","url":"https://www.aaron-gustafson.com/notebook/links/ten-modern-layouts-in-one-line-of-css/","external_url":"https://web.dev/one-line-layouts/","tags":["CSS"],"image":"https://web-dev.imgix.net/image/admin/B07IzuMeRRGRLH9UQkwd.png?auto=format&fit=max&w=1200&fm=auto","date_published":"2023-02-08T00:15:30Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/high-definition-css-color-guide/","title":"🔗 High Definition CSS Color Guide","content_html":"

Adam really outdid himself putting this resource together. It’s everything you’d want to know about high definition color systems… and then some.

\n","social_text":"Holy moly, that’s a lot about color.","url":"https://www.aaron-gustafson.com/notebook/links/high-definition-css-color-guide/","external_url":"https://developer.chrome.com/articles/high-definition-css-color-guide/","tags":["CSS","web design"],"image":"https://wd.imgix.net/image/vS06HQ1YTsbMKSFTIPl2iogUQP73/lUKgvbcTc1Lg3xNUdCpq.png?auto=format&w=1521","date_published":"2023-02-07T23:34:39Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/taming-blend-modes-difference-and-exclusion/","title":"🔗 Taming Blend Modes: `difference` and `exclusion`","summary":"Amazingly deep article on CSS blend modes. Incredible work from Ana Tudor.","content_html":"

Amazingly deep article on CSS blend modes. Incredible work from Ana Tudor.

\n","social_text":"Amazingly deep article on CSS blend modes. Incredible work from @anatudor.","url":"https://www.aaron-gustafson.com/notebook/links/taming-blend-modes-difference-and-exclusion/","external_url":"https://css-tricks.com/taming-blend-modes-difference-and-exclusion/","tags":["CSS"],"image":"https://css-tricks.com/wp-json/social-image-generator/v1/image/334463","date_published":"2022-11-29T23:53:14Z"},{"id":"https://www.aaron-gustafson.com/notebook/links/style-a-parent-element-based-on-its-number-of-children-using-css-has/","title":"🔗 Style a parent element based on its number of children using CSS `:has()`","summary":"If you were a fan of quantity queries, you’re going to love being able to style a parent element based on how many children it has.","content_html":"

If you were a fan of quantity queries, you’re going to love being able to style a parent element based on how many children it has. Awesome post from Bramus!

\n","social_text":"If you were a fan of quantity queries, you’re going to love being able to style a parent element based on how many children it has.","url":"https://www.aaron-gustafson.com/notebook/links/style-a-parent-element-based-on-its-number-of-children-using-css-has/","external_url":"https://www.bram.us/2022/11/17/style-a-parent-element-based-on-its-number-of-children-using-css-has/","tags":["CSS"],"image":"https://www.bram.us/wordpress/wp-content/uploads/2022/11/css-select-element-based-on-number-of-children.png","date_published":"2022-11-28T23:20:40Z"}]}