生意気にもcss3使ってます
スポンサーサイト
--------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
html5とかcss3とか
2010-06-18
移転するーとかいって一年以上放ったらかし忘れていたんですけど、夏コミ当選したのでちゃんと移転しました
これからは最低月一更新していきたなぁ(ぇ


気が早いとは思わないでもないが、ついでなんでhtml5とcss3で書いてみました
いまのところはChrome(Safariも?)が一番いいかな
Fxはスクロールするとカクカクする、未実装がChromeより多いのとなんかちょっと挙動がおかしいのが…
IEは未対応なんでアウトオブ眼中(死語?)
IE9をまつかGoogle Chrome Frame β入れるといいことあるかもね
IEでのChromeレンダリングエンジンのプラグインでうs
これ入れとくと対応ページでhtml5、css3が見れるようになります
IE6でも使えるよ

で、肝心のhtml5、css3なんですが、こんなブログで使う意味あるの?とかいわれそうだけどまあいいや(笑
簡素なブログ程度じゃ画像使わないといけなかったデザインが画像なしでも出来るようになったよぐらいなんで
ちぃとflashじみたこともできるにはできるけど、Fxではまだ無理なんだよね
特に(てか、できません)が、思ったこととしては

html5からのタグで使用頻度が高そうな、
<header><footer><section><article><aside><nav>
これは、例えばいままで<div id="header">としてたものが<header>でよくなるものなんだけども、<section>とか<aside>とか<nav>とか使用範囲の境界がわかりにくくて<div>との使い分けでちと戸惑うんだよね、とりあえずボクは
いまのところ書き換えることによる恩恵とかないので(ないよね?)、<div>のままでいいような気がしないでもない

んで、css3なんですが、こっちはなかなかいいよね
display : box;
とか便利だった
いままでブロック要素を並べるときはfloatを使ってたのが、親要素にこれを指定すれば子要素を縦揃えて横並びにしてくれるという
clearしなくていいというのもポイント
box-ordinal-groupを使えばブロック要素の表示順を変えれるので、ソースに書く順も楽に変えられるしね
なんですけどねぇ
Fxがだねぇ、親要素がインライン的な挙動をするという変な仕様
親要素にwidth指定してやらないと中身に合わせて幅が決定、あと親の親に指定してしてあるtext-alignが有効と.........
なにこのインライン挙動
Fxにはpadding絡みのバグとかあるらしいし、たぶんFxのほうがおかしいんだと思う
まあ基本的にはwidth:100%;指定してやればいいのでそこまで支障はないですが
ただ、子要素内にjavascripがあるとbox-ordinal-groupが効かなくなったんだけども・・・・・・なじぇ(´・ω・`)
あと、検索ワードが悪いのかもしれないけど、ググッても出てこなかった子要素の中央揃えの方法を覚書用に書いておこう
html
<div class="space"></div>

css
div.space {
	-webkit-box-flex : 1; /* GC,Sa */
}
を子要素の両端に入れれば中央揃え、真ん中に入れれば両端寄せ
これはbox-flex:1;が指定されているとブラウザ幅に合わせて幅が自動調節されるのを利用しただけ
簡単なのになかなか思いつかなかったもので(;´▽`A``
margin autoが効けばこんなことしなくていいのになあ

まだ未実装やらあるし、仕様に関しても最終決定してないはずなので、細々変わるのだろうけど、
記述はさっさと統一して欲しいなと思ったのでした。(ブラウザごとに書くのはメンドクサイヨ
テーマ : どーでもいいこと
ジャンル : その他
tag : cssとか
prev «  | home |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。