[CSS] IE7、IE8で動作しないだろうと思ったが動作するセレクタ
*出典: CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY
左21の一ヶ月(2013-04-02〜05-02)間のアクセス統計を見ると、IE6訪問は0.58%、IE7訪問は6%である。 まだIE7はサポートして、IE6は、最小限のレイアウトだけが表示できるようにしたいという考えだ。
IE7のサポートされる最小線でサムゲタンされ、変わったのができた。 IE6ではほとんど使用することができなかったものの中ではかなり多くのものが使用可能になったというのだ。 いつもIE6に基づいて公開したため、閉じ込められていた。 IE6から解放されてちょっと経っ出なければならIE7で意外に対応するセレクタが多いことに気づいた。 だから、一度整理をすることである。
CSS 1
E:first-line
、 E:first-letter
は、IE7、IE8の両方で動作します。 最初の行装飾よ星書くことないだろうが、最初の文字装飾をフォーム私だから書いてみるのも悪くないようだ。
CSS 2.1
E > F
:7/8をサポート。直下にある子を選ぶのセレクタですが、7/8の両方で動作します。E:first-child
:7/8をサポート。世界的に動作したという。 これからナビやフッター要素の左に線入れて、前面または最背面の線を消去するときは、選択子を使用してクリアすると良い。 (E:last-child
は7/8の両方をサポートしていない。)E:hover
:7/8をサポート。IE6はa
要素のみこいつが作動した。 7/8ではない。 一般的な要素の両方で動作するという。ナイス! 次に、UIを作るのがもっと自由になる。E:focus
:8のみをサポート。IE8のみをサポートします。 focusされる特定のスタイルを入力するか、アクセスのために入れた1px建てのリンクにfocusが来たら急に育てる場合にも使用することができる。E + F
:7/8をサポート。兄弟セレクタを使用することができたなんて。 本当に知らなかった。E[attr]
:7/8をサポート。アトリビュートセレクタ7/8の両方をサポートしたなんて世の中。E[attr="value"]
:7/8をサポート。アトリビュートの値を利用した選択者も7/8の両方をサポートした。 OTL;E[attr~="value"]
:7/8をサポート。スペースで切れているいくつかの値のうちの一つが良好であれば選択する奴だという。 リンクかけた例を見れば大まかに理解して行くことだ。 これはなぜなのかよく理解してはなら入って、何クラスと似ているアトリビュートがあれば使用するように作られたのか。E:before
:8のみをサポート。content: '♣';
ふうに使用される:before
仮想セレクタをIE8から使用できる!E:after
:8のみをサポート。content: '▼';
するように使用する:after
仮想セレクタをIE8から使用できる!
CSS 3
E ~ F
:7/8をサポート。ハック。 これは本当に意外だ。 これはEからFまでサグリを選択するやつです。 で、このクラスでなければならない。 子孫や先祖同士は適用されません。E[attr^="value"]
:7/8をサポート。アトリビュートの値が特定の値で始まる場合、エレメントを選択する。[class^="my_"]
このように接頭辞をもとに関連するこれらの人を一度に選択することができるのだ。E[attr$="value"]
:7/8をサポート。アトリビュートの値が特定の値で終了した場合の要素を選択する。[class$="_box"]
このように、サフィックスに基づいて、関連するこれらの人を一度に選択することができているのだ。E[attr*="value"]
:7/8をサポート。アトリビュートの値に特定の値が含まれている場合、その要素を選択する。[style*="block"]
要素のスタイルにblock
という文字が入った要素をすべて均等になるためにこのように使うことができるかもしれない。E[attr|="value"]
:7/8をサポート。が不慣れな選択は本当に一度もない使ってみたんだけど、特定のアトリビュートの値がハイフン( – )に接続された言葉の一つである場合に選択します。E[attr*="value"]
と何が違うのか?! と思うかもしれません、違う。class="myphonedesktop"
とclass="my-phone-desktop"
このとき、後者が選んたい場合は、この選択が必要だ。 (もちろん、E[attr^="phone-"], E[attr*="-phone-"], E[attr$="-phone"]
このように、3つのセレクタを上書きすると、このセレクタのような意味になったりするだ。)
感想
世の中にIE7 / 8がサポートするすべてのまともな選択が非常に多いことを今になって知った。 もちろん、問題はなかったと思う。 IE6で同じように正常に見えるパブリッシングをするには、CSSの上限をIE6に合わせてするのが最も楽だったし、それは悪くない選択だったと思う。 スタントを想起させる当然このようなものを使用することができただろうが、トリックをつかう程度の余裕を持って住んでいなかった。
ヨトン間、IE6の時代は行ったから今IE7で使用できるセレクタを存分に使っていただく縁だ!
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。