2011-12-28 25 views
38

In breve:singole vs più fogli di stile in responsive web design

Se si utilizza uno o più fogli di stile quando si fa responsive web design?

In dettaglio:

In responsive design, si tende ad avere un bello pezzo principale della CSS, poi altri bit e pezzi per regolare il layout quando raggiunge certi punti di interruzione. È possibile strutturare il codice di uno dei due modi:

fogli di stile singolo

/* Main CSS */ 

@media only screen and (min-width: 480px) { /* CSS */ } 
@media only screen and (min-width: 640px) { /* CSS */ } 
@media only screen and (min-width: 800px) { /* CSS */ } 

più fogli di stile

<link rel="stylesheet" media="screen" href="main.css"> 
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css"> 
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css"> 
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css"> 

Sembra che utilizzando uno foglio di stile ridurrà il numero di richieste HTTP, ma avrai un file più grande che conterrà codice che potrebbe non essere utilizzato da alcuni client. Più fogli di stile sembrano mantenere le dimensioni dei file abbassate, ma poi si hanno più richieste HTTP.

Quando si dovrebbe optare per ciascun approccio? In pratica, come si accumulano i pro e i contro del numero di richieste HTTP e le dimensioni dei file?

+2

Cosa richiede più tempo, l'elaborazione di una richiesta HTTP (andata e ritorno) o l'elaborazione di un file CSS più lungo del necessario? –

+1

La dimensione del file è relativamente piccola nella maggior parte dei fogli di stile. Anche un file css LARGE a 50K sarebbe probabilmente l'ultima delle tue preoccupazioni in termini di ottimizzazione delle prestazioni. –

risposta

41

fogli di stile sono sempre scaricato, a prescindere dal supporto corrente, sia che si tratti screen, print o 3D-glasses.

Vedi: Why do all browsers download all CSS files - even for media types they don't support?

Quindi, con questo in mente, tutti tenendo un foglio di stile ridurrà le richieste HTTP, dove, come i fogli di stile separati creerà sempre maggiori richieste con alcun beneficio.

+14

Per ragioni di salute, è possibile utilizzare file separati per lo sviluppo e concatenarli/ridurli al minimo come parte di un processo di compilazione prima di inserire il codice. Vedi qui: http://stackoverflow.com/questions/702907/what-are-some-good-css-and-js-minimizers-for-production-code – calvinf

+0

L'overhead HTTP è ancora un problema con HTTP/2? https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/#concatenating-css-and-javascript – user1857711

Problemi correlati