3.23
Personalizzare i Fogli di Stile in Base al Dispositivo di Visualizzazione
Sintassi L’attributo “media” può essere utilizzato sia con l’elemento <link> che con l’elemento <style>. Ecco due esempi di sintassi:
- Utilizzando l’elemento <link>:
<link href="print.css" media="print" rel="stylesheet"> - Utilizzando l’elemento <style>:
<style media="screen"> regole CSS... </style> Per sfruttare appieno questa opzione, è essenziale conoscere i diversi valori possibili per l’attributo “media”:
- all: Il CSS si applica a tutti i dispositivi di visualizzazione.
- screen: Si riferisce allo schermo di computer.
- print: Si applica alla formattazione per la stampa.
- projection: Utilizzato per presentazioni e proiezioni.
- speech: Adatto ai dispositivi con sintesi vocale.
- braille: Pensato per supporti basati sull’uso del braille.
- embossed: Utilizzato per le stampanti braille.
- handheld: Adatto per dispositivi mobili con schermi piccoli e limitate capacità grafiche.
- tty: Rivolto a dispositivi a carattere fisso come i terminali.
- tv: Utilizzato per la visualizzazione su schermi televisivi.
Il valore predefinito è “all” ed è utilizzato automaticamente in assenza di una dichiarazione esplicita, poiché l’attributo “media” è opzionale.
È possibile utilizzare più di un valore separando i nomi della lista con una virgola, ad esempio:
<link rel="stylesheet" media="print, tv, aural" href="print.css"> Il caso d’uso più comune consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Il browser che visualizza la pagina sarà in grado, se conforme agli standard, di caricare il foglio di stile appropriato in base al dispositivo:
<link rel="stylesheet" media="screen" href="screen.css"> <link rel="stylesheet" media="print" href="print.css">Evoluzione e Utilizzo Pratico Nelle pratiche di sviluppo più comuni, le possibilità offerte dall’attributo “media” e la vasta gamma di dispositivi che supporta sono spesso limitate. In effetti, i valori più utilizzati oggi sono “all,” “screen,” e “print.” In particolare, un’applicazione comune è l’implementazione di un foglio di stile specifico per la stampa, sfruttando il valore “print” per migliorare la formattazione quando si stampa una pagina web.
Significato Attuale dell’Attributo “media”
Ciò non implica che l’attributo “media” abbia perso la sua rilevanza; anzi, è più pertinente che mai. Attualmente, il suo utilizzo è strettamente legato al concetto delle media query, che rappresenta il principale meccanismo per implementare il cosiddetto “responsive design.” Questo approccio permette di identificare e adattare la visualizzazione dei contenuti ai dispositivi in base alle loro caratteristiche e funzionalità specifiche.
Le media query consentono agli sviluppatori web di definire condizioni specifiche in cui devono essere applicati i fogli di stile. In questo modo, è possibile gestire la presentazione e l’aspetto del sito in modo dinamico, a seconda del dispositivo dell’utente. Ad esempio, è possibile regolare la disposizione dei contenuti, le dimensioni dei caratteri e le immagini per garantire un’esperienza ottimale su schermi di varie dimensioni e risoluzioni.
In sintesi, l’attributo “media” ha un ruolo fondamentale nelle moderne pratiche di sviluppo web, in quanto consente di sfruttare le media query per implementare il responsive design e migliorare l’esperienza dell’utente su una vasta gamma di dispositivi.