Container Queries in CSS
CSS container queries let components respond to an ancestor container's size. I explain query containers, responsive components, and browser fallbacks.
Articles
Responsive Development
Responsive development asks one implementation to cope with changing space, capabilities, and content rather than guessing a fixed device. The articles here work through the CSS and browser behaviour behind that flexibility. Unlike adaptive development, the goal is usually to keep one codebase coherent as the conditions change.
Container Queries in CSS. 
CSS aspect-ratio for Responsive Layouts. CSS
aspect-ratiofor Responsive LayoutsThe CSS
aspect-ratioproperty makes it easier to maintain consistent proportions in responsive layouts. Here, I explore how it works and when to use it.
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.
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, the
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
vhandvwUse JavaScript and CSS custom properties for viewport sizing, with working CSS fallbacks and clear limits around browser controls, keyboards, and scrollbars.
Staying Current: Automating Copyright Year Updates. Staying Current: Automating Copyright Year Updates
Automate copyright year updates across JavaScript, React, Angular, Vue, jQuery, PHP, and WordPress so footers do not go stale each January across stacks.
Enhancing Web Typography with text-wrap: balance. Enhancing Web Typography with
text-wrap: balanceExploring the synergy of
text-wrap: prettyandtext-wrap: balancein web typography, enhancing text aesthetics and readability in different contexts.
The Power of text-wrap: pretty. The Power of
text-wrap: prettyHow
text-wrap: prettycan improve paragraph wrapping in CSS, with practical examples, browser‑dependent results, and a progressive enhancement approach.
Responsive JavaScript and the matchMedia Method. Responsive JavaScript and the
matchMediaMethodIn the past, we used event listeners on the Window to determine the physical dimensions of a document. Using matchMedia allows us to use media query syntax.
Improve Page Performance with content-visibility. Improve Page Performance with
content-visibilityUsing the CSS content‑visibility property, we can control when and how an element's content is rendered by the browser.
Using Container Queries in CSS. Using Container Queries in CSS
Learn how CSS container queries apply styles according to a parent container's size, with @container examples, fallbacks and current support context.
Position: sticky in CSS. position: stickyin CSSAchieving sticky positioning on the web was once a weighty process using JavaScript to detect scroll positions and switch styles. Now, we have position: sticky!
Detecting Breakpoints in React Using Chakra UI. Detecting Breakpoints in React Using Chakra UI
Use
useBreakpointValueandChakraProviderin Chakra UI 1.8 to respond to screen sizes in React, with custom breakpoints and server‑rendering caveats.
Exploring CSS Viewport Units Beyond vw and vh. Exploring CSS Viewport Units Beyond
vwandvhExplore CSS viewport units beyond vw and vh, including vmin, vmax, vi, vb, svh, lvh, and dvh for mobile browser chrome, writing modes, and sizing bugs.
Understanding and Using Flexbox in CSS. Understanding and Using Flexbox in CSS
Flexbox in CSS allows for flexible, dynamic and responsive layouts. Learn how to use its properties to create efficient interfaces and avoid potential issues.
Do Websites Need to Look the Same in Every Browser? Do Websites Need to Look the Same in Every Browser?
Progressive enhancement in web development is often misunderstood: it allows us to take advantage of more modern browsers, without penalising the older ones.