Syntax - Tasty Web Development Treats

Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

Jun 5, 2023
Discover the intriguing differences between 0 and 0px in CSS, as well as the meanings of terms like none, hidden, initial, and unset. Dive into the new 'at property' syntax and its potential complexities for developers. Explore various methods for hiding elements and their effects on layout and accessibility. Learn about ghost spaces and effective spacing management. The episode wraps up with insights on ARIA roles and a fun look at honeypot inputs to tackle spam, all while delivering practical tips for cleaner CSS.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
ADVICE

Hiding Elements

  • Use display: none to hide elements visually and from screen readers and crawlers.
  • Consider ARIA hidden or visibility hidden for other hiding scenarios.
ADVICE

Interactivity Control

  • Use pointer-events: none to prevent element interaction while maintaining visibility.
  • Try user-select: none to disable text selection within an element.
ANECDOTE

Ghost Spaces

  • Wes Bos encountered ghost spaces between inline elements, like images.
  • He solved it by setting font-size: 0 on the parent and resetting it on the child.
Get the Snipd Podcast app to discover more snips from this episode
Get the app