Part 1: Selectors
Part 2: Media Queries
Part 3. Specificity
Part 4: Most properties
Part 5: Transitions, Tranforms and Animation
Part 2:
Media Queries
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)
- all
- aural
- handheld
- braille
- embossed
- projection
- screen
- tty
- 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