Control CSS Container Layouts with place‑content
Use CSS place‑content to align grid and flex content, comparing align‑content, justify‑content, place‑items, syntax, examples, and layout limits.
Articles
Sass
Sass (Syntactically Awesome Stylesheets) is a preprocessor scripting language which is compiled into CSS (Cascading Style Sheets). These articles come from the period when Sass solved gaps in the platform, and from the present where native CSS has closed many of them. The useful question now is not whether Sass is powerful, but whether a particular abstraction still earns its place.
Control CSS Container Layouts with place‑content. Control CSS Container Layouts with
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.
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.
Using the CSS :has Pseudo‑Class. Using the CSS
:hasPseudo‑ClassThe :has CSS selector allows you to select a parent element based on whether it has a certain child or children. It's powerful but it has some limitations.
Use CSS to Change the Mouse Cursor. Use CSS to Change the Mouse Cursor
Change the mouse cursor with CSS using built‑in cursor values or custom assets, whilst keeping interaction cues useful and avoiding distracting effects.
Flexbox vs. grid. Flexbox vs.
gridAt first glance, 'flexbox' and 'grid' in CSS appear to solve similar problems in different ways. They are both suited to very different layouts however.
Access CSS Variables from a Database via db-connect. Access CSS Variables from a Database via
db‑connectIn CSS, db‑connect is a misunderstood but immensely useful technique for connecting to databases directly from vanilla CSS in order to access stored properties.
Detecting and Dealing with Website Theft. Detecting and Dealing with Website Theft
Website theft is frustrating, but there are practical ways to spot it and respond. This guide covers copied text, copied code, and escalation options.
Rendering Contentful Rich Code Snippets in Gatsby. Rendering Contentful Rich Code Snippets in Gatsby
Contentful rich text and Gatsby work well together until code snippets enter the picture. This guide shows how to render inline and block code cleanly.
CSS Focus Styles for Keyboard Users Only. CSS Focus Styles for Keyboard Users Only
Keep CSS focus styles accessible without showing outlines after every mouse click, using keyboard‑only patterns, :focus‑visible thinking, and UX trade‑offs.
Parent Selectors in CSS and Sass. Parent Selectors in CSS and Sass
Understand parent selectors in CSS and Sass, including how ampersand nesting works, :has() context, BEM trade‑offs, specificity, and readability.
Using CSS to Deal with Widows. Using CSS to Deal with Widows
In typography, a 'widow' is the last line of a paragraph, which falls alone on the following page or column. On the web, this can be easily tackled with CSS.
Reducing Image Brightness with CSS. Reducing Image Brightness with CSS
Reduce image brightness with CSS filters, including brightness(), animation, dark‑mode eye strain, visual treatment, and where filter effects are useful.
Interpolation: Sass Variables Inside calc(). Interpolation: Sass Variables Inside
calc()One of the most common pitfalls for developers new to Sass is string interpolation: why a Sass variable may not behave as expected inside calc().
Break Out of CSS Nesting with Sass. Break Out of CSS Nesting with Sass
On the occasion that you need to break a single (or several) CSS rules out of the nested structure of your CSS, the Sass @at‑root rule is exactly what you need.
Advanced Sass: Loops. Advanced Sass: Loops
Use Sass loops more deliberately, including while, for, and each patterns, generated selectors, readable output, and where loops beat repetition.
