html/css

Dreamweaverのスニペット使ってますか?

Dreamweaverにはスニペットというコピペ支援みたいな機能があります。

例えばFirebugでalert()の代わりに使っているconsole.log();を
以下のようにスニペットに登録して、ショートカットキーを割り当てると、選択したテキストを挟み込んでくれたり便利です。

スニペット

続きを読む

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

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

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

試しに以下のcssをコピペして
Firefoxで確認してもらうとハイライト部分の色が変わるです。
[css]
::-moz-selection{
color:#fff;
background:#ff7200;
}
::selection {
color:#fff;
background:#ff7200;
}
[/css]

ありました、と書いたわけは
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が消える?

[css]
img {
border:none;
vertical-align:middle;
}
a {
border:none;
display:inline-block;
overflow:hidden;
}
a:hover {
border:10px solid #333;
}
a:hover img {
margin:-10px;
}
[/css]