CSS :modal Pseudo Class

Category: Miscellaneous
Type: Chromium catches up
Status: Enabled by default (Chrome 105)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Spec maturity: Working draft
Web Platform Tests: No

WPT details: https://wpt.fyi/results/css/selectors/modal-pseudo-class.html

Summary

A pseudo class selector to style dialog element. The :modal pseudo-class represents an element which is in a state that excludes all interaction with elements outside it until it has been dismissed.

Standards & signals

Specification: https://www.w3.org/TR/selectors-4/#modal-state
Firefox: No signal
Safari: Shipped/Shipping
Web developers: No signals
Tracking bug: https://crbug.com/1327113

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css%2Fselectors%2Fmodal-pseudo-class
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20%3Amodal%20Pseudo%20Class
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20%3Amodal%20Pseudo%20Class
Baseline status: https://webstatus.dev/?q=CSS%20%3Amodal%20Pseudo%20Class

Explainers: https://github.com/thebluewhale/docs/tree/main/explainer/modal

View on chromestatus.com