v156 · capabilities · html elements & permissions
Capability Elements Icon-only mode
Declarative capability elements — <camera>, <microphone>, <usermedia>, and <geolocation> — originally required browser-enforced visible text labels (such as "Use camera" or "Share location") to prevent clickjacking. However, dense application surfaces like floating video-call docks, map corner controls, and mobile media toolbars cannot accommodate wide text pills. Chrome 156 introduces display-mode="icon-only" (IDL displayMode) alongside icon-variant, allowing authors to opt into compact square/circular UA-rendered icon buttons while keeping every browser security invariant, occlusion detector, and localized screen-reader accessible name intact.
concepts
-
Compact media tray
Interactive floating video-call dock and map control bar toggling
display-mode="icon-only"vsdefaultandicon-varianton live<camera>,<microphone>,<usermedia>, and<geolocation>elements, paired with a live IDL reflection probe ('displayMode' in document.createElement('geolocation')). -
Icon variant & sizing inspector
Interactive geometry and UA style boundary workbench that measures bounding-box width compaction when switching from
defaulttext+icon mode toicon-onlymode, and tests CSS style guardrails (minimum hit area, prohibited opacity/transform spoofing, and contrast enforcement). -
Accessibility & security guarantees
Interactive accessibility tree and anti-spoofing verifier demonstrating how
display-mode="icon-only"suppresses only the visual label while preserving UA-generated localized accessible names (e.g."Use microphone") and enforcing IntersectionObserver v2 / compositor occlusion checks.
why it shipped
When web developers tested the initial <permission> / capability elements in video conferencing and mapping UIs, layout geometry emerged as the top adoption blocker: a four-button media control tray containing full text labels required over 600px of horizontal space, overflowing mobile viewports. By standardizing display-mode="icon-only" and icon-variant directly on the capability elements, the User Agent itself draws a recognizable, unspoofable camera, microphone, or location pin glyph inside a compact hit target — giving designers toolbar density without surrendering user-mediated permission trust.
research record — use cases & exact surface
- Exact surface: Content attribute
display-mode="icon-only" | "default"reflected via IDLelement.displayMode, andicon-variantreflected viaelement.iconVariantonHTMLGeolocationElement(<geolocation>) andHTMLUserMediaElement(<usermedia>,<camera>,<microphone>). - Feature detection: Check constructor existence (
'HTMLGeolocationElement' in window,'HTMLUserMediaElement' in window) and IDL reflection ('displayMode' in document.createElement('geolocation')and'iconVariant' in document.createElement('usermedia')). - Runtime flags: Enable in Chrome Canary/Dev with
--enable-features=PermissionElement,GeolocationElement,UserMediaElementor--enable-experimental-web-platform-features. - Use-case portfolio: (1) practical floating video call + map tray toggling
display-modeandicon-variant, (2) bounding-box compaction + UA CSS guardrail inspector, and (3) accessible name & compositor anti-spoofing security verifier.