CSS_Variables

All Articles

• Passing Data into SVG: Linked Parameters Workaround

  March 24, 2025 with tags: #CSS Variables #SVG #Experiment #CSS

  Twelve years ago, I started a draft for an article. I never published it: there were a few cross-browser issues, and the idea was raw and unpolished. I have many drafts like this in my archives. Sometimes, something new interacts with one of these older ideas and leads to something interesting. This article is about one such case: a hacky technique that allows us to pass some data from CSS to SVG and use it to adjust colors or almost anything else.

• Pure CSS Mixin for Displaying Values of Custom Properties

  January 27, 2025 with tags: #CSS Variables #CSS Counters #CSS Layers #Experiment #Practical #CSS

  Do you write CSS? Do you use custom properties with calculations? Do you want to preview their values while you’re debugging them? What if you could do so by setting just one additional custom property? Without any JS? In this article, I present a native CSS mixin that will output various values as pseudo-elements.

• Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins

  December 24, 2024 with tags: #CSS Variables #CSS Logic #CSS Layers #Experiment #Practical #CSS

  In my quest to push forward what is possible with custom properties in CSS, I discovered another application of cyclic dependencies. Combined with a prior technique based on custom cascade layers, we are now even closer to something that resembles native CSS mixins.

• Self-Modifying Variables: the inherit() Workaround

  April 18, 2024 with tags: #CSS Variables #Style Queries #CSS Logic #Future CSS #Experiment #CSS

  Style queries will unlock many doors. An ability to alternate a value of any variable that I presented in my previous article might seem to be trivial by itself, but what if there is a hidden depth in how we can utilize it? One interesting case is the ability to emulate inherit() — a way to access the previous state of a custom property.

• Layered Toggles: Optional CSS Mixins

  April 9, 2024 with tags: #CSS Layers #CSS Variables #CSS Logic #Style Queries #Experiment #Practical #CSS

  In this article, I am sharing the next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them.

• Scroll-Driven State Transfer

  October 16, 2023 with tags: #Scroll Driven Animations #Future CSS #CSS Variables #Experiment #Practical #CSS

  In my fourth article about scroll-driven animations, I explore how we can transfer the state of one element to a completely different place on a page by connecting them with a unique identifier in CSS via a timeline-scope.

• Position-Driven Styles

  June 28, 2023 with tags: #Scroll Driven Animations #Future CSS #CSS Variables #Experiment #Practical #CSS

  After solving the fit-to-width text, stuck state for sticky elements, and scroll shadows, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? A lot. Styling flex and grid rows and columns, staggered animations, wrap detection, and more — all in my new article.

• Cyclic Dependency Space Toggles

  June 14, 2023 with tags: #CSS Variables #CSS Logic #Style Queries #Experiment #Practical #CSS

  Over the past few years, I wanted to be able to select a value from a list in CSS by toggling a single custom property. We have the “space toggle” for booleans, and hopefully, one day, we’ll get style queries, but what about today? In this article, I present you with the technique I recently discovered.

• Future CSS: Anchor Positioning

  March 15, 2023 with tags: #Anchor Positioning #Future CSS #Experiment #CSS Variables #CSS

  Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, and after playing with it for a bit, I couldn’t stop myself from sharing what I found. In this article, I will show you some of my experiments.

• Obscure CSS: Restoring Visibility

  December 22, 2022 with tags: #Practical #CSS Variables #CSS

  One of the things I love about CSS is how some of the properties hide a lot of depth inside. For that reason, visibility was always one of my favorites. In this article, I will talk about one of its interesting aspects and will propose an idea: what if we would never use visibility: visible?

• Variable Order

  February 15, 2018 with tags: #Experiment #CSS Variables #CSS #HTML

  Is it possible to sort some data using only HTML and CSS? The answer is “Yes”, and in this article you would see one experimental way to achieve this with CSS variables and an order property. Even if it is not practical and bad for accessibility, it is still fun.

• Conditions for CSS Variables

  October 21, 2016 with tags: #Practical #CSS Logic #CSS Variables #Future CSS #Preprocessing #Bugs #CSS

  CSS variables are very powerful, and they allow to do a lot of interesting things. But there are no native conditionals that we could use in CSS with them. In this article I’ll talk about one of the ways we can fake such conditions with calculations.