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 no writing posts and working on other projects. Dark...

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

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

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

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 did. The idea is described in Full stack writing (and publishing): Welcome to Hi. The Idea # The idea of this application is...

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 elements. There is a specific type of accordion that, until recently, was impossible to do without scripting, the...

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

A complementary API to Popovers is the anchor positioning API Where the popover attribute controls the popover behavior, the anchor positioning allows us to control where will the popover...

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

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 columns is...

Rather than using media queries to control the dimensions of an element, we can use the clamp to accomplish the same task with less code. According to MDN: The clamp() CSS function clamps a middle...

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

text-shadow allows for interesting effects on text. The property takes two or three values with an optional color as the fourth value offset-x and offset-y (Required) These values specify the...

In developing a card with box-shadow I realized that it's harder than I remembered so I decided to take another look. Box shadow takes two, three or four parameters. If two values are specified, they...

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 text-emphasis...

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, every...

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 specification reached full recommendation status almost 5 years ago. I've written about it before but I think it's time to revisit them again and see how they could be applied to...

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 1. CSS...

CSS Shapes have been around for a long time and allow developers to wrap text around the shape of the image. According to MDN: The CSS shapes module describes geometric shapes that can be in CSS. For...

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, you don't...

Chris Coyuer wrote about the hanging punctuation CSS property, how it works and why it may be useful. This property controls the pulling of characters, usually quotation marks, from the body of the...

This post is an extension to the previous one What are Triadic and Tetradic Color Palettes and How to Use Them. It will explore further types of palettes, also known as harmonies in color theory, and...

In my last post Creating an OKLCH Generator Tool, I wrote about about Triadic and Tetradic palettes and how to build them using vanilla JS. This post will cover what these palettes are and how to use...

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 Chroma.js...

This post will look at two areas related to reading online: How people read online How to determine optimal font sizes? Is there such a thing? If people scan the content of your page, what font size...

Jeremy Keith recently published Declarative design on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these...

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

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

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

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 CSS Chris...

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

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, we...

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 and Normalize.css are comprehensive solutions to provide a baseline for CSS development. Can I build a set of defaults that make sense for my projects on top of these resets?...

I came accross reset from Harry Roberts (from Twitter/X) via (Kevin Powell's YouTube video). I've adapted the reset by eliminating the low quality image resource. I don't need the low quality images...

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 we looked at how to define custom properties using the @property at-rule. One aspect of @property that we didn't discuss are the syntax multipliers and...

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 Critical CSS...

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, monospace hack...