Menu

Post image 1
Post image 2
1 / 2
0

Show-When Web Component: Conditional Visibility with URL, Media & Support

DEV Community·jQueryScript·18 days ago
#kTUqqpIU
Reading 0:00
15s threshold
Cover image for Show-When Web Component: Conditional Visibility with URL, Media & Support

jQueryScript

show-when: a Web Component that conditionally shows or hides HTML content based on browser environment state.

Key features:

  • URL query parameter matching (key or key=value)
  • Hash-based visibility with live hashchange reaction
  • CSS feature detection via CSS.supports()
  • Media query matching with live updates
  • Network status detection (online/offline)
  • A companion hide-when element for inverted logic

Great for progressive enhancement, debug panels, offline notices, browser compatibility messages, and locale-based content blocks. No framework required.

Full setup guide, examples, and attribute reference: [https://www.cssscript.com/conditional-content-visibility-show-when/]

Read More