Invert page only by CSS

I recently saw the Paul Irish jQuery plugin to invert the page . It inverts every color on the page, including images and CSS. This reminded me of the existence of the invert keyword for the outline color (unfortunately, supported only in Opera and IE9 +). In general, I wondered how you can achieve the same effect only with CSS.

It turned out that it is quite simple:

body:before {
content:"";
position:fixed;
top:50%; left: 50%;
z-index:9999;
width:1px; height: 1px;
outline:2999px solid invert;
}


You do not need to include pointer-events: none for work. the contour does not receive events from the cursor, and also in this case there are no problems with scroll bars, since contour size does not affect scrolling. Plus, it's not even CSS3, but pure CSS 2.1.

Here is a simple js-bookmark (bookmarklet) that you can paste into any page ( from the translator : because you can’t insert JavaScript code for execution in Habré, below you can copy and execute it in a browser):
')

( function (){ var style= document .createElement( 'style' );style.innerHTML= 'body:before { content:""; position:fixed; top:50%; left:50%; z-index:9999; width:1px; height: 1px; outline:2999px solid invert; }' ; document .body.appendChild(style)})();


Note : this feature will only work in Opera and IE9 +, since currently only they support the “invert” keyword for outline color. However, you can probably implement something similar for Firefox using SVG filters, since it also supports their application to HTML elements.

On the question of why someone needs to invert the page ... I do not know, but I suppose that this may be useful for April Fools jokes, Konami code and other funny things.

( From the translator : this is how, for example, inverted Habr looks like:


ps By the way, Lea will speak at the Client Side-section at RIT ++ with the report "Mastering CSS3 Gradients".)
)