REDLINE MAGAZINE | 印刷用cssのリンクを属性セレクタで活用する

印刷用cssのリンクを属性セレクタで活用する

印刷用のスタイルシートを適応させる際にリンク部分に:afterとcontentプロパティを使って指定しているaタグのリンク先urlを表示させるTipsはいろんなサイトでよく見かける通り。

例えばこういう感じ。
リンクテキストの後ろにurlが（）で括られて記載されることになる。

a:link:after,
a:visited:after{
 	content: " (" attr(href) ") "; 
	}

(但しIEは未対応･･･バカッ)

その際、外部サイトなんかへのリンクは当然http～始まるurlが記載されることになり、意味ある内容になる。

しかしながら、内部のリンクに相対パスを利用してコーディングしている場合は同じ方法のままだと「hoge.html」だとか「../hoge/hoge.html」だとか「これじゃ意味ないぞ」という書き出しになる。

そこでCSS3の属性セレクタである、【要素名[属性名^="属性値"]】を使用して、内部の相対パスリンクもうまく書き出しできるようにしてみようという試み。

※属性セレクタに関してはこちらが参考になる。
CSS セレクタに関するおさらい | WWW WATCH
今回使うのはこちらのページのE[foo^="bar"]ってやつ。

で、結局この属性セレクタは何をするものかというと、その要素の中でその属性を持ってる上でその属性の値で始まるものに対してこういうスタイルを与えます、という記述。要素だとか属性だとかややこしいのだが、なんせ今回の場合は「このタグ(aタグ)のこの属性（href）で、属性の値(リンク先の最初の文字)がこれで始まるという条件に一致したらcss適応するやつ」と考える。

a[href^="/"]:after{
 	content:"(http://redline.hippy.jp"attr(href)")";
	}
	
意味
aタグの中に属性「href」があってその値の最初の文字が「/」の場合、そのurlの前に「http://redline.hippy.jp」という記述を加える。 	

問題点は2つ。 まず、IE未対応であること。（当然IE7もバカッ･･･。）
そしてこの方法を使う場合は相対パスは「/」から始まる絶対パスに置き換えなくてはならないということ･･･。例えば、sample/index.htmlというページから同じディレクトリのsample.htmlにリンクをはるのにhref="sample.html"と通常する部分も「href="/sample/sample.html"」としなくてはならない。面倒･･･か。なんかもっといい方法ないかな。

上記方法では結局ソースの一部に何かを追加するという使い方だが、逆にある部分だけは印刷させたくないっていうケースではこれ使い道あるかも。

追記：この使い方、面白いかも！
CSS で外部リンクにだけアイコンを表示 | WWW WATCH

CSS3属性セレクタについてはこちら

2007年01月12日 14:12 | Red | パーマリンク