Notes for CSS - Data Types

By Scott Granneman & Jans Carton

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

## Slide 3

Atkins, Tab & Elika J. Etemad / fantasai. “CSS Values and Units Module Level 4”. World Wide Web Consortium (W3C), 18 Dec. 2023, https://www.w3.org/TR/css-values-4/. Web. 18 Jan 2024.

## Slide 5

MDN contributors. “CSS data types”. MDN Web Docs, 27 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types. Web. 4 Apr 2023.

Atkins, Tab & fantasai. “CSS Values and Units Module Level 4”. W3C, 15 Mar 2023, https://drafts.csswg.org/css-values-4/. Web. 4 Apr 2023.

## Slide 6

MDN contributors. “CSS data types”. MDN Web Docs, 27 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types. Web. 4 Apr 2023.

Atkins, Tab & Elika J. Etemad / fantasai. “CSS Values and Units Module Level 4”. W3C, 15 Mar 2023, https://drafts.csswg.org/css-values-4/. Web. 4 Apr 2023.

## Slide 7

MDN contributors. “CSS data types”. MDN Web Docs, 27 Mar 2023, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types. Web. 4 Apr 2023.

Atkins, Tab & fantasai. “CSS Values and Units Module Level 4”. W3C, 15 Mar 2023, https://drafts.csswg.org/css-values-4/. Web. 4 Apr 2023.

## Slide 13

FIXME: add citations

## Slide 16

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

## Slide 21

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

## Slide 24

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

## Slide 25

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

## Slide 29

MDN contributors. “<length>”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024.

Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024.

## Slide 33

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

## Slide 34

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 35

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 36

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 37

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

## Slide 38

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 39

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

## Slide 40

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

## Slide 43

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 44

https://every-layout.dev/rudiments/units/

## Slide 45

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

## Slide 46

MDN contributors. “<length>”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024.

Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024.

## Slide 52

MDN contributors. “<length>”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024.

Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024.

## Slide 53

WebSanity. “CSS: em vs rem”. CodePen, 17 Jan 2024, https://codepen.io/websanity/pen/NWbaBp?editors=1100. Web. 17 Jan 2024.

## Slide 54

MDN contributors. “<length>”. MDN Web Docs, 2 Jan. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/length. Web. 18 Jan 2024.

Atkins, Tab & Elika J. Etemad / fantasai. “6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units”. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4, 18 Dec. 2023, https://www.w3.org/TR/css-values-4/#font-relative-lengths. Web. 18 Jan 2024.

## Slide 55

WebSanity. “CSS: em vs rem”. CodePen, 17 Jan 2024, https://codepen.io/websanity/pen/NWbaBp?editors=1100. Web. 17 Jan 2024.

## Slide 56

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

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

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

## Slide 57

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 59

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

## Slide 60

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

## Slide 61

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

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

## Slide 64

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

## Slide 65

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

## Slide 66

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

## Slide 67

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

## Slide 68

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

## Slide 69

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

## Slide 70

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

## Slide 71

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

## Slide 72

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 73

FIXME

## Slide 78

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

## Slide 79

CSS 2 added… wait for it… orange!

CSS 3 allows grey or gray

## Slide 80

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 81

Javi Aguilar and The CSS-Next Community Group. “File:Official CSS Logo.svg”. Wikipedia, The Free Encyclopedia, 12 Nov. 2024, https://en.wikipedia.org/wiki/File:Official_CSS_Logo.svg. Web. 24 Feb. 2025.

Licensed CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/.

## Slide 87

Roses: Myriams Fotos. “Roses Red Flowers Blossom Bloom Drip Beaded”. Downloaded from Pixabay as 4801075 on 2020-01-29. https://pixabay.com/photos/roses-red-flowers-blossom-bloom-4801075/.

Violets: margo555. “Violets Flowers. Spring Flowers.” Licensed from Can Stock Photo as csp18867997 on 2021-01-20. https://www.canstockphoto.com/violets-flowers-spring-flowers-18867997.html.

## Slide 94

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

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 103

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

## Slide 105

WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/ystzL. Web. 7 May 2023.

## Slide 113

MDN contributors. “rgb()”. MDN Web Docs, 14 Dec. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb. Web. 23 Feb. 2025.

MDN contributors. “hsl()”. MDN Web Docs, 14 Dec. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl. Web. 23 Feb. 2025.

## Slide 114

rgb()

Deveria, Alexis [@Fyrd]. “types: <color>: rgb() (RGB color model)”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_rgb. Web. 7 May 2023.

Deveria, Alexis [@Fyrd]. “types: <color>: rgb() (RGB color model): Space-separated rgb() parameters”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_rgb_space_separated_parameters. Web. 7 May 2023.

rgba()

Deveria, Alexis [@Fyrd]. “types: <color>: rgba() (RGB color model)”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_rgba. Web. 7 May 2023.

Deveria, Alexis [@Fyrd]. “types: <color>: rgba() (RGB color model): Space-separated parameters”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_rgba_space_separated_parameters. Web. 7 May 2023.

MDN contributors. “rgb()”. MDN Web Docs, 14 Dec. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb. Web. 23 Feb. 2025.

hsl()

Deveria, Alexis [@Fyrd]. “types: <color>: hsl() (HSL color model)”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_hsl. Web. 7 May 2023.

Deveria, Alexis [@Fyrd]. “types: <color>: hsl() (HSL color model): Space-separated parameters”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_hsl_space_separated_parameters. Web. 7 May 2023.

hsla()

Deveria, Alexis [@Fyrd]. “types: <color>: hsla() (HSL color model)”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_hsla. Web. 7 May 2023.

Deveria, Alexis [@Fyrd]. “types: <color>: hsla() (HSL color model): Space-separated parameters”. Can I use…, 6 May 2023, https://caniuse.com/mdn-css_types_color_hsla_space_separated_parameters. Web. 7 May 2023.

MDN contributors. “hsl()”. MDN Web Docs, 14 Dec. 2024, https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl. Web. 23 Feb. 2025.

Nardi, Chris. “Feature: CSS Color 4 HSL/HSLA syntax”. Chrome Platform Status, 26 July 2022, https://chromestatus.com/feature/5656221012983808. Web. 30 July 2022.

## Slide 116

MDN contributors. “<named-color>”. MDN Web Docs, 13 Feb. 2025, https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#transparent. Web. 23 Feb. 2025.

MDN contributors. “<color>”. MDN Web Docs, 13 Feb. 2025, https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword. Web. 23 Feb. 2025.

## Slide 117

WebSanity. “CSS Color: currentcolor value”. CodePen, 13 July 2020, https://codepen.io/websanity/pen/eYJjxzj?editors=1100. Web. 23 Feb. 2025.

## Slide 118

Deveria, Alexis [@Fyrd]. “types: <color>: Named colors: transparent”. Can I use…, 16 Feb. 2025, https://caniuse.com/mdn-css_types_color_named-color_transparent. Web. 23 Feb. 2025.
 

Deveria, Alexis [@Fyrd]. “CSS currentColor value”. Can I use…, 16 Feb. 2025, https://caniuse.com/currentcolor. Web. 23 Feb. 2025.

## Slide 127

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 131

七 = Japanese 7