Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat

Transcript

1 Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat

2 CSS Reset Come abbiamo visto, i browser hanno un loro foglio di stile che viene applicato se non definiamo le proprietà di un elemento. Purtroppo, tale foglio di stile può essere diverso da browser a browser, portando a risultati incoerenti. Per questo motivo, molto spesso i designer di siti web utilizzano il cosiddetto CSS Reset ossia un insieme di regole che sovrascrive tutti gli stili del browser in modo che questi non interferiscano con le regole definite esplicitamente dal designer. Una delle implementazioni più diffuse di CSS Reset è stata scritta da Eric Meyer ed include le seguenti regole: /* v License: none (public domain)*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;

3 body { line-height: 1; ol, ul { list-style: none; blockquote, q { quotes: none; blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; table { border-collapse: collapse; border-spacing: 0; Stile delle tabelle Per definire lo stile delle tabelle si possono utilizzare le stesse proprietà che abbiamo già visto in precedenza per il normale contenuto (relative a testo, font, background, padding, margini, bordi, etc.). CSS mette a disposizione anche alcune proprietà che sono specifiche delle tabelle. La proprietà border-collapse determina come mostrare i bordi tra celle adiacenti. I due valori possibili sono separate e collapse. Nel primo caso, ogni cella ha un proprio bordo ed è possibile definire la distanza tra i bordi di celle adiacenti utilizzando la proprietà border-spacing (che accetta due valori di lunghezza, uno per lo spazio tra colonne ed uno per lo spazio tra righe, oppure un solo valore comune per entrambi gli spazi). Utilizzando il valore collapse, viene visualizzato un solo bordo tra le celle.

4 <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> #table1 { border-collapse: separate; border-spacing: 15px 5px; border: none; td { border: 2px solid red; #table2 { border-collapse: collapse; border: none; </style> </head> <body> <table id="table1"> <tr> <td>cella 1</td> <td>cella 2</td> </tr> <tr> <td>cella 3</td> <td></td> </tr> </table> <table id="table2"> <tr> <td>cella 1</td> <td>cella 2</td> </tr> <tr> <td>cella 3</td> <td></td> </tr> </table> </body> </html>

5 Nel caso di utilizzo di bordi separati, è anche possibile utilizzare la proprietà empty-cells per decidere se visualizzare o meno i bordi delle celle vuote. I valori possibili sono show (default) e hide. Responsive design Il responsive web design è una tecnica che utilizza CSS per adattare il layout delle pagine in base alla dimensione dello schermo. Ciò è utile per poter realizzare layout diversi per dispositivi come smartphone, tablet e desktop. Nel seguito vedremo un modo per creare un design responsive basato su quattro componenti principali: definizione della dimensione del viewport, un layout fluido (già visto in precedenza), immagini flessibili, media query CSS (un metodo per applicare stili in funzione del media utilizzato per la distribuzione del sito). Dimensione del viewport Il primo passo per creare un design responsive è utilizzare l'elemento <meta> per controllare la dimensione iniziale dello spazio a schermo (il viewport) in cui verrà visualizzato il contenuto (il concetto di viewport è stato inizialmente introdotto nei browser mobili). <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>tecnologie web</title> </head>

6 <body> </body> </html> L'elemento <meta> nel codice precedente informa il browser di definire la dimensione del viewport uguale alla dimensione dello schermo del dispositivo. L'attributo initial-scale definisce il livello di zoom iniziale al 100%. Layout fluido Poichè non è possibile creare un layout differente per ciascuna possibile misura di schermo, i designer normalmente creano due o tre layout per le classi di dispositivi principali (smartphone, tablet, desktop) e sfruttano le proprietà dei layout fluidi per le dimensioni intermedie. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Tecnologie web </title> <style> body { margin: 0; padding: 0; #header { background-color: #CCC; padding: 15px; #main { float: left;

7 width: 60%; margin: 0 5%; background: orange; #secondary { float: left; width: 25%; margin: 0 5% 0 0; background: yellow; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="header"><p>header</p></div> <div id="main"> <p>contenuto principale</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li> </ul> <img src="imgs/submit.png" alt="" /> </div> <div id="footer"><p>footer</p></div> </body> </html>

8 Immagini flessibili Nell'esempio precedente, si può notare come l'immagine esca dal proprio contenitore (la colonna di destra) quando la larghezza della pagina si riduce. Per risolvere questo problema (per tutte le immagini) è sufficiente impostare la proprietà max-width dell'elemento <img> al valore 100%. In questo modo, l'immagine verrà automaticamente scalata per occupare solo lo spazio disponibile nel contenitore (quando questo diventa più piccolo dell'immagine originale). Per utilizzare questa soluzione, non devono essere impostati gli attributi width ed height dell'elemento <img>. Ovviamente, questa soluzione implica che viene comunque scaricata un'immagine di dimensioni maggiori di quello che servirebbe. Media query Le media query sono delle direttive CSS che permettono di specificare delle regole di stile che vengono applicate solo nel caso in cui si verifichino particolari condizioni relative al media utilizzato per la distribuzione del contenuto. La media query seguente, ad esempio, specifica delle regole di stile che vengono applicate se il tipo di media è uno schermo e la sua larghezza è di almeno screen and (min-width: 480px) { /* regole di stile */ Come si può notare, la direttiva inizia con la parola chiave

9 @media seguita dalla dichiarazione di un tipo di media e di zero o più espressioni (concatenate tipicamente tramite operatore and, ma sono disponibili anche gli operatori not e only) che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media. Si noti anche che ogni singola espressione va inserita all'interno di parentesi tonde. I tipi di media specificabili sono all (tutti i dispositivi), screen (schermo di computer), print (pagina stampata), projection (proiezioni e presentazioni), speech (dispositivi a sintesi vocale), braille (supporti basati sull uso del braille), embossed (stampanti braille), handheld (dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate capacità grafiche), tty (terminali), tv (schermi televisivi). Alcune delle caratteristiche più comuni che si possono testare tramite media query sono width, height, devicewidth, device-height, orientation, aspect-ratio, color, resolution (per la lista completa si veda La maggior parte di queste caratteristiche accettano anche i prefissi min- e max-. Oltre a poter essere specificate all'interno di un foglio di stile, le media query possono anche essere specificate tramite utilizzo dell'attributo media dell'elemento <link> al fine di caricare in modo condizionale dei fogli di stile come nell'esempio seguente. <head> <link rel="stylesheet" href="stile.css">

10 <link rel="stylesheet" href="stile2.css" media="screen and (min-width:780px)"> </head> Una strategia comune per la scrittura di media query è quella mobile first in cui vengono prima scritte le regole di stile per i dispositivi mobili più semplici e poi utilizzate le media query per i dispositivi con caratteristiche più avanzate. Nell'esempio seguente, vengono create regole di stile standard per dispositivi dallo schermo inferiore a 480px e viene usata una media query per specificar regole di stile specifiche per i dispositivi con schermo di almeno 480px. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Tecnologie web </title> <style> body { margin: 0; padding: 0; #header { background-color: #CCC; padding: 15px; #main { float: left; width: 90%; margin: 0 5%; background: orange; #secondary { float: left;

11 width: 90%; margin: 0 5%; background: yellow; #footer { clear: left; padding: 15px; background: #CCC; img { max-width: screen and (min-width: 480px) { #main { width: 60%; #secondary { width: 25%; margin: 0 5% 0 0; </style> </head> <body> <div id="header"><p>header</p></div> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> </div> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li> </ul> <img src="imgs/submit.png" alt="" /> </div> <div id="footer"><p>footer</p></div> </body> </html>