HeadlinesBriefing favicon HeadlinesBriefing.com

HTMLcat: Native Web Tricks & Tips

Hacker News •
×

Welcome to HTMLcat, a collection of small, native web tricks worth remembering. Each post-it pairs one useful platform feature with a minimal example and the caveat that matters. Notes cover stable, limited, and experimental features across HTML, CSS, and JS. Check the support label, keep a fallback, and test with real browsers and assistive technology.

Featured tricks include device type detection, hiding scrollbars, empty tags, CSS centering, `clamp()`, smooth scrolling, scroll margin, `classList.toggle()`, telephone and email links, text selection highlighting, the `:has()` relational selector, styling list markers with `::marker`, localized prices with `Intl.NumberFormat`, disabling subtrees with `inert`, the `:target` pseudo-class, the `translate` attribute, `prefers-color-scheme`, container size queries, the `<dialog>` element, better wrapping with `text-wrap`, description list alignment, native form colors with `accent-color`, CSS Custom Highlight API, hover detection across input types, transparent colors with `color-mix()`, scroll snap events, `light-dark()`, `contrast-color()`, scoped CSS with `@scope`, `:where()`, scroll-driven animations, CSS carousels, `corner-shape`, CSS custom functions, CSS Grid Lanes, Popover API, View Transitions API, container style queries, exclusive accordions with `details` name, controlling dialogs with button commands, and searchable collapsed content with `hidden=until-found`.

All examples are searchable by title and content. Remember to verify browser support and provide fallbacks for production use.