html/css

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で検索するとデリヘルばっかりヒットするという不思議。

画像hover時のlineの扱い / 画像の内側にborderを乗せてみる

このblogをsimpleで表示すると、画像にマウスを当てた時、画像を囲むlineが動きます。
たとえばこのページの画像とか。
うにょうにょウザイですか?ごめんなさい。

ちょっと考えればすぐに判る単純な仕組みなので、解説するのも恥ずかしかったりするけど
:hoverの背景にアニメーションgifを指定して、paddingでアニメーションgifが表示される分の余白を作る。です。
これたぶんcssが有効になるよりかなり前の技術ですよね。
当たり前だけどhover前にも同じ余白を作っておかないとズレます。

innerにborderを引く技なんてのもあるけど、outerにあらかじめborderを設定しておいてもズレずに済むって話です。

imgの内側にborderを乗せてみた

http://sakurachiro.com/_exercise/html_css/inner-line/
firefoxとsafariとchoromeでdisplay:inline-blockの挙動が違う気がする、inline-tableも。
imgにvertical-align:middle;でli内aのhover時の下3pxが消える?

blockquote要素とcite属性にcite要素.

blockquoteとかciteとかどんな風に使うのがいいのかなぁという個人的なメモ。

基本

blockquote要素|<blockquote>
直接インライン要素を含めない
他人の文章と自分の文章を区別する
cite属性|cite=”引用元のURI”
引用元のURIを記述
title属性|title=”引用元のタイトルや補足情報等”
引用元のタイトルや補足情報などを記述
cite要素|<cite>
引用元のURIやタイトルなどの情報を表示させる時

そのまま使って記述してみるとこんな感じ?

「何で草食系なんですか?」の解(フヒヒヒ!鬱になる画像や文章を貼ろうよ その6

会社で「何で草食系なんですか?」と聞かれたので
奢りを当然と考え、財布も出さない。そのくせこちらが決めた店には文句をつける。
さらに記念日には必ず「気持ち」をプレゼントとして具体的な形として欲しがり
そして自分がプレゼントを渡すときには自分が要求したものよりはるかにチープな物を送り
「大切なのは気持ちだから」
こちらが忙しい、都合が付かないときでも
「会えないのはやましいことをしているからだ!」
無理に時間を作っても
「その日は他の用事があるから」
自分の都合を優先するがこちらの要求は聞かない。
「束縛しないで!」
と泣く。
どんなにクタクタでも女の愚痴だけは聞かされ続け、建設的な意見を言おうものなら
「解決策が聞きたいんじゃない。話を聞いて欲しいだけなのに!」
また泣く。
挙句「あなたは私を大事にしてくれない」とか言われたら、そりゃ草食系にもなるわ。
と、答えたら楽しいランチの時間が止まった。

上のソース

使用感
引用文が長いと、blockquote要素の前にcite要素を持ってこないと何の引用なのか、すぐに分からないから困る。
引用の前に但し書きがあれあば、また変わるんだろうけど、それならやっぱりcite要素を但し書きの代わり使えばいいような気がするし。
cite要素とblockquote要素を関連付けるものがない?。<label for=””>のような。
だからといってblockquote要素の中にcite要素を入れるのはblockquote要素の性質上おかしいんじゃないかって気がする。
そうすると結局divかdlで包むかことになるんだろうか?

でもそんな事いったら、ulやolだっていちいち前後のpやhxなんかと関連付けて使ってないしなぁ。
ナビゲーションで使う場合は別にして。

cite属性は書いてもポップアップで表示されないしリンクになるわけでもない。
Firefoxは右クリックプロパティで引用元のアドレスが見れた、
safariとGoogle Chrome(webkit?)は右クリックの要素を検証から見れた、
content:attr(cite);はIE7以下未対応でopera以外はコピペできない。

あんまり考えすぎないほうがいい。

xhtmlのxml宣言

cssに慣れてきてからというもの、xml宣言をしてIE6で互換モードになろうが
コーディングしていてレイアウト上で致命的に困る事なんて全くなかったので飾りとして付けてた
けれど外してみることにした。

「text/htmlでのxml宣言の必要性」あたりで検索してみると色々な考察や解釈が得られる
エキサイト翻訳で読んでみるとtext/htmlの場合はxml宣言がいらないように思えた。

2009年1月16日
http://www.w3.org/TR/xhtml-media-types/#text-html

XHTML documents served as ‘text/html’ will not be processed as XML [XML10], e.g., well-formedness errors may not be detected by user agents. Also be aware that HTML rules will be applied for DOM and style sheets (see guidelines 11 and 13).

Authors should also be careful about character encoding issues. See guideline 1 and guideline 9 for details.

2002年8月1日
http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/#text-html

A typical misunderstanding is that since an XHTML document is an XML document, the character encoding of an XHTML document should be treated as UTF-8 or UTF-16 in the absence of an explicit character encoding information. This is NOT the case when an XHTML document is served as ‘text/html’.

あと関係ないけど
http://www.w3.org/TR/xhtml-media-types/#C_11

A.11. Document Object Model and XHTML
Rationale: This will ensure maximum portability of scripts, since the DOM methods will return element and attribute names in uppercase when served as text/html and in lowercase when served as application/xhtml+xml.

text/htmlだと大文字で返して(return element and attribute names in uppercase)、application/xhtml+xmlだと小文字で返すみたい
前回のエントリーでtagNameが大文字になるのはそうゆう事だったのか。