# HTML & CSS Research Notes
*Compiled by Vincent - May 6, 2026*
---
## TABLE OF CONTENTS
1. [Modern CSS Features](#modern-css-features)
2. [Layout Systems](#layout-systems)
3. [Modern CSS Functions](#modern-css-functions)
4. [HTML5 Semantic Elements](#html5-semantic-elements)
5. [Selectors & Pseudo-classes](#selectors--pseudo-classes)
6. [Color Systems](#color-systems)
7. [Typography](#typography)
8. [Responsive Design](#responsive-design)
9. [Accessibility](#accessibility)
10. [Performance & Best Practices](#performance--best-practices)
11. [Emerging Features](#emerging-features)
12. [Code Patterns & Snippets](#code-patterns--snippets)
---
## 1. MODERN CSS FEATURES
### Container Queries
Component-level responsiveness based on parent size, not viewport.
```css
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 1fr 2fr;
}
}
/* Shorthand */
.card-container {
container: card / inline-size;
}
```
### CSS Nesting (Native)
```css
.card {
padding: 1rem;
& .title { font-size: 1.5rem; }
&:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
& .button:focus-visible {
outline: 3px solid #0066ff;
}
}
```
### :has() Selector
```css
form:has(input:invalid) { border-color: red; }
div:has(+ h2) { margin-bottom: 0; }
.card:has(.badge-new) { border: 2px solid green; }
.card:not(:has(.image)) { min-height: 200px; }
```
### Cascade Layers
```css
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer components { .card { padding: 1rem; } }
@layer utilities { .mt-4 { margin-top: 1rem; } }
```
Layers declared last have highest priority. Unclassed styles beat all layers.
### Custom Properties
```css
:root {
--color-primary: #0066ff;
--spacing-sm: 0.5rem;
}
.element { color: var(--color-primary, #333); }
```
### @property - Typed Custom Properties
```css
@property --progress {
syntax: '<percentage>';
initial-value: 0%;
inherits: false;
}
```
Enables smooth animation of CSS variables.
### Subgrid
```css
.grid-item > .inner {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
```
### Scroll-driven Animations
```css
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.hero {
animation: fade-in linear both;
animation-timeline: view();
}
/* Scroll progress linked */
.progress {
animation: grow linear;
animation-timeline: --scroll-source;
timeline-scope: --scroll-source;
}
```
---
## 2. LAYOUT SYSTEMS
### CSS Grid (2D Layout)
```css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 1rem;
/* Named areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
/* Auto-fill vs auto-fit */
.cards {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* fr units with minmax */
.grid {
grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}
/* Dense packing */
.grid { grid-auto-flow: dense; }
```
### Flexbox (1D Layout)
```css
.flex {
display: flex;
flex-direction: row; /* row | column | row-reverse | column-reverse */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
gap: 1rem;
/* Main axis */
justify-content: space-between; /* flex-start | center | space-between | space-around | space-evenly */
/* Cross axis */
align-items: center; /* stretch | flex-start | center | flex-end | baseline */
/* All items */
align-content: center; /* When wrapping */
}
.child {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
order: -1; /* Reorder visually */
align-self: end; /* Override parent align-items */
}
```
### When to use Grid vs Flexbox
| Grid | Flexbox |
|------|---------|
| 2D layouts (rows AND columns) | 1D layouts (row OR column) |
| Page-level structure | Component-level alignment |
| When items need to align in both axes | When content size drives layout |
| Complex overlapping layouts | Nav bars, card lists, button groups |
---
## 3. MODERN CSS FUNCTIONS
### clamp() - Responsive Values
```css
.text {
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
/* min, preferred, max */
}
.container {
width: clamp(300px, 90vw, 1200px);
}
```
### min() / max()
```css
.card {
width: min(400px, 90vw);
height: max(200px, 30vh);
}
/* Multiple values */
.gap {
margin: min(2rem, 5vw);
}
```
### color-mix()
```css
.element {
color: color-mix(in srgb, #0066ff, #ff0000 30%);
background: color-mix(in oklch, var(--primary), white 80%);
}
```
### calc()
```css
.element {
width: calc(100% - 4rem);
margin-left: calc((100% - 800px) / 2);
}
```
---
## 4. HTML5 SEMANTIC ELEMENTS
### Structural Elements
```html
<body>
<header>
<nav aria-label="Main navigation">...</nav>
</header>
<main>
<article>...</article>
<section aria-labelledby="section-title">...</section>
<aside>...</aside>
</main>
<footer>...</footer>
</body>
```
### Interactive Elements
```html
<!-- Disclosure widget -->
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed here.</p>
</details>
<!-- Modal dialog -->
<dialog id="modal">
<form method="dialog">
<p>Content here</p>
<button type="submit">Close</button>
</form>
</dialog>
<!-- Search -->
<search>
<form role="search">
<input type="search" name="q">
<button type="submit">Search</button>
</form>
</search>
```
### Form Elements
```html
<form>
<label for="email">Email</label>
<input type="email" id="email" required autocomplete="email">
<input type="number" min="0" max="100" step="5">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<output name="result" for="a b"></output>
<progress value="70" max="100"></progress>
<meter value="0.6"></meter>
</form>
```
### Media Elements
```html
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" loading="lazy">
</picture>
<video controls poster="thumb.jpg" preload="metadata">
<source src="video.mp4" type="video/mp4">
</video>
<audio controls src="audio.mp3"></audio>
```
---
## 5. SELECTORS & PSEUDO-CLASSES
### Combinators
```css
.parent > .child /* Direct child */
.parent .descendant /* Any descendant */
.h1 + .h2 /* Adjacent sibling */
.h1 ~ .p /* General sibling */
```
### Pseudo-classes
```css
/* User interaction */
:hover, :active, :focus, :focus-visible, :focus-within
/* Structural */
:first-child, :last-child, :only-child
:nth-child(2n), :nth-child(odd), :nth-child(3n+1)
:first-of-type, :last-of-type, :only-of-type
:nth-of-type(2)
/* Form state */
:checked, :disabled, :enabled, :required, :optional
:valid, :invalid, :user-invalid
:placeholder-shown, :default, :indeterminate
/* Logical */
:is(.a, .b, .c) /* Matches any - uses highest specificity */
:where(.a, .b) /* Matches any - zero specificity */
:not(.disabled) /* Negation */
/* View */
:in-viewport, :has-tooltip
/* Language */
:lang(en), :lang(zh)
```
### Pseudo-elements
```css
::before, ::after /* Content insertion */
::first-line /* First formatted line */
::first-letter /* First letter */
::selection /* User selection highlight */
::placeholder /* Input placeholder style */
::backdrop /* Dialog/video backdrop */
::part(name) /* Shadow DOM styling */
```
### :before/:after Pattern
```css
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
padding: 0.5rem;
background: #333;
color: white;
border-radius: 4px;
white-space: nowrap;
}
```
---
## 6. COLOR SYSTEMS
### Modern Color Spaces
```css
/* OKLCH - Perceptually uniform */
color: oklch(0.7 0.1 250);
/* lightness chroma hue */
/* OKLAB */
color: oklab(0.7 0.1 -0.1);
/* LAB */
color: lab(70% 20 -30);
/* LCH */
color: lch(70% 25 250);
/* HSL */
color: hsl(250, 70%, 50%);
color: hsl(250deg 70% 50% / 0.8); /* With alpha */
```
### Color Functions
```css
color-mix(in oklch, red, blue 30%);
color-mix(in srgb, var(--primary), white 80%);
/* Relative colors (modify existing colors) */
color: hsl(from var(--primary) h s calc(l + 20%));
background: oklch(from var(--bg) calc(L + 0.1) C H);
/* Color with alpha */
color: #0066ff80;
background: rgb(0 102 255 / 0.5);
```
---
## 7. TYPOGRAPHY
### Modern Font Features
```css
.text {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1.125rem;
line-height: 1.6;
letter-spacing: -0.02em;
/* OpenType features */
font-variant-ligatures: common-ligatures;
font-variant-numeric: tabular-nums;
font-feature-settings: "kern" 1, "liga" 1;
}
/* Variable fonts */
@font-face {
font-family: 'VariableFont';
src: url('font.woff2') format('woff2-variations');
}
.text {
font-variation-settings: "wght" 400, "opsz" 14;
}
```
### Text Features
```css
.text {
/* Multi-line clamp */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
/* Text wrapping */
overflow-wrap: break-word;
word-break: break-word;
text-overflow: ellipsis;
/* Balance long lines */
text-wrap: balance;
text-wrap: pretty;
/* Decorations */
text-decoration: underline wavy red;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
/* Size adjust for font fallbacks */
font-size-adjust: 0.5;
}
```
### CSS @font-palette
```css
.element {
font-palette: light;
font-palette: dark;
font-palette: light oklch(0.9 0 0) oklch(0.2 0 0);
}
```
---
## 8. RESPONSIVE DESIGN
### Modern Responsive Patterns
```css
/* Mobile-first approach */
.container {
width: 100%;
padding: 1rem;
}
@media (min-width: 768px) {
.container { max-width: 720px; padding: 2rem; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
/* Container queries (component responsive) */
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}
/* Aspect ratio */
.video {
aspect-ratio: 16 / 9;
}
/* Image responsive */
img {
max-width: 100%;
height: auto;
}
/* Density queries */
@media (min-resolution: 2dppx) {
/* High density screens */
}
/* Orientation */
@media (orientation: landscape) { }
```
### Viewport Units
```css
/* Standard */
height: 100vh;
/* Dynamic (accounts for mobile browser UI) */
height: 100dvh; /* Dynamic */
height: 100svh; /* Small */
height: 100lvh; /* Large */
/* Container-relative */
width: 100cqi; /* Container inline size */
height: 100cqb; /* Container block size */
```
---
## 9. ACCESSIBILITY
### Focus Management
```css
/* Keyboard-only focus ring */
:focus-visible {
outline: 3px solid #0066ff;
outline-offset: 2px;
}
/* Remove outline for mouse clicks */
:focus:not(:focus-visible) {
outline: none;
}
/* Focus within - style parent when child focused */
.search:focus-within {
border-color: #0066ff;
}
```
### Prefers Queries
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #f0f0f0;
}
}
@media (prefers-contrast: more) {
.element {
border-width: 3px;
border-color: black;
}
}
@media (prefers-reduced-transparency: reduce) {
.overlay {
background: rgba(0,0,0,0.8);
}
}
```
### ARIA Attributes in CSS
```css
[aria-expanded="true"] .icon {
transform: rotate(180deg);
}
[aria-checked="true"] {
background-color: #0066ff;
}
[aria-disabled="true"] {
opacity: 0.5;
pointer-events: none;
}
```
### Skip Link Pattern
```html
<a href="#main" class="skip-link">Skip to main content</a>
<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
z-index: 100;
padding: 0.5rem 1rem;
background: #0066ff;
color: white;
}
</style>
```
---
## 10. PERFORMANCE & BEST PRACTICES
### Critical CSS Patterns
```css
/* Use contain for independent rendering */
.card {
contain: layout style paint;
}
/* Content-visibility for lazy rendering */
.article {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}
/* will-change for animation prep */
.hero {
will-change: transform;
}
```
### Image Optimization
```html
<picture>
<source srcset="img.avif" type="image/avif">
<source srcset="img.webp" type="image/webp">
<img src="img.jpg" alt="Desc" loading="lazy" decoding="async">
</picture>
```
```css
/* Responsive images with srcset */
img {
image-set: url(img-1x.jpg) 1x,
url(img-2x.jpg) 2x;
}
/* CSS images */
.background {
background-image: image-set(
url(bg.avif) type("image/avif"),
url(bg.webp) type("image/webp"),
url(bg.jpg) type("image/jpeg")
);
}
```
### CSS Best Practices
1. Use custom properties for theming
2. Prefer logical properties (margin-inline vs margin-left/right)
3. Use containment for performance
4. Avoid !important - use cascade layers instead
5. Mobile-first media queries
6. Semantic HTML reduces CSS complexity
7. System font stacks for performance
8. Use gap instead of margins for spacing
---
## 11. EMERGING FEATURES
### View Transitions API
```css
::view-transition-old(root) {
animation: 0.3s ease-in out fade-out;
}
::view-transition-new(root) {
animation: 0.3s ease-in out fade-in;
}
```
### Anchor Positioning
```css
@anchor-popover my-popover {
position: anchored;
anchor-scope: true;
}
```
### CSS @scope
```css
@scope (.card) to (.card .modal) {
h2 { font-size: 1.25rem; }
p { color: #666; }
}
```
### Light-Dark Color Function
```css
.element {
color: light-dark(#333, #eee);
/* light value, dark value */
}
```
---
## 12. CODE PATTERNS & SNIPPETS
### CSS Reset (Modern)
```css
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
}
body {
min-height: 100vh;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
```
### Centering Everything
```css
.center {
display: grid;
place-items: center;
min-height: 100vh;
}
```
### Card Component
```css
.card {
display: grid;
gap: 1rem;
padding: 1.5rem;
border-radius: 12px;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
}
```
### Button Component
```css
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
&--primary {
background: var(--color-primary);
color: white;
&:hover { background: color-mix(in srgb, var(--color-primary), black 10%); }
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
```
### Navigation
```css
.nav {
display: flex;
gap: 1rem;
list-style: none;
& a {
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: background 0.2s;
&:hover { background: #f0f0f0; }
&:focus-visible { outline: 3px solid #0066ff; }
&.active {
background: #e0e0e0;
font-weight: 600;
}
}
}
```
### Grid Gallery
```css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
& img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 8px;
}
}
```
### Tooltip
```css
.tooltip {
position: relative;
&::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 0.5rem 0.75rem;
background: #333;
color: white;
border-radius: 4px;
font-size: 0.875rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
&:hover::after {
opacity: 1;
}
}
```
### Dark Mode Toggle
```css
:root {
color-scheme: light dark;
--bg: light-dark(#fff, #1a1a1a);
--text: light-dark(#333, #f0f0f0);
}
body {
background: var(--bg);
color: var(--text);
}
```
### Aspect Ratio Boxes
```css
.ratio-box {
aspect-ratio: 16/9;
}
.square { aspect-ratio: 1/1; }
.wide { aspect-ratio: 21/9; }
```
### Logical Properties
```css
.element {
margin-block: 1rem; /* margin-top + margin-bottom */
margin-inline: 2rem; /* margin-left + margin-right */
padding-block: 0.5rem;
padding-inline: 1rem;
border-inline-start: 3px solid blue;
inset: 0; /* top: 0, right: 0, bottom: 0, left: 0 */
}
```
---
## QUICK REFERENCE
### Specificity Order (Low to High)
1. `*` - Universal (0,0,0,0)
2. `:where()` - Zero specificity
3. Classes, pseudo-classes (0,0,1,0)
4. IDs (0,1,0,0)
5. Inline styles (1,0,0,0)
6. `!important` - Override
### CSS Units
| Unit | Type | Reference |
|------|------|-----------|
| px | Absolute | Pixel |
| rem | Relative | Root font-size |
| em | Relative | Parent font-size |
| vw/vh | Viewport | 1% of viewport |
| dvh/svh/lvh | Dynamic | Accounts for browser UI |
| cqi/cqb | Container | Container inline/block |
| ch | Character | Width of "0" |
| % | Percentage | Parent element |
### Browser Support Checklist
- CSS Nesting: Chrome 120+, Firefox 124+, Safari 16+
- :has(): Chrome 105+, Firefox 121+, Safari 15.4+
- Container Queries: Chrome 105+, Firefox 110+, Safari 16+
- :is()/:where(): Chrome 88+, Firefox 79+, Safari 15.4+
- @layer: Chrome 99+, Firefox 97+, Safari 15+
- Subgrid: Chrome 117+, Firefox 71+, Safari 15+
- color-mix(): Chrome 111+, Safari 15.4+
- oklch(): Chrome 119+, Safari 16.2+
---
*End of Research Notes*