html/css

webkitでは(今のところ?)border-radiusのショートハンドが使えない事とか。

Firefoxだとこう書けるけどsafariやchromeではショートハンドが使えないので丸めたい角ごとに指定しないとダメみたい。

しかもmozとwebkitで指定が違う(面倒くさいなぁ)。

プレフィックスを外した時どちらが正式な記述なんだろうか?
[追記 / 20100903]
下記リンクを参考にするとどうやらwebkitの方が仕様に沿っているようですね。
CSS Backgrounds and Borders Module Level 3
[追記ここまで]

-moz-border-radius-topleft = -webkit-border-top-left-radius

-moz-border-radius-topright = -webkit-border-top-right-radius

-moz-border-radius-bottomleft = -webkit-border-bottom-left-radius

-moz-border-radius-bottomright = -webkit-border-bottom-right-radius

編集中 / HTML5、わからん事リスト。

ようわからん事

  1. articleとsectionの使い分けとか入れ子とか
  2. figureに含むfigcaptionは1つなのか
  3. <header id=”header”>みたいな表記をよく見かけるけど<header></header>にしない理由は? / headerはbody直下だけじゃなくセクション毎に発生するからidが必要なのかな、なんだかなぁ。

その他

nav(aside)に見出しがないとuntitled sectionになって気持ち悪いけど特に問題ないみたい。
HTML5.jp|質問の回答 #4 / Nav のタイトル(ドキュメント・アウトライン)

“untitled section” でも問題ない。outliner のディベロッパーには、”navigation” か、それに相当する言葉を使うべきだ、と提案されている。しかし、そうなるのかどうか、なったとしても、それがいつになるのかは、わからない。(直下に見出しがなければ、

jsを使わないcssだけのロールオーバーでポップアップ表示をする時、IE6.7に対応させる為に気を付ける事は

当初、やる必要は特にないけど、簡単に出来るだろうなと試してみたら
IE(tester)の7と6で全く思い通りにいかなかった
(IE6はdisplay:inline-block;、IE7はdisplay:inlineじゃなければポップアップが反応しなかったのでハックを使ったり
cssの指定も、ポップアップさせる要素の親ブロックからカスケード指定してこなければ反応しなかったり)
ので、挙動の違いをメモしておこうと、これを書いてたけど

何種類かサンプルを作って何度か書き直してるうちに、
IE6もdisplay:inlineでOKだったり、親要素から指定しなくても問題なかったり混乱する結果ばかり
そして最終的には全然シンプルに出来た。

なのでメモの必要もない感じになってしまったけどせっかくなので
以下、サンプルと気を付けた事、気づいた点のメモ。

続きを読む

label for|formのラジオボタンやチェックボックスをクリックしやすくするあれ。

明示的

inputのidとlabelのforを揃える / IE6でも使える。

暗示的

inputをlabelで包む / IE6が対応してない。

同じグループなのでname=”gender”は一緒。

動作サンプル|label for id

結局は、IE6が暗示的に結びつけられたlabelに対応してないから、記述の多い明示的な使い方をするしかなかったんですよね。
でも、もうそろそろ良いですよね。

formに必要なidとnameはDOCTYPEによって変わってくるみたい。

けどHTML4.01とXHTML1.0はとりあえず併記しておけば問題ないようだ
XHTML1.1は普段から使わないけど、formにnameを使わなければ問題ないぽい。
HTML5はどうなんだろう。

overflowでリストの最初だけborderを消すってヤツ

CSS HappyLifeさんが、overflowの便利な使い方(とっても使えるoverflowプロパティ。その使い方色々。)を公開してくださっていたので、fmfmと試してみたところ、いきなり02 リストの最初だけborderを消すでサンプル通りの挙動にならずに、つまづいたという話。

どんな風につまづいたかというと、IE6にて下の画像のようになってしまう。

IE TesterのIE6表示

文章で説明すると、liにborder-topを指定しているのに、margin-top:-1pxを指定するとliの下側に(ul?)borderが現れる、そしてliの2番目のborderが2倍になってる。
02 リストの最初だけborderを消すのサンプルをIE6で表示させても、そうならないから、うちの書き方がどこかミスってるんだろうか??

続きを読む

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

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

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

スニペット

続きを読む