css - 実際に CSS 2.1 セレクターを使用できますか?

Question

この質問の背後にある主な原因はもちろん IE6 です。Web サイトは 15% 以上の訪問者によって使用されているため、IE6 をサポートする必要があることに (ほぼ) 誰もが同意しています ( Yahoo の場合、IE6 はまだ A グレードのブラウザーです)。

IE6 は CSS 2.1 をサポートしていないので、スタイルシートで CSS 2.1 セレクターを使用できますか? 例を挙げましょう：

<body>
    <div class="header">
    </div>
    <div class="content">
        <h1>Title</h1>
        <p>First paragraph</p>
        <p>Second paragraph</p>
    </div>
    <div class="footer">
    </div>
</body>

私のcssは次のようになります：

body > div {width: 760px;} /* header content and footer = 760px wide */
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin */

しかし、IE6 はこれを理解できないので、ブラウザと互換性を持たせるには、次のように記述します。

.header, .content, .footer  { width:760px; }

おそらく、最初の段落にクラス名を付けて、css でそのように定義する必要があります。これらのルールを定義するIE6スタイルシート固有のものを作成できますが、それは非常に二重に思えます（そして、クラス名が必要な最初の段落の場合はまだ役に立ちません）...

score 2 · Accepted Answer

IE6 を 100% サポートすることに真剣に取り組んでいる場合は、IE6 で動作しない CSS の使用を避ける必要があります。これらの派手なセレクターを使用する理由の 1 つは、作業を楽にすることですが、とにかく IE6 用に書き直さなければならない場合は、作業が楽になるわけではありません。最後に、そのような派手なセレクターは Firefox では遅いので、まとめて避けるようにしてください。

score 1 · Accepted Answer

IE6 を「サポートする」という概念は間違った考えだと思います。それを拒否すると、IE6 ユーザーがサイトやコンテンツにアクセスできなくなるだけなのでしょうか? もちろん違います。問題は、サイトのエクスペリエンスを IE6 で他のブラウザーと同じにするためにどれくらいの時間を費やしたいかということです。

私自身の見解では、IE6 のユーザーはサイトのすべてのコンテンツとそのすべての機能にアクセスできるという点で IE6 を「サポート」していますが、Firefox 3 ユーザーと同じ視覚的または対話的なエクスペリエンスを得られない可能性があります。

あなたの質問に答えるために、はい、CSS 2.1 および 3.0 セレクターを使用して特定の効果を達成できます。ただし、コンテンツが IE6 用に存在し、許容できる視覚的外観を備えている場合に限ります。何が受け入れられるかは、プロジェクト (そしておそらくクライアント!) によって異なります。

あなたの例はこれの良いショーケースでした:

p { margin-top: 10px; }
h1 + p { margin-top: 5px;} /* the first paragraph after the h1 tag should have a smaller margin

ここでも IE6 は段落の内容を取得し、それらの間にすべての重要な空白が存在しますが、最初の空白の縮小された空白は取得されません。これは、HTML の混乱を減らすための公正な妥協点です。

別の良い例は、丸みを帯びた角です。とを使用-moz-border-radiusし-webkit-border-radiusて Firefox と Safari で角を丸くし、サイトのビジュアルエクスペリエンスを向上させることができますが、IE ユーザーは、昔ながらの四角い角でもコンテンツを取得できます (そして、人々のためにこれを実現するための JavaScript ソリューションがたくさんあります)。 JavaScript が有効になっている場合)。

これはすべて、 Progressive Enhancementという見出しの下に表示されます。

score 1 · Accepted Answer

プログレッシブエンハンスメントの観点からサイトデザインにアプローチする場合は、問題はありません。最新のブラウザーは ie6 を使用するブラウザーよりも優れたエクスペリエンスを提供するからです。手抜きをしたり、開発時間を節約したりするだけの場合は、サイトにとって ie6 ユーザーが重要かどうかを選択する必要があります。

score 0 · Accepted Answer

IE6 を無視するかどうかを決定するのは開発者ではなく、サイト所有者です。サイトの所有者にその特定のサイトの統計情報を提供してから、決定を下す必要があります。

あなた、または所有者がIE6の人々を犠牲にしないことに決めた場合、それらの派手なセレクターを使用することはまったく意味がありません. 大きなマイナス面があり、まだプラス面はありません。

score 0 · Accepted Answer

私のサイトのすべての IE6 ユーザーに対して、彼らのブラウザーは古いものであり、Firefox のような本物のブラウザーをダウンロードする必要があるという大きな赤い警告を受け取りました;] これが解決策です。ウェブマスターがそれをユーザーに言わないとしたら、誰が言うでしょうか?

score 0 · Accepted Answer

JQuery のようなJavascript 。
CSSハック。しかし、私はそれをお勧めしません。W3C標準ではないためです。
CSS クラス名。CSS Classname を使用すると、CSS Selector が置き換えられます。

score 0 · Accepted Answer

w3schools のような「ハイテク」な Web サイトでさえ、3 月の IE6 市場シェアは 17% と報告されています。

とはいえ、それをサポートするつもりなら、明らかに代替手段が必要です。

昨日、stackoverflowで IE8 のみをターゲットにすることに関する別の興味深いスレッドを読みましたが、それらをターゲットにできれば、各ブラウザーのサポートが容易になると思います。私は.net環境にいて、誰かがそのスレッドの約半分に投稿したアプローチを使用して、私のCSSセレクターが非常に簡単になるようにします:

body > div {width: 760px;}
.IE6 div.header, .IE6 div.content, .IE6 div.footer { width: 760px; }

明らかに、ブラウザをターゲットにする独自の方法を見つけることができますが、CSS は同様のものに相当します。

css - 実際に CSS 2.1 セレクターを使用できますか?

7 に答える 7

Related

Reference