• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
On Display: A Practical Overview of the CSS Display Property
 

On Display: A Practical Overview of the CSS Display Property

on

  • 900 views

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

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: http://goo.gl/ZYvfeI
Presentation notes: http://goo.gl/G54vPR
Twitter: @sblaurock

Statistics

Views

Total Views
900
Views on SlideShare
884
Embed Views
16

Actions

Likes
1
Downloads
7
Comments
0

1 Embed 16

http://localhost 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    On Display: A Practical Overview of the CSS Display Property On Display: A Practical Overview of the CSS Display Property Presentation Transcript

    • 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 one another.
    • VALUES OF INTEREST CSS1 none inline block list-item CSS2.1 inline-block table table-row table-cell CSS3 flex grid Experimental run-in
    • DISPLAY: NONE (CSS1) Visuallyremove an element(and its children) from the page. Element will havenoeffect onpagelayout. jQuery: $('#elementId').hide();
    • VISIBILITY: HIDDEN (CSS2.1) Render an element(and its children) as invisible. Pagelayout will beeffected byhiddenelement. ViewDemonstration
    • 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. Aa ViewDemonstration
    • 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
    • ISSUES: IE7 COMPATABILITY IE7 onlyallows inline-blockon naturallyinline elements. .inline-block{ ... /*IE7Fix*/ zoom:1; *display:inline; }
    • 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>
    • 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.
    • DISPLAY: FLEX (CSS3) Thechildrenofa“box” canbeorderedeitherverticallyorhorizontally withinaparent. Flexboxallowsyoutocontrolwhathappenstoanyremainingspace. Itispossibletonesttheseboxes,allowingforverycomplexlayouts. Support: Chrome(Full),Firefox(Partial),Safari(Prefixed), Opera(Prefixed),IE10 (Partial,Prefixed),IE11 (Full)
    • IGNORED DISPLAY VALUES run-in-Notsupported in Firefox or IE7. grid-Onlysupported in IE 10+ prefixed? list-item-Justuse reallists.
    • 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
    • THANK YOU! Twitter: /Github:@sblaurock sblaurock