CSS生成内容による属性値の表示とあれこれポップアップを組み合わせて使っている場合の問題点と、解決方法について述べてみます。 CSS2では、:before擬似要素や:after疑似要素とcontentプロパティを使うことにより、HTML文書の本文に無い内容を生成することができます。例えば、引用文のマークアップ(blockquote, q要素)について、title属性で示した引用元を表示させたりすることが可能です。 CSS生成内容表示サンプル ※ Firefox, OperaなどCSS2生成内容に対応したブラウザでご覧ください。CSSはHTML文書内にstyle要素として記述しています(以下のサンプルも同様)。 このようにCSSによりtitle属性の値を表示させている文書で、あれこれポップアップを同時に使用していると問題が起ります。マウスカーソルを該当の要素の上に移動させると、生成内容のうち
先のStylishを改造してみるの記事がCSSコミュニティスレで言及されまして、やや意外な展開となりました。かいつまんでまとめると以下のような感じ。 FirefoxのCSS実装では、text/htmlの文書の要素もXHTML名前空間を選択するセレクタで選択されるようだ。 <title>例</title> <style type="text/css"> @namespace h url(http://www.w3.org/1999/xhtml); h|p{display:none;} </style> <p>表示されない段落。</p> これは仕様上正しい動作なのだろうか。 @namespaceの規則からするとおかしいように見える。 和泉さんによりBugzillaへ報告。 えむけいさんにより、WHATWGのWeb Applications 1.0仕様に従ったものではないかとの指摘あり。 なるほ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
