Notes for CSS - Media-Specific Styles

By Scott Granneman & Jans Carton

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

## Slide 14

Notice that the <link> doesn’t specify a media, so it applies to all

## Slide 16

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

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

## Slide 20

https://drafts.csswg.org/mediaqueries/#media-types

Browsers do not support speech

## Slide 22

https://drafts.csswg.org/mediaqueries/#media-types

## Slide 24

http://www.webstandards.org/learn/faq/

## Slide 25

http://www.webstandards.org/learn/faq/

## Slide 26

http://www.webstandards.org/learn/faq/

## Slide 27

http://www.webstandards.org/learn/faq/

## Slide 30

http://www.webstandards.org/learn/faq/

## Slide 31

http://www.webstandards.org/learn/faq/

## Slide 37

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 38

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 39

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 40

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 41

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 42

https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css

## Slide 46

Confusing, because min is bigger than & max is smaller than!

## Slide 51

https://www.w3.org/TR/mediaqueries-4/

## Slide 54

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

## Slide 55

https://www.w3.org/TR/mediaqueries-4/

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

## Slide 57

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

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

Safari: https://bugs.webkit.org/show_bug.cgi?id=78087

As of 2020-07-20

## Slide 58

https://www.w3.org/TR/mediaqueries-4/

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

## Slide 59

https://www.w3.org/TR/mediaqueries-4/

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

## Slide 60

https://www.w3.org/TR/mediaqueries-4/

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

## Slide 61

https://drafts.csswg.org/mediaqueries-4/#mf-deprecated

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