最近、
Paul Irish jQueryプラグインがページを反転するのを見ました。 画像やCSSなど、ページ上のすべての色を反転します。 これにより、
アウトラインカラーの反転キーワードの存在を思い出しました（残念ながら、OperaおよびIE9 +でのみサポートされています）。 一般に、CSSでのみ同じ効果を達成する方法について考えました。
それは非常に簡単であることが判明しました：
body:before {
content:"";
position:fixed;
top:50%; left: 50%;
z-index:9999;
width:1px; height: 1px;
outline:2999px solid invert;
}
動作するために、
ポインタイベントを有効にする必要はありません
：none 輪郭はカーソルからイベントを受け取りません。また、この場合、スクロールバーに問題はありません。 輪郭サイズはスクロールに影響しません。 さらに、これはCSS3でさえなく、純粋なCSS 2.1です。
これは、任意のページに貼り付けることができる単純なjs-bookmark（ブックマークレット）です（
翻訳者から ：実行するためにJavaScriptコードをハブに貼り付けることができないため、以下はブラウザでコピーして実行できるコードです）。
( 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)})();
注 ：この機能はOperaおよびIE9 +でのみ動作します。 現在、アウトラインカラーの反転キーワードのみがサポートされています。 ただし、SVGフィルターを使用してFirefoxに類似したものを実装することはおそらく可能です。 HTML要素へのアプリケーションもサポートします。
なぜ誰かがページを反転する必要があるのかという質問に...私は知りませんが、エイプリルフールのジョーク、
コナミコード 、その他の面白いことに役立つと思います。
（
翻訳者から ：このように、たとえば、反転Habrは次のようになります。
psちなみに、Leaは
RIT ++のクライアントサイドセクションで 「Mastering CSS3 Gradients。」
）