記事本文
Opera の実装が正しくなりました
trashcan+green (beta) - そういえば9.0tp2になって属性に含まれるURIの扱いが修正されていたにて、 Opera 9.0tp1 の CSS 3 の Attribute selectors の実装で触れていた属性セレクタのおかしな実装が直っていることを知りました。
9.0tp1 がどういった実装をしていたかは Opera 9.0tp1 の CSS 3 の Attribute selectors の実装を読んでいただければ分かりますが、これでサイト内部へのリンクとサイト外部へのリンクのスタイルを分けたい場合に、 Opera でも期待通りのスタイルが適用できるようになったということです。
なお、なわけで。: IE7 Beta 2 をいろいろ試してみるによると、 IE 7 でも
E[foo^="bar"]
という前方一致型属性セレクタに対応しているようです。
href 属性値によって内部リンクと外部リンクのスタイルを変える - ケーススタディ
実際に、サンプルを作成して各ブラウザの実装を見てみましょう。
以降、この記事では
/
で始まる相対 URI によるリンクを内部リンク、
http
で始まる絶対 URI によるリンクを外部リンクと表記します。
@charset "utf-8";
body { color: #000; background: #fff; }
/*---- 文字色を変えて内部リンクと外部リンクを区別 ----*/
dl.classification a[href^="/"] { color: #666; } /* <a href="/2005/09/26/2113"> にマッチ */
dl.classification a[href^="http"] { color: #00f; } /* <a href="http://www.shimane-beer.co.jp/"> にマッチ */
/*---- content プロパティで内部リンクと外部リンクを区別 ----*/
dl.content a[href^="/"]::after { content: "(internal link: "attr(href)")"; } /* <a href="/2005/09/26/2113"> にマッチ */
dl.content a[href^="http"]::after { content: "(external link: "attr(href)")"; } /* <a href="http://www.shimane-beer.co.jp/"> にマッチ */このように書いたスタイルシートを適用した、 href 属性値によって内部リンクと外部リンクのスタイルを変えるサンプルをお手持ちのブラウザでご確認ください。 CSS 3 の Attribute selectors に正しく対応していれば、次のような表示になるはずです。
文字色を変えて内部リンクと外部リンクを区別
リンクを行っているテキストを含まない文
まあ、当日になってクレクレって言っても間に合わないので
内部リンクを行っているテキストを含む文
自分で買っておいた<!--ここから文字色が灰色-->ヤング チョコレートスタウト<!--ここまで文字色が灰色-->をいただいています。
外部リンクを行っているテキストを含む文
先日話題になった<!--ここから文字色が青色-->松江地ビール「ビアへるん」<!--ここまで文字色が青色-->のショコラ No.7 2005 というチョコレートビールが欲しかったのですが、あいにく売り切れとなってしまったんですよねえ。
content プロパティで内部リンクと外部リンクを区別
リンクを行っているテキストを含まない文
まあ、当日になってクレクレって言っても間に合わないので
内部リンクを行っているテキストを含む文
自分で買っておいたヤング チョコレートスタウト<!--ここに「 (internal link: /2005/09/26/2113) 」という文字列-->をいただいています。
外部リンクを行っているテキストを含む文
先日話題になった松江地ビール「ビアへるん」<!--ここに「 (external link: http://www.shimane-beer.co.jp/) 」という文字列-->のショコラ No.7 2005 というチョコレートビールが欲しかったのですが、あいにく売り切れとなってしまったんですよねえ。
href 属性値によって内部リンクと外部リンクのスタイルを変える - 対応表
さて、サンプルを各ブラウザで見た場合にどのように表示されましたか ? ここで、分かる範囲で各ブラウザがどのように表示するかを表にしてみました。 ただし、いくつかのブラウザについては実際にインストールして表示させてみたわけでなく、各地のサイトの情報を元にして書いていますので、予めご了承願います。
| IE 6 ( およびそれ以前 ) | IE 7Beta2 | Firefox 1.5.0.1 | Opera 9.0tp1 | Opera 9.0tp2 | |
|---|---|---|---|---|---|
| 内部リンクと外部リンクの文字色などのスタイルを分ける | 不可 ( 属性セレクタ E[foo^="bar"] に未対応 ) | 可 | 可 | 不可 ( 相対 URI も絶対 URI として扱ってしまうため ) | 可 |
| 内部リンクと外部リンクに ::after 擬似要素を指定し、それぞれ content プロパティによる文字列を追加する | 不可 ( 属性セレクタ E[foo^="bar"] および ::after 擬似要素に未対応 ) | 不可 ( ::after 擬似要素に未対応 ) | 一部不可 ( content プロパティによって追加する文字列が attr(href) の場合、相対 URI を絶対 URI として追加してしまう ) |
||
| ::after 擬似要素の content プロパティによる文字列を選択およびコピーする | 不可 ( ::after 擬似要素に未対応のため、表示すらされない ) | 不可 ( 画面上には表示されるが選択およびコピーはできない ) | 可 | ||
| スクリーンショット | セレクタも判定されず、文字列も追加されない | 未インストールのためスクリーンショットはありません | セレクタは正しく判定されるが、文字列はコピーできない | セレクタは判定されないが、文字列はコピーできる | セレクタは正しく判定され、文字列もコピーできる |
こうして並べてみると、 Opera 9.0tp2 の実装が私は一番好きですね。 :before 擬似要素 / :after 擬似要素の活用例 - blockquote 要素で引用元の明示のような例を考えると、やはりコピーできた方が何かと便利です。
なお、 Safari については、ちょうど良いリソースを見つけられなかったので含めていません。 Safari と content プロパティで紹介したように、 content プロパティの表示に一部のバグがあるものの ::after 擬似要素に対応している、というのは分かっていますが、 E[foo^="bar"] という前方一致型属性セレクタに対応しているかどうか、ご存知の方おられましたらお教えください。
我的春秋: CSS 3 セレクタ最終草案リリースが良くまとまっていて、 Safari でのスクリーンショットも公開していたようですが、大きいスクリーンショットが見られなくて残念。
トラックバック送信先
- trashcan+green (beta) - そういえば9.0tp2になって属性に含まれるURIの扱いが修正されていた
-
Opera 9.0tp1 と Opera 9.0tp2 の、 CSS の属性セレクタの実装の違いをサンプルを交えて解説してみました。
