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...
Revisiting Web Components (2024 edition)
I've written about web components a lot over the years but not recently. I think it's time to take a look at where we're at, and the newer technologies that have emerged under the web components...
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...
Even more performance measurements
Measuring long tasks in our code # // Test for long tasks test('should capture long tasks on the page', async ({ page }) => { // Function to capture long tasks async function...
Testing front-end code
While building the new blog, I started thinking about testing front-end code again. In this post I will revisit Playwright Test class, and look at the types of testing that we can do to ensure that...
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?...