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.
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: #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.
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: #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: #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: #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?
with tags: #Practical #CSS Counters #Typography #CSS
A few years ago I wanted to share one little-known CSS feature — a built-in list-item counter for ordered lists. But then there were a few browser issues preventing us from using it fully. Now, given that most of those bugs are fixed, we can try starting using them for our lists.
with tags: #Practical #Blog #Performance #JS #Fonts
I was digging into some of the performance issues during my work for a few weeks, and I thought that it can be interesting to see how those could be applied to my site. I was already quite happy with how it performed (being just a small static site) but managed to find a few areas to improve.
with tags: #CSS Grids #Practical #CSS #Design
My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.
with tags: #Practical #Blog #Meta #JS
For a new site update I have implemented a site-wide search, and in this article, I would write about the solution I have used for this, as well as would talk about what had to be done and what issues are left.
with tags: #CSS Grids #Practical #CSS
CSS Grids specification contains a lot of different things. And, for some of them, there exist multiple ways of how you can achieve them. In this article, I’ll write about one trick with grid-template-areas that could help you name your intersecting columns or rows.
with tags: #Practical #CSS Flex #Responsive #CSS
Flex display mode allows us to create a lot of interesting interactions. In this article I’ll show how to use it to implement a responsive block which could substitute one content with another, all based on which one would fit inside the container.
with tags: #Project #Practical #React #BEM
Working within a React stack and using Styled Components, I found out that I still miss a lot of aspects of BEM. This lead to me starting a new side-project which not only allows to use BEM-style elements and modifiers, but also enhances the overall developer experience.
with tags: #Practical #Accessibility #Bugs #CSS #HTML
After playing a lot with HTML & CSS, I present you with a very robust and practical solution to one of the most annoying problems: keyboard-only focus on interactive elements. All thanks to tabindex in HTML and almost to no CSS.
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.
with tags: #Practical #Design #Typography #CSS
with tags: #Practical #CSS Flex #Bugs #CSS
with tags: #Practical #Typography #CSS
with tags: #Practical #Design #Accessibility
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS
with tags: #Experiment #Practical #CSS