スタイルシートメモ

2005年5月6日(金) 12時38分 by level
B ?

久しぶりにスタイルシートを少しだけいじってみたのでメモ。

えむもじらでは英語のページへのリンクには [en] という印をつけているのだが、従来これを直接本文に書き込んでいた。

<a href="http://mozilla.org/">Mozilla Foundation</a>[en]

これを a タグの lang 属性 hreflang 属性を元に CSS で表示するように変更してみた。

<a href="http://www.mozilla.org/" hreflang="en">Mozilla Foundation</a>
a[hreflang="en"]:after{
  content: "[en]";
}

という具合。一応これでも十分であるが、極まれに [fr] なんてのもあるので、言語ごとに記述するのも芸が無いなと思って調べてみると、これがうまいやり方があった。

a[hreflang]:after{
  content: "[" attr(hreflang) "]";
}

これで完璧だ(表示例。ちなみに、IE は :after 擬似要素に対応していないのか表示されない)。過去記事分も a タグ+[en] のついた全コンテンツをスクリプトで lang 属性に一括変換して完了。もっとも、最初から [en] をつけ忘れしたリンクも少なからずあるのでそれは仕方がない。

PS. (早速海馬日記さんより「その場合はlang属性ではなくhreflang屬性のはうが良いでせう」との突込みがあったので修正。)


ところで、blockquote の cite 属性や title 属性を上のやり方と同じように :after 擬似要素で表示するのをよく見かける。

引用本文(cite+title付き)

が、Firefox の場合、引用元を実際に見てみようとしたときに、CSS の content プロパティで生成された cite 情報はブラウザからはコピーすることも、url に移動することもできない(Opera の場合コピーは出来る)。これは結構フラストレーションがたまる場合がある。もっとも、他人の文章などを引用する場合、引用元を明確に示す義務があるので、引用文とは別にどんなブラウザでも表示されるように別途引用元へのリンク情報等を用意するのが筋ではあるが。

PS. cite にアクセスする拡張があるだろうなと思って調べてみると、やっぱり紹介しているブログがあった。

コメント (2)

1 5/06 20:33 いけだ
(c1) [2005/05/06 20:33:08] by いけだ

生成要素が選択できないのは、本家にバグ登録されてました。
https://bugzilla.mozilla.org/show_bug.cgi?id=12460
同じく不便に感じていたので、Voteしてきました。

あと、JavaScriptでポップアップさせるものもありました。
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

2 5/06 21:27 mal
(c2) [2005/05/06 21:27:26] by mal

site つきの要素を右クリック -> Properties
-> Quote Properties, Info: からコピペできますが、
面倒だし、site つきかどうか判断するのが面倒なことも。

トラックバック (1)

トラックバックは検索対象外です。

この記事にリンクしているページ < >

  1. [57] http://beau.g-com.ne.jp/mon-extension-memo07_08-4.html