future is now

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.

.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.

Considerations3.

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

content flow

Sample

content flow

Support

16+ 10.0 6.0

Exclusions and shapes

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

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

Exclusions and shapes

.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

#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

(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; }

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.

Considerations3.

Don’t solve problemsthat you don’t have

Mind thevendor prefixes

Check the support

progressive vs gracefulenhancement degradation

thank you@karolinaszczurslideshare.net/karolinaszczur

future is now

px webkit

px rgb255

px columncount

px rgba0

color modeshsl

document http

feugiat vitae dolor

contentbox backgroundclip

Technology

now is the future – the future is...

future is now

telemedicine - the future is now

the future is now informational webinar. -...

children: their future is now

live streaming is the future and the future is now

es6: the future is now

webinar1: the future is now

“the future is here now”...“the future is here...

our future is now - the future of computing

their future is now

future is now keynote address

fotoverslag the future is now

eph6d the future is now

your future is now

cams the future is now

aam: the future is now

the future is now

the future is now!

the mobile future is now