# HTML & CSS Research — Index
> Comprehensive research on HTML and CSS features, patterns, and best practices. Compiled May 2025.
---
## Documents
### 1. [HTML_Advanced_Features.md](HTML_Advanced_Features.md)
Advanced HTML elements, APIs, and hidden features.
**Topics:**
- Semantic HTML (`article`, `section`, `nav`, `aside`, `details`, `dialog`, `popover`)
- Advanced form features (input types, `datalist`, validation, `output`)
- Web Components (custom elements, shadow DOM, templates, slots)
- Modern HTML APIs (IntersectionObserver, ResizeObserver, MutationObserver, Clipboard, Fullscreen)
- Accessibility (ARIA roles, live regions, keyboard nav, `focus-visible`)
- Performance (preload, prefetch, preconnect, lazy loading, srcset, picture)
- SEO (Open Graph, Twitter Cards, JSON-LD structured data)
- Hidden attributes (`contenteditable`, `draggable`, `inert`, `popover`, `translate`)
- Storage APIs (localStorage, sessionStorage, IndexedDB)
### 2. [HTML_CSS_Layout_Systems.md](HTML_CSS_Layout_Systems.md)
Deep dive into CSS layout systems.
**Topics:**
- **CSS Grid:** `grid-template-areas`, `repeat()`, `minmax()`, `fr` units, `auto-fill/fit`, placement, `dense` packing
- **Subgrid** (2024+): Nested grid alignment
- **Flexbox:** `flex-grow/shrink/basis`, `align-items/self`, `justify-content`, `flex-wrap`, `min-width: 0` trick
- **Container Queries** (2024+): `@container`, `container-type`, `cqi/cqb/cqw/cqh` units
- **Pseudo-elements:** `::before/::after`, `::first-line/first-letter`, `::placeholder`, `::backdrop`
- **CSS Counters:** Auto-numbering, nested `counters()`, figure numbering
- **Multi-column:** `column-count`, `column-fill`, `break-inside`, `column-span`
- **Positioning:** `sticky`, `inset` shorthand
- **Viewport units:** `vw/vh/vmin/vmax`, dynamic `svh/lvh/dvh`, `env(safe-area-inset-*)`
### 3. [HTML_CSS_Modern_Features.md](HTML_CSS_Modern_Features.md)
Modern CSS features (2023–2025).
**Topics:**
- CSS Nesting (native `&` selector, nested media queries)
- `:has()` selector (parent selection, form validation)
- Custom Properties (`@property`, fallback chains, `calc()` with vars)
- Color Functions (`color-mix()`, `oklch()`, `oklab()`, `rgb(from ...)`)
- Scroll-driven animations (`animation-timeline: scroll()`, `view()`)
- CSS Layers (`@layer` for cascade control)
- Advanced selectors (`:is()`, `:where()`, `:not()`, `:nth-child()`)
- Logical Properties (`margin-block`, `padding-inline`, `inset-block`)
- Scroll Snap (`scroll-snap-type`, `scroll-snap-stop`)
- `@scope` (scoped styles without Shadow DOM)
- Text features (`text-wrap: balance`, `hyphens`, `text-size-adjust`)
- `@starting-style` (entry animations)
- `accent-color` (form control theming)
- `color-scheme` (automatic dark mode)
### 4. [HTML_CSS_Performance.md](HTML_CSS_Performance.md)
CSS performance optimization.
**Topics:**
- Rendering pipeline (parse → layout → paint → composite)
- CPU vs GPU properties (transform/opacity vs width/height)
- `will-change` (when to use, when NOT to)
- `contain` (layout, paint, style, content isolation)
- Specificity and cascade (`:where()`, `@layer`)
- Reflow/repaint minimization (batch changes, read/write separation)
- Critical CSS inlining
- Font loading (`font-display: swap`)
- Image optimization (srcset, picture, AVIF/WebP)
- CSS anti-patterns (deep nesting, `*` selector, `!important`)
- `content-visibility: auto` (virtual scrolling)
- Animation performance (transform/opacity only for 60fps)
- Bundle size optimization (PurgeCSS, CSS Modules)
---
## Key Things I Learned
1. **Native `<dialog>`** has a built-in `::backdrop` pseudo-element — no need for custom overlay divs.
2. **`popover` attribute** (2024+) gives native popover behavior — tooltips, menus, dropdowns without JS.
3. **`contenteditable`** makes any element editable inline — no textarea needed.
4. **`inert`** attribute disables a subtree — non-interactive, skipped by tab, hidden from a11y tree.
5. **Container Queries** replace media queries for components — respond to container size, not viewport.
6. **Subgrid** solves the "aligned cards" problem — nested grids inherit parent tracks.
7. **`:has()`** is the most requested CSS selector ever — finally here.
8. **`oklch()`** color space is perceptually uniform — gradients look smooth, lightness changes are predictable.
9. **`color-mix()`** lets you mix colors in CSS — no more hardcoded hover states.
10. **`@scope`** scopes CSS to a subtree — like Shadow DOM without the JS API.
11. **`content-visibility: auto`** is like React.lazy for CSS — skips rendering off-screen elements.
12. **`will-change`** has a memory cost — only use before animation, remove after.
13. **`contain`** tells the browser "this element is independent" — huge performance boost for long lists.
14. **Scroll-driven animations** eliminate the need for IntersectionObserver + requestAnimationFrame scroll effects.
15. **`@starting-style`** animates elements on first render — no JS mount animation needed.
16. **Dynamic viewport units** (`dvh`) fix the mobile address bar problem that's plagued CSS for years.
17. **`accent-color`** restyles all form controls with one property.
18. **CSS logical properties** automatically adapt for RTL and vertical writing modes.
19. **`intersection observer`** is better than scroll events for lazy loading — no scroll event spam.
20. **`resize observer`** is better than window resize events — observe specific elements, not the whole window.
---
## Quick Reference: HTML Elements You Should Know
| Element | Purpose | Support |
|---------|---------|---------|
| `<details>`/`<summary>` | Collapsible content | All browsers |
| `<dialog>` | Native modal | All browsers |
| `<popover>` | Native popovers | 2024+ |
| `<datalist>` | Autocomplete | All browsers |
| `<output>` | Computation results | All browsers |
| `<time>` | Machine-readable dates | All browsers |
| `<mark>` | Highlighted text | All browsers |
| `<abbr>` | Abbreviations | All browsers |
| `<picture>` | Art direction | All browsers |
| `<template>` | Inert content | All browsers |
---
## Quick Reference: CSS Features by Use Case
| Need | Feature |
|------|---------|
| Responsive component | Container Queries |
| Parent styling | `:has()` |
| Nested styles | CSS Nesting (`&`) |
| Scoped CSS | `@scope` or Shadow DOM |
| Form control colors | `accent-color` |
| Color gradients | `oklch()` + `color-mix()` |
| Scroll animations | `animation-timeline: scroll()` |
| Entry animations | `@starting-style` |
| Cascade control | `@layer` |
| RTL/writing-mode | Logical properties |
| 60fps animation | `transform` + `opacity` only |
| Render optimization | `contain`, `content-visibility` |
| Lazy loading | `loading="lazy"`, `IntersectionObserver` |
| Auto-numbering | CSS Counters |
| Carousel | Scroll Snap |
| Full-height mobile | `dvh` + `svh` |
| Notch compatibility | `env(safe-area-inset-*)` |