Container Queries in CSS
CSS container queries allow elements to respond to their parent's size rather than the viewport. I explain how they work and how they improve responsive design.
Articles
CSS
Almost as old as front‑end development itself, CSS is a stylesheet language that describes the presentation of an HTML or XML document. We write CSS to describe how elements should be rendered and animated on‑screen, when printed, in speech, or in other media. In web development, writing CSS is an underappreciated skill that not many fully master.
Below you will find a subset of articles from my blog specifically about CSS. This is an area that I have worked with for many years, and have managed to write about quite a few times. There are seventy‑seven collected together for you below.
Container Queries in CSS. 
CSS aspect‑ratio for Responsive Layouts. CSS
aspect‑ratiofor Responsive LayoutsThe CSS `aspect‑ratio` property makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
Control CSS Container Layouts with place‑content. Control CSS Container Layouts with
place‑contentUse CSS place‑content to align grid and flex content, comparing align‑content, justify‑content, place‑items, syntax, examples, and layout limits.
Simplify Your Layout CSS with place‑items. Simplify Your Layout CSS with
place‑itemsCSS `place‑items` is a shorthand property that aligns items inside grid and flex containers. Here, we discuss its syntax, use cases, and practical examples.
Understanding the CSS :where() Function. Understanding the CSS
:where()FunctionThe CSS `where()` function groups selectors without specificity, simplifying overrides. Here, I explain its use, benefits, and why it can reduce code clarity.
Dynamic Sizing with CSS clamp(). Dynamic Sizing with CSS
clamp()Use CSS clamp() for fluid typography, spacing, and layouts with clear minimums and maximums, plus media‑query trade‑offs and responsive examples.
Understanding Transient Props in styled‑components. Understanding Transient Props in
styled‑componentsUse transient props in styled‑components to keep styling‑only props out of the DOM, clean React output, and support safer component migration work.
Dynamic Sizing with CSS max(). Dynamic Sizing with CSS
max()Use CSS max() for responsive sizing, spacing, and layout decisions where the browser should choose the larger value within a fluid design without JavaScript.
Dynamic Sizing with CSS min(). Dynamic Sizing with CSS
min()In CSS, `min()` function allows us to set the smallest value from a set as the value of a CSS property. This can be hugely useful in responsive development.
Dynamic Calculations in CSS Using calc(). Dynamic Calculations in CSS Using
calc()A discussion on how to use CSS calc() for dynamic calculations directly within your styles. Learn to mix units, perform calculations, and improve responsivity.
Creating Custom Viewport Units Instead of Using vh and vw. Creating Custom Viewport Units Instead of Using
vhandvwCreate custom viewport units with CSS variables and JavaScript to avoid mobile 100vh bugs caused by browser chrome, keyboards, and visible height changes.
Enhancing Web Typography with text‑wrap: balance. Enhancing Web Typography with
text‑wrap: balanceExploring the synergy of `text‑wrap: pretty` and `text‑wrap: balance` in web typography, enhancing text aesthetics and readability in different contexts.
The Power of text‑wrap: pretty. The Power of
text‑wrap: prettyAn exploration of the power of `text‑wrap: pretty` in CSS, a simple but very effective way to enhance web typography by preventing orphans in blocks of text.
Trigonometric Functions in CSS. Trigonometric Functions in CSS
CSS trigonometric functions open up more expressive layout and animation patterns. This guide covers sin(), cos(), tan(), and practical examples.
Commenting in Front‑End Languages. Commenting in Front‑End Languages
There are essentially two different types of commenting in development languages: single‑line, and multi‑line. Here, we discuss these, and how to use them.
The will‑change Property in CSS. The
will‑changeProperty in CSSThe 'will‑change' property in CSS is a signpost that the element is expected to change, allowing This allows the browser to optimise and improve responsiveness.
Improve Page Performance with content‑visibility. Improve Page Performance with
content‑visibilityUsing the CSS content‑visibility property we can control how an element interacts with the browser render, controlling when or how an element content renders.
Resolving mini‑css‑extract‑plugin Warnings in Gatsby. Resolving
mini‑css‑extract‑pluginWarnings in GatsbySeeing Conflicting Order warnings in your Terminal whilst building your Gatsby project is not uncommon, but fortunately is very easy to fix (or suppress) too.