2004-11-27 アーカイブ

:before 擬似要素 / :after 擬似要素の使用例

:before、:afterってcontentプロパティ使って要素の前後にイメージやら文字やらを挿入するのにスゲェ便利だと思うのになぁ、って今仕事しながら思った。

同感です。 というか、 hxxk.jp の場合は随所に活用しており、 CSS の便利さを存分に噛み締めています。

私は e-luck さん ( Lucky bag::blog ) のアイデアのようなフッタ部分の更新には使っていません ( 共通のフッタを使って PHP で include ) が、細かい所でよく使っています。 この機会にご紹介。

blockquote 要素で引用元の明示

blockquote{
  color:             #cccccc;
  background:        transparent url("../materials/hxxk002_bg02.png") left top repeat-y;
  border:            1px solid #cccccc;
  margin:            1em 2em 1em 3em;
  padding:           0 1em;
  }

blockquote[title]:before{
  display:           block;
  color:             #cccccc;
  background:        transparent;
  content:         ""attr(title)" より引用";
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  }

blockquote[cite]:after{
  display:           block;
  color:             #cccccc;
  background:        transparent;
  content:         "引用元 URI : "attr(cite)"";
  text-align:        right;
  border-top:        3px double #99bbff;
  margin-top:        0.5em;
  padding-top:       0.5em;
  padding-right:     2em;
  padding-bottom:    0.5em;
  font-size:         80%;
  font-weight:       bold;
  }

このように、 blockquote 要素に title 属性が指定されていれば、 :before 擬似要素でその内容 ( 主に引用元の title 要素 ) を記述し、また cite 属性が指定されていれば、 :after 擬似要素でその URI を記述するようにしています。 前項の引用部分を見て確かめてください。

属性セレクタを使用しているため、 title 属性や cite 属性が指定されていなければこのスタイルは反映されません。 すなわち、 CSS のために HTML の記述方法に制限をかけることはありません。 ( この場合で属性セレクタを使わないようにすると、 CSS との整合性を取るために title 属性と cite 属性を指定しなければならなくなるという本末転倒なことに……。 )

pre 要素でソースコードの説明

pre{
  color:             #99ffdd;
  background:        transparent url("../materials/hxxk002_bg02.png") left top repeat-y;
  border:            1px solid #cccccc;
  width:             90%;
  margin:            1em 1em 1em 3em;
  padding:           0.5em 1em;
  overflow:          auto;
  }

*>pre{
  width:             auto;
  margin:            1em 2em 1em 3em;
  }

pre[title]:before{
  display:           block;
  text-align:        right;
  color:             #cccccc;
  background:        transparent;
  content:         attr(title);
  border-bottom:     3px double #ccddff;
  margin-bottom:     0.5em;
  padding-top:       0.5em;
  padding-bottom:    0.5em;
  padding-left:      1em;
  font-size:         80%;
  font-weight:       bold;
  font-family:       "Trebuchet MS",sans-serif;
  }

pre em{
  color:             #ff0000;
  }

このように、 pre 要素に title 属性が指定されていれば、 :before 擬似要素でその内容を記述するようにしています。 私の場合は pre 要素を使う場合は、たいてい HTML や CSS のコードを書く時ですので、 title 属性はそのコードの説明になります。

これも属性セレクタを使用しているため、 title 属性が指定されていなければこのスタイルは反映されません。

del / ins 要素で削除 / 追記時間の明示

del{
  text-decoration:   line-through;
  color:             #666666;
  background:        transparent;
  }

del[datetime]:before{
  margin-left:       1em;
  content:         " ( "attr(datetime)" 削除 ) ";
  text-decoration:   none!important;
  color:             #cccccc!important;
  background:        transparent!important;
  }
  
ins{
  border-bottom:     1px dotted #666666;
  text-decoration:   none;
  }

ins[datetime]:before{
  margin-left:       1em;
  content:         " ( "attr(datetime)" 追記 ) ";
  text-decoration:   none!important;
  }

このように、 del / ins 要素に datetime 属性が指定されていれば、 :before 擬似要素でその内容を記述するようにしています。 datetime 属性は削除 / 追記の時間を表すため、いつ修正を行ったかを分かりやすくすることができます。 たとえば、「今日は 2004 年 11 月 26 日 2004 年 11 月 27 日 です。」といった風になります。

これも属性セレクタを使用しているため、 datetime 属性が指定されていなければこのスタイルは反映されません。

:before 擬似要素 / :after 擬似要素の対応状況

……と、自動的に補助情報を提供できる :before 擬似要素 / :after 擬似要素ですが、残念ながらブラウザごとに対応状況が違います。 現在私がインストールしているブラウザで確認したところ、以下のような結果になりました。

Mozilla Firefox 1.0

:before 擬似要素 / :after 擬似要素を表示することができますが、 content プロパティによって追加された内容をコピー & ペーストすることはできません。 あくまで CSS によって追加された内容であるので、本文ではないとして扱われているのかもしれませんが、個人的には不便だと思っています。

Opera 7.53

:before 擬似要素 / :after 擬似要素を表示することができ、 content プロパティによって追加された内容のコピー & ペーストも可能です。

Internet Explorer 6.0 SP1

:before 擬似要素 / :after 擬似要素に非対応のため、スタイルを完全に無視します。 :firest-letter :first-letter 擬似要素には対応しているのになあ……。

Mozilla Firefox と Opera に対応状況の差がありますが、どちらがより正しい挙動なのかは知りません。 ただ、引用元の URI をコピーしたい場合などがあるため、私は Opera の挙動の方が好きです。 Mozilla Firefox を使用している時は、 ContextMenu Extensions - コンテキストメニュー・メニューバーの追加機能の「引用元を表示」を使っているので不便すぎる、ということはありませんが……。

関連リソース

• :before 擬似要素 / :after 擬似要素の活用例 (2)
• Safari と content プロパティ

トラックバック送信先

• Lucky bag::blog: after擬似要素を使いたい

ping URI というもののポジション

今やたいていの weblog ツール、 weblog サービスに備わっているトラックバック機能ですが、 weblog の作成者はそれを受信するための URI を準備しておかなければいけませんし、トラックバックを送信する側の人はその URI を知らなければトラックバックを送信することができません。 まあ、その辺りの詳しい話はトラックバックの技術仕様を参照していただくとして。

weblog の作成者は、トラックバックを受信するための URI をトラックバックを送信しようとする側に対し、どういった形で提供するかという点にも気を配った方が良いでしょう。 目に付きやすいところ、あるいは関連性が高いところ ( 受信済みトラックバック一覧の近くなど ) に配置するのはもちろんのこと、その URI をコピー & ペーストで送信者の weblog の管理画面に貼り付ける際の手間をどう軽減するか、といった点も細かいながらに重要な点だと思います。

各種パターンの実例

私の巡回先や、「これは ! 」と思ったものからピックアップします。 なお、実例中の操作については Windows XP + Mozilla Firefox 1.0 という環境として書いています。

特別なことは行わず、テキストのまま提供

• Lucky bag::blog: 厳しい世の中です - このエントリーのトラックバックURL

最もオーソドックスな手法。 トラックバック送信者は URI をマウスでドラッグしてコピー、という操作になると思います。 あるいはマウスを URI の一部分に載せて、トリプルクリック。

a 要素でリンクを張って提供

• Reread(2004-11-26) - TrackBack URL

<a href="ping URI">ping URI</a> とした手法。 マウスでドラッグしてコピー、という操作でも良いですし、補助クリック→「リンク URL をコピー」という操作でも良いです。

利点としては、ドラッグミスによる URI コピーの失敗を防げるということ、逆に欠点としては、初めてその方法に出くわした人が多少なりとも混乱してしまうことでしょうか。

シングルクリックで一発選択

• Zakimi::Blog: TrackBackのアドレスを自動選択 - Post a TrackBack
• nlog(n): Trackback URL 選択スクリプト - Trackback URL (T)

JavaScript を用いて、一回クリックするだけで ping URI 全体を選択できるようにした手法。

利点としては、ドラッグの手間を省けるということ、逆に欠点としては、 JavaScript が有効でないといけないということでしょうか。 それでもテキストのまま提供と同じになるだけなので、欠点とは少し違うのかもしれませんが……。

マウスホバーで一発選択

• Soul de Gosmaniax: ありゃ、新ブログのカウンタが動いてない - このエントリーのトラックバックURL

JavaScript を用いて、マウスが ping URI の上に載った時点で自動で選択するようにした手法。

利点としては、ドラッグどころかクリックの手間を省けるということ、逆に欠点としては、 JavaScript が有効でないといけないということでしょうか。 また、人によってはホバーのみでの動作を煩わしい、と思う人もいるようです。

シングルクリックで一発選択が好き

私はシングルクリックで一発選択の方式が一番良いかな、と思いました。 近日中に実装してみようと思いますが、皆さんはどの方法が良いと思うのでしょうか。

「自分はこっちの方法の方が良い」とか「他にもこんな方法があるよ」といったご意見・情報提供をお待ちしています。