Home 🍹 HTMLcat
Welcome to HTMLcat: small, native web tricks worth remembering.
HTML, CSS, and JavaScript can do more than we remember. Each post-it pairs one useful platform feature with a small example and the caveat that matters.
Some notes cover limited or experimental features. Check the support label, keep a fallback, and test with real browsers and assistive technology.
All<br>HTML<br>CSS<br>JS
42
Search post-it titles and content
Device type in JS
JS
Hide scrollbars
CSS
Empty tags
CSS
Centering in CSS
CSS
clamp()
CSS
Smooth scrolling
CSS<br>JS
Scroll margin
CSS
classList.toggle()
JS
Telephone and email links
HTML
Text selection highlight
CSS
The :has() relational selector
CSS
Styling list markers with ::marker
CSS
Localized prices with Intl.NumberFormat
JS
Disable a subtree with inert
HTML
The :target pseudo-class
CSS<br>HTML
The translate global attribute
HTML
prefers-color-scheme
CSS
30rem) {<br>.card {<br>grid-template-columns: 12rem 1fr;<br>} Put containment on a wrapper when querying the component itself would create a circular dependency."
Container size queries
CSS
confirm.showModal());<br>cancel.addEventListener('click', () => confirm.close()); Use a dialog only for an actual dialog. Provide a visible close action, label it clearly, and test keyboard focus instead of assuming the native element solves every accessibility detail."
The dialog element
HTML<br>JS
Better wrapping with text-wrap
CSS
Description list alignment
HTML<br>CSS
Native form colors with accent-color
CSS
CSS Custom Highlight API
JS<br>CSS
Detect hover across input types
CSS
Transparent colors with color-mix()
CSS
event.snapTargetInline?.classList.add('selected');<br>}); These events are not Baseline yet. Treat them as an enhancement and keep scrolling and content usable when they never fire."
Scroll snap events
JS
Sort directories by size
Bash
light-dark()
CSS
contrast-color()
CSS
Scoped CSS with @scope
CSS
:where()
CSS
Scroll-driven animations
CSS
* {<br>scroll-snap-align: center;
.carousel > *::scroll-marker {<br>content: attr(data-label);<br>} Support is still limited. Keep the scroll container useful without generated controls, provide meaningful marker names, and test keyboard order."
CSS carousels
CSS<br>HTML
corner-shape
CSS
CSS custom functions
CSS
CSS Grid Lanes
CSS
Popover API
HTML
document.documentElement.classList.toggle('details-open');<br>};
if (document.startViewTransition) {<br>document.startViewTransition(update);<br>} else {<br>update();<br>} ::view-transition-group(root) {<br>animation-duration: .25s;<br>} The fallback is the DOM update itself. Keep transitions short, avoid hiding state changes, and respect reduced-motion preferences."
View Transitions API
JS<br>CSS
Container style queries
CSS
Exclusive accordions with details name
HTML
Control dialogs with button commands
HTML
Searchable collapsed content with hidden=until-found
HTML
No post-its found.