CSS3: Generated Content

→ and → to change slides. 2 for comments. www.standardista.com/webstock

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

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

More Media Query Tidbits

media="only print and (color)"

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

media="not screen and (color)"

media="print, screen and (min-width: 480px)"
@media screen and (-webkit-min-device-pixel-ratio: 2) {
 .iphone4 { /* high DPI */}
}
@screen and (transform-3d) {
  .transforms {}
}

Also works with (animation) and (transition)

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

Part 5: Debugging

Debuggers

  • Firefox ➫ Firebug
  • Opera ➫ DragonFly
  • Internet Explorer ➫ F-12
  • Safari ➫ Web Inspector
  • Chrome ➫ Developer Tools

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 ➹