2016-07-12 22 views
5

qual è la soluzione migliore:CSS: tutti i file multimediali in un file? o caricare file CSS separati?

1) fare un CSS-file con tutti i Media-querys per tutte le risoluzioni supportate

<link rel="stylesheet" href="mobile.css" type="text/css" media="all" /> 

2) Fare un CSS-file per ogni risoluzione supportata e caricarli in l'intestazione

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (min-width:240px) and (max-width:639px)" /> 
<link rel="stylesheet" href="tablet.css" type="text/css" media="screen and (min-width:640px) and (max-width:1023px)" /> 

???

Voglio dire, nel tentativo 2) ci sono più richieste, ma è davvero così importante?

+2

Credi in 'SASS'? – varit05

+0

Ogni sviluppatore può avere un'opinione diversa su questo, ovviamente a seconda dello scenario. Non c'è una risposta "corretta" secondo me ... –

+0

dovrei? .. voglio dire, i CSS sono come la cosa più semplice sulla terra ... quindi quando qualcuno mi dice che ha reso la cosa più semplice "più semplice" allora non posso smettere di pensare, cosa c'è di sbagliato in quel ragazzo :) – 99Problems

risposta

2

Devi trovare un difficile equilibrio. Da un lato, si desidera mantenere le richieste il più basse possibile in quanto HTTP1 non consente più risorse in una richiesta e HTTP2 non è così comune come sarà.

D'altra parte, c'è velocità di analisi. Su un dispositivo mobile, file di argomenti. Ci vuole più tempo per analizzare (= tradurre il tuo css in un risultato reale) rispetto a un computer desktop.

Se si dispone di un file di grandi dimensioni, ad esempio 500kb +, la richiesta aggiuntiva potrebbe valerne la pena (e, quando si utilizza la cache in modo corretto, richiederà solo un download per periodo di cache). Prova a ridurre al minimo il numero di file, ad es. non crearne uno per < 320, < 680, < 768, < 1024 ecc ecc. Diviso in due, forse tre file (a meno che non si abbia una buona ragione per fare altrimenti).

Si potrebbe anche girare intorno a. Alcuni sviluppatori amano costruire il cellulare prima e poi scalare le dimensioni del desktop. Invece di cambiare css quando vai più piccolo, usi screen and (min-width:1024px). Quindi mantieni il tuo css mobile nel foglio di stile principale e dai alla versione del browser il file 1024px +, che è spesso più capace quindi avrà meno effetto.

E non dimenticare la manutenibilità. Devi mantenere il codice.Se dividi tutto in file, non ti rendi le cose più facili. Se le soluzioni che implementate sono minime, potresti voler riconsiderare, perché il codice difficile avrà un effetto peggiore a lungo termine.

+0

grazie :) .. buon punto con il file e larghezza di banda! – 99Problems

+0

Downvoter, per favore spiega invece solo downvoting, così posso migliorare la risposta. – Martijn

+0

ottima risposta .. grazie :) – 99Problems

6

Meno richieste è sempre favorevole a causa della natura di HTTP 1.1 (vengono stabilite nuove connessioni TCP per ciascuna richiesta separata che richiede tempo).

Si consiglia vivamente di utilizzare come alcune richieste possibili in tutta l'applicazione. Tuttavia, per i CSS si potrebbe usare SASS o LESS per compilare diversi file in un singolo file CSS. Lo stesso può essere ottenuto in numerosi modi con JavaScript, ad esempio con lo tools online.

La media query non si fermerà la richiesta del file, non importa la dimensione dello schermo corrente:

Network requests when fetching resources

E 'anche interessante notare che SPDY e HTTP 2.0 sono ben sulla loro modo di essere disponibile sulla maggior parte i principali browser

Se si desidera read more, ho co-autore un documento in materia.

+0

Bene da quando i browser diventano più intelligenti, caricheranno solo il CSS che corrisponde alla query multimediale, che sarà una richiesta ... e non scaricare più contenuti del necessario sarebbe preferibile – LGSon