2007-12-09

CSS visibility:hidden; と display:none; はこんなに違っていた

現在 aquilegia が Postal Search Ajax API を使って、住所のサジェストを実装しています。

その実装の中で visibility:hidden; を使っているのですが、それを見たとき、ふと visibility:hidden; と display:none; は何が違うのだろうと疑問が生じました。

そこで Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification を見てみると、visibility:hidden; と display:none; は明らかに違うものだと知りました。

visibility:hidden; はレイアウトボックスを保持したまま不可視(透明)になり、display:none; はレイアウトボックス自体を生成しないということらしいです。

Firebug の Layout タブで確認してみると、visibility:hidden; は margin や padding、width、height のスタイルを保持していますが、 display:none; はそのスタイルがすべて 0 となっています。

visibility:hidden; と display:none; はこんなに違っていたのですね。わたしの初歩的な理解不足が原因なのでした。

世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS)世界の「最先端」事例に学ぶ CSS ベスト・プラクティス [Web Designing Books] (Web Designing BOOKS)
大藤 幹

Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻 (Web Designing BOOKS) Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS) Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS) 実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips WebクリエイティブのためのCMSテンプレートデザイン (Web Designing BOOKS)

by G-Tools

0 件のコメント: