CSS Level 3 - University of Colorado Boulder · 2018. 10. 16. · 1997 - html 3.2 1998 - html 4.0...
Transcript of CSS Level 3 - University of Colorado Boulder · 2018. 10. 16. · 1997 - html 3.2 1998 - html 4.0...
CSS Level 3
World Wide Web Consortium (W3C)
international community that develops open standards to ensure the long-term growth of the Web.
w3c stagesworking draft
last call
candidate recommendation
proposed recommendation
published recommendation
html timeline 1995 - html 2.0
1997 - html 3.2
1998 - html 4.0
2000 - xhtml 1.0
2010 - html 5.0
html5 timeline
css timeline1996 - css 1.0 recommendation
2000 - css 2.0 recommendation
2004 - css 2.1 (started)
2005 - css 2.1 working draft
2007 - css 2.1 candidate recommendation
2011 - css 2.1 recommendation
rapid evolution of the web
standards process unwieldy
constantly changing technology
changes in how websites are developed and consumed
mobile web
online applications (API)
there is no spoon
or css 3.0 specification
so what is css3
new css mark up with level 3 label
based on or an extension of 2.1
it is now just “css” but split into individual...
modulesfuture editions of css will update existing modules or add new ones
evolve independently of each other
selectors are defined in one module
background and borders in another
easier to edit or add modules based on current priorities and needs
css level 3 border radius
box shadow
text shadow
rgba
@fontface
multiple columns
selectors
box resize
box sizing
outline
transitions
transform
gradients
vendor prefixesadd support for new CSS features before those features are fully supported in all browsers
-webkit- = chrome, safari, android, ios
-moz- = firefox
-o- = opera
-ms- = microsoft explorer
css reset (with older browser support)
*, *:before, *:after { margin: 0;padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
pre-processorscss animation
vendor prefixes
can be auto-generated with pre-processors
sass
css transitionstransition-property
transition-duration
transition-timing-function
transition: all 500ms ease-in-out; (short-hand)
transition-property all, background, color, height, width, outline…
just use “all”
transition-duration seconds = s
milliseconds = ms
1000ms = 1s
transition-timing-function
ease > slow start, then fast, then end slowly (default)
linear > same speed from start to end
ease-in > slow start
ease-out > slow end
ease-in-out > slow start and end
cubic-bezier(n,n,n,n) > define your own values in a cubic-bezier function
transition code
add transition to initial state
make changes to hover state
CSS GRIDpowerful layout system
divides page into grid (columns and rows)
defines relationships between areas (size, position, alignment)
responsive ready
grid code
define grid
name grid areas