and to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

@estellevw

www.standardista.com

Part 11: Other Features

Topics

CSS Exclusions
Wrap text so that it completely surrounds elements, instead of limiting elements to floating to the left or right of text.
CSS Regions
Take a single stream of HTML content that includes both text and images, and stream that content into multiple empty containers defined in a standard HTML document.
CSS3 Multi-column Layout
Flow content into multiple columns that allow for a gap and optional rule between them.
CSS3 Flexible Box ("Flexbox") Layout
Take the available space into account when defining box dimensions, thereby enabling relative sizes and positioning.
CSS3 Grid Layout
Divide space for major regions of a webpage or web app, and define the relationship between parts of an HTML control in terms of size, position, and layer.
CSS Device Adaptation

Columns

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;      

Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.

Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.

Chicken bacon meatloaf minim meatball salami sunt spare ribs.

Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.

Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.

  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 11
  • IE 10
  • -webkit- and -moz-required

box-sizing

box-sizing: content-box | border-box
content-box
border-box
div {
width: 200px;
height:100px;
padding: 20px;
margin:20px;
border-width: 5px;
}
border-box
  • -webkit- Safari 5 and older
  • -moz- for all Firefox versions
  • Chrome
  • Safari 3.1/5.1
  • Firefox 2/8
  • Opera 9.5
  • IE 8

border-box replicates the old IE box model

CSS Regions

<div id="origin">[content here]</div>
<div class="destination"></div>
<div class="destination"></div>
<div class="destination"></div>
<div class="destination"></div>​
#origin {
    -webkit-flow-into: name_of_my_flow;
    /* style of content */
}
.destination {
    -webkit-flow-from: name_of_my_flow;
    /* style of boxes */ 
}

The content here is originally in the #origin div, inside a p. However, it shows up divided amongst the .destination blocks. Try changing the width of the .destination divs with the slider and watch the text move. The styles are inherited from #origin and #origin's ancestors, and not from any .destination specific properties.

CSS Exclusions

Only supported, prefixed, in IE 10

OLD Flexible Box Model

Used to position horizontal and vertical stacks.

.box {
  display: box;
  box-orient:;
}
.box .one, .box .two {
  box-flex: 1;
}
.box .three {
  box-flex: 3;
}
  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 12
  • IE 10
  • -webkit-, -moz-, -ms- required
Box one
Box two
Box three

OLD Flexible Box Model

.box {
  display: box;
  box-pack: ;
  box-align: ;
}

Old FlexBox Properties

display: box ;
box-orient:  horizontal | vertical | inherit;

box-pack: start | end | center | justify;

box-align: start | end | center | baseline | stretch;

box-flex: integer | 0;

box-flex-group

box-ordinal-group

box-direction: normal | reverse | inherit;

box-lines:

Medium FlexBox Properties

display: flexbox | inline-flexbox;
flex-direction: lr | rl | tb | bt | inline |
    inline-reverse | block | block-reverse

flex-order: integer | 1;

flex-pack: start | end | center | justify;

flex-align: auto | baseline;
  • Chrome 15
  • Safari 5.1
  • Firefox 7
  • Opera 12
  • IE 10

W3C specs

The spec syntax changed drastically. Browsers are curently changing..

NEWER Flexible Box Model

Related properties:

display
New values include flex and inline-flex to create a flex container (on parent).
align-content
align-items
align-self
flex
Shorthand for flex-basis, flex-grow, and flex-shrink
flex-basis
default = auto
flex-direction
Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent
flex-flow
Shorthand for flex-direction and flex-wrap properties.
flex-grow
determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. default is 1 for container 0 for children. Positive only
flex-shrink
determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed. default = 1
flex-wrap
To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse
justify-content
min-height
min-width
order
Controls order of flex items within flex container

Newest Flexible Box Model

Open in separate window

grid layout

Using grid system to lay out content, dividing available space into columns and rows

grid-columns:
grid-rows:
grid-column:
grid-row:
grid-cell:
grid-cell-stacking:
grid-template:
grid-column-span:
grid-row-span:
grid-column-sizing:
grid-row-sizing:
grig-flow:
grid-column-align:
grid-row-align:
grid-layer:

W3C Specifications

display: grid | inline-grid 
  • Chrome
  • Safari 3.1
  • Firefox 2
  • Opera 12
  • IE 10
  • -ms- required

Shaders

Visit Site

Shadow DOM

Visit Site

Cursors

  • crosshair
  • default
  • help
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • progress
  • none
  • context-menu
  • cell
  • vertical-text
  • alias
  • copy
  • no-drop
  • not-allowed
  • col-resize
  • row-resize
  • all-scroll
  • zoom-in
  • zoom-out

text-overflow: ellipsis

p {
  text-overflow: ellipsis; 
  white-space: nowrap;
  overflow: hidden;
}

overflow-hidden only: Play with the slider to see what happens at the end of the line

white-space: nowrap, overflow: hidden: Play with the slider to see what happens at the end of the line

text-overflow: ellipsis; white-space: nowrap; and overflow: hidden: Play with the slider to see what happens at the end of the line

Needs nowrap and overflow:hidden (anything other than visible) to work. Prefix in Opera

  • Chrome
  • Safari
  • Firefox 7
  • Opera 11
  • IE 6

word-wrap: breakword

word-wrap:  normal | break-word
Despite the old adage, smiles is not longer than supercalifragilisticexpialidocious.
  • Chrome 1
  • Safari 1
  • Firefox 3.5
  • Opera 10.5
  • IE 5.5

calc()

  • Chrome
  • Safari
  • Firefox 4
  • Opera 11
  • IE 9
.colA {
  width:50%;
  margin-right: 1em;
}
.colB {
  width: -moz-calc(50% - 1em);
}
  • +, -, *, /, mod, min, and max operators.
  • Vendor prefixed in Firefox, not in MS
  • Not yet ready for production
  • Intro to calc()

rem

html {
    font-size: 62.5%;
}
p {
    font-size: 13px;
    font-size: 1.3rem;
}
small {
    font-size: 11px;
    font-size: 1.1rem;
}
  • Chrome 6
  • Safari 5
  • Firefox 3.6
  • Opera 11.6
  • IE 9

pointer-events: none;

Can the element be clicked?!?!

.animatedElement {
  pointer-events: none;
}

Did you note that you could change the transforms examples even when the example was covering the code?

  • Chrome
  • Safari
  • Firefox
  • Opera 15
  • IE 11

-webkit-user-modify

Related to contentEditable: Determines whether content of an element is editable.

-webkit-user-modify: read-only | read-write | read-write-plaintext-only;
-moz-user-modify: read-only | read-write | write-only;
read-only
The content is read-only.
read-write
The content can be read and written.
write-only (moz only)
The user is able to edit the content, but not to read it.
read-write-plaintext-only (webkit)
The content can be read and written, but any rich formatting of pasted text is lost.

The End

Home ➹