The _::-webkit-full-page-media hack

Last updated 2016-01-12.

The hack

_::-webkit-full-page-media, .your-selector-here {
  /* your declarations here */
}

Discovered by Jeff Clayton (source)

Live testcase

If the square above shows the word "Affected", then your browser supports this hack.

How it works

The underscore is a tag selector that selects <_> elements, which is to say elements whose tagName is "_" (as opposed to e.g. "div"). Of course, HTML doesn't define any <_> element, so this won't match anything, thus preventing this CSS rule from affecting anything besides .your-selector-here.

::-webkit-full-page-media is a proprietary, WebKit-specific pseudo-element. Its name suggests it's probably related to full-screen video. When browsers see a CSS selector with a pseudo-element they don't recognize, they drop the entire CSS rule associated with it. As of 2016-01-08, although Chrome uses Blink, which was forked from WebKit, Chrome doesn't implement the ::-webkit-full-page-media pseudo-element. Although MS Edge and Firefox have been known to implement WebKit-prefixed features for compatibility reasons, as of 2016-01-08 neither of them has implemented this pseudo-element either. Thus, only WebKit-based Safari considers the selector valid and continues parsing it.

Affected browsers

Check out the links for corroborating screenshots.

Test results

Chrome	OS X Safari	iOS Safari	Firefox	MS Edge1	Internet Explorer
48 Unknown	10 Unknown	9.3 Unknown	46 Unknown	13 Unknown
47 Unaffected	9.0.2 Affected	9.2 Affected	45.0a2 Unaffected	12.10240 Unaffected	11 Unaffected
46 Unaffected	8.0.8 Affected	8.4 Affected	44.0b7 Unaffected	12.10166 Unknown	10 Unaffected
26 Unaffected	7.1.7 Affected	7.1 Unaffected	43.0.4 Unaffected		9 Unaffected
25 Unknown	6.2.7 Affected	6.1 Affected	4.0.1 Unaffected		8 Unaffected
	5.1.7 Affected	5.1 Affected			7 Unknown
	4 Unknown	4.3.5 Unknown