ON DISPLAY:
A PRACTICAL OVERVIEW OF THE CSS DISPLAY PROPERTY
Apresentationby /SteveBlaurock @sblaurock
WHY DO WE USE THE DISPLAY PROPERTY?
1. To show and hide sets of elements.
2. To controlthe wayelements "sit"in relation to...
VALUES OF INTEREST
CSS1
none
inline
block
list-item
CSS2.1
inline-block
table
table-row
table-cell
CSS3
flex
grid
Experime...
DISPLAY: NONE (CSS1)
Visuallyremove an element(and its children) from the page.
Element will havenoeffect onpagelayout.
jQ...
VISIBILITY: HIDDEN (CSS2.1)
Render an element(and its children) as invisible.
Pagelayout will beeffected byhiddenelement.
...
DISPLAY: INLINE (CSS1)
<span>, <a>, <b>, <img> ...
Flow ó
DISPLAY: BLOCK (CSS1)
<h1>, <p>, <div> ...
Flow ↕
DISPLAY: INLINE-BLOCK (CSS2.1)
Follows naturalinline flow, butgives us characteristics of block
elements.
Flow ó
COMPARING WITH FLOAT
inline-blockelements render the same waythattextwould.
Adjustalignmentusingvertical-alignif needed.
A...
ISSUES: SPACE IN MARKUP
Havingspaces or newlines in your HTML markup willlead
to unwanted space between elements.
<ulclass...
ISSUES: IE7 COMPATABILITY
IE7 onlyallows inline-blockon naturallyinline elements.
.inline-block{
...
/*IE7Fix*/
zoom:1;
*d...
DISPLAY: TABLE-* (CSS2.1)
Allows for table characteristics to be applied through CSS.
Usefulfor verticalcentering.
<divsty...
OVERVIEW
+
-
float
Full browsersupport.
Parentcontainercollapse (requires "clearfixhack").
+
+
-
-
inline-block
No collaps...
DISPLAY: FLEX (CSS3)
Thechildrenofa“box” canbeorderedeitherverticallyorhorizontally
withinaparent.
Flexboxallowsyoutocontr...
IGNORED DISPLAY VALUES
run-in-Notsupported in Firefox or IE7.
grid-Onlysupported in IE 10+ prefixed?
list-item-Justuse rea...
SOURCES
CSSTricks - Display
CSSTricks - Fighting theSpaceBetweenInlineBlock Elements
DesignShack -What's theDeal WithDispl...
THANK YOU!
Twitter: /Github:@sblaurock sblaurock
Upcoming SlideShare
Loading in …5
×

On Display: A Practical Overview of the CSS Display Property

1,178 views
891 views

Published on

An overview of display: none, inline, block, inline-block & table with nods to visibility: hidden and display: flex.

Talk given at Shutterstock on September 17th, 2013.

Github repository & notes: https://goo.gl/O2gpzv
Twitter: @sblaurock

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

On Display: A Practical Overview of the CSS Display Property

  1. 1. ON DISPLAY: A PRACTICAL OVERVIEW OF THE CSS DISPLAY PROPERTY Apresentationby /SteveBlaurock @sblaurock
  2. 2. WHY DO WE USE THE DISPLAY PROPERTY? 1. To show and hide sets of elements. 2. To controlthe wayelements "sit"in relation to one another.
  3. 3. VALUES OF INTEREST CSS1 none inline block list-item CSS2.1 inline-block table table-row table-cell CSS3 flex grid Experimental run-in
  4. 4. DISPLAY: NONE (CSS1) Visuallyremove an element(and its children) from the page. Element will havenoeffect onpagelayout. jQuery: $('#elementId').hide();
  5. 5. VISIBILITY: HIDDEN (CSS2.1) Render an element(and its children) as invisible. Pagelayout will beeffected byhiddenelement. ViewDemonstration
  6. 6. DISPLAY: INLINE (CSS1) <span>, <a>, <b>, <img> ... Flow ó
  7. 7. DISPLAY: BLOCK (CSS1) <h1>, <p>, <div> ... Flow ↕
  8. 8. DISPLAY: INLINE-BLOCK (CSS2.1) Follows naturalinline flow, butgives us characteristics of block elements. Flow ó
  9. 9. COMPARING WITH FLOAT inline-blockelements render the same waythattextwould. Adjustalignmentusingvertical-alignif needed. Aa ViewDemonstration
  10. 10. ISSUES: SPACE IN MARKUP Havingspaces or newlines in your HTML markup willlead to unwanted space between elements. <ulclass="inline-block"> <li>ItemA</li> <li>ItemB</li> ... </ul> ViewDemonstration
  11. 11. ISSUES: IE7 COMPATABILITY IE7 onlyallows inline-blockon naturallyinline elements. .inline-block{ ... /*IE7Fix*/ zoom:1; *display:inline; }
  12. 12. DISPLAY: TABLE-* (CSS2.1) Allows for table characteristics to be applied through CSS. Usefulfor verticalcentering. <divstyle="display:table;"> <divstyle="display:table-row;"> <divstyle="display:table-cell;"> YES,THISISCONTENT. </div> </div> </div>
  13. 13. OVERVIEW + - float Full browsersupport. Parentcontainercollapse (requires "clearfixhack"). + + - - inline-block No collapsingofparentcontainer. Full browsersupport(ish). Requires "hack" forIE7support. Issue with whitespace in markup. + + - - table No collapsingofparentcontainer. Allows forvertical centering. No supportforIE7. Extramarkup.
  14. 14. DISPLAY: FLEX (CSS3) Thechildrenofa“box” canbeorderedeitherverticallyorhorizontally withinaparent. Flexboxallowsyoutocontrolwhathappenstoanyremainingspace. Itispossibletonesttheseboxes,allowingforverycomplexlayouts. Support: Chrome(Full),Firefox(Partial),Safari(Prefixed), Opera(Prefixed),IE10 (Partial,Prefixed),IE11 (Full)
  15. 15. IGNORED DISPLAY VALUES run-in-Notsupported in Firefox or IE7. grid-Onlysupported in IE 10+ prefixed? list-item-Justuse reallists.
  16. 16. SOURCES CSSTricks - Display CSSTricks - Fighting theSpaceBetweenInlineBlock Elements DesignShack -What's theDeal WithDisplay: Inline-Block MDN- Display Mozilla Web Development - Cross Browser Inline-Block Quirksmode- Display TOOLS HakimEl Hattab / reveal.js
  17. 17. THANK YOU! Twitter: /Github:@sblaurock sblaurock

×