345
CSS3 (for) HTML5
What's in CSS3?
(hint: a lot)
Evolving Standards
CSS3 contains over 50 modules! Let's see!
Completed 😃
Color, Namespaces, Selectors, Media Queries
Stable 😐
Style Attributes
Testing 😉
Backgrounds and Borders, Image Values and Replaced Content, Marquee, Multi-column Layout, Speech, Values and Units, Mobile Profile, TV Profile
Refining 😛
Animations, Flexible Box Layout, Text, Fragmentation, Transforms, Transitions, Print Profile
Revising 😋
Conditional, Fonts, Paged Media, Basic User Interface, Writing Modes, CSSOM View
Exploring 😎
Cascading and Inheritance, Device Adaptation, Exclusions and Shapes, Generated Content for Paged Media, Grid Layout, (Grid) Template Layout, Line Grid, Lists Level, Positioned Layout, Presentation Levels, Regions, Tables, Selectors, Object Model, Compositing and Blending, Filter Effects, Masking, Box Alignment, Text Decoration, Intrinsic & Extrinsic Sizing, Counter Styles
Rewriting 😵
CSS Basic Box Model, Generated Content, Line Layout, Ruby, Syntax, Backgrounds and Borders
Abandoned 😥
Behavioral Extensions, Hyperlink Presentation, Grid Positioning
Find out more
www.w3.org/Style/CSS/current-work
Do it with <style>
<style>
</style>
Do it with <style>
<style>
/* Rules */
</style>
Do it with <style>
<style>
/* Rule */
#selector {
}
</style>
Do it with <style>
<style>
/* Rule */
#selector {
property: value;
}
</style>
Do it with <style>
<style>
/* Rule */
#selector:pseudo-class {
property: value;
}
</style>
Come On My Selector
New selectors in CSS3.
Sweet Child O' Mine
<style>
#big-box{
background-color: gray;
}
.small-box{
background-color: lightskyblue;
}
.small-box:first-child {
background-color: hotpink;
}
</style>
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
To Be, or :Not() to Be
<style>
#big-box{ background-color: gray; }
.small-box{ background-color: lightskyblue; }
.small-box.left { float: left; }
.small-box.right { float: right; }
.small-box:not(.left) { background-color: hotpink; }
</style>
Properties
Over 100 new properties in CSS3!
(but first a warning)
Vendor Prefixes
-moz, -webkit, -ms, -o
Solution?
<style>
/* Use prefixes if you must... */
.box {
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
/* ...but always include the un-prefixed version */
transition: all 1s linear;
}
</style>