Download - Future is now
![Page 1: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/1.jpg)
The future is nowby @karolinaszczur
Web 5 conference, Béziers, France
![Page 2: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/2.jpg)
Who’s that girl?Front-end dev and designer with 7 years of experience. Earlier worked at AdTaily and Applicake. Currently @XHTMLized.
karolinaszczur
![Page 3: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/3.jpg)
Long live CSS31.
Back to the future2.
Considerations3.
variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox
![Page 4: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/4.jpg)
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.
![Page 5: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/5.jpg)
Color modesHSL, HSLA, CMYK, RGBAhuesaturationlightness
huesaturationlightnessalpha
cyanmagentayellowblack
redgreenblackalpha
http://www.flickr.com/photos/foxtwo/2540952589/
![Page 6: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/6.jpg)
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.
![Page 7: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/7.jpg)
Text
.box p { text-shadow: 0 2px 3px rgba(0, 0, 0, .3); text-overflow: ellipsis; word-wrap: break-word;}
Shadows, overflow and wrapping.
![Page 8: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/8.jpg)
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/
![Page 9: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/9.jpg)
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);}
![Page 10: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/10.jpg)
Media queries
@media screen and (min-width: 320px) { body { font-size: 70%; }}
Feature detection with CSS.
![Page 11: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/11.jpg)
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
![Page 12: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/12.jpg)
Transforms
.box { height: 300px; width: 300px; transform: scale(1, 1.5), rotate(30deg);}
2 and 3D manipulations on objects
![Page 13: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/13.jpg)
Benefits of CSS3
Fewer HTTP requestsFaster developmentLightweight CSS (?)Good support
![Page 14: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/14.jpg)
Long live CSS31.
Back to the future2.
Considerations3.
variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox
![Page 15: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/15.jpg)
There’s no CSS4
![Page 16: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/16.jpg)
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
![Page 17: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/17.jpg)
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
![Page 18: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/18.jpg)
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; } } }
![Page 19: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/19.jpg)
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; } } }
![Page 20: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/20.jpg)
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;}
![Page 21: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/21.jpg)
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
![Page 22: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/22.jpg)
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
![Page 23: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/23.jpg)
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
![Page 24: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/24.jpg)
Support
16+ 10.0 6.0
![Page 25: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/25.jpg)
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; }
![Page 26: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/26.jpg)
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)
![Page 27: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/27.jpg)
Samples
![Page 28: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/28.jpg)
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; }
![Page 29: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/29.jpg)
Flexbox
box one box two box three
.box-container { display: flexbox; flex-flow: row; }
![Page 30: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/30.jpg)
Support
16+ 10.0 5+ 3.6+
![Page 31: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/31.jpg)
Grid layout
CSS Grid Layout: http://www.w3.org/TR/css3-grid-layout/
.box { display: grid; grid-columns: 1fr 1fr 2fr; }
![Page 32: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/32.jpg)
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
![Page 33: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/33.jpg)
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
![Page 34: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/34.jpg)
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);}
![Page 35: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/35.jpg)
Support
16+ 9+ 5+ 3.6+and Opera too!
![Page 36: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/36.jpg)
SelectorsMatchingNegationAttribute selectors
Location LinguisticUser actionUI StatesTree structural
pseudo classes
![Page 37: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/37.jpg)
Logical combinatorsa:matches(:hover, :focus) { color: red; }
input:not([type=”submit”]) { border: none; }
![Page 38: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/38.jpg)
Attribute and valuesa[title] { color: red; }
a[class~=”action”] { display: block; }
<a href="#" class="call action button" />
![Page 39: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/39.jpg)
Location pseudo classes#navigation :local-link { color: red; }
:link { color: blue; }
:visited { text-decoration: underline; }
![Page 40: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/40.jpg)
Linguistic pseudo classes
:dir(ltr) :lang(fr)
![Page 41: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/41.jpg)
UI pseudo classes:enabled:disabled
:required:valid
![Page 42: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/42.jpg)
Tree structural pseudo classes:root:nth-child()
:nth-of-type():first-of-type()
![Page 43: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/43.jpg)
Long live CSS31.
Back to the future2.
Considerations3.
variables, conditionals, selectors, filters, paged mediaexclusions, regions, grid layout, flexbox
![Page 44: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/44.jpg)
Don’t solve problemsthat you don’t have
![Page 45: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/45.jpg)
Mind thevendor prefixes
![Page 46: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/46.jpg)
Check the support
![Page 47: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/47.jpg)
progressive vs gracefulenhancement degradation
![Page 48: Future is now](https://reader034.vdocuments.us/reader034/viewer/2022042606/54c7917e4a795963448b458a/html5/thumbnails/48.jpg)
thank [email protected]/karolinaszczur