« ココログ試用感 | トップページ | CSS 3 セレクタを使わなかった場合のソース »

2005-12-23

CSS 3 セレクタ最終草案リリース

対応ブラウザ: Mozilla Firefox Safari (CSS Level 3

CSS 3 セレクタ最終草案がほぼ予定の1ヶ月遅れでリリースされたようです。勧告まであと一息ですね。セレクタが充実してくると、class や id をタグ内に埋め込む割合が激減するので、何とか頑張って IE 7 にも実装してもらいたいところです。

ちょっと実例を出してみましょう。ソースをご覧いただければ一目瞭然ですが、以下のリンクには img タグはもちろんのこと、class や id も一切使わずにリンク先がサイト内外のいずれであるかや、リンク先のファイルタイプを CSS だけで判別して、適切なアイコンを付けています。(残念ながら IE や Opera では未対応。)

スクリーンショット (Windows XP SP2 + Firefox 1.5)

(X)HTML ソース

一応、(X)HTML ソースを掲げておくと、img 要素はもちろんのこと、ソースに class や id といった余計な属性が一切なく、とてもすっきりしているのが分かっていただけるかと思います。

<ul>
<li><a href="http://my-chunqiu.cocolog-nifty.com/blog/2005/12/csstarget__a2ca.html">サイト内へのリンク</a></li>
<li><a href="http://www.google.com">サイト外へのリンク</a></li>
<li><a href="mailto:foo@bar.baz">メールアドレスへのリンク(ダミー)</a></li>
<li><a href="dummy.pdf">PDF ファイルへのリンク(ダミー)</a></li>
<li><a href="dummy.doc">MS Word ファイルへのリンク(ダミー)</a></li>
<li><a href="dummy.xls">MS Excel ファイルへのリンク(ダミー)</a></li>
<li><a href="dummy.txt">テキストファイルへのリンク(ダミー)</a></li>
</ul>

CSS ソース

では、どうやってあの簡素な HTML からサイト内外の区別やファイルタイプの識別をしているのか?その答えが次ぎに掲げるソースにあります。

/* HyperLink style
---------------------------------------- */
/* メインコンテンツのみに適用させるため、div.entry の孫要素のみを対象にしてあります。(でないと、カレンダーにまでアイコンがついちゃうので..。(^o^;;ゞ) */

div.entry a[href^="http://my-chunqiu.cocolog-nifty.com/"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/link2local.png');
margin: 0 0.5em;
}
div.entry a:not([href^="http://my-chunqiu.cocolog-nifty.com/"]):after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/link2www.png');
margin: 0 0.5em;
}
div.entry a[href^="mailto"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/link2email.png');
margin: 0 0.5em;
}
div.entry a[href$=".pdf"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/page-pdf.png');
margin: 0 0.5em;
}
div.entry a[href$=".doc"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/page-word.png');
margin: 0 0.5em;
}
div.entry a[href$=".xls"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/page-excel.png');
margin: 0 0.5em;
}
div.entry a[href$=".txt"]:after {
content: url('http://my-chunqiu.cocolog-nifty.com/images/page-text.png');
margin: 0 0.5em;
}

CSS をそこそこいじった経験のある方なら、何となく察しがつくと思いますが、強調表示されている部分が CSS Level 3 のセレクタ(のごく一部)です。これだけでスタイルの及ぶ全ての要素に対して、適正にアイコンが付与されてしまうわけです。(今、Firefox でこのページをご覧になってる方なら、このページの中央ペインのすべてのリンクにアイコンがついてるのがお分かりいただけるかと思います。)

ここで使っているセレクタは次の通り。

Pattern Meaning Section CSS level
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar" Attribute selectors 3
E[foo$="bar"] an E element whose "foo" attribute value ends exactly with the string "bar" Attribute selectors 3
E:not(s) an E element that does not match simple selector s Negation pseudo-class 3

これ以外にも便利なセレクタがたくさんあります。先日、見切り発車で紹介した :target 擬似クラスもその一つです。CSS 3 セレクタについては Lucky bag::blog でも簡単な紹介がすでに出ているようなので、日本語での説明が欲しい方は、そちらを参照されるといいでしょう。もちろん、この Blog でも引き続き便利な CSS Tips を紹介していくつもりです。

|

« ココログ試用感 | トップページ | CSS 3 セレクタを使わなかった場合のソース »

日記・管理情報」カテゴリの記事

[Web]XHTML」カテゴリの記事

コメント

CSS 3 拡張属性セレクタと否定擬似属性セレクタの Safari での動作を確認しました。

http://browsershots.org/website/633718/

それにしてもこのサイト、すげ~。(笑)

投稿: ゆう | 2005-12-24 15:37

うっかりしてましたが、以下のソースを div.entry a:not([href^="http://my-chunqiu.cocolog-nifty.com/"]):after... よりも後に追加する必要があります。(「 CSS は後に書かれているものほど優先順位が高い」というルールを利用します。)

div.entry a[name]:after, div.entry a[id]:after {
content: "";
}

なぜかというと、このままでは <a name="foo"> や <a id="bar"> にもアイコンがついちゃうからです。(^_^;;)

投稿: ゆう | 2005-12-23 22:07

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/140252

この記事へのトラックバック一覧です: CSS 3 セレクタ最終草案リリース:

» CSS3 Selectors [Imaginary Affair]
Lucky bag::blog: CSS3 の Selectors と CSS3... [続きを読む]

受信: 2005-12-23 23:53

» CSS3 セレクタ でリンクのタイプ別にアイコンを付ける [ex_odusの日記]
*Firefox1.5で見てください。IEとは違う見え方になります(どこかが) CSSというとタグごとにclassを設定して、そのclassごとに文字色やボーダー、マージなどのスタイルを記述していくものだと思ってました。 [http://alexander.kirk.at/:title=alexander kirk] このサイトをFirefox1.5で訪れてみてビックリ、CSSだけでリンクのタイプ別にアイコンを付けているじゃないですか!(IEで訪れてみるともっとビックリしますよ。CSS3はIEで... [続きを読む]

受信: 2006-01-25 15:45

« ココログ試用感 | トップページ | CSS 3 セレクタを使わなかった場合のソース »