Future_CSS

All Articles

• 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.

• Alternating Style Queries

  April 16, 2024 with tags: #Style Queries #Future CSS #Experiment #CSS

  With the container style queries on the horizon, it is a good time to do more experiments with them. In one of my recent experiments, I found out that style queries will allow us to do what the currently specified (but not implemented by anyone) function toggle() was supposed to.

• The Shrinkwrap Problem: Possible Future Solutions

  December 7, 2023 with tags: #Anchor Positioning #Future CSS #CSS Round #Experiment #CSS

  There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps. While not intentional, anchor positioning allows us to come closer to solving it, at least for a few cases. In this article, I’ll demonstrate how we can use anchor positioning to neatly decorate wrapping text or elements in flex or grid contexts.

• 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.

• Fit-to-Width Text

  June 21, 2023 with tags: #Scroll Driven Animations #Future CSS #Experiment #Typography #Practical #CSS

  What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.

• Future CSS: Wishes Granted by Scroll-driven Animations

  May 30, 2023 with tags: #Scroll Driven Animations #Position Sticky #Future CSS #Experiment #CSS

  Stuck state for sticky headers? “Proper” solution for scrolling shadows? Highlighting the currently shown sections in a Table of Contents? All these things could become possible with the new scroll-driven animations spec. Today, I gather and explain some of my experiments with this new CSS feature.

• 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.

• Controlling the Specificity

  December 21, 2016 with tags: #CSS Specificity #Future CSS #CSS #Preprocessing

  Specificity is one of the most unique and complex aspects of CSS. And right now, the only way to control it are to add stuff to it. But what if we could have a way to reduce the specificity? I’ll look into the coming-up features of : not () and how they could help us to achieve this.

• 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.