Perché non usiamo i CSS dinamici (lato server generati)?

Il grande motivo per cui il css viene generato raramente in modo dinamico (questo vale anche per javascript) è perché sono buoni candidati per il caching. Il CSS è un modo molto flessibile per modellare le tue pagine, con la giusta combinazione di classi, puoi ottenere tutte le diverse parti di tutte le tue pagine diverse in stile secondo tutti i tipi di segnali senza dover condizionarne nessuna nel CSS stesso su ciò che effettivamente è presente in questa visualizzazione di pagina.

Semplicemente perché CSS bisogno di essere diverso per pagina porta ad una pratica molto comune di ottimizzazione del costo di scaricarlo. La maggior parte dei siti racchiude tutto il css per l'intero sito in un unico download, in modo che le parti applicabili a diverse visualizzazioni di pagina siano presenti in un solo file scaricato. Con il caching, i tuoi clienti non devono aspettare che si scarichino una seconda volta. Forse, cosa più importante, tu, come fornitore di contenuti, non devi pagare il costo di caricare il contenuto più di una volta; e puoi anche mettere il css statico su un server che è più adatto a servire contenuti statici, che libera risorse per contenuti dinamici reali sui server delle applicazioni.

Questa pratica è così comune che molti browser presumono che il css è statico; e molto riluttanti a scaricare i CSS che già hanno; anche se gli utenti ricaricano la pagina. Questo trattamento speciale si applica solo ai CSS; altri tipi di contenuti vengono ricaricati come previsto.

Credo che la tua ipotesi sia sbagliata: nel mio ultimo progetto, l'applicazione utilizzava CSS generato dal server caricato da ajax (perché, a seconda della posizione della mappa che stavi guardando, la pagina era contrassegnata con stili completamente diversi) .

Tuttavia, i casi di utilizzo in cui il recupero di CSS extra da parte di ajax risolverebbe il problema sono piuttosto rari, questo potrebbe essere il motivo per cui non si è mai verificato: è solitamente più facile mantenere un set di fogli di stile preelaborati al momento dell'implementazione (MENO + minificazione) e memorizzabile nella cache (ad esempio, la pagina successiva sarà in grado di riutilizzare il foglio di stile che ha memorizzato nella cache prima, quindi l'ora iniziale è più breve).

In realtà, ci sono casi d'uso per CSS dinamico. Ho lavorato con tre tipi diversi:

1. Meno - Less CSS è fondamentalmente un'estensione di linguaggio CSS che aggiunge "comportamenti dinamici come variabili , mixin, operazioni e funzioni. " Permette anche "regole nidificate", che è molto conveniente. Ho usato Less principalmente per rendere il CSS meno dettagliato, eliminando alcune delle ripetizioni.

2. riscrittura degli URL - Come prova della tua affermazione che non ci sono problemi di cache, ho usato PHP per servire gli script come file CSS con le intestazioni di cache corrette per un lungo periodo . Lo faccio principalmente per servire file CSS da librerie che non si trovano nella root web.

3. Rapporti dinamici : su un progetto su cui ho lavorato, disponevamo di un generatore di rapporti per tutti i tipi di dati nel sistema. Eseguiamo output (all'interno di style tag, come dici tu) regole di stile dinamiche principalmente per i colori che sono stati selezionati dall'utente nel generatore di report.

^{Nota: quando si inviano i CSS direttamente a un URL (come in 1 o 2 ) e non lo si incorpora in una pagina che viene già generato da uno script, si aggiungerà un carico significativo al server rispetto alla pubblicazione di contenuto statico. Quindi, se hai un traffico considerevole, anche se puoi farlo dinamicamente ogni volta, vorrai memorizzarlo come un file statico se il tuo caso d'uso lo consente.}

Ma perché non è più comune? Penso che ci sia una ragione principale: i CSS non sono realmente costruiti per produrre contenuti. Quindi semplicemente non c'è un grande bisogno. Oltre all'emissione di colori dinamici scelti dall'utente, come abbiamo fatto noi, o eventualmente immagini di sfondo (anche se l'immagine è contenuto , probabilmente è un buon argomento usare il tag img ), che cosa altro hai bisogno di fare dinamicamente?

La maggior parte delle modifiche dinamiche dello stile può essere prodotta facendo riferimento a diversi documenti CSS statici .

Quindi è certamente possibile, come pensavi, ma non ci sono troppi motivi per farlo.

Ci sono DUE aspetti separati per caricare il CSS in modo dinamico ...

1. Generazione dinamica del file CSS sul server

   Questo è abbastanza semplice, e molti siti lo fanno. Questo è utile se cambi il tuo CSS in base ad alcune condizioni. Ad esempio, se scegli il tema del tuo sito in base alla posizione geografica dell'utente.

2. Caricamento di un file CSS su richiesta tramite un caricatore di script JS

   Questo potrebbe rivelarsi utile se crei una grande parte del DOM dinamicamente e poi carichi gli stili richiesti. MA come autore di LABjs dice ...

   actually determining if a dynamically loaded CSS file has finished loading is actually quite complicated and challenging to do cross-browser. The "load" events don't fire as one would hope/expect. so adding such support would add a non-trivial size to LABjs

1. Lo facciamo. Tutto il tempo. Soprattutto per cose come il marchio specifico del cliente in un'applicazione SaaS, dove i colori ecc. Provengono dal database.
2. È molto più veloce (dal punto di vista dell'utente) pre-generare il CSS prima o durante la distribuzione, o durante l'avvio dell'applicazione se l'applicazione ha una fase di avvio. Generalmente preferiamo pre-generare file CSS statici quando possibile.
3. Per la massima velocità (dal punto di vista dell'utente), è meglio fornire file CSS statici su un CDN e fare in modo che il browser li prelevi dal CDN, anziché dai server delle applicazioni. Ciò è generalmente possibile solo quando i file CSS possono essere pre-generati prima o durante la distribuzione e dove parte della distribuzione sta consegnando i file CSS statici pre-generati alla CDN. I CDN sono ora molto economici e facili da usare: controlla CloudFront di Amazon e Cloud File di Rackspace.

Does it have cache problems? I don't think so. The script should send out no-cache etc

Tutto molto bene, ma questa è una parte significativa di informazioni generalmente statiche che stai chiedendo all'utente di scaricare ogni volta che caricano una pagina. Quindi è meglio avere una buona ragione per questo.

Ora quale potrebbe essere questa ragione?

Se vuoi cambiare uno stile in base a vari parametri, lo fai avendo più fogli di stile e generando l'HTML per scaricare quello corretto.

Il CSS dinamico è abbastanza banale, e anche se le sue applicazioni sono più limitate (vedere come HTML generato dinamicamente con un foglio di stile statico risolve la maggior parte delle esigenze quotidiane, e il CSS stesso incorpora alcuni meccanismi per ottenere semi-dinamiche) , L'ho visto usato in molte occasioni e li uso da solo ogni volta che ne ho bisogno.

Spesso, la parte 'dinamica' fa poco più che combinare più fogli di stile in uno (per ridurre il numero di richieste HTTP) e minimizzarli (per ridurre l'uso della larghezza di banda), ma cose semplici come la sostituzione di variabili (es. i colori usati in tutto il foglio di stile) possono semplificarti la vita. Tuttavia, dato che i CSS hanno una sintassi abbastanza semplice con alcuni avvertimenti, un sistema di elaborazione del testo di uso generale o un linguaggio di scripting come PHP di solito è sufficiente per questo, motivo per cui non si vedono molti sistemi di elaborazione CSS disponibili. / p>

Forse li hai visti in natura, senza riconoscerli. I server che inviano script dinamici di solito utilizzano la riscrittura degli URL in modo che l'URL diventi indistinguibile dai contenuti pubblicati in modo statico. Ciò è necessario perché alcuni browser (in particolare IE) si basano su estensioni per il rilevamento corretto del tipo MIME in determinate circostanze, ignorando (o scartando) qualsiasi intestazione Content-Type che potresti aver inviato.

Per quanto riguarda la memorizzazione nella cache: i fogli di stile vengono richiamati con le richieste GET e renderli memorizzabili nella cache è assolutamente importante per un'esperienza utente decente. Non vuoi vedere la pagina di riscorrimento mentre scarica nuovamente il foglio di stile ad ogni richiesta. Invece, dovresti inserire tutti i parametri che alterano l'output dell'elaborazione del foglio di stile nella stringa di query; una stringa di query diversa produce un URL diverso, che a sua volta causa un errore di cache, quindi ogni volta che i parametri vengono modificati, il foglio di stile verrà scaricato nuovamente, anche se il client memorizza nella cache tutto. Se hai davvero bisogno del CSS che è potenzialmente diverso per ogni richiesta e dipende dagli effetti collaterali, considera la possibilità di inserire la parte non dinamica in un foglio di stile servito staticamente e di servire solo quelle cose dinamicamente che sono assolutamente necessarie per essere dinamiche.

Ci sono alcuni scenari in cui mi piacerebbe utilizzare il CSS dinamico, ma molto spesso sono bloccato dall'uso di progettisti che hanno bisogno di un po 'di aiuto per capire le basi CSS. Lanciare un linguaggio dinamico nel mix potrebbe effettivamente far esplodere una testa.

Un altro modo di considerare questo sarebbe "un altro ragazzo sta facendo tutto il doloroso lavoro manuale, non proprio il mio problema, andando avanti ..."