25 lines
1.8 KiB
Markdown
25 lines
1.8 KiB
Markdown
|
# HTML/CSS Patterns and Traps
|
||
|
|
|
||
|
|
## HTML
|
||
|
|
|
||
|
|
- **Semantic elements for SEO/a11y** — Use `<main>`, `<article>`, `<nav>`, `<header>`, `<footer>`; screen readers depend on them
|
||
|
|
- **`<button>` vs `<a>`** — Buttons for actions, anchors for navigation; mixing breaks keyboard/screen reader UX
|
||
|
|
- **`<img alt="">`** — Decorative images need empty alt (not missing); screen readers announce filename otherwise
|
||
|
|
- **Self-closing tags** — In HTML5, `<br/>` works but `<br>` is canonical; `<div/>` is WRONG (not self-closing)
|
||
|
|
- **ID must be unique** — Duplicate IDs break `querySelector`, labels, and ARIA; use classes for styling
|
||
|
|
- **`<input type="number">`** — Allows `e`, `+`, `-` characters; validate server-side for real numbers
|
||
|
|
- **Hidden content still in DOM** — `display: none` hides from screen readers; `visibility: hidden` doesn't remove from flow
|
||
|
|
|
||
|
|
## CSS
|
||
|
|
|
||
|
|
- **`margin: auto` needs width** — Won't center without explicit `width` or `max-width` on block elements
|
||
|
|
- **`z-index` needs position** — Only works on positioned elements (`relative`, `absolute`, `fixed`, `sticky`)
|
||
|
|
- **Flexbox gap support** — `gap` works in flexbox in all modern browsers; no need for margin hacks
|
||
|
|
- **Grid auto-fit vs auto-fill** — `auto-fit` collapses empty tracks; `auto-fill` preserves them
|
||
|
|
- **`100vh` on mobile** — Includes address bar; use `100dvh` or JS for true viewport height
|
||
|
|
- **`:focus-visible`** — Shows focus ring only for keyboard users; cleaner than removing `:focus` outlines
|
||
|
|
- **Cascade layers** — `@layer` controls specificity across files; newer than `!important` hacks
|
||
|
|
- **Custom properties scope** — CSS variables cascade; define on `:root` for global, on element for local
|
||
|
|
- **`calc()` whitespace** — `calc(100% -20px)` fails; needs spaces: `calc(100% - 20px)`
|
||
|
|
- **Transform origin** — Default is center; for corner rotations, set `transform-origin: top left`
|