- MacOS-like dock effect with a “previous-sibling combinator” A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.
- Self-modifying variables: the inherit() workaround external How style queries can be used to calculate the depth of CSS elements, once released to the public
- Using recursive CSS to change styles based on depth Can CSS be used recursively to change styles based on the depth of an element in a container? Well it can, but it is a little tricky.
- Combining :has and :only-child to change tab containers For a styling implementation detail, I set the challenge to come up with a CSS-only solution, instead of implementing the logic in a front-end framework.
- Combining :placeholder-shown and :has Yesterday my wife told me about this :placeholder-shown selector. I had visual question marks above my head because I never heard of it before. But it sparked curiosity about what it could give me.
- Going back to CSS-only after years of SCSS When migrating my website to Eleventy, it ditched SCSS and went old school. I went removed a complexity layer to see if CSS-only is a viable option these days.
- Different approaches to fluid typography and layouts Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this.
- Hiding side content in responsive design A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas.
- Use the child-element count in CSS A little CSS trick to get a count of child elements on your parent selector.
- A nth-child CSS trick A little CSS trick that allows you to use nth-child values in the CSS calc() function.
- Creating a stacked bar chart using only CSS How to make an interactive stacked bar chart using only CSS and HTML
- Dark mode using progressive enhancement Is it possible to create a light-dark switcher without JavaScript, that takes into account system preferences? Let’s find out.
- An ode to the CSS owl selector One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering
- Scalable CSS architecture In the last two years, I found that my CSS architecture was becoming too complex. But, utility-first frameworks were not doing it for me either. I needed a mix, I needed utility-enabled. Then came CUBE CSS and it all clicked.
- Horizontal centering in CSS Horizontal centering is an ancient problem in CSS. With CSS Grid we are able enhance this layout pattern. But, this gives us other issues. Let's find a better solution.
- Binding CSS and JavaScript with HTML data-attributes HTML data-attributes allow you to bind CSS and JavaScript more closely to each other. By utilizing this type of attribute, you can reduce the amount of JavaScript required for styling, and move this responsibility back to CSS.
- Modern CSS grid solutions to common layout problems Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems.
- Fluid interfaces using CSS Fluid interfaces allow you scale elements of your website based on on the available space, without using media-queries