→ and → to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

Course Outline

  1. Selectors
  2. Specificity
  3. Generated Content
  4. Media Queries
  5. Debugging
  6. Colors & Transparency
  7. Fonts / Typography
  8. Backgrounds & Borders
  9. Gradients
  10. Transforms
  11. Transitions & Animation
  12. Other Features

Part 5:
Media Queries

(briefly)

media queries

<link rel='stylesheet' type='text/css'
    media='screen' href='css/styles.css' />

<link rel='stylesheet' type='text/css'
    media='print' href='css/print.css' />
@media screen {
  p {
    color: blue;
  }
}

@media print {
  p {
    color: red;
  }
}
  • Chrome
  • Safari
  • Firefox
  • Opera
  • IE 5

10 Media Queries (2.1)

  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. tv
<link media="screen" ...

<style> @import "myCSS.css"; ...

@import url(myCSS.css) screen; IE8+

@media screen {}

<?xml-stylesheet media="screen" ...

media queries

<link rel='stylesheet'
media='screen and (min-width: 320px) and (max-width: 480px)'
href='css/smartphone.css' />
@media screen and (max-width: 480px){
  a {
    transition: background-color 200ms linear 50ms;
  }
}

@media screen and (orientation: landscape) {
  a[href^="mailto:]:before {
    content: url(icons/email.gif);
  }
}
  • Chrome
  • Safari 3.5
  • Firefox 3.5
  • Opera 9.5
  • IE 9
  • (min/max)-width: viewport width
  • (min/max)-height: viewport height
  • (min/max)-device-width: screen width
  • (min/max)-device-height: screen height
  • orientation: portrait(h>w) | landscape(w>h)
  • (min/max)-aspect-ratio: width/height
  • (min/max)-device-aspect-ratio: device-width/height
  • (min/max)-color:
  • (min/max)-color-index:
  • (min/max)-monochrome: 0 | 1+
  • (min/max)-resolution: 72dpi | 100dpcm
  • scan: progressive | interlace (tv)
  • grid: 0 | 1 (grids (like tty) or bitmap)
  • See Media Queries Spec

Media Query Syntax/Punctuation

media="only print and (color)"

media="only screen and (orientation: portrait)"

media="not screen and (color)"

media="print, screen and (min-width: 480px)"

Device and Capability Detection

@media screen and (-webkit-min-device-pixel-ratio: 2) {
 .iphone4 { /* high DPI */}
}
@media screen and (transform-3d) {
  .transforms {}
}
@media screen and (min-width: 320px) and (max-width: 500px){
  @-ms-viewport { width: device-width;}
}

Also works with (-prefix-animation) and (-prefix-transition)

Visit Site
Visit Site

Play with presentation window size 

body {
	-<prefix>-transition: all 1.5s linear;
}
@media only screen and (orientation: portrait) {
	body{
	  background: indianred;
	}
}
@media only screen and (max-width: 480px) {
	body{
	  background: palegoldenrod;
	}
}

shrink this window to see the presentation change colors

Viewport

<meta name="viewport" content="width=device-width,
            initial-scale=1, maximum-scale=1"/>
width
Size of the viewport in number of pixels or device-width (width of screen)
height
Height of the viewport in number of pixels or device-height (height of screen)
initial-scale
zoom level when page is first loaded
maximum-scale
minimum-scale
user-scalable
Are users allowed to zoom the page
@viewport {
  width: device-width; zoom: 0.5;
}
min-width
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
max-width
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
width
min-height
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
max-height
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
height
zoom
auto, positive number or percentage
min-zoom
Minimum zoom factor allowed. auto, positive number or percentage
max-zoom
Maximum zoom factor allowed. auto, positive number or percentage
user-zoom
zoom or fixed. User can or can't zoom in/out.
orientation
auto, portrait or landscape.
@media screen and (max-width:400px) {
  @-ms-viewport { width:320px; // or device-width;}
}

Part 5: Debugging

Debuggers

  • Firefox ➫ Firebug
  • Opera ➫ DragonFly
  • Internet Explorer ➫ F-12
  • Safari ➫ Web Inspector
  • Chrome ➫ Developer Tools
  • Mobile ➫ Weinre
  • Blackberry ➫ Remote debugging by IP
  • Mobile Chrome ➫ Tethered debugging

Weinre

  1. Download & Install Node.js (includes NPM)
  2. Install Weinre 
    npm -g install weinre
  3. Start Weinre 
    weinre
  4. Add Weinre to web page 
    <script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>
  5. Open the inspector 
    http://localhost:8080/client/

Learn from Debuggers

  1. -webkit-animation-delay: 0s;
  2. -webkit-animation-direction: normal;
  3. -webkit-animation-duration: 0s;
  4. -webkit-animation-fill-mode: none;
  5. -webkit-animation-iteration-count: 1;
  6. -webkit-animation-name: none;
  7. -webkit-animation-play-state: running;
  8. -webkit-animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  9. -webkit-appearance: none;
  10. -webkit-backface-visibility: visible;
  11. -webkit-background-clip: border-box;
  12. -webkit-background-composite: source-over;
  13. -webkit-background-origin: padding-box;
  14. -webkit-background-size: auto;
  15. -webkit-border-fit: border;
  16. -webkit-border-horizontal-spacing: 0px;
  17. -webkit-border-image: none;
  18. -webkit-border-vertical-spacing: 0px;
  19. -webkit-box-align: stretch;
  20. -webkit-box-direction: normal;
  21. -webkit-box-flex: 0;
  22. -webkit-box-flex-group: 1;
  23. -webkit-box-lines: single;
  24. -webkit-box-ordinal-group: 1;
  25. -webkit-box-orient: horizontal;
  26. -webkit-box-pack: start;
  27. -webkit-box-reflect: none;
  28. -webkit-box-shadow: none;
  29. -webkit-color-correction: default;
  30. -webkit-column-axis: auto;
  31. -webkit-column-break-after: auto;
  32. -webkit-column-break-before: auto;
  33. -webkit-column-break-inside: auto;
  34. -webkit-column-count: auto;
  35. -webkit-column-gap: normal;
  36. -webkit-column-rule-color: rgb(0, 0, 0);
  37. -webkit-column-rule-style: none;
  38. -webkit-column-rule-width: 0px;
  39. -webkit-column-span: 1;
  40. -webkit-column-width: auto;
  41. -webkit-flex-align: stretch;
  42. -webkit-flex-direction: row;
  43. -webkit-flex-flow: row nowrap;
  44. -webkit-flex-item-align: auto;
  45. -webkit-flex-order: 0;
  46. -webkit-flex-pack: start;
  47. -webkit-flex-wrap: nowrap;
  48. -webkit-flow-from: none;
  49. -webkit-flow-into: auto;
  50. -webkit-font-kerning: auto;
  51. -webkit-font-smoothing: auto;
  52. -webkit-font-variant-ligatures: normal;
  53. -webkit-highlight: none;
  54. -webkit-hyphenate-character: auto;
  55. -webkit-hyphenate-limit-after: auto;
  56. -webkit-hyphenate-limit-before: auto;
  57. -webkit-hyphenate-limit-lines: no-limit;
  58. -webkit-hyphens: manual;
  59. -webkit-line-box-contain: block inline replaced;
  60. -webkit-line-break: normal;
  61. -webkit-line-clamp: none;
  62. -webkit-line-grid: none;
  63. -webkit-line-grid-snap: none;
  64. -webkit-locale: auto;
  65. -webkit-margin-after-collapse: collapse;
  66. -webkit-margin-before-collapse: collapse;
  67. -webkit-marquee-direction: auto;
  68. -webkit-marquee-increment: 6px;
  69. -webkit-marquee-repetition: infinite;
  70. -webkit-marquee-style: scroll;
  71. -webkit-mask-attachment: scroll;
  72. -webkit-mask-box-image: none;
  73. -webkit-mask-box-image-outset: 0px;
  74. -webkit-mask-box-image-repeat: stretch;
  75. -webkit-mask-box-image-slice: 0 fill;
  76. -webkit-mask-box-image-source: none;
  77. -webkit-mask-box-image-width: auto;
  78. -webkit-mask-clip: border-box;
  79. -webkit-mask-composite: source-over;
  80. -webkit-mask-image: none;
  81. -webkit-mask-origin: border-box;
  82. -webkit-mask-position: 0% 0%;
  83. -webkit-mask-repeat: repeat;
  84. -webkit-mask-size: auto;
  85. -webkit-nbsp-mode: normal;
  86. -webkit-perspective: none;
  87. -webkit-perspective-origin: 372px 259px;
  88. -webkit-print-color-adjust: economy;
  89. -webkit-region-break-after: auto;
  90. -webkit-region-break-before: auto;
  91. -webkit-region-break-inside: auto;
  92. -webkit-region-overflow: auto;
  93. -webkit-rtl-ordering: logical;
  94. -webkit-svg-shadow: none;
  95. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.199219);
  96. -webkit-text-combine: none;
  97. -webkit-text-decorations-in-effect: none;
  98. -webkit-text-emphasis-color:  black;
  99. -webkit-text-emphasis-position: over;
  100. -webkit-text-emphasis-style: none;
  101. -webkit-text-fill-color: rgb(0, 0, 0);
  102. -webkit-text-orientation: vertical-right;
  103. -webkit-text-security: none;
  104. -webkit-text-stroke-color: rgb(0, 0, 0);
  105. -webkit-text-stroke-width: 0px;
  106. -webkit-transform: none;
  107. -webkit-transform-origin: 372px 259px;
  108. -webkit-transform-style: flat;
  109. -webkit-transition-delay: 0s;
  110. -webkit-transition-duration: 0s;
  111. -webkit-transition-property: all;
  112. -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  113. -webkit-user-drag: auto;
  114. -webkit-user-modify: read-only;
  115. -webkit-user-select: text;
  116. -webkit-wrap-flow: auto;
  117. -webkit-wrap-margin: 0px;
  118. -webkit-wrap-padding: 0px;
  119. -webkit-wrap-through: wrap;
  120. -webkit-writing-mode: horizontal-tb;
  121. alignment-baseline: auto;
  122. background-attachment: scroll;
  123. background-clip: border-box;
  124. background-color:  transparent;
  125. background-image: none;
  126. background-origin: padding-box;
  127. background-position: 0% 0%;
  128. background-repeat: repeat;
  129. background-size: auto;
  130. baseline-shift: baseline;
  131. border-bottom-color:  black;
  132. border-bottom-left-radius: 0px;
  133. border-bottom-right-radius: 0px;
  134. border-bottom-style: none;
  135. border-bottom-width: 0px;
  136. border-collapse: separate;
  137. border-image-outset: 0px;
  138. border-image-repeat: stretch;
  139. border-image-slice: 100%;
  140. border-image-source: none;
  141. border-image-width: 1;
  142. border-left-color:  black;
  143. border-left-style: none;
  144. border-left-width: 0px;
  145. border-right-color:  black;
  146. border-right-style: none;
  147. border-right-width: 0px;
  148. border-top-color:  black;
  149. border-top-left-radius: 0px;
  150. border-top-right-radius: 0px;
  151. border-top-style: none;
  152. border-top-width: 0px;
  153. bottom: auto;
  154. box-shadow: none;
  155. box-sizing: content-box;
  156. caption-side: top;
  157. clear: none;
  158. clip: auto;
  159. clip-path: none;
  160. clip-rule: nonzero;
  161. color:  black;
  162. color-interpolation: srgb;
  163. color-interpolation-filters: linearrgb;
  164. color-rendering: auto;
  165. cursor: auto;
  166. direction: ltr;
  167. display: block;
  168. dominant-baseline: auto;
  169. empty-cells: show;
  170. fill: #000000;
  171. fill-opacity: 1;
  172. fill-rule: nonzero;
  173. filter: none;
  174. float: none;
  175. flood-color: rgb(0, 0, 0);
  176. flood-opacity: 1;
  177. font-family: Lato, sans-serif;
  178. font-size: 28px;
  179. font-style: normal;
  180. font-variant: normal;
  181. font-weight: normal;
  182. glyph-orientation-horizontal: 0deg;
  183. glyph-orientation-vertical: auto;
  184. height: 518px;
  185. image-rendering: auto;
  186. kerning: 0;
  187. left: auto;
  188. letter-spacing: normal;
  189. lighting-color: rgb(255, 255, 255);
  190. line-height: normal;
  191. list-style-image: none;
  192. list-style-position: outside;
  193. list-style-type: decimal;
  194. margin-bottom: 28px;
  195. margin-left: 56px;
  196. margin-right: 0px;
  197. margin-top: 28px;
  198. marker-end: none;
  199. marker-mid: none;
  200. marker-start: none;
  201. mask: none;
  202. max-height: none;
  203. max-width: none;
  204. min-height: 0px;
  205. min-width: 0px;
  206. opacity: 1;
  207. orphans: 2;
  208. outline-color:  black;
  209. outline-style: none;
  210. outline-width: 0px;
  211. overflow-x: visible;
  212. overflow-y: visible;
  213. padding-bottom: 0px;
  214. padding-left: 40px;
  215. padding-right: 0px;
  216. padding-top: 0px;
  217. page-break-after: auto;
  218. page-break-before: auto;
  219. page-break-inside: auto;
  220. pointer-events: auto;
  221. position: static;
  222. resize: none;
  223. right: auto;
  224. shape-rendering: auto;
  225. speak: normal;
  226. stop-color: rgb(0, 0, 0);
  227. stop-opacity: 1;
  228. stroke: none;
  229. stroke-dasharray: none;
  230. stroke-dashoffset: 0;
  231. stroke-linecap: butt;
  232. stroke-linejoin: miter;
  233. stroke-miterlimit: 4;
  234. stroke-opacity: 1;
  235. stroke-width: 1;
  236. table-layout: auto;
  237. text-align: -webkit-auto;
  238. text-anchor: start;
  239. text-decoration: none;
  240. text-indent: 0px;
  241. text-overflow: clip;
  242. text-rendering: auto;
  243. text-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
  244. text-transform: none;
  245. top: auto;
  246. unicode-bidi: normal;
  247. vector-effect: none;
  248. vertical-align: baseline;
  249. visibility: visible;
  250. white-space: normal;
  251. widows: 2;
  252. width: 744px;
  253. word-break: normal;
  254. word-spacing: 0px;
  255. word-wrap: normal;
  256. writing-mode: lr-tb;
  257. z-index: auto;
  258. zoom: 1;

Pseudo Elements / Shadow DOM

::-webkit-scrollbar {
    margin-right: 5px;
    background-color: #bdd9d5;
	border-radius: 6px;
    width: 12px;
}
::-webkit-scrollbar-track {
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    border: 1px #eee solid;
    border-radius: 12px;
    background: #C7573A;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
    -webit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #bbb;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
}
::-webkit-scrollbar-thumb:hover {
	background: #b7472A;
}
pre {
	width: 600px;
	height: 200px;
	overflow:auto;
}

Part 6: Colors

Next ➹