Skip to main content
Dublin Library

The Publishing Project

Tagged “CSS”

--- desc: ---
Playing with Relative Color Syntax

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

The Anchor Positioning API

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

What Are Duotones And How They Work

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

The difference between auto-fill and auto-fit in grid layouts

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

Using 'clamp' to control CSS Values

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

Different views of masonry layout

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

Detecting Javascript Support in CSS

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

Playing with text-shadows

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

Playing with box-shadows

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

Playing With text-emphasis

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

Style Queries

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

Building a Card Component

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

Exploring Intrinsic Sizing

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

Writing Modes, Direction and Text-Orientation

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

Everything is a box

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

Shapes as Layout Drivers

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

Making HTML Headers Look Nice

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

Hanging punctuation in CSS

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

Another set of possible color palettes

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

What are Triadic and Tetradic Color Palettes and How to Use Them

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

Creating an OKLCH generator tool

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

Reading on the Web

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

A declarative web?

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

Playing with CSS Selectors

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 may not mean what you think it does

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

Scripting Support Media Query

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

Select an element which doesn't descend from another in CSS

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

Use margin-trim to trim the bottom margin on the last child

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

Revisiting the display property

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

Animating Variable Fonts (2023)

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

Coloring Text With Gradients

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

Creating Sane CSS defaults

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

An Interesting Image CSS Reset

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

For when you know you will print

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

Defining multiple syntax in CSS variables

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

Revisiting Critical CSS

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

Fixing Issues With Pre-formatted Inline Text

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

Link to Archive

See all tags.