Defining CSS4 is a tricky endeavor. Unlike the annual ECMAScript specifications or the monolithic releases of CSS2 and HTML5, modern CSS evolves continuously. It consists of many different modules,...

Writing modes have a significant impact on how text is displayed on a webpage. By manipulating writing modes, designers can create unique and engaging layouts that enhance the user experience. Below...

grid-template-areas is a CSS property that provides a visual, intuitive way to define grid layouts. It represents a paradigm shift in how developers approach layout design: instead of counting column...

While modern CSS has adopted several powerful features that were once exclusive to preprocessors like SASS, a number of key SASS functionalities are still not natively available. For some of these,...

CSS has come a long way since its inception, evolving from a simple styling language to a powerful tool for creating complex layouts and animations. I love playing with CSS and exploring its...

In modern web design, we treat fonts as a cornerstone of user experience. They convey brand identity, improve readability, and define a site's aesthetic. However, the methods we use to load these...

The `interpolate-size` property has been added to CSS to enable smooth animations when transitioning an element's size to or from intrinsic sizing keywords like `auto`. This post will cover what...

Until now generating random values to use in CSS required Javascript to generate the random values and apply them to CSS rules. The CSS Working Group has created two different ways to generate and...

The CSS `@function` at-rule allows you to create reusable, static functions, making your code more DRY (Don't Repeat Yourself), modular, and maintainable. This post covers the `@function` syntax as...

CSS has had multi column layout capabilities for years now but I don't think many people (including me) have figured how to use them effectively. In this post, I'll explore the various ways to...

In a previous post ([A History of CSS Resets](https://publishing-project.rivendellweb.net/a-history-of-css-resets/)), we discussed the evolution of CSS resets and their importance in creating a...

Ensuring a consistent look and feel across different browsers is a big challenge for web developers. One of the earliest and most persistent tools developed to tackle this issue is the CSS...

When researching CSS features that mimic SASS features I came accross the `if()` function. This function allows you to apply conditional logic directly in your CSS, similar to how you might use it in...

In 2023, Chris Coyier wrote [SASS features in CSS](https://chriscoyier.net/2023/07/11/sass-features-in-css/) where he explores the SASS features that have been adopted in CSS. It's been a couple...

I recently read two post that got me thinking about the value of learning a web development framework. These posts also align with my own experiences and thoughts on the subject. This post will...

Since the first CSS specification, web developers were limited to a handful of ways to define colors in the sRGB color space. With the finalization of the [CSS Color Module Level...

CSS Grid Layout changed how developers build two-dimensional layouts, moving us beyond float and table layouts. Most of the time we see grid used for positioning elements in specific areas of the...

Line height units are not new but not widely used yet. They provide to measure things based on the line height of an element for the current font at the current line height. There are two line...

I read Michelle Barker's [Creating CSS Theme Variables from a JS file](https://css-irl.info/creating-css-variables-from-a-js-file/) and thought it was a great idea. I wanted to try out a simpler...

I answered a question in Quora about the default styles for a `p` element. The answer is more complicated than it would first appear. There is no single default for HTML elements that are common to...

Mozilla [posted a note](https://developer.mozilla.org/en-US/blog/h1-element-styles/) about upocoming changes to how the `h1` elements are displayed in browsers. The changes are intended to improve...

The [attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) function allows you to use the value of an HTML attribute in your css. It has been around for a while, but it was limited to using...

CSS has progressed enormously in the last few years. This is both good and bad. The good : CSS has become very powerful and it has gained many new features that make design and development work...

The different values for `text-wrap` provide reading experience enhancements for headings and long-form text. This post will look at two values for the text-wrap property: `balance` and...

When working with [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries) is that we can't reuse media queries. A naive approach is to define the value as a CSS variable...

This post will discuss leading, how to control it in CSS and the new text-box-trim property. Leading is the space between blocks of text; the term comes from the strips of lead that were used to...

This post will cover a technique to style adjacent siblings using CSS selectors and the `:has()` pseudo-class as described in [Selecting Previous...

When it comes down to printing web pages we haven't had much control over the output. The browser would just render the page as it is and print it. But with the introduction of CSS Paged Media, we...

Style tokens, also known as design tokens, are named, reusable values that represent design elements like colors, fonts, spacing, and other visual attributes within a design system, allowing for...

[It All Led to ‘Dune’](https://www.indiewire.com/p/denis-villeneuve-career-lookback-interview/) is a very interesting and challenging page to dissect. It has many different elements and APIs that can...

It appears that the CSS Working Group has decided to add masonry layouts as part of the [CSS Grid Level 3](https://drafts.csswg.org/css-grid-3/) specification. IMO this sucks but it appears to be a...

In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired...

One of the biggest issues I have when using CSS background images, is that we can't add alt text to images used as background image sets. a new feature has become [newly available in...

Most of the time I create a pen in [Codepen](https://codepen.io) to validate the code I'm working with. I've found myself constantly repeating the same CSS and the same HTML multiple times. It gets...

The [attr](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) allows developers to pull data from HTML attributes into CSS. The idea is that, like data attributes and custom properties, you can...

Semantic HTML has an extensibility mechanism that allows adding extra data on elements using the `data-*` syntax. This replaces older hacks such as non-standard attributes, or extra properties on...

 In 2019, Chris Coyier wrote [The Great Divide](https://css-tricks.com/the-great-divide/) where he...

Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to...

We can control the color schemes for light and dark modes through CSS using the `prefers-color-scheme` media query. These media queries will match the system's color scheme and will allow us to...

New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: * `transition-behavior` * `calc-size()` *...

There are four properties that I've always been curious and confused about: * initial * inherit * unset * revert These values are specified in the [Values and Units Module Level...

Many CSS properties accept numbers as values. Whether these values are whole numbers, decimals, fractions or percentages. Whatever they are, the unit following a number [determines its computed...

I've been busy writing content but there are things that I'm either long overdue in implementing or want to explore. This should keep me busy when not writing posts and working on other projects. *...

CSS has had the ability to use keyframe animations for a long time. This post will concentrate in the animation timing functions available and how they affect the animations they are attached to. ##...

There are many ways we can improve our CSS, both in terms of readability and ease of use. This post will discuss some of these new ways of doing things and start thinking about ways to incorporate...

With scroll-based animations, you can create animations that will trigger based on page scrolling rather than based on time. The Scroll-driven Animations Specification defines two new types of...

## Animating variable fonts ## Don't be Afraid Of Large Font Sizes ## Creating Grid-Based Components ## Font Stacks: To variable font or not to variable font ### Leveraging Variable Font...

CSS Resets have been around for a while and they have evolved along with CSS and browser support. The notion of a CSS reset first came around with `undoHTML.css` by Tantek Celik in 2004 and it does...

Custom properties are awesome. They provide modularity and a central place to store variables that we'll use throughout a stylesheet. But they are not perfect. This post will discuss two ways to...

One of my current projects is to create a journaling system similar to [Hi](https://hitotoki.org/) did. The idea is described in [Full stack writing (and publishing): Welcome to...

When initially introduced, view transitions would only work with single-page applications. This is awesome but it doesn't work with regular web pages like what I normally work with. During I/O 2024,...

Accordions present an interesting way to display content using one or more [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) elements. There is a specific type of...

Now that relative colors are supported across browsers it's time to revisit the syntax and see what we can do with it and how it changes what we can natively do with colors. ## Basic Syntax The...

A complementary API to Popovers is the [anchor positioning API](https://developer.chrome.com/blog/anchor-positioning-api) Where the popover attribute controls the popover behavior, the anchor...

Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create...

Even after all these years, I've struggled to understand the difference between `auto-fill` and `auto-fit` values when used in creating grid layouts. The easiest way to create a grid of equal...

Rather than using media queries to control the dimensions of an element, we can use the [clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) to accomplish the same task with less...

There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to...

There are times when we may want to style content differently based on whether the browser has enabled Javascript or not. **This is different than using Javascript to detect whether a script has run...

[text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) allows for interesting effects on text. The property takes two or three values with an optional color as the fourth...

In developing a card with [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) I realized that it's harder than I remembered so I decided to take another look. Box shadow takes...

Sometimes it's nice to put some sort of emphasis on our text to highlight elements or because we just want it to look different. One way to create these highlights is to use the...

In the previous article, we discussed `inline-size` container queries. There is another type of container query: style queries. There are some significant differences Unlike `inline-size` queries,...

Container queries introduce an additional and complementary way to create content in addition to what media queries allow. This post will look at container queries and how to use them to build a...

There are two ways to measure content in CSS. Explicit measurements are what we're most familiar with. These are the pixels, rems and ems. Intrinsic sizes don't provide exact dimensions but size...

The [Writing Modes](https://drafts.csswg.org/css-writing-modes-3/) specification reached full recommendation status almost 5 years ago. I've written about it before but I think it's time to revisit...

One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure...

[CSS Shapes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_shapes) have been around for a long time and allow developers to wrap text around the shape of the image. According to...

Headings can show orphan issues that can cause readability issues. In this context, an orphan ***is a single word (or syllable) that sits at the bottom of a paragraph of text***. As a developer,...

Chris Coyuer wrote about the [hanging punctuation](https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/) CSS property, how it works and why it may be useful. This property...

This post is an extension to the previous one [What are Triadic and Tetradic Color Palettes and How to Use...

In my last post [Creating an OKLCH Generator Tool](https://publishing-project.rivendellweb.net/creating-an-oklch-generator-tool/), I wrote about about Triadic and Tetradic palettes and how to build...

This code started as an exercise in ChatGPT prompt generation and a way to explore what we can do with OKLCH colors. It uses vanilla Javascript and deliberately avoids using libraries like...

Jeremy Keith recently published [Declarative design](https://adactio.com/journal/18982) on his blog. The premise of the post is that there are two divergent ways to think about web design and...

CSS has evolved significantly over the last few years. Some of these changes deal with a set of selectors known as the *functional pseudo-classes*. The `:not()` pseudo-class has been around for a...

Evergreen browsers are those that update themselves automatically, or very close to it, without user intervention. This is particularly useful when it comes to new features. We don't have to wait...

I know that it's unlikely people will disable Javascript on their browsers, but it is not impossible. We can notify the user of the lack of Javascript using the `scripting` media query. This...

There may be times when we may want to style elements that are not direct descendants of the elements that we want to style. In [Select an Element Which Doesn't Descend From Another in...

When writing CSS one of the most annoying and repeating tasks is having to customize the styles for the last element in a list or other repetitive components. I've lost track of how many times I've...

The `display` property has been around for a long time but its definition has evolved over the years. > Formally, the display property sets an element's inner and outer display types. The outer type...

One thing I particularly like about variable fonts is that it allows some interesting animation tricks. For example, since variable fonts have information about all possible variations of the font,...

In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired...

Both [Eric Meyer's Reset](https://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) and [Normalize.css](https://necolas.github.io/normalize.css/) are comprehensive solutions to provide a...

I came accross reset from Harry Roberts (from [Twitter/X](https://twitter.com/csswizardry/status/1717841334462005661)) via (Kevin Powell's [YouTube...

There are times when we know that users will print a page of web content. Maybe a set of directions for a recipe, a map with directions or a page of information that we want to preserve. While it's...

In [Revisiting Custom Properties](https://publishing-project.rivendellweb.net/revisiting-css-custom-properties/) we looked at how to define custom properties using the `@property` at-rule. One...

Crtical CSS is simple in theory but not so much in execution. In this post we'll look at what critical CSS is, how does it work and whether it's still necessary for all use cases. ## What is...

While researching about using resets as the basis for custom project defaults, I came accross this solution to a problem I was having. > `pre, code, kbd, samp` The `font-family: monospace,...