CSS Level 3 - ATLAS Institutecreative.colorado.edu/.../pdf/week8-tech-css-layout.pdf · 2018-10-16 · css timeline 1996 - css 1.0 recommendation 2000 - css 2.0 recommendation ...

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

https://caniuse.com

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

http://css3generator.com/

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

cubic bezier transition

http://cubic-bezier.com/

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