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.
with tags: #TreeCountingFunctions #RandomValues #Future CSS #Experiment #CSS
Many exciting things were added to CSS specs over the years, but some have yet to be implemented by browser engines. In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with what we have in CSS today, and provide several interactive demos of their use cases.
with tags: #Experiment #Typography #Practical #Future CSS #CSS
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
inherit() Workaroundwith 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.
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.
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.
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.
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.
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.
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.
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.
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.
with tags: #Practical #Experiment #React #TypeScript
After 16+ years of experimenting with CSS & HTML, I am a bit tired. Time flies, and new technologies emerge. What would you say if, from now on, I will start doing my wild experiments with, let’s say, React and Typescript instead? In my new article, I’ll show you how easy it is to have conditional hooks in React — and more!
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.
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.
with tags: #Experiment #CSS Logic #CSS Counters #CSS
HTML&CSS-only gomoku game? Binary logic in CSS via counters? So many combinators, Edge stops to understand what is even going on? All of this and a bunch of other weird CSS stuff in the experiment that I started back in 2013.
with tags: #Experiment #HTML #CSS
Sometimes there are very unusual mechanics hidden deep in the interactions of HTML and CSS. In this article I show one of those — the nuances of how HTML labels interact with inputs and CSS applied to them.
with tags: #Experiment #HTML
with tags: #Experiment #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #CSS
with tags: #Experiment #CSS
with tags: #Experiment #CSS