CSS反転ページのみ

最近、 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。」

）