The future is nowby @karolinaszczur

Web 5 conference, Béziers, France

Who’s that girl?Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized.

karolinaszczur

Long live CSS31.

Back to the future2.

Considerations3.

variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox

Borders

.box { box-shadow: 5px 5px 10px rgb(255, 255, 255), 1px 0 1px rgba(0, 0, 0, .2) inset; border-radius: 20px;}

for border-image check: http://www.norabrowndesign.com/css-experiments/border-image-anim.html and http://css-tricks.com/understanding-border-image/

Enabling multiple shadows with inset, radius and border image handling.

Color modesHSL, HSLA, CMYK, RGBAhuesaturationlightness

huesaturationlightnessalpha

cyanmagentayellowblack

redgreenblackalpha

http://www.flickr.com/photos/foxtwo/2540952589/

Backgrounds

.box { background-image: url(../images/bg_one.jpg), url(../images/bg_two); background-position: center top, left bottom; background-origin: content-box; background-clip: padding-box;}

Multiple images, determining the background position relatively, expansion ratios.

Text

.box p { text-shadow: 0 2px 3px rgba(0, 0, 0, .3); text-overflow: ellipsis; word-wrap: break-word;}

Shadows, overflow and wrapping.

Multi-column layouts

.multicolumn { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px;}

Newspaper-like grids.

http://www.flickr.com/photos/eivind1983/4704630872/

Gradients.box { background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); background-image: -webkit-linear-gradient(top, #444444, #999999); background-image: -moz-linear-gradient(top, #444444, #999999); background-image: -ms-linear-gradient(top, #444444, #999999); background-image: -o-linear-gradient(top, #444444, #999999); background-image: linear-gradient(to bottom, #444444, #999999);}

Media queries

@media screen and (min-width: 320px) { body { font-size: 70%; }}

Feature detection with CSS.

Transitions

a, a:visited { text-decoration: none; color: #FFD600; }

a { -moz-transition: color 1s linear; -webkit-transition: color 1s linear; transition: color 1s linear;}

a:hover, a:active, a:focus { color: #ff6600;}

Smooth animations on property change

Transforms

.box { height: 300px; width: 300px; transform: scale(1, 1.5), rotate(30deg);}

2 and 3D manipulations on objects

Benefits of CSS3

Fewer HTTP requestsFaster developmentLightweight CSS (?)Good support

Long live CSS31.

Back to the future2.

Considerations3.

variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox

There’s no CSS4

Variables:root { var-base-color: rgb(255, 255, 255);}

.container { background: var(base-color);}

CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

$base-color: rgb(255, 255, 255);

.container { background: $base-color;}

how SASS is dealing with variables

Variables:root { var-base-color: rgb(255, 255, 255);}

.container { background: var(base-color);}

CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

(not yet available)

$base-color: rgb(255, 255, 255);

.container { background: $base-color;}

how SASS is dealing with variables

Conditionals

CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

@supports (display: flexbox) { section { display: flexbox; }}

@document (http://w3.org) { p { font-size: 1em; }}

@media screen { body { background: #000; } @media (min-width: 1200px) { p { font-size: 2em; } } }

Conditionals

CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

(not yet available)

@supports (display: flexbox) { section { display: flexbox; }}

@document (http://w3.org) { p { font-size: 1em; }}

@media screen { body { background: #000; } @media (min-width: 1200px) { p { font-size: 2em; } } }

Regions

CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

.text-source { flow-into: „main-thread”;}

.region, .region-a, .region-b { flow-from: main-thread;}

Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi b ibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl. Donec malesuada posuere lectus, id rutrum mauris mollis vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta.

Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.

Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.

Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis.

content flow

Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi b ibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl. Donec malesuada posuere lectus, id rutrum mauris mollis vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta.

Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.

Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.

Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis.

content flow

content flow

Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi b ibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl. Donec malesuada posuere lectus, id rutrum mauris mollis vitae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta.

Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et tellus non mauris posuere consequat sit amet sit amet nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudin at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.

Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.

Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis.

content flow

content flow

Support

16+ 10.0 6.0

Exclusions and shapes

CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

.circle { wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; }

.circle { wrap-shape: polygon(0px, 150px); wrap-shape-mode: around; }

Exclusions and shapes

CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

.circle { wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; }

.circle { wrap-shape: polygon(0px, 150px); wrap-shape-mode: around; }

(not yet available)

Samples

Flexbox

CSS Flexible Box Layout Model: http://www.w3.org/TR/css3-flexbox/

.box { display: flexbox; flex-flow: column;}box one

box three

box two

.one { flex-order: 1; }

.two { flex-order: 3; }

.three { flex-order: 2; }

Flexbox

box one box two box three

.box-container { display: flexbox; flex-flow: row; }

Support

16+ 10.0 5+ 3.6+

Grid layout

CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

.box { display: grid; grid-columns: 1fr 1fr 2fr; }

Grid layout

CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

.box { display: grid; grid-columns: 1fr 1fr 2fr; }

#header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1;}

#left-column { grid-column: 1; grid-grid-row: 2;}

#right-column { grid-column: 2; grid-grid-row: 2;}

header

leftcolumn

rightcolumn

Grid layout

CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

.box { display: grid; grid-columns: 1fr 1fr 2fr; }

(not yet available)

#header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1;}

#left-column { grid-column: 1; grid-grid-row: 2;}

#right-column { grid-column: 2; grid-grid-row: 2;}

header

leftcolumn

rightcolumn

Filters

CSS Filters 1.0l: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

.box { background: red; -webkit-filter: blur(20px); -webkit-filter: grayscale(.2); -webkit-filter: hue-rotate(180deg);}

Support

16+ 9+ 5+ 3.6+and Opera too!

SelectorsMatchingNegationAttribute selectors

Location LinguisticUser actionUI StatesTree structural

pseudo classes

Logical combinatorsa:matches(:hover, :focus) { color: red; }

input:not([type=”submit”]) { border: none; }

Attribute and valuesa[title] { color: red; }

a[class~=”action”] { display: block; }

<a href="#" class="call action button" />

Location pseudo classes#navigation :local-link { color: red; }

:link { color: blue; }

:visited { text-decoration: underline; }

Linguistic pseudo classes

:dir(ltr) :lang(fr)

UI pseudo classes:enabled:disabled

:required:valid

Tree structural pseudo classes:root:nth-child()

:nth-of-type():first-of-type()

Long live CSS31.

Back to the future2.

Considerations3.

variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox

Don’t solve problemsthat you don’t have

Mind thevendor prefixes

Check the support

progressive vs gracefulenhancement degradation

thank you@karolinaszczurslideshare.net/karolinaszczur