カテゴリー: CSS3

CSS3 / テキストを選択した際のハイライト表示のコントロールが

css3にテキスト選択時のハイライト表示色を変更する::selectionてのがありました。

確認用html / http://sakurachiro.com/_exercise/html_css/css3-selection/

試しに以下のcssをコピペして
Firefoxで確認してもらうとハイライト部分の色が変わるです。

ありました、と書いたわけは
W3C Working Draft 10 March 2009E::selectionを確認できなかったからです。

selectionで検索すると
http://www.w3.org/TR/css3-selectors/#UIfragments

7.3. Blank

This section intentionally left blank. (This section previously defined a ::selection pseudo-element.)

という部分がヒットしてそのname属性UIfragmentsとは何だろうと検索したら以下のページがヒットしたです。

http://www.tagindex.com/cgi-lib/q1bbs/patio.cgi?mode=view&no=4248

::selection は「何かメンドクセ」ということで、今年に入って CSS3 から削除されたよ。

http://www.w3.org/blog/CSS/2009/02/05/resolutions_51

Resolved: Drop ::selection from Selectors Level 3. Rationale: It’s vastly underspecified, and implementations are not interoperable. We can add it back in Level 4 once we have a good definition.

ちなみにE::selectionで検索するとデリヘルばっかりヒットするという不思議。


cssセレクタ|パターンマッチングとか

外部サイトへのリンクには判りやすいアイコンをつけたいな、と思った
どうせなら外部リンク一つ一つにclassを付与する方法ではなく、今まであんまり使わなかったcssの指定でなんとかならないかな、とも思った

‘外部リンク アイコン’で検索したらヨモツネット|外部リンクだけにアイコンをつけることのできる CSS のセレクタが上位にヒットしたので参考にさせてもらい、勉強の為 htmlにまとめる。

[追記|2009年9月9日2:24]
外部内部どっちにもアイコンが表示される不具合があったので一応修正(できてる?)

練習の方は

みたいにアイコンをbackgroundで表示してるけど、blogの方は

てしてた。

その場合 http の url にマッチしたものにアイコンをつけて、その後でhttp://blog.sakurachiro.comやhttp://sakurachiro.comと自分のドメインにマッチしたもののcontentを消す事になるんだけどcontent:noneで削除してた。

詳しくメモるの忘れたけど、たぶんFirefox以外のoperaやIEやwebkit系で表示すると、「http://blog.sakurachiro.com」や「http://sakurachiro.com」以下へのリンクにもこのアイコン画像()が表示されてておかしいなa[href^=”http”]:afterて効かないのかな?いやいや試したじゃないかと首を傾げながらcssをいじっていると
content:none、これどうもFirefoxしか対応してない。
でcontent:” “;でアイコンを上書きしてみたんだけど、content:” “;て大丈夫なのか?

もう一回ヨモツネットさんはどうやってるんだろうと確認しにいったらページが表示されなくなってた、
たしか、IE6も対応するような丁寧なつくりだった記憶があるんだけど、残念。

[追記|2009年9月3日15:52]
http://sakurachiro.com/_exercise/stylesheet/index.htmlにアップしてあるけど、もうちょっと命名法を考えないと次のサンプルを作ったときに困るんじゃないのか?>自分
[/追記]
例のごとくちょっと遠いところからスタートしてしまい、当初の目的を見失いつつある。

原理はcss3のE[foo^=”bar”]を使って、httpから始まるリンクをパターンマッチさせるというもの。
httpから始まるということは絶対パスというもので、絶対パスを使うと言う事は外部サイトへのリンクの可能性が強いという事だからかな?