Css on Commentary of Takao

Optimizing Web Font Loading: Preventing FOUT and FOIT

Sun, 15 Mar 2026 00:00:00 +0900

Introduction

Web fonts enhance design but come at a cost. While a custom font loads, browsers must decide: show invisible text (FOIT — Flash of Invisible Text) or show a fallback font (FOUT — Flash of Unstyled Text). Either choice impacts CLS (Cumulative Layout Shift) and user experience. This article covers strategies to load fonts reliably while minimizing layout shifts.

The font-display Descriptor

The font-display property in @font-face controls how a font is displayed during loading:

Creative CSS Recipes with Parent Selector :has()

Tue, 10 Mar 2026 00:00:00 +0900

Creative CSS Recipes with Parent Selector `:has()`

For years, CSS developers dreamed of a parent selector — a way to style an element based on its children. JavaScript and extra class names were the only workarounds. Then came :has(), the CSS pseudo-class that finally makes “if this element contains X, style it accordingly” a native reality.

As of 2026, :has() is supported in all major browsers, opening a world of markup simplification and creative styling without touching JavaScript.

Tailwind CSS v4.0 Release and Pure CSS Configuration

Thu, 05 Feb 2026 00:00:00 +0900

Introduction

Tailwind CSS v4.0 marks a paradigm shift from JavaScript-based configuration to a CSS-first architecture. The tailwind.config.js file is gone; design tokens are now defined directly in CSS using @theme. This release also integrates Lightning CSS for blazing-fast builds, adopts modern CSS features like CSS nesting and @layer, and ships a completely rewritten engine. This article breaks down the key changes and provides a practical migration guide from v3.

CSS-First Configuration with `@theme`

In v3, customizing design tokens required JavaScript:

Preventing Cumulative Layout Shift with CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Understanding Cumulative Layout Shift

Cumulative Layout Shift (CLS) is one of Google’s Core Web Vitals metrics that measures visual stability. It quantifies how often users experience unexpected layout shifts. A high CLS score harms user experience and SEO rankings. The primary cause? Media elements (images, videos, iframes) loading without reserved space.

How CSS aspect-ratio Works

The aspect-ratio CSS property lets you declare the ratio of width to height for any element. The browser reserves space accordingly, preventing the layout from jumping when content loads.

Implementing Simple Dark Mode with CSS light-dark()

Fri, 10 Oct 2025 00:00:00 +0900

The Problem with Traditional Dark Mode

Implementing dark mode traditionally required duplicate CSS rules wrapped in @media (prefers-color-scheme: dark):

:root {
 --bg: #ffffff;
 --text: #111111;
}

@media (prefers-color-scheme: dark) {
 :root {
 --bg: #1a1a2e;
 --text: #e0e0e0;
 }
}

This works but creates maintenance overhead, especially when managing multiple color properties across large stylesheets. The light-dark() CSS function eliminates this duplication entirely.

The light-dark() Function

The light-dark() function accepts two color values and automatically returns the one matching the user’s current color scheme:

Standard Syntax of CSS Nesting without Preprocessors

Fri, 15 Aug 2025 00:00:00 +0900

Introduction

Historically, writing nested CSS rules required preprocessing tools like Sass (SCSS), Less, or PostCSS.

However, browser vendors have standardized the CSS Nesting specification. Today, you can write nested selectors directly in plain CSS files and run them natively in all modern web browsers.

This article reviews the standard syntax of native CSS nesting and explains how its behavior differs from Sass compilations.

1. The Basics of Native CSS Nesting

Standard CSS Nesting looks very similar to the nested structures used in Sass.

Designing Modular layouts with CSS Container Queries

Thu, 10 Jul 2025 00:00:00 +0900

Introduction

For years, Media Queries (@media) have been the foundation of responsive web design.

Media queries trigger layout changes based on the viewport width of the browser window. However, in modern component-driven development (using React, Vue, or Web Components), styling components based on the viewport has notable limitations.

For example, if you want to reuse a card component in both a wide main column and a narrow sidebar, media queries cannot detect the space available to the component, causing the layout to break.

Perfect Alignment with CSS Grid Subgrid

Sat, 10 May 2025 00:00:00 +0900

Introduction

Aligning nested components across columns in card layouts is a common layout challenge in responsive web design.

While CSS Grid and Flexbox make it easy to equalise the height of sibling card containers, aligning the internal elements (such as headers, body copy, and CTA buttons) remains difficult. If one card has a multi-line title and another has a single line, the following elements will misalign, resulting in an inconsistent UI.

Smooth Page Transitions with View Transitions API

Sat, 05 Apr 2025 00:00:00 +0900

Introduction

Providing dynamic page transitions is a key factor in elevating the overall user experience (UX) of modern web applications.

Historically, to morph or fade elements smoothly between page navigations, developers had to import heavy JavaScript libraries like Framer Motion or GSAP. These libraries require deep hooks into rendering lifecycles to delay unmounting while animating old DOM nodes.

The introduction of the W3C standard View Transitions API simplifies this. It allows browsers to natively capture states and interpolate page layout updates with minimal CSS and JavaScript.

Introduction to CSS Anchor Positioning and Examples

Mon, 10 Feb 2025 00:00:00 +0900

Introduction

In web development, positioning floating elements—such as tooltips, popovers, dropdown menus, and hover cards—relative to a specific reference element (the anchor) has historically been a complex challenge.

To make floating elements follow anchor points on window resizing or page scrolling, developers traditionally relied on continuous JavaScript coordinate calculations (using getBoundingClientRect()) to dynamically alter inline styles. Libraries like Popper.js or Floating UI became industry standards for this reason. However, executing script loops on the main thread during scroll events frequently caused rendering lag and jank, especially on mobile devices.

CSS Scoped Styles: @scope and Encapsulation Strategies

Sun, 15 Dec 2024 00:00:00 +0900

CSS scoping has always been a challenge. Styles cascade globally by default, meaning a selector in one component can unintentionally affect elements in another. Over the years, developers have adopted naming conventions, build-time tools, and full DOM isolation to solve this. The newest addition to this toolkit is the CSS @scope at-rule, which introduces proximity-based cascade control. This article compares all major scoping strategies and helps you choose the right one.

CSS Trigonometric Functions: Math in Your Stylesheets

Tue, 05 Nov 2024 00:00:00 +0900

CSS has evolved from a simple styling language into a powerful computation engine. The introduction of trigonometric functions in CSS Values and Units Module Level 4 – shipping in Chrome 111+, Firefox 108+, and Safari 15.4+ – marks a paradigm shift. Developers can now perform geometric calculations directly in stylesheets without preprocessors or JavaScript.

Function Reference and Syntax

Six trigonometric functions are now available in CSS:

Function	Input	Output	Description
`sin(angle)`	`<angle>` or `<number>`	`<number>` [-1, 1]	Sine of an angle
`cos(angle)`	`<angle>` or `<number>`	`<number>` [-1, 1]	Cosine of an angle
`tan(angle)`	`<angle>` or `<number>`	`<number>`	Tangent of an angle
`atan2(y, x)`	`<number>`, `<number>`	`<number>`	Arctangent of y/x (full 360°)
`asin(value)`	`<number>` [-1, 1]	`<number>`	Arcsine
`acos(value)`	`<number>` [-1, 1]	`<number>`	Arccosine

Angle units include deg, rad, grad, and turn. Common pitfalls include forgetting units, division by zero in atan2, and domain errors with asin/acos inputs outside [-1, 1].

CSS Popover API: Native Overlays Without JavaScript

Tue, 20 Aug 2024 00:00:00 +0900

Introduction

Building overlays like tooltips, dropdown menus, and modals has traditionally required a significant amount of JavaScript. Developers have relied on CSS position: absolute with manual coordinate calculations, ARIA attributes for accessibility, and framework-specific solutions such as React portals or Floating UI. The CSS Popover API changes this by providing a native, declarative way to create overlays that handle positioning, show/hide toggling, focus management, and light dismiss without any JavaScript.

CSS Scroll-Driven Animations: The Future of Scroll-Based Effects

Tue, 25 Jun 2024 00:00:00 +0900

The Problem with JavaScript Scroll Events

Scroll-based effects have traditionally relied on JavaScript scroll event listeners running on the main thread, which often causes jank, dropped frames, and poor user experience. Even with passive listeners and requestAnimationFrame throttling, layout thrashing remains a persistent issue. CSS Scroll-Driven Animations solve this by moving scroll tracking to the compositor thread, enabling smooth 60fps effects without any JavaScript overhead.

Key Concepts

Three core concepts power this feature. A scroll-timeline links an animation to the scroll position of a scroll container. A view-timeline ties an animation to an element’s visibility within a scroll container. The animation-timeline property binds a named animation to either timeline type. Use timeline-scope to share timelines across elements in the DOM tree.

CSS @layer: Managing Cascade with Layer Architecture

Tue, 11 Jun 2024 00:00:00 +0900

If you have ever battled specificity wars in a large CSS project — overriding third-party styles, sprinkling !important declarations, or restructuring HTML just to win the cascade — @layer is the solution you have been waiting for. The CSS @layer at-rule gives developers explicit control over the cascade order, independent of specificity or source order.

The Cascade Problem Before @layer

Before @layer, cascade management relied entirely on conventions: BEM naming, SMACSS categories, ITCSS architecture. These conventions worked, but they were not enforced by the browser. Third-party CSS could override carefully crafted component styles, and source-order fragility meant that a single <link> tag reorder could break an entire design system.

CSS Custom Properties: Strategic Patterns for Scalable Styles

Tue, 09 Apr 2024 00:00:00 +0900

CSS Custom Properties (also known as CSS variables) have fundamentally changed how we write and maintain stylesheets. Unlike preprocessor variables from Sass or Less, custom properties are live, dynamic, and participate in the cascade and inheritance. This article explores strategic patterns for using them in production applications — from design token management to runtime manipulation.

Design Token Management

Custom properties are the ideal vehicle for design tokens — the atomic values that define a design system’s visual language. A well-organized token structure groups colors, spacing, typography, and shadows under a clear naming convention.

CSS Grid Advanced Patterns: Complex Layouts Made Simple

Fri, 15 Dec 2023 00:00:00 +0900

CSS Grid has transformed web layout design, but many developers only scratch the surface. Beyond the basic grid-template-columns: 1fr 1fr 1fr lies a powerful set of features that handle complex, responsive layouts with minimal code. This article explores advanced Grid patterns that every professional front-end developer should know.

Named Grid Areas for Semantic Layouts

Line-based placement works, but it becomes unreadable as layouts grow complex. Named grid areas let you define layouts that read like a wireframe directly in CSS.

Css on Commentary of Takao

Optimizing Web Font Loading: Preventing FOUT and FOIT

Introduction

The font-display Descriptor

Creative CSS Recipes with Parent Selector :has()

Creative CSS Recipes with Parent Selector :has()

Tailwind CSS v4.0 Release and Pure CSS Configuration

Introduction

CSS-First Configuration with @theme

Preventing Cumulative Layout Shift with CSS aspect-ratio

Understanding Cumulative Layout Shift

How CSS aspect-ratio Works

Implementing Simple Dark Mode with CSS light-dark()

The Problem with Traditional Dark Mode

The light-dark() Function

Standard Syntax of CSS Nesting without Preprocessors

Introduction

1. The Basics of Native CSS Nesting

Designing Modular layouts with CSS Container Queries

Introduction

Perfect Alignment with CSS Grid Subgrid

Introduction

Smooth Page Transitions with View Transitions API

Introduction

Introduction to CSS Anchor Positioning and Examples

Introduction

CSS Scoped Styles: @scope and Encapsulation Strategies

CSS Trigonometric Functions: Math in Your Stylesheets

Function Reference and Syntax

CSS Popover API: Native Overlays Without JavaScript

Introduction

CSS Scroll-Driven Animations: The Future of Scroll-Based Effects

The Problem with JavaScript Scroll Events

Key Concepts

CSS @layer: Managing Cascade with Layer Architecture

The Cascade Problem Before @layer

CSS Custom Properties: Strategic Patterns for Scalable Styles

Design Token Management

CSS Grid Advanced Patterns: Complex Layouts Made Simple

Named Grid Areas for Semantic Layouts

Creative CSS Recipes with Parent Selector `:has()`

CSS-First Configuration with `@theme`