CSS display what MartineDowden martine first Martine last

  • Slides: 49
Download presentation
. CSS { display: what? } @Martine_Dowden

. CSS { display: what? } @Martine_Dowden

. martine { first: Martine; last: Dowden; employer: Andromeda; position: Lead UX Developer; twitter:

. martine { first: Martine; last: Dowden; employer: Andromeda; position: Lead UX Developer; twitter: @Martine_Dowden; }

1994 1996 1998 2002 2003 2011 Håkon Wium Lie CSS Level 1 CSS 2

1994 1996 1998 2002 2003 2011 Håkon Wium Lie CSS Level 1 CSS 2 IE 5 for Mac CSS Zen Garden CSS 2. 1 & CSS 3 Cascading HTML style sheets -- a proposal CSS Level 1 W 3 C Recommendation is made W 3 C Releases CSS 2 First browser with full CSS Level 1 Support Dave Shea launches CSS Zen Garden June 2011: CSS 2. 1 June 2011 - June 2012: CSS 3 Module Recommendations Timeline

Cascading Style Sheets Since 1994 Recommendation Candidate Recommendation Working Draft By Krauss - Own

Cascading Style Sheets Since 1994 Recommendation Candidate Recommendation Working Draft By Krauss - Own work, CC BY-SA 4. 0, https: //commons. wikimedia. org/w/index. php? curid=44954967

display Initial Value inline Applies to All elements Inherited no Animatable no Version CSS

display Initial Value inline Applies to All elements Inherited no Animatable no Version CSS 1 The display CSS property specifies the type of rendering box used for an element. Basic Support 1 12 1 4 7 1

1996 2011 2018 Level 1 Level 2 (Revision 1) Level 3 block inline-block contents

1996 2011 2018 Level 1 Level 2 (Revision 1) Level 3 block inline-block contents inline table flow-root list-item inline-table run-in none table-row-group inline list-item table-header-group flex * table-footer-group inline-flex * table-row table- grid * column-group inline-grid * table-column ruby table-cell block ruby Recommendation Candidate Recommendation Working Draft Display property values by css version table-caption inherit * Candidate Recommendation

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> The display property is specified using keyword values. Keyword

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> The display property is specified using keyword values. Keyword values are grouped into six categories: <display-box> <display-legacy>

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-outside> These keywords specify the element’s outer display type,

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-outside> These keywords specify the element’s outer display type, which is essentially its role in flow layout. <display-box> <display-legacy> ● ● ● Block Inline run-in

display: block The element generates a block element box.

display: block The element generates a block element box.

second first span { background: purple; height: 10 rem; width: 10 rem; margin: 1

second first span { background: purple; height: 10 rem; width: 10 rem; margin: 1 rem; third padding: 1 rem; }. third { display: block; } -- fourth <span>first</span> <span>second</span> <span class="third">third</span> <span>fourth</span> padding margin

display: inline The element generates one or more inline element boxes.

display: inline The element generates one or more inline element boxes.

second first span { background: purple; height: 10 rem; width: 10 rem; margin: 1

second first span { background: purple; height: 10 rem; width: 10 rem; margin: 1 rem; third padding: 1 rem; }. third { display: block; } -- fourth <span>first</span> <span>second</span> <span class="third">third</span> <span>fourth</span> padding margin

Experimental display: run-in The element generates a run-in box. Run-in elements act like inlines

Experimental display: run-in The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements. ● If the run-in box contains a block box, same as block. ● If a block box follows the run-in box, the run-in box becomes the first inline box of the block box. ● If an inline box follows, the run-in box becomes a block box.

Experimental h 3 { display: run-in; } -<h 3>Cupcake Ipsum</h 3> Cupcake Ipsum Cake

Experimental h 3 { display: run-in; } -<h 3>Cupcake Ipsum</h 3> Cupcake Ipsum Cake chocolate bar gummi bears sweet roll pudding dragée lemon drops. Cake fruitcake jelly beans dessert sweet roll lollipop. Fruitcake bear claw powder. <p>Cake chocolate bar gummi bears sweet roll pudding dragée lemon drops. Cake fruitcake jelly beans dessert sweet roll lollipop. Fruitcake bear claw powder. </p> Support 1 -32 no no 8 7 -15 1 -8

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-inside> These keywords specify the element’s inner display type,

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-inside> These keywords specify the element’s inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). <display-box> <display-legacy> ● ● ● flow-root table flex grid subgrid ruby

Experimental display: flow-root The element generates a block element box that establishes a new

Experimental display: flow-root The element generates a block element box that establishes a new block formatting context. Support 58 no 53 no 45 no

h 3 { margin-right: 1 rem; float: left; } div { background: purple; margin-bottom:

h 3 { margin-right: 1 rem; float: left; } div { background: purple; margin-bottom: 1 rem; } div. example { display: flow-root; } -<div class="example"> <h 3>Cupcake Ipsum</h 3> <p>Cake chocolate bar gummi bears. . . </p> </div> <h 3>Bacon Ipsum</h 3> <p>Filet mignon beef ham ribeye tail. . . </p> </div> Experimental Cupcake Ipsum Bacon Ipsum Cake chocolate bar gummi bears. . . Filet mignon beef ham ribeye tail. . . div margin

display: table These elements behave like <table> HTML elements. It defines a block-level box.

display: table These elements behave like <table> HTML elements. It defines a block-level box. Support 1 12 1 8 7 1

. table { display: table; <div class="table"> <div class="column"></div> <div class="header"> <div class="row"> <div

. table { display: table; <div class="table"> <div class="column"></div> <div class="header"> <div class="row"> <div class="cell">Header Cell 1</div> } . header { display: table-header-group; }. column { display: table-column-group; }. column: first-of-type { background: orange; }. row { display: table-row; }. cell { padding: . 5 rem; }. footer { display: table-footer-group; } <div class="cell">Header Cell 2</div> Header Cell 1 Header Cell 2 Cell 1 Cell 2 Footer Cell 1 Footer Cell 2 <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="footer"> <div class="row"> <div class="cell">Footer Cell 1</div> <div class="cell">Footer Cell 2</div> Accessibility Using display: table instead of the HTML <table> tag will not identify the content as a table to screen readers. Semantic meaning is absent.

display: flex The element behaves like a block element and lays out its content

display: flex The element behaves like a block element and lays out its content according to the flexbox model.

Flexible Box Layout ● display: flex; ● Defines a CSS box model optimized for

Flexible Box Layout ● display: flex; ● Defines a CSS box model optimized for user interface design Layout of items in 1 dimension ○ ○ ● Children can flex their size ○ ○ ● 29* Row Column Grow to fill unused space Shrink to avoid overflowing parent Some older browsers require vendor prefixes or use non standard Names (*) 12 20* 11* Yes 9*

Container. container { display: flex; flex-direction: row; first row justify-content: flex-start; align-items: stretch; }

Container. container { display: flex; flex-direction: row; first row justify-content: flex-start; align-items: stretch; } -<div class="container"> <div class="item first">first</div> <div class="item second">second</div> <div class="item third">third</div> first second third column second third

Container. container { display: flex; flex-direction: row; first } -<div class="container"> <div class="item first">first</div>

Container. container { display: flex; flex-direction: row; first } -<div class="container"> <div class="item first">first</div> <div class="item second">second</div> third flex-start justify-content: flex-start; align-items: stretch; second first second third flex-end first second third space-between first second third space-around <div class="item third">third</div> first space-evenly second third

Container. container { display: flex; flex-direction: row; first } third second third stretch justify-content:

Container. container { display: flex; flex-direction: row; first } third second third stretch justify-content: flex-start; align-items: stretch; second first start -<div class="container"> <div class="item first">first</div> first end <div class="item second">second</div> <div class="item third">third</div> first center

Container. second { align-self: flex-start; flex-basis: auto; flex-grow: 0; flex-shrink: 0; } first second

Container. second { align-self: flex-start; flex-basis: auto; flex-grow: 0; flex-shrink: 0; } first second third flex-start first second third flex-end first -- second third center <div class="container"> <div class="item first">first</div> <div class="item second">second</div> <div class="item third">third</div> first second third stretch first baseline second third

Container first . second { align-self: flex-start; flex-basis: auto; } -<div class="container"> <div class="item

Container first . second { align-self: flex-start; flex-basis: auto; } -<div class="container"> <div class="item first">first</div> <div class="item second">second</div> <div class="item third">third</div> third auto flex-grow: 0; flex-shrink: 0; second first second third 0 first 50% second third

Container. second { first third second align-self: flex-start; flex-basis: auto; . second { flex-grow:

Container. second { first third second align-self: flex-start; flex-basis: auto; . second { flex-grow: 2; } flex-grow: 0; flex-shrink: 0; first second third } -<div class="container"> <div class="item first">first</div> <div class="item second">second</div> <div class="item third">third</div> . second { flex-shrink: 1; }. third { flex-basis: 75%; }

display: grid The element behaves like a block element and lays out its content

display: grid The element behaves like a block element and lays out its content according to the grid model. Support 57 16 57 11 44 11

. container { display: grid; Grid Template Columns & Rows 1 fr 1 fr

. container { display: grid; Grid Template Columns & Rows 1 fr 1 fr grid-template-columns: repeat(3, 1 fr); grid-gap: 10 px; grid-auto-rows: minmax(100 px, auto); First 100 px }. first { grid-column: 1 / 3; grid-row: 1; Third Second }. second { grid-column: 2 / 4; grid-row: 1 / 3; } -<div class="container"> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> 10 px 100 px

. container { Grid Template Columns & Rows display: grid; grid-template-columns: repeat(3, 1 fr);

. container { Grid Template Columns & Rows display: grid; grid-template-columns: repeat(3, 1 fr); 1 grid-gap: 10 px; First grid-auto-rows: minmax(100 px, auto); }. first { 2 grid-column: 1 / 3; Third grid-row: 1; Second } 3 . second { grid-column: 2 / 4; grid-row: 1 / 3; } -<div class="container"> <div class="first">first</div> <div class="second">second</div> <div class="third">third</div> 1 2 3 4

. header { grid-area: header; }. main { grid-area: main; }. sidebar { grid-area:

. header { grid-area: header; }. main { grid-area: main; }. sidebar { grid-area: sidebar; }. footer { grid-area: footer; }. container { display: grid; grid-template-columns: 1 fr 1 fr; grid-template-rows: 46 px auto 36 px; grid-template-areas: "header header" "main. sidebar" "footer footer"; } -<div class="container"> <div class="header">Header</div> Grid Template Areas 1 fr 1 fr header Header header Main 46 px Sidebar Cat ipsum dolor sit amet, sit on human fall asleep on the washing machine under the bed eatmain grass, main throw it back up. I cry and cry unless you pet me, and then maybe i cry just for fun eat and than sleep on your face playing with balls of wool, thug cat. 1 Cat 2 Cats. sidebar Red Cat Blue Cat auto <div class="main">Main: Cat ipsum. . . </div> <div class="sidebar">Sidebar: 1 Cat. . . </div> <div class="footer">Footer</div> footer Footer footer 36 px

Experimental display: subgrid If the parent element has display: grid, the element itself and

Experimental display: subgrid If the parent element has display: grid, the element itself and its content are laid out according to the grid model. Support ? no ? ?

Experimental display: ruby The element behaves like an inline element and lays out its

Experimental display: ruby The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding <ruby> HTML elements. Support no * Partial support ? 38 no no no

HTML <ruby> <rb>Kon'nichiwa sekai</rb> <rt>こんにちは世界</rt> </ruby> Kon'nichiwa sekai こんにちは世界

HTML <ruby> <rb>Kon'nichiwa sekai</rb> <rt>こんにちは世界</rt> </ruby> Kon'nichiwa sekai こんにちは世界

Experimental div { display: ruby; } css . base { display: ruby-base; }. text

Experimental div { display: ruby; } css . base { display: ruby-base; }. text { display: ruby-text; } Kon'nichiwa sekai -<div> こんにちは世界 <span class="base">こんにちは世界</span> <span class="text"> Kon'nichiwa sekai こんにちは世界 CRY-oh-LOFF-oh-SORE-us </span> </div> <ruby> <rb>こんにちは世界</rb> <rt>CRY-oh-LOFF-oh-SORE-us</rt> </ruby> html Accessibility Using display: ruby instead of the HTML <ruby> tag will not identify the content as prononciation to screen readers. Semantic meaning is absent.

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-listitem> The element generates a block box for the

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-listitem> The element generates a block box for the content and a separate list-item inline box. <display-box> <display-legacy>

container. item { display: list-item; list-style-type: decimal; margin-left: 1. 5 rem; } 1. Coffee

container. item { display: list-item; list-style-type: decimal; margin-left: 1. 5 rem; } 1. Coffee 2. Bourbon 3. Repeat -<div> <div class="item">Coffee</div> Accessibility <div class="item">Bourbon</div> <div class="item">Repeat</div> Using display: list-item instead of the HTML list tags will not identify the content as a list to screen readers. Semantic meaning is absent.

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> Some layout models, such as table and ruby, have

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> Some layout models, such as table and ruby, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode. <display-box> <display-legacy> ● ● ● table-row-group table-header-group table-footer-group table-row table-cell table-column-group table-column table-caption ruby-base ruby-text ruby-base-container ruby-text-container

CSS display-internal properties and their HTML equivalents table-caption Value HTML Equivalent table-row-group <tbody> table-header-group

CSS display-internal properties and their HTML equivalents table-caption Value HTML Equivalent table-row-group <tbody> table-header-group <thead> table-row <tr> table-row table-cell <td> table-cell table-column-group <colgroup> table-column <col> table-caption <caption> table-footer-group <tfoot> display: table-______ table-header-group table-row-group table-footer-group

Value HTML Equivalent Description base <rb> Base test text <rt> Used to provide pronunciation,

Value HTML Equivalent Description base <rb> Base test text <rt> Used to provide pronunciation, translation, or transliteration information for East Asian typography. ruby-base-container <rbc> Wraps <rb> elements ruby-text-container <rtc> Wraps <rt> elements Hello World Kon'nichiwa sekai こんにちは世界 ruby-text-container ruby-text ruby-base display: ruby-______

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-box> These values define whether an element generates display

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-box> These values define whether an element generates display boxes at all. <display-box> <display-legacy> ● ● Contents none

Experimental display: contents Strips the element from the formatting tree, and hoists its contents

Experimental display: contents Strips the element from the formatting tree, and hoists its contents up to display in its place. Support 65 no 53 no 52 11. 1

Experimental. container { background: orange; display: contents; } Pirate ipsum dolor sit amet bucko

Experimental. container { background: orange; display: contents; } Pirate ipsum dolor sit amet bucko Davy Jones' Locker capstan Jack Tar fire in the hole gibbet dead men tell no tales main sheet blow the man down lad. Lass coffer mutiny careen spanker topgallant fluke maroon Cat -- o'nine tails Brethren of the Coast. <div class="container"> Container ? <p>Pirate ipsum dolor sit amet bucko Davy Jones' Locker capstan. . . </p> </div>

display: none ● Turns off the display element. ● All descendants have their display

display: none ● Turns off the display element. ● All descendants have their display turned off. ● The document is rendered as though the element does not exist in the document tree.

div { background: purple; }. none { Accessibility block Using a display value of

div { background: purple; }. none { Accessibility block Using a display value of none on an element will remove it from the accessibility tree. display: none; }. hidden { visibility: hidden; hidden background: orange; } -- block <div> block </div> none <div> hidden </div> <div> block </div> <div> none </div> <div> block </div> block

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-legacy> CSS 2 used a single-keyword syntax for the

Syntax <display-outside> <display-inside> <display-listitem> <display-internal> <display-legacy> CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. <display-box> <display-legacy> ● ● Inline-block Inline-table Inline-flex inline-grid

div block Header Cell 1 Header Cell 2 Cell 1 Cell 2 Footer Cell

div block Header Cell 1 Header Cell 2 Cell 1 Cell 2 Footer Cell 1 Footer Cell 2 first table display: inline-______ second third First Third flex Second grid

● ● ● table-row-group table-header-group table-footer-group table-row table-cell table-column-group table-column table-caption ruby-base ruby-text ruby-base-container

● ● ● table-row-group table-header-group table-footer-group table-row table-cell table-column-group table-column table-caption ruby-base ruby-text ruby-base-container ruby-text-container <display-outside> ● ● ● block inline run-in ● ● contents none ● ● ● <display-inside> <display-listitem> flow-root table flex grid subgrid ruby <display-internal> <display-box> <display-legacy> { CSS: display: what ? } ● ● inline-block inline-table inline-flex inline-grid

Thank You Resources ● ● ● https: //developer. mozilla. org/en-US/docs/Web/CSS/display https: //caniuse. com/ http:

Thank You Resources ● ● ● https: //developer. mozilla. org/en-US/docs/Web/CSS/display https: //caniuse. com/ http: //www. html. am/tags/html-rb-tag. cfm https: //www. w 3. org/TR/css-ruby-1/ https: //drafts. csswg. org/css-display/#unbox https: //martine-dowden. github. io/display-what/ @Martine_Dowden