ブラウザのCSSの読み方

会社で聞いた豆知識をメモ。

その人によると、
ブラウザというものは、CSSを子セレクタから順番に読んでレンダリングしていくというのです。

たとえば、

ul#list li a{
sss:xxx;
}

という記述があったとします。

通常の、JS系の解釈から考えると、

1. まず、#listのulを探し、
2. その中のliを探し、
3. aを探し、
4. aに対してプロパティを指定する

という流れだと思います。


でも、ブラウザのレンダリングはそうではなくて、

1. まずaを探し、
2. 親にliを持つaに絞り、
3. さらに親にul#listを持つものに絞り
4. 絞ったものにプロパティを指定する

流れだそうなのです。


だから、ブラウザのレンダリング速度を向上したければ、
子要素にID（やクラス）を指定するのが効果的なのだそうです。
（もちろん、ソースがきれいか汚いかという問題は除いて。）


どうも、コーダーの視点からすると、マークアップをキレイにする方法ばかりに目がいってしまいがちなのですが、
『お客さんの更新しやすさ』
『ユーザーの訪れやすさ、快適さ』

もきちんと考えてマークアップしていかないとなと思ったのでした。

CSS3を試してみる column、border-radius、multiple background

Firefox3.6ではついにCSS3がテスト実装されたと聞きまして（ちゃんと調べてません）、
CSS3でページを作ってみました。
作ったの自体は去年だったんですけど、完成を待ってるといつになるかわからないので、
この段階でいったん公開してみます。

こちら↓
http://www.granshe.com/css3/


確認してみましたが、
Safariでは確実に複数背景画像・border-radiusが実装済でした。
Firefox3.5だと、「まあまあ、マルチカラムと角丸くらいはぼちぼち。」な感じでした。
IEは8でも、うんともすんともでした。

columnはともかく、border-radiusや複数背景画像の指定がうまくいくようになったら、
今よりだいぶソースがすっきりするんじゃなかろうかと思う。

画像をスライスする手間も省けるし、
今よりずっとサイト上でデザインを再現するのが楽になるんだろうな（予想）。
実際に仕事で使っていくかどうかは、対象ブラウザやサイトの仕様やいろいろな問題で、
もう少し先になるかもしれないけれど、楽しみ。

HTML5よりは、CSS3のほうが期待が大きいかな。



参考

角丸にするJS＋角丸＆複数背景JS
http://ascii.jp/elem/000/000/416/416811/
http://articles.sitepoint.com/print/rounded-corners-css-javascript

マルチカラムJS
http://www.alistapart.com/articles/css3multicolumn/
デモ
http://www.csscripting.com/css-multi-column/

display: table-cell で vertical-alignを実装

サイトを作っているとき、既存のCSSではどうにもならない場面があった。
たとえばこんな場面で、赤ボーダーで囲まれた部分の下にもう一行テキストを追加したいとする。

• １
• ２
• ３

テキスト。

---

この赤ボーダーで囲まれたテキストは、マージンによってセンタリングされているため、
この下にさらにテキストを追加しようとするとこうなってしまう。
（ここでは「テキスト。」ごとにひとつのPタグでくくっているので、下記の表示は、
2つのPタグをDivで囲んでいます。）

• １
• ２
• ３

テキスト。

テキスト。

---

そこで、下記のようにマージン調整してやる。

• １
• ２
• ３

テキスト。

テキスト。

---

このやり方だと、テキストが1行になるときと2行になるときでいちいちクラスを分けなければいけないし、文字サイズを大きくしたときにレイアウトが崩れてしまう。
そこで、display: table-cellを使うことを思いつきました。

なぜdisplay: table-cellを使うのかというと、vertical-alignプロパティを使いたいから。
vertical-alignというのは、インライン要素かテーブルのセルにしか効きません。
インライン要素にするとフロートがうまくいかなさそうだったので、display: table-cellを使いました。

2行でも。

• １
• ２
• ３

テキスト。

テキスト。

---

1行でも。

• １
• ２
• ３

テキスト。

---

ただし、heightを指定してないときちんとvertical-align: middle;してくれないみたいです。
会社帰りの電車の中で急にこれを思いついて、 試しにやってみたらうまくいったので、即席で記事を書いてます。
ですのでブラウザチェックはしていません、ご了承ください。（動作確認：Firefox3）
（近いうちに確認するつもりです）

お仕事していると勝手にCSSをいじれない場面もあり、
想定していない場所にコンテンツ追加の以来が舞い込んだりもします。
なるべく使いまわしの効く、伸縮自在なコードを見つけていければなと思います。

---

7/11追記
ブラウザチェックしてみましたが、各ブラウザの最新バージョンでないと際限が難しいようです。。。
再現OK：IE8、Firefox2/3、GoogleChrome2、Opera
私の制作環境はSafari3なのですが、Safari3ではレンダリングされませんでした。
ですが、Chrome2で再現可能なところを見ると、もしかするとSafari4だとレンダリング可能かもしれません。

IEでmargin-bottomがfloatした要素にも適用されるバグ

先日制作作業をしていたら出くわしたバグについてのメモ。

ボックスの中に、margin-bottomを指定した要素を配置していて、
その後続の要素がすべてフロートしていた場合、
margin-bottomがフロートしているボックスの下にmargin-bottomが発生し、
フロートボックス群と親ボックスの間にmarginができるというものです。

発生環境

• IE5.5
• IE6
• IE7

発生条件

• あるボックス内で、１つの要素（Aとする）以外がすべてフロートしている。
• 要素Aはフロートボックスよりも前に記述されている。
• 要素Aにmargin-bottomが指定されている。
• 要素Aの親ボックスに高さを指定しているか、
  displayをinlineやinline-blockにしている

以上の条件を満たすと、
要素Aに指定したmargin-bottomが、フロートしたボックスにも適用されてしまいます。
例を見る。
おそらく上記ページをIE7以下で見ると表示がおかしくなるのではないでしょうか。

フロートボックスにmargin-bottomが適用されないというバグは以前ご紹介しましたね。

どうしてもこの条件で余白を明けたい場合はpadding-bottomを使うしかなさそうです。
私の場合はpadding-bottomで解決できたのでよかったですが。

今まで出くわしたことのなかったバグだったのでIE標準モードだけでのことかと思ったのですが、
xml宣言をつけた互換モードでも同じバグが確認できました。

きちんと覚えておかねば!

定義リストdlのリスト項目ごとに下線を引く方法

以前、最新情報リストを作るとき、下記のように、日付と、内容のペアごとに下線が引かれているデザインが上がってきたことがありました。

このように、日付と情報をペアにしたような情報を表示する場合、
私はほとんど定義リストを使っていました。
方法としては、dtにfloat:left;をかけ、ddを右に回り込ませ、それぞれに下ボーダーを指定するもの。その場合、たとえば下図のようにdtが1行でddが二行になってしまう場合はボーダーがもちろんズレます。

この状況を回避するすべを知らなかった私は、当時、

<dl><dt>2009年4月1日</dt><dd>入社式がありました。</dd></dl>
<dl><dt>2009年3月23日</dt><dd>卒業式がありました。</dd></dl>
<dl><dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd></dl>

という暴挙に出ていました。
当時は、汚いコードだなとは感じつつ、デザインを犠牲にしたくないという思いが強くて、
これで実装していました。

が、先日、

<dl>
<dt>2009年4月1日</dt><dd>入社式がありました。</dd>
<dt>2009年3月23日</dt><dd>卒業式がありました。</dd>
<dt>2009年1月31日</dt><dd>卒論発表会がありました。</dd>
</dl>

のコードで下ボーダーを実現する表現を、社内のフロントエンドエンジニアの方に教えていただきました。

1. dtに幅を指定する。
2. ddに対し、dtの高さと同様の数値のネガティブマージン（padding-top）を指定。
3. ３．ddに対し、dtの幅と同じ数値のpadding-leftを指定。
4. ddに対し、border-bottomを指定。

こうすると、border-bottomはddにかかっているので、
ddの項目が増えたとしても線は段違いにならずまっすぐ引かれます。

dtの幅をemなど相対的な表記にすると幅が可変になるので、文字サイズの変化にも対応できます。
他にも、絶対配置と相対配置を駆使すれば実現可能だと思います。（未確認）

今まで、絶対配置やネガティブマージンにあまり良い印象がありませんでした。
理由としては、なんだかHTMLのデフォルトの配置を乱すイレギュラーなものだという見方があり、ブラウザ間で表示の差異が出そう、という気がしていたからです。

実際今回の例ではブラウザの差異は出なかったし、
多少、CSSが汚いかなぁという気もしますが、こうやって実装することができるんだなと感動しました。

最近制作から実を離していたので、新しい技術に目を向けることが多く、
そんな学習の仕方で良いのかなぁ、という疑問が湧いてきているころだったので、
この方法を教えてもらったときはかなり感動してしまいました。

技術的な面での発見はもちろん、
今までHTMLコードが汚かったのは、デザインのせいでも、HTMLの仕様のせいでもなく、
マークアップの知識が未熟な自分自身のせいなのだ、と身をもって感じて、
それはもう本当に、衝撃的でした。

結果的に言えば、コードが汚いのはコーダーの責任なのに、
そこから無意識のうちに逃げていたのかもしれません。

マークアップの楽しさを再発見できた気がしました。