CSS display what MartineDowden martine first Martine last
- Slides: 49
. CSS { display: what? } @Martine_Dowden
. 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 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 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 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 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 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, 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.
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.
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 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 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, 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 block formatting context. Support 58 no 53 no 45 no
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. Support 1 12 1 8 7 1
. 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 according to the flexbox model.
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; } -<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> <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: 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 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 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: 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 according to the grid model. Support 57 16 57 11 44 11
. 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); 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: 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 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 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 こんにちは世界
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 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 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 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 <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, 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 boxes at all. <display-box> <display-legacy> ● ● Contents none
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 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 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 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 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 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 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: //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
- Css float vs flex
- Dvst stands for in computer graphics
- Advantages and disadvantages of raster scan display
- Cathode ray tube in computer graphics
- Martine morales
- Etrustex
- Martine de laat uz gent
- Martine van selm
- Vincent peillon femme
- Martine vigouroux
- Martine wahl
- Martine van geertruijden
- Martine van selm
- Martine desrosiers
- Centre social la martine
- Martine thys
- Martine pol
- Martine lafrance
- Martine delanoy
- Martine serbruyns
- Martine sakariassen
- Martine caraglio
- Martine voortmans
- Martine morales
- Rudolf krause
- Martine gigaoctet
- Martine grenier
- Dr martine forrester
- Martine carol
- Martine ten voorde
- Martine willekens
- Martine ceberio
- Uit het oog, uit het hart
- Martine rassineux
- Martine
- Author surname and initials example
- First last
- First last
- First last
- First.m.last format
- First outside inside last
- Preamble ethernet frame
- First name last name tpu
- Sharpen the saw examples
- State space graph
- Sdl first vs code first
- Habit 3 lesson plans
- Habit 3 first things first
- Difference between code first and database first approach
- First to invent or first to file