HTML5 e Css3 [5]Matteo Magni

Inizialmente avevamo questo

One monitor One browser

Sito ottimizzato per risoluzione 800x600, Browser: Microsoft Internet Explorer, per problemi di

visualizzazione contattare il webmaster

Browser War

Continuiamo con il Sito ottimizzato per...?!?

Idea!!!!

Piu' CSS

<!­­[if lte IE 6]>

<link href="ie6.css" rel="stylesheet" type="text/css" />

<![endif]­­> 

<!­­[if IE 7]>

<link href="ie7.css" rel="stylesheet" type="text/css" />

<![endif]­­>

<!­­[if IE 8]>

<link href="ie8.css" rel="stylesheet" type="text/css" />

<![endif]­­>

<!­­[if gt IE 8]>

<link href="ie9.css" rel="stylesheet" type="text/css" />

<!­­<![endif]­­>

WebMaster?

Multiple Browser & Multiple Device

Idea!!!!

Piu' Layout

if ((screen.width<=1024) && (screen.height<=768)){

  //use css

} else if ((screen.width>=1024) && (screen.height>=768)){

  //use another css

} else if...

....

} else {

  //use css...

}

WebMaster?

E poi avevamo detto di usare solo css per la presentazione e non di usare javascript?

Ma non Possiamo usare i Css Media Type?

Css 2.1 ha 10 media

● all: il CSS si applica a tutti i dispositivi di visualizzazione;

● screen: schermo di computer;

● print: pagina stampata;● projection: presentazioni

e proiezioni;● 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: dispositivi a carattere fisso come i terminali;

● tv: visualizzazione su schermi televisivi.

<link rel="stylesheet" href="a.css" type="text/css" media=”screen" />

<link rel="stylesheet" href="a.css" type="text/css" media=”print" />

Nuova sintassi

<link rel="stylesheet" href="a.css" type="text/css" 

media=”screen and(min­width:500px)" />

Media Queries sono espressioni logiche che ritornano "true" o "false" a seconda di come

vengono valutate. Se sono vere, gli stili vengono applicati, se false,

vengono ignorati

One HTML & One Css

Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in

modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in

funzione dell'ambiente nei quali vengono visualizzati riducendo al minimo all'utente la

necessità di ridimensionamento e scorrimento, in particolare quello orizzontale. (wikipedia)

Media Query syntax:

rel="stylesheet"   href="desktop.css"   media="[not | only] screen [and]   

(expression)" 

Le keywords “not”, “only”, and “and” possono essere usate per filtrare i risultati, mentre le espressioni possono essere utilizzate per

verificare la presenza di specifiche funzionalità multimediali

 Media Query link:<link rel="stylesheet" media="screen and (color)" href="colore.css" />

 Media Query inline:@media screen and (color) {   /* qui vanno le regole CSS */}

 Media Query import:@import url(colore.css) screen and (color);

@media screen and (width: 500px) {/* CSS rules*/}

@media screen and (min­width: 320px) and (max­width: 1024px) {/* CSS rules 320 < width < 1024*/}

Width

@media screen and (height: 500px) {/* CSS rules*/}

@media screen and (min­height: 400px) and (max­height: 800px) {/* CSS rules  400 < height < 800*/}

Height

<link rel="stylesheet" media="all and (max­device­width: 480px)" href="mobile.css" type="text/css" />

<link rel="stylesheet" media="all and (max­device­height: 500px)" href="mobile.css" type="text/css" />

Device width & height

orientation

//indica se il dispositivo di output è in modalità landscape (la larghezza è maggiore dell’altezza) oppure portrait (l’altezza è maggiore della larghezza)

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

aspect-ratio

//rapporto tra la larghezza (width) e l’altezza (height) dell’area di visualizzazione

@media screen and (aspect­ratio: 4/3) {

/* CSS rules*/

}

device-aspect-ratio

//rapporto tra la larghezza (width) e l’altezza (height) dell’area di visualizzazione

@media screen and (device­aspect­ratio: 16/9) {

/* CSS rules*/

}

Color

//Indica il numero di bit per ciascuna componente colore sul dispositivo di output. Se 0 non supporta il colore

@media all and (color) {

/* CSS rules*/

}

color-index

//numero di colori presenti nella tavolozza

<link rel="stylesheet" media="all and (min­color­index: 256)" href="colore.css" />

resolution

//risoluzione dispositivo output in dpi (punti per pollice), può avere min e max

@media print and (min­resolution: 300dpi) {

/* CSS rules*/

}

● Monochrome● numero di bit per pixel su un dispositivo

monocromatico (a scala di grigi).

● Scan● progressive oppure interlace. Relativa ai media TV

● Grid● Se dispositivo è a bitmap o griglia

IE

Respond.js

from the Filament Group https://github.com/scottjehl/Respond

(gzipped version is 1kb)

css3-mediaqueries-js

by Wouter van der Graaf http://code.google.com/p/css3-mediaqueries-js/

(15kb uncompressed)

Boilerplate

/*main.css*/

/* ==========================================================================

   Media Queries

========================================================================== */

@media only screen and (min­width: 480px) {

/* ====================

    INTERMEDIATE: Menu

   ==================== */

    nav a {

        float: left;

.....

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

matteo@magni.me