CSS3 introduce una serie di nuove specifiche dedicate a sfruttare in maniera avanzata gli stili, denominate Media Queries. Possiamo combinare delle istruzioni particolari in base alla risoluzione del browser o alla disponibilità o meno di una particolare feature.

Ad esempio, possiamo specificare un CSS a uso e consumo di un browser il cui schermo abbia una risoluzione minore di 400px, utilizzando l'esempio che segue:

<link rel="stylesheet"
      href="style.css"
      type="text/css"
      media="screen and (min-device-width: 400px)" />

In generale, queste istruzioni possono poi essere applicate anche direttamente nel CSS, come segue:

.tablet, .largeScreen {display:none;}

@media (min-width: 768px) and (max-width: 1024px) {
  /* tablet */
  .tablet {display:block!important;}
}

@media (min-width: 1024px) {
  /* schermo largo */
  .largeScreen {display:block!important;}
}

L'effetto di queste istruzioni è che, ridimensionando il browser, i due elementi saranno visualizzati finchè le dimensioni della finestra resteranno nei range specificati.

Attraverso le Media Queries possiamo controllare orientamento, aspect-ratio e dimensione dello schermo:

@media (min-device-width:400px) {
  /* agisce sulla larghezza minima dello schermo */
}
@media (min-device-height:400px) {
  /* agisce sull'altezza  minima dello schermo */
}
@media (aspect-ratio: 4/3) {
  /* solo se lo schermo è 4/3 */
}
@media (device-aspect-ratio: 16/9) {
  /* solo se lo schermo è 16/9 */
}
@media (orientation: portrait) {
  /* solo con orientamento portrait */
}

Le istruzioni possono essere combinate, come nel primo esempio, usando la keyword and.

Le specifiche complete dei CSS3 Media Queries sono disponibili su http://www.w3.org/TR/css3-mediaqueries/