Sto aggiornando un sito Web per aggiungere alcune pagine ottimizzate per i dispositivi mobili.Devo usare più di un foglio CSS?
Al momento abbiamo una grande pagina css con tutto dentro. La mia idea è quella di mettere tutti i css specifici mobili in un file separato e quindi collegare entrambi i fogli. Il css mobile sovrascriverà qualsiasi cosa nei css predefiniti (pulsanti più grandi, ecc.).
Sono abbastanza nuovo per i CSS, qual è la migliore pratica?
sì, dovresti usare più di un file css piuttosto che usare un grande file. Ti aiuta a mantenere il tuo sito anche utilizzare definizioni diverse (classe o nomi id) in diversi css altrimenti prenderà quello che ha dichiarato in seguito. Per esempio
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="/stylesheets/stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/lightbox_new.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/another_css.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Your content here -->
</body>
</html>
Nel caso di stili per clienti specifici, direi che si tratta di una pratica migliore per separarli.
Ne utilizzerei anche due. Mantiene le cose più in ordine durante la modifica per ogni dispositivo (computer e dispositivo mobile). Ho un enorme foglio di stile CSS che uso per tutti i browser con l'aiuto dello script selettore browser css, e odio dover scorrere oltre 6000 linee di CSS, quindi direi che il modo migliore, almeno per esperienza, è separare li fuori!
Un grande file CSS porta a un minor numero di richieste HTTP, che possono migliorare le prestazioni.
Diversi file più piccoli portano a un'organizzazione più semplice che renderà lo sviluppo e la manutenzione meno costosi e più facili.
Risposta eccellente, concisa. – Armstrongest
Ho alcuni fogli di stile per qualsiasi app significativa su cui ho lavorato.
media. <link rel="stylesheet" type="text/css" media="print" href="print.css" />Se stavo provando per prestazioni straordinarie, li combinerei. Tuttavia, so che i siti che ottengono centinaia di milioni di visite al giorno non si preoccupano, quindi consiglio vivamente di suddividerli, ma per te è più logico, al fine di semplificare la manutenzione.
Per la maggior parte, l'hardware aggiuntivo è più economico di ore di sviluppo extra e/o più bug. La manutenibilità è solitamente l'obiettivo più alto per me.
Raggruppa il tuo CSS in modo significativo e servilo con attenzione.
Ad esempio, se si dispone di CSS applicato attraverso il proprio sito (ad esempio ripristino CSS), renderlo separato e includerlo per ogni pagina.
Quindi, per ciascun componente logico del sito, creare un file CSS separato e servirlo nelle pagine che appartengono al rispettivo componente logico. (Supponiamo che tu abbia un blog e sondaggi sul tuo sito, se il blog non ha bisogno del CSS per i sondaggi che non è necessario includerlo nel blog.) Ma a parte questo non è pratico per i siti di piccole dimensioni.
Raggruppa i tuoi CSS per i supporti per i quali vengono utilizzati. Se si dispone di un foglio di stile per la stampa, tenerlo separato dai fogli di base se ha senso (non usare file separati se si ha solo una singola proprietà CSS per la stampa poiché non vale il tempo richiesto).
Ricorda che più fogli accettano più richieste HTTP e ogni richiesta costa un certo periodo di tempo.
quindi non c'è maniera esplicita queste cose dovrebbe essere gestito, è tutto rendere la vostra CSS più facile da mantenere e facile per client per scaricare (richieste HTTP meno, dimensioni più piccole, ecc)
Utilizzando fogli di stile separati per i diversi media sono facilmente realizzabili.
<link href="browser.css" media="screen" rel="stylesheet" type="text/css" />
<link href="mobile.css" media="handheld" rel="stylesheet" type="text/css" />
<link href="print.css" media="print" rel="stylesheet" type="text/css" />
In questo caso, tutto lo stile verrà scaricato e applicato quando il tipo di supporto corrispondente al dispositivo.
Tuttavia esiste un altro metodo che è accurato se la tua app è progettata per i cellulari, perché scarica il foglio di stile SOLO se il tipo di supporto corrisponde.
Penso che importare più di un css in un tag
useresti quindi diversi valori 'media'? – xtofl
Se esistono due definizioni per lo stesso selettore in stylesheet.css e another_css.css, che verrebbe selezionato? – Robert
@Robert Se i selettori sono identici, il foglio di stile dichiarato in seguito nella sorgente avrà la priorità. In questo caso, sarebbe another_css.css. – AaronSieb