dragontheory

Quick, practical intro to CSS container queries - a way to make components adapt to their own container size (context), not the viewport. This is a big shift from media queries!

<!-- Minimal, attribute-free structure -->
<card>
  <h2>Title</h2>
  <p>Content…</p>
</card>

dragontheory

Quick practical upgrade pack for truly declarative, JS‑free UI logic using modern CSS: :target, :has(), and container style queries.

---

:target — URL‑driven toggles (no JS)

Use hash links (#id) to open/close sections, focus cards, or reveal details. It’s native, accessible, and back/forward‑button friendly.

dragontheory

Tiny, scoped, JS‑free modal pattern that can drop in: it uses <dialog> with :modal, styles its ::backdrop, and animates open/close with @starting-style + transition-behavior: allow-discrete;. State is declarative via a hidden checkbox, but you can swap to :target if you prefer.

<new-modal>
  <!-- state (declarative) -->
  <input type="checkbox" hidden aria-hidden="true">

  <!-- open trigger (anywhere in your UI) -->

dragontheory

🔤 Modern CSS Font Rendering — clarity & performance (practical notes)

1) text-shadow: clarity vs cost

• Use sparingly. Even a subtle shadow forces extra paint work; animated or large-blur shadows can trigger repaints every frame.
• Prefer small offsets + zero/low blur for contrast on light text.
• Avoid stacking multiple shadows on long passages; reserve for headings or UI labels.

dragontheory

Modern HTML + CSS patterns that replace or drastically reduce traditional JavaScript UI behavior. Each example is progressive, accessible, minimal, and declarative.

---

1) Toggle / Accordion → <details> + <summary>

Replaces: JS click handlers, state variables

dragontheory

CSS‑only intrinsic responsive layout patterns that let UI components wrap or adapt based on available space — not arbitrary hardcoded breakpoints. These rely on container queries, style queries, and native CSS layout mechanics. All examples are practical, drop‑in ready, and viewport‑independent.

---

1) Adaptive Component Layout with Container Queries

Use: let a card flip between column/row based on container width. Why: layout responds to container size, not viewport. ([MDN][1])

dragontheory

Short, practical drop‑in CSS snippets that hide scrollbars by default and show them on hover, suitable to integrate with design/theme tokens (e.g., CSS custom properties). Useful patterns leverage standard CSS Scrollbars Module + fallback WebKit pseudo‑elements. Authoritative specs/tools cited. ([MDN Web Docs][1])

---

1) Modern + fallback: show scrollbars on hover

/* theme tokens */

dragontheory

A drop‑in, scalable border‑radius system that harmonizes with fluid typography using CSS clamp() — minimal, practical, and responsive.

---

Why this works

• Fluid typography: scales between a min & max viewport width.
• Fluid radii: scales the corner rounding in proportion to type size.

dragontheory

Automation Turn #6 — Best‑Practice Blueprint: SPA‑Enabling SharePoint 2016 SE (No Regression)

Scope: Introduce a Single‑Page Application (SPA) layer on a SharePoint 2016 SE site while preserving all existing content, navigation, permissions, and URLs. Constraint: SharePoint remains the source of truth; SPA is additive and removable.

---

1) Architectural Patterns (What Actually Survives Operations)

dragontheory

Below are short, practical CSS reset snippets focused on modern browsers — minimal, accessible, and grounded in current best‑practice guidance. Each has a succinct explanation and a reference to authoritative discussion or source.

---

🔹 1. Andy Bell’s Modern Reset — clean, practical baseline

/* Box sizing */