Post on 27-Jan-2015
description
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