Future is now

The future is nowby @karolinaszczur Web 5 conference, Béziers, France

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

1. Long live CSS32. Back to the future variables, conditionals, selectors, filters, paged media exclusions, regions, grid layout, flexbox3. Considerations

BordersEnabling multiple shadows with inset, radius and borderimage handling. .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/

Color modesHSL, HSLA, CMYK, RGBAhue hue cyan redsaturation saturation magenta greenlightness lightness yellow black alpha black alpha http://www.flickr.com/photos/foxtwo/2540952589/

BackgroundsMultiple images, determining the background positionrelatively, expansion ratios. .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; }

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

Multi-column layoutsNewspaper-like grids. .multicolumn { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } 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 queriesFeature detection with CSS. @media screen and (min-width: 320px) { body { font-size: 70%; } }

TransitionsSmooth animations on property change 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; }

Transforms2 and 3D manipulations on objects .box { height: 300px; width: 300px; transform: scale(1, 1.5), rotate(30deg); }

Benefits of CSS3Fewer HTTP requestsFaster developmentLightweight CSS (?)Good support

There’s no CSS4

Variables :root { $base-color: rgb(255, 255, 255); var-base-color: rgb(255, 255, 255); } .container { background: $base-color; .container { } background: var(base-color); } how SASS is dealing with variables CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

Variables (not yet available) :root { $base-color: rgb(255, 255, 255); var-base-color: rgb(255, 255, 255); } .container { background: $base-color; .container { } background: var(base-color); } how SASS is dealing with variables CSS Variables Module Level 1: http://dev.w3.org/csswg/css-variables/

Conditionals @supports (display: flexbox) { @media screen { section { display: flexbox; } body { } background: #000; } @document (http://w3.org) { @media (min-width: 1200px) { p { font-size: 1em; } p { } font-size: 2em; } } } CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

Conditionals (not yet available) @supports (display: flexbox) { @media screen { section { display: flexbox; } body { } background: #000; } @document (http://w3.org) { @media (min-width: 1200px) { p { font-size: 1em; } p { } font-size: 2em; } } } CSS Conditional Rules Module Level 3: http://www.w3.org/TR/css3-conditional/

Regions .text-source { flow-into: „main-thread”; } .region, .region-a, .region-b { flow-from: main-thread; } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

Sample content flowLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinconsectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesentnunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integervel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.bibendum mattis ipsum idimperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattisnisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et telluspurus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl.Integer vel risus quis velit rhoncusporta. Proin vel quam in elit laciniaadipiscing. Pellentesque vitae antevitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinquis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.elit vitae mattis. Aliquam et tellus Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at etnon mauris posuere consequat sit felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.amet sit amet nisl. Donecmalesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursusrutrum mauris mollis vitae. mattis elit vitae mattis.

Sample content flowLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinconsectetur adipiscing elit. Nam at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet. Praesentnunc sapien, sollicitudin at luctus dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at et felis. Integervel, feugiat vitae dolor. Morbi vel risus quis velit rhoncus porta.bibendum mattis ipsum idimperdiet. Praesent dapibus auctor Proin vel quam in elit lacinia adipiscing. Pellentesque vitae ante vitae enim mattisnisl ac pretium. Sed ac lorem id ultricies vitae quis libero. Curabitur cursus mattis elit vitae mattis. Aliquam et telluspurus pulvinar aliquet at et felis. non mauris posuere consequat sit amet sit amet nisl. content flowInteger vel risus quis velit rhoncusporta. Proin vel quam in elit laciniaadipiscing. Pellentesque vitae antevitae enim mattis ultricies vitae Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc sapien, sollicitudinquis libero. Curabitur cursus mattis at luctus vel, feugiat vitae dolor. Morbi bibendum mattis ipsum id imperdiet.elit vitae mattis. Aliquam et tellus Praesent dapibus auctor nisl ac pretium. Sed ac lorem id purus pulvinar aliquet at etnon mauris posuere consequat sit felis. Integer vel risus quis velit rhoncus porta. Proin vel quam in elit lacinia adipiscing.amet sit amet nisl. Donecmalesuada posuere lectus, id Pellentesque vitae ante vitae enim mattis ultricies vitae quis libero. Curabitur cursusrutrum mauris mollis vitae. mattis elit vitae mattis.

Support 16+ 10.0 6.0

Exclusions and shapes .circle { .circle { wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; wrap-shape-mode: around; } } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

Exclusions and shapes (not yet available) .circle { .circle { wrap-shape: polygon(0px, 150px); wrap-shape: polygon(0px, 150px); wrap-shape-mode: content; wrap-shape-mode: around; } } CSS Regions Module Level 3: http://dev.w3.org/csswg/css3-regions/

Samples

Flexbox .box { display: flexbox; box one } flex-flow: column; .one { flex-order: 1; } box three .two { flex-order: 3; } .three { box two } flex-order: 2; CSS Flexible Box Layout Model: http://www.w3.org/TR/css3-flexbox/

Flexbox box one box two box three .box-container { display: flexbox; flex-flow: row; }

Support 16+ 10.0 5+ 3.6+

Grid layout.box { display: grid; grid-columns: 1fr 1fr 2fr;} CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

Grid layout.box { display: grid; grid-columns: 1fr 1fr 2fr; header}#header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1; left right} column column#left-column { grid-column: 1; grid-grid-row: 2;}#right-column { grid-column: 2; grid-grid-row: 2;} CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

Grid layout (not yet available) .box { display: grid; grid-columns: 1fr 1fr 2fr; header } #header { grid-column: 1; grid-column-span: 2; grid-grid-row: 1; left right } column column #left-column { grid-column: 1; grid-grid-row: 2; } #right-column { grid-column: 2; grid-grid-row: 2; } CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/

Filters .box { background: red; -webkit-filter: blur(20px); -webkit-filter: grayscale(.2); -webkit-filter: hue-rotate(180deg); } CSS Filters 1.0l: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

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

Selectors LocationMatching LinguisticNegation User actionAttribute selectors UI States Tree structural pseudo classes

Logical combinators a:matches(:hover, :focus) { input:not([type=”submit”]) { color: red; border: none; } }

Attribute and values a[title] { a[class~=”action”] { <a href="#" class="call color: red; display: block; action button" /> } }

Location pseudo classes #navigation :local-link { :link { :visited { color: red; color: blue; text-decoration: underline; } } }

Linguistic pseudo classes :dir(ltr) :lang(fr)

UI pseudo classes :enabled :required :disabled :valid

Tree structural pseudo classes :root :nth-of-type() :nth-child() :first-of-type()

Don’t solve problemsthat you don’t have

Mind thevendor prefixes

Check the support

progressive vs graceful enhancement degradation

thank you@karolinaszczurslideshare.net/karolinaszczur

Future is now

by Karolina Szczur

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 62

Statistics

Future is now Presentation Transcript

http://lanyrd.com	53
http://speakerrate.com	9