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

http://caniuse.com

## Slide 10

Still CR as of 2020-07-07

## Slide 11

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

## Slide 12

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

## Slide 13

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 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 18

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

## Slide 19

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

## Slide 31

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

## Slide 36

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

## Slide 38

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 40

Note that either name for the folder is OK.

Note also that 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 43

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

## Slide 44

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 55

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

## Slide 56

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

## Slide 61

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 63

The browser processing pipeline is covered in the CSS Overview presentation

Diagram by Scott Granneman & Jans Carton

## Slide 64

The browser processing pipeline is covered in the CSS Overview presentation

## Slide 65

https://hpbn.co/primer-on-web-performance/#dom-cssom-and-javascript

## Slide 66

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

## Slide 68

https://hpbn.co/primer-on-web-performance/#dom-cssom-and-javascript

## Slide 69

Diagram by Scott Granneman & Jans Carton

## Slide 71

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

## Slide 74

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

## Slide 82

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 83

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

## Slide 84

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

## Slide 85

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

## Slide 86

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

## Slide 87

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

## Slide 88

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

## Slide 89

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

## Slide 90

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

## Slide 92

https://hpbn.co/primer-on-web-performance/#dom-cssom-and-javascript

## Slide 93

Diagram by Scott Granneman & Jans Carton

## Slide 96

Diagram by Scott Granneman & Jans Carton

## Slide 97

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

## Slide 98

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

## Slide 99

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 100

Diagram by Scott Granneman & Jans Carton

## Slide 101

Diagram by Scott Granneman & Jans Carton

## Slide 102

Diagram by Scott Granneman & Jans Carton

## Slide 103

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 107

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 108

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

## Slide 113

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

## Slide 120

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

## Slide 121

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

## Slide 122

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

## Slide 124

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

## Slide 128

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 129

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

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

## Slide 131

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

## Slide 132

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

## Slide 133

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

## Slide 137

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

## Slide 138

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

## Slide 139

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

## Slide 140

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

## Slide 143

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 144

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

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

## Slide 146

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

## Slide 147

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

## Slide 148

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 149

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 150

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

## Slide 151

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

## Slide 152

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

## Slide 159

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

## Slide 167

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

## Slide 168

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

## Slide 169

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

## Slide 170

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

## Slide 171

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

## Slide 172

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

## Slide 173

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

## Slide 174

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

## Slide 179

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

## Slide 180

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

## Slide 181

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

## Slide 182

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

## Slide 183

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

## Slide 184

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

## Slide 185

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

## Slide 187

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

## Slide 188

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

## Slide 201

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 204

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

## Slide 205

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

## Slide 206

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

## Slide 214

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

## Slide 216

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

## Slide 217

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

## Slide 218

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

## Slide 219

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

## Slide 220

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

## Slide 221

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

## Slide 222

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

## Slide 223

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

## Slide 225

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

What does Seamus look like? Why?

## Slide 227

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

## Slide 230

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

## Slide 236

Firefox (Gecko)

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css, 2015-12-27

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

## Slide 237

margin-block-start is currently Mozilla-only

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css, 2015-12-27

## Slide 238

WebKit (Safari)

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

## Slide 239

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 242

Default rules for browser CSS

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

## Slide 243

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

## Slide 245

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

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

## Slide 247

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

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

## Slide 248

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 250

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 251

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 254

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 256

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

## Slide 267

The W3C presents the numbers with commas, like this: 0,1,2,0. Technically, the calculation of specificity isn't really a base 10 counting system, since you could possibly have a specificity value like 0,1,12,3. The 12 wouldn’t move it’s 1 into the 100s column like a base 10 system would, hence the commas. This is so rare that I never worry about it.

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/2011/REC-CSS2-20110607/cascade.html#specificity & https://www.w3.org/TR/selectors-3/#specificity

## Slide 271

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

## Slide 272

https://specificity.keegan.st/

## Slide 276

Answer: red, because it is last in the CSS

## Slide 278

Answer: blue, because it is last in the CSS

## Slide 280

Created by Scott Granneman & Jans Carton

## Slide 283

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

## Slide 298

Created by Scott Granneman & Jans Carton

## Slide 301

Created by Scott Granneman & Jans Carton

## Slide 303

Created by Scott Granneman & Jans Carton

## Slide 305

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

## Slide 309

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

## Slide 310

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 313

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

## Slide 314

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

## Slide 316

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

## Slide 318

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

## Slide 324

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

## Slide 325

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

## Slide 326

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://caniuse.com/#feat=css-all

## Slide 329

https://en.wikipedia.org/wiki/File:Eric-meyer.jpg

## Slide 336

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

## Slide 337

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

## Slide 338

https://css-tricks.com/

## Slide 339

https://css-tricks.com/

## Slide 340

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

## Slide 342

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

## Slide 343

http://caniuse.com

## Slide 344

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

## Slide 345

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

## Slide 346

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

## Slide 347

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

## Slide 361

http://theolabrothers.com

## Slide 362

http://theolabrothers.com

## Slide 366

The Mac version is garbage

## Slide 367

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

## Slide 368

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

## Slide 369

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

## Slide 370

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

## Slide 371

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