Notes for CSS - Data Types

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 7

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types

## Slide 11

https://developer.mozilla.org/en-US/docs/Web/CSS/url

## Slide 14

Other examples of resource inlining: including JavaScript inside <script> & CSS inside <style>
http://chimera.labs.oreilly.com/books/1230000000545/ch11.html#RESOURCE_INLINING

## Slide 17

http://support.microsoft.com/kb/191239

## Slide 18

http://www.mobilefish.com/services/base64/base64.php

## Slide 21

https://developer.mozilla.org/en-US/docs/Web/CSS/length

## Slide 25

https://www.flickr.com/photos/38446022@N00/7040636843/

## Slide 26

Pompeii ruins looking from the Forum towards the Temple of Jupiter

Wikimedia - Kim Traynor - CC BY-SA 3.0 - 2012-07-18

https://en.wikipedia.org/wiki/File:Ruins_of_Pompeii_showing_Mount_Vesuvius.JPG

## Slide 27

Cave canem (beware of the dog) mosaic - Pompeii, Casa di Orfeo, VI.14.20 - 79 CE

Wikimedia - Marie-Lan Nguyen - 2011 - Public domain

https://en.wikipedia.org/wiki/File:Cave_canem_MAN_Napoli_Inv110666.jpg

## Slide 28

Cave canem (beware of the dog) mosaic - Pompeii, Casa di Orfeo, VI.14.20 - 79 CE

Wikimedia - Marie-Lan Nguyen - 2011 - Public domain

https://en.wikipedia.org/wiki/File:Cave_canem_MAN_Napoli_Inv110666.jpg

## Slide 29

https://en.wikipedia.org/wiki/File:Georges_Seurat_-_A_Sunday_on_La_Grande_Jatte_--_1884_-_Google_Art_Project.jpg

## Slide 30

Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte (1884)

https://commons.wikimedia.org/wiki/File:Georges_Seurat_-_A_Sunday_on_La_Grande_Jatte_--_1884_-_Google_Art_Project-x0-y0.jpg

Movie created with FotoMagico

## Slide 31

Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte (1884)

## Slide 32

Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte (1884)

## Slide 35

iPhone 4 was released in 2010: https://en.wikipedia.org/wiki/IPhone_4

2019 iPhone 11 Pro Max: https://en.wikipedia.org/wiki/IPhone_11_Pro

## Slide 36

A px is an angular measurement where 1px = 5376 * tan(radians/2)

## Slide 37

https://drafts.csswg.org/css-values-4/#absolute-lengths

## Slide 45

https://caniuse.com/#feat=ch-unit

https://caniuse.com/#feat=mdn-css_types_length-percentage_ex

https://caniuse.com/#feat=rem

## Slide 46

As of 2020-07-13

https://caniuse.com/#feat=mdn-css_types_length_cap

https://caniuse.com/#feat=mdn-css_types_length_ic

https://caniuse.com/#feat=mdn-css_types_length_lh

https://caniuse.com/#feat=mdn-css_types_length_rlh

## Slide 48

https://developer.mozilla.org/en-US/docs/Web/CSS/length

## Slide 49

https://developer.mozilla.org/en-US/docs/Web/CSS/length

## Slide 50

http://caniuse.com/#search=vh

https://developer.mozilla.org/en-US/docs/Web/CSS/length

## Slide 53

https://developer.mozilla.org/en-US/docs/Web/CSS/calc 

## Slide 54

https://codepen.io/websanity/pen/eYJjaEP?editors=1100

## Slide 55

https://codepen.io/websanity/pen/eYJjaEP?editors=1100

## Slide 56

https://codepen.io/websanity/pen/eYJjaEP?editors=1100

## Slide 57

https://codepen.io/websanity/pen/eYJjaEP?editors=1100

## Slide 58

https://codepen.io/websanity/pen/BajPemZ?editors=1100

## Slide 59

https://codepen.io/websanity/pen/BajPemZ?editors=1100

## Slide 60

https://codepen.io/websanity/pen/BajPemZ?editors=1100

## Slide 61

https://caniuse.com/#feat=calc

https://caniuse.com/#feat=mdn-css_types_calc_color_values

https://caniuse.com/#feat=mdn-css_types_calc_nested

https://caniuse.com/#feat=mdn-css_types_calc_number_values

https://caniuse.com/#feat=mdn-css_types_calc_gradient_color_stops

https://caniuse.com/#feat=mdn-css_at-rules_media_calc

## Slide 64

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

## Slide 65

CSS 2 added… wait for it… orange!

CSS 3 allows grey or gray

## Slide 66

http://meyerweb.com/eric/thoughts/2014/06/09/in-memoriam-2/

https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life

https://www.metafilter.com/140112/A-hue-angle-of-270-degrees-a-saturation-of-50-and-a-lightness-of-40

https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html

## Slide 75

33 is 20%
66 is 40%
99 is 60%
CC is 80%
## Slide 76

https://caniuse.com/#feat=mdn-css_types_color_keyword_color_values

https://caniuse.com/#feat=mdn-css_types_color_rebeccapurple & https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/

https://caniuse.com/#feat=mdn-css_types_color_rgb_hexadecimal_notation

https://caniuse.com/#feat=css-rrggbbaa

## Slide 81

https://en.wikipedia.org/wiki/File:HSL_color_solid_cylinder_alpha_lowgamma.png

## Slide 82

https://cdpn.io/websanity/debug/ystzL, from https://codepen.io/websanity/pen/ystzL

## Slide 84

https://caniuse.com/#feat=css3-colors

## Slide 87

https://codepen.io/websanity/pen/eYJjxzj?editors=1100

## Slide 88

https://caniuse.com/#feat=mdn-css_types_color_transparent 

https://caniuse.com/#feat=currentcolor

## Slide 97

You *can* start with 0–9 if you escape it; e.g., \5

For the full list of forbidden CSS keywords, see https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident

## Slide 101

七 = Japanese 7

## Slide 109

https://drafts.csswg.org/css-values-3/

## Slide 110

https://drafts.csswg.org/css-values-4/, as of 2020-07-11