CSS display property

Created by cue / 第5回TOM社内勉強会 / Jul. 22, 2016

Display property

策定	CSS Level 1 (Dec, 1996) 〜
適用対象	全要素
メディア	all

Display value

none inline block list-item inline-block inline-table table table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group flex inline-flex grid inline-grid run-in ruby ruby-base ruby-text ruby-base-container ruby-text-container contents

※ 廃止済みの値を除く

Mr. display is too much work

display 兄さん仕事しすぎ

History of display

Value set	Ver.	Date
Basic values	CSS1	Dec, 1996 REC
Extended values	CSS2.1	Jun. 2011 REC
Table model values	CSS2.1	Jun. 2011 REC
(Ruby formatting model values )	CSS3	Aug. 2014 WD
Flexible box model values	CSS3	May 2015. LCWD May 2016 CR
Grid box model values	CSS3	Sep. 2015 WD

Basic values

none | inline | block | list-item

DEMO

list-item ?

使ったことすらない・・

こいつがdisplay兄さんに仕事を増やした元凶じゃなかろうか。

Extended values

inline-block

DEMO

Table layout

DEMO

Source



  User table
  
    
      Firstname
      Lastname
      Email
    
  
  
    
      John
      Doe
      john@example.com

Why need table layout?

草案が書かれた2002年頃、Webはすべて

<frame>と<table>でできていた

その後frameはSEO的に最悪だと言われ

またtableでレイアウトするのはおかしいという風潮になり

フロントエンドはfloatとclearfixに悩まされる日々となる

Flexible box model

もうfloatはいやだ！

といってtableには戻りたくない！

フレキシブル！フレキシブル！

DEMO

Flexible box load map

2009年ごろ display: box; がドラフト化

2012年ごろ display: flexbox; がドラフト化

2015年ごろ display: flex; が勧告候補


/* 2015年の指定方法 */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

Grid box model

September 2015. WD

まだ実験的要素

DEMO

What is display?

display とはなにか？

display ≠ layout

Hide / Show

jQuery.fn.hide() = display: none;

jQuery.fn.show() = ?

What happened to 'display'?

どうしてこうなった？

最初にdisplay兄さんをリストにしようとしたあいつが悪いんじゃないのか？

box-suppress property

ボックス生成の有無を切り替える box-suppress プロパティ

show

要素はその display プロパティに従って，表示する。

discard

要素はボックスを全く生成しなくなる。

hide

要素は生成するが、表示されない。