2012年3月3日土曜日

css3のelement関数とjavascriptを使ってページ内リンク先のプレビューを表示する

※firefoxのみで動きます.
→css4に延期となったようですorz...
湯船に浸かりながらelement関数の使い途について考えてたんだけれど,アンカー要素のリンク先のプレビュー表示に応用出来るかもしれないと思いついた.
方針はこう.
  • プレビュー機能ははafter擬似要素をブロック化し,その背景にリンク先を表示させる.
  • リンク先の場所はanchor要素のhref属性の値を使う.hrefの値はattr関数が使えるかもしれない.
  • href属性には「#[リンク先のID]」の形式で格納されているので,attr関数で得た値をelement関数に渡すことが出来れば無事background-imageがリンク先の要素に設定されるはず.
で,結果は撃沈.
敗因はattr関数がまだ拡張されていないこと.確かにcss3では任意の属性値をcssから参照できるとの記述があるが,ブラウザ側がまだ対応していないのだ.また,そもそもcss関数を重ねることが仕様上出来るのか?ってのもかなり怪しい.
従って,おとなしくjavascriptを使って実装してみることとした.要素のコピーをしなくていい分シンプルで嬉しいのだが,cssだけで実現できそうだっただけに,ちょっぴり残念.

0 件のコメント:

コメントを投稿