�ݺ�ߣ

The future is now
by @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

1. Long live CSS3
2. Back to the future
variables, conditionals, selectors, filters, paged media
exclusions, regions, grid layout, flexbox

3. Considerations

Borders
Enabling multiple shadows with inset, radius and border
image 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 modes
HSL, HSLA, CMYK, RGBA
hue hue cyan red
saturation saturation magenta green
lightness lightness yellow black
alpha black alpha

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

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

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

Text
Shadows, overflow and wrapping.

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

Multi-column layouts
Newspaper-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 queries
Feature detection with CSS.

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

Transitions
Smooth 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;
}

Transforms
2 and 3D manipulations on objects

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

Benefits of CSS3

Fewer HTTP requests
Faster development
Lightweight CSS (?)
Good support

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 flow

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

Sample
content flow

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

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


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


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

Grid layout (not yet available)
.box {
display: grid;
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;
}

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
Location
Matching Linguistic
Negation User action
Attribute 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 problems
that you don’t have

progressive vs graceful
enhancement degradation

thank you
@karolinaszczur
slideshare.net/karolinaszczur

�ݺ�ߣ

Future is now

More Related Content

Future is now