Notes for CSS - Overview

By Scott Granneman & Jans Carton

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

## Slide 3

http://www.granneman.com

## Slide 4

http://twitter.com/garybernhardt/status/664149582046040064

## Slide 9

Still CR as of 2020-07-07

## Slide 10

https://www.w3.org/Style/CSS/current-work

## Slide 11

https://en.wikipedia.org/wiki/File:CSS3_taxonomy_and_status-v2.png 

CSS3 Taxonomy & Status v2 - Wikipedia

Krauss - CC BY-SA 4.0 - 2015-11-12

## Slide 12

http://www.w3.org/Style/CSS/current-work

## Slide 13

http://www.w3.org/Style/CSS/current-work

## Slide 14

http://www.w3.org/Style/CSS/current-work

## Slide 15

http://www.w3.org/Style/CSS/current-work

## Slide 16

http://www.w3.org/Style/CSS/current-work

## Slide 17

http://www.w3.org/Style/CSS/current-work

## Slide 19

https://w3techs.com/technologies/overview/site_element 

## Slide 30

http://codepen.io/websanity/pen/cLqbJ?editors=100

## Slide 35

https://codepen.io/websanity/pen/aQPXrX?editors=1000

## Slide 37

http://chimera.labs.oreilly.com/books/1230000000545/ch11.html#RESOURCE_INLINING

Other examples of resource inlining: embedding JavaScript via <script> & base64 encoding in Data URLs

## Slide 41

You can use other names, but css or styles are most common

## Slide 42

The file can have any name, like search.css or foobar.css; it’s just that main.css is among the most common & is one we’ll use in my courses

## Slide 50

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

The info on this slide was true for CSS 2.1 (https://drafts.csswg.org/css2/#charset), but not later: https://www.w3.org/TR/css-syntax-3/#input-byte-stream 

For Unicode byte-order, see https://en.wikipedia.org/wiki/Byte_order_mark

## Slide 51

Atkins Jr., Tab & Simon Sapin. “CSS Syntax Module Level 3: W3C Candidate Recommendation, 16 July 2019”. World Wide Web Consortium, 16 July 2019, https://www.w3.org/TR/css-syntax-3/#charset-rule. 

CSS 2.1: https://drafts.csswg.org/css2/#charset 

## Slide 52

Atkins Jr., Tab & Simon Sapin. “CSS Syntax Module Level 3: W3C Candidate Recommendation, 16 July 2019”. World Wide Web Consortium, 16 July 2019, https://www.w3.org/TR/css-syntax-3/#input-byte-stream. 

## Slide 60

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

## Slide 61

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

## Slide 66

Grigorik, Ilya. “Table 10-1. Time and user perception” from “Chapter 10: Primer on Web Performance”. High Performance Browser Networking (2013). Licensed under CC BY-NC-ND 4.0. https://hpbn.co/primer-on-web-performance/. Accessed November 16, 2018.

## Slide 68

The browser processing pipeline is covered in the CSS Overview presentation

Diagram by Scott Granneman & Jans Carton

## Slide 69

Specs at http://www.w3.org/TR/dom/ & http://www.w3.org/TR/DOM-Requirements/

## Slide 71

https://en.wikipedia.org/w/index.php?title=Conceptual_model&oldid=1030234438

## Slide 72

Beinahegut. “Comprehensive overview of the Solar System”. Wikimedia, 29 May 2018, https://en.wikipedia.org/wiki/File:Solar-System.pdf. Licensed CC BY-SA 4.0.

## Slide 73

Androidmarsexpress. “Maslow's Hierarchy of Needs”. Wikimedia, 10 August 2020, https://en.wikipedia.org/wiki/File:Maslow%27s_Hierarchy_of_Needs2.svg. Licensed CC BY-SA 4.0. 

## Slide 74

Corydave. “Bloom's Taxonomy”. Wikimedia, 9 April 2021, https://en.wikipedia.org/wiki/File:BloomsTaxonomy.png. Licensed CC0 1.0 (Public domain).

## Slide 75

Matthew.viel. “File:KM Pyramid Adaptation.png”. Wikimedia, 07 June 2016, https://en.wikipedia.org/wiki/File:KM_Pyramid_Adaptation.png. Licensed CC BY-SA 4.0.

## Slide 76

Marekich. “File:Nucleus drawing.svg” Wikimedia, 28 September 2012, https://en.wikipedia.org/wiki/File:Nucleus_drawing.svg
. Licensed CC BY-SA 3.0.

## Slide 77

burlesonmatthew. “Carbon Hydrogen Atom Molecule Chemistry Chemical”. Pixabay, 12 April 2017, https://pixabay.com/illustrations/carbon-hydrogen-atom-molecule-2222968/?download. Licensed by Pixabay: Free for commercial use; No attribution required.

## Slide 78

Top left: Booyabazooka. “Water molecule”. Wikimedia, 18 July 2006, https://commons.wikimedia.org/wiki/File:Water_molecule_(1).svg. Licensed public domain.

Top right: MsKDinh. “Ball and stick model of water molecule labelled with element symbol”. Wikimedia, 2020-11-05 November 2020, https://commons.wikimedia.org/wiki/File:Water_Molecule_Ball_and_Stick.png. Licensed CC BY-SA 4.0.

Bottom left: Mills, Ben. “Structure and dimensions of water molecule”. Wikimedia, 21 May 2009, https://commons.wikimedia.org/wiki/File:Water-dimensions-from-Greenwood%26Earnshaw-2D.png. Licensed public domain. 

Molecule definition: Wikipedia contributors. “Molecule”. Wikipedia, 6 July 2021, https://en.wikipedia.org/w/index.php?title=Molecule&oldid=1032275060. 

## Slide 79

Medium69. “File:Sucrose molecule.svg”. Wikipedia, 1 November 2014, https://commons.wikimedia.org/wiki/File:Sucrose_molecule.svg. 

## Slide 80

https://en.wikipedia.org/wiki/File:Animal_cell_structure_en.svg 

## Slide 81

Frevert U, Engelmann S, Zougbédé S, Stange J, Ng B, et al; converted to SVG by Viacheslav Vtyurin. “File:Hepatic structure2.svg”. Wikimedia, 24 May 2005, https://en.wikipedia.org/wiki/File:Hepatic_structure2.svg. Licensed CC BY 2.5.

Based on the research article “Intravital Observation of Plasmodium berghei Sporozoite Infection of the Liver”, PLoS Biology, doi:10.1371/journal.pbio.0030192.g011.

## Slide 82

OpenStax College. “File:2120 Major Systemic Artery.jpg”. Wikimedia, 19 June 2013, https://en.wikipedia.org/wiki/File:2120_Major_Systemic_Artery.jpg. Licensed CC BY 3.0.

## Slide 83

Diagram by Scott Granneman & Jans Carton

## Slide 85

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction, emphasis added

## Slide 89

https://en.wikipedia.org/wiki/The_Thing_(1982_film)

## Slide 98

3D View stopped working in Firefox 47

https://developer.mozilla.org/en-US/docs/Tools/3D_View

Tilt 3D was an extension that worked up to Firefox 21

https://addons.mozilla.org/en-US/firefox/addon/tilt/

## Slide 99

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 100

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 101

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 102

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 103

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 104

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 105

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 106

http://www.nytimes.com/2014/08/11/technology/-inside-apples-internal-training-program-.html?ref=technology

## Slide 108

Diagram by Scott Granneman & Jans Carton

## Slide 111

Diagram by Scott Granneman & Jans Carton

## Slide 112

https://en.wikipedia.org/w/index.php?title=Document_Object_Model&oldid=1024475914

## Slide 113

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

## Slide 114

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

## Slide 115

The Render Tree also adds things that weren’t in the DOM, like list item marker boxes or anonymous block boxes

Diagram by Scott Granneman & Jans Carton

## Slide 116

Diagram by Scott Granneman & Jans Carton

## Slide 117

Diagram by Scott Granneman & Jans Carton

## Slide 118

Diagram by Scott Granneman & Jans Carton

## Slide 119

If you hear people say that a CSS selector affects all instances of an HTML element, it’s really all the DOM objects generated by those HTML elements

## Slide 122

https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
“Style rule” used to be called “ruleset”, “rule set”, or just “rule” (the problem with “rule” by itself is that there are other rules besides style rules, e.g., at-rules & nesting rules, which can get confusing)
“ruleset”: MDN contributers. “CSS rulesets” on “Syntax”. MDN Web Docs, 12 August 2021, https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_rulesets. 
“rule set” & “rule”: Bos, Bert, Tantek Çelik, Ian Hickson, & Håkon Wium Lie. “Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification”. World Wide Web Consortium, 07 June 2011, https://www.w3.org/TR/CSS2/syndata.html#rule-sets.

## Slide 123

1: type, class, ID, descendant combinator, pseudo classes (E:link, E:visited, & E:active), pseudo-elements (::first-line & ::first-letter) + grouping

2: *, E[foo], E[foo="bar"], E[foo~="bar"], E[foo|="en"], E:first-child, E:lang(fr), (E:active), E:hover, E:focus, E::before, E::after, E > F, E + F

3: E[foo^="bar"], E[foo$="bar"], E[foo*="bar"], E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type, E:empty, E:target, E:enabled, E:disabled, E:checked, E:indeterminate, E:not(s), E ~ F

## Slide 124

https://www.w3.org/TR/selectors-4/#structure

## Slide 129

http://codepen.io/websanity/pen/FBmbs

FIXME add example showing * inside something else

## Slide 134

Class name is an identifier according to the spec, just like an ID name is

## Slide 135

http://codepen.io/websanity/pen/Bvdsb?editors=110 

## Slide 136

http://codepen.io/websanity/pen/Bvdsb?editors=110 

## Slide 137

http://codepen.io/websanity/pen/Bvdsb?editors=110

## Slide 139

http://codepen.io/websanity/pen/qpvin?editors=110

FIXME - better screenshot

## Slide 143

http://www.w3.org/TR/html51/dom.html#classes

http://www.w3.org/TR/html51/infrastructure.html#set-of-space-separated-tokens

Same rules for HTML 4.01:
http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2

http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-cdata

## Slide 145

https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming

## Slide 146

.center is unique, as it is both a function *and* appearance

## Slide 147

https://google.github.io/styleguide/htmlcssguide.xml?showone=ID_and_Class_Name_Delimiters#ID_and_Class_Name_Delimiters

FIXME - lower camel case, upper camel case, snake case

## Slide 149

ID name is an identifier according to the spec, just like an class name is

## Slide 151

http://codepen.io/websanity/pen/gorts?editors=110

## Slide 152

http://codepen.io/websanity/pen/gorts?editors=110

FIXME!

## Slide 154

http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.2

http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name

## Slide 155

http://www.w3.org/TR/html51/dom.html#the-id-attribute 

https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming

## Slide 157

As you will see in the CSS - Selectors slides, you do need IDs for fragment identifiers & JavaScript hooks

## Slide 158

See https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations

See https://en.wikipedia.org/wiki/Fragment_identifier, http://www.w3.org/TR/media-frags/, or http://www.w3.org/DesignIssues/Fragment.html for details

## Slide 159

See https://blog.httpwatch.com/2011/03/01/6-things-you-should-know-about-fragment-urls/ for simple explanations

See https://en.wikipedia.org/wiki/Fragment_identifier, http://www.w3.org/TR/media-frags/, or http://www.w3.org/DesignIssues/Fragment.html for details

## Slide 160

http://codepen.io/websanity/pen/lGfLw?editors=100

## Slide 161

http://codepen.io/websanity/pen/adEjdV?editors=101

## Slide 162

http://codepen.io/websanity/pen/adEjdV?editors=101

## Slide 166

Usually .alert is all you want, allowing you to use the class with any element

## Slide 169

http://codepen.io/websanity/pen/bkxfA?editors=110

## Slide 171

FIXME - put table from CSS Selectors here too

## Slide 178

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

## Slide 179

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

## Slide 180

http://codepen.io/websanity/pen/KgrkmJ?editors=1100 

## Slide 181

http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 182

Focus on <small>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 183

Focus on <small>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100 

## Slide 184

Focus on <a>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 185

Focus on <a>
http://codepen.io/websanity/pen/KgrkmJ?editors=1100

## Slide 187

FIXME improve

## Slide 190

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 191

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 192

https://codepen.io/websanity/pen/ZEQwmXv?editors=1000

## Slide 193

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 194

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 195

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 196

http://codepen.io/websanity/pen/BjZNdL?editors=110

## Slide 198

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

## Slide 199

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

## Slide 211

The order does matter if two of the properties are the same, like:
    font-size: 12px;
    font-size: .75rem;
In that case, the second one wins. Why do that? Backward compatibility.

## Slide 214

https://en.wikipedia.org/wiki/Design_pattern

## Slide 215

https://getbootstrap.com/docs/4.5/utilities/borders/#sizes

## Slide 216

https://getbootstrap.com/docs/4.5/components/card/

## Slide 224

http://codepen.io/websanity/pen/EKvas

## Slide 226

OK, <div> does do one thing without CSS: it creates a line break, but that’s not why you’d use it

## Slide 227

http://codepen.io/websanity/pen/dMZgBP?editors=1000

## Slide 228

http://codepen.io/websanity/pen/dMZgBP?editors=1000

## Slide 229

http://codepen.io/websanity/pen/tEHnx?editors=110

## Slide 230

http://codepen.io/websanity/pen/tEHnx?editors=110

## Slide 231

http://codepen.io/websanity/pen/dMZgBP?editors=1000

## Slide 232

H. P. Lovecraft’s “The Dunwich Horror“, http://www.hplovecraft.com/writings/texts/fiction/dh.aspx

## Slide 234

http://codepen.io/websanity/pen/bIDeA?editors=110

What does Seamus look like? Why?

## Slide 236

http://codepen.io/websanity/pen/gpnjK?editors=110

## Slide 239

http://www.w3.org/TR/CSS2/cascade.html

## Slide 241

Changes involving Shadow DOM: https://www.w3.org/TR/css-cascade-4/#cascade-sort 

## Slide 242

Created by Scott Granneman & Jans Carton

Note: as of CSS Cascading and Inheritance Level 4 (August 2020), things have changed if the Shadow DOM is involved; more on this in the Web Components presentation

## Slide 246

Firefox (Gecko)

https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css, 2020-12-26

For forms, see http://hg.mozilla.org/mozilla-central/file/tip/layout/style/forms.css

## Slide 247

margin-block-start is currently Mozilla-only

https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css, 2020-12-26

## Slide 248

WebKit (Safari)

https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, 2015-12-27

## Slide 249

1__qem = 1 quirky em = a margin which can be collapsed if the page is in quirks mode; see http://stackoverflow.com/questions/7448673/what-does-1-qem-mean

https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css, 2015-12-27

## Slide 250

http://www.iecss.com/opera-10.51.css 

## Slide 251

http://www.iecss.com/opera-10.51.css 

## Slide 252

Default rules for browser CSS

https://html.spec.whatwg.org/multipage/rendering.html

## Slide 253

https://html.spec.whatwg.org/multipage/rendering.html

## Slide 255

http://kb.mozillazine.org/Profile_folder_-_Firefox 

http://kb.mozillazine.org/UserContent.css 

## Slide 257

Of course, the instructions change depending upon which version of Windows you’re using — how annoying!
 

http://kb.mozillazine.org/UserContent.css 

## Slide 258

If you don’t see Library, hold down Option/Alt & click on the Go menu, & then select Library

http://kb.mozillazine.org/UserContent.css 

## Slide 260

https://src.chromium.org/viewvc/chrome?revision=234007&view=revision 

https://codereview.chromium.org/64843004 

https://bugs.chromium.org/p/chromium/issues/detail?id=347016 

## Slide 261

https://msdn.microsoft.com/en-us/library/mt227929%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

http://stackoverflow.com/questions/33060628/how-to-attach-user-css-to-microsoft-edge

## Slide 264

Stylus for Chromium-based browsers: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne 

Stylus for Firefox: https://addons.mozilla.org/firefox/addon/styl-us/ 

Cascadea for Safari: https://apps.apple.com/us/app/cascadea/id1432182561?mt=12 

Problems with Stylish: https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/ & https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/

## Slide 266

Why? Because if authors chose fonts, I’d like to see them, but if they don’t, then use mine.

## Slide 268

Note: Original order of origin & importance from CSS Overview, from lightest to heaviest

## Slide 276

NOTE: “Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.” For more on the negation pseudo-class, see my CSS - Selectors presentation or go to 

See:
https://www.w3.org/TR/selectors-4/#specificity-rules 

https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity

https://www.w3.org/TR/selectors-3/#specificity 

## Slide 279

https://www.w3.org/TR/selectors-4/#specificity-rules 

## Slide 280

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

## Slide 281

https://www.w3.org/TR/css-style-attr/#interpret 

## Slide 283

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

FIXME: Change to Alphabet 1,26,1 & add Specificity: before Alphabet

## Slide 288

https://specificity.keegan.st/

## Slide 292

Answer: red, because it is last in the CSS

## Slide 294

Answer: blue, because it is last in the CSS

## Slide 296

Created by Scott Granneman & Jans Carton

Note: as of CSS Cascading and Inheritance Level 4 (August 2020), things have changed if the Shadow DOM is involved; more on this in the Web Components presentation

## Slide 299

I used a Mac tool—Pixel Winch—to measure & label those pixels

## Slide 314

Created by Scott Granneman & Jans Carton

## Slide 317

Created by Scott Granneman & Jans Carton

## Slide 319

Created by Scott Granneman & Jans Carton

## Slide 321

Again, I used a Mac tool—Pixel Winch—to measure & label those pixels

## Slide 325

See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Keyword_index for a comprehensive list

## Slide 326

https://drafts.csswg.org/css-cascade/#defaulting-keywords 

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

The W3C says that “Other CSS specifications can define additional CSS-wide keywords.” (https://www.w3.org/TR/css-values-3/#common-keywords) but we don’t see any others at this time (2020-07-09)

https://drafts.csswg.org/css-fonts-4/#font-family-prop 

## Slide 329

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

## Slide 330

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

## Slide 332

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

## Slide 334

http://codepen.io/websanity/pen/OVNzxG?editors=110

## Slide 340

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

## Slide 341

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

## Slide 342

https://caniuse.com/#feat=css-initial-value

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

https://caniuse.com/#feat=css-unset-value

https://caniuse.com/#feat=css-revert-value & https://www.chromestatus.com/feature/5644990145363968 

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

## Slide 347

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

FIXME: update screenshot, as it’s now just MDN

## Slide 348

https://www.w3.org/blog/2017/10/w3c-to-work-with-mdn-on-web-platform-documentation/

## Slide 349

https://css-tricks.com/

## Slide 350

https://css-tricks.com/

## Slide 351

https://css-tricks.com/guides/ 

## Slide 353

http://meiert.com/en/indices/css-properties/

## Slide 354

https://caniuse.com

## Slide 355

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

## Slide 356

http://apps.workflower.fi/vocabs/css/en

## Slide 357

http://apps.workflower.fi/vocabs/css/en#selector 

## Slide 358

http://apps.workflower.fi/vocabs/css/en#property

## Slide 359

https://pinboard.in/u:rsgranne/t:css 

## Slide 369

http://theolabrothers.com

## Slide 370

http://theolabrothers.com

## Slide 374

The Mac version is garbage

## Slide 375

http://annystudio.com/software/colorpicker/

## Slide 376

http://annystudio.com/software/colorpicker/

## Slide 377

PicPick (https://picpick.app/en/) looks pretty good, but it doesn’t seem to support HSL; $30

## Slide 378

http://www.iconico.com/colorpro/ 

## Slide 379

http://www.iconico.com/colorpro/