Perché non utilizziamo CSS dinamico (generato dal lato server)?

Poiché l'HTML generato sul lato server è banale (ed era l'unico modo per creare pagine Web dinamiche prima di AJAX), il CSS generato sul lato server non lo è. In realtà, non l'ho mai visto. Esistono compilatori CSS, ma generano file CSS che possono essere utilizzati come statici.

Tecnicamente, non richiede librerie speciali, il tag di stile HTML dovrebbe fare riferimento allo script templater PHP (/ ASP / qualunque) anziché al file CSS statico, e lo script dovrebbe inviare un'intestazione di tipo di contenuto CSS - tutto qui.

Ha problemi di cache? Io non la penso così. Lo script dovrebbe inviare intestazioni senza cache ecc. È un problema per i designer? No, dovrebbero modificare il modello CSS (mentre modificano il modello HTML).

Perché non utilizziamo generatori CSS dinamici? O se ce ne sono, per favore fatemi sapere.

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

Semplicemente perché i CSS non devono essere diversi per pagina, si ottiene una pratica molto comune per ottimizzare il costo del download. La maggior parte dei siti racchiude tutti i CSS per l'intero sito in un unico download, in modo che le parti che si applicherebbero a diverse visualizzazioni di pagina sono presenti in un solo file scaricato. Con la memorizzazione nella cache, i tuoi clienti non devono aspettare che venga scaricato una seconda volta. Forse ancora più importante, tu, come fornitore di contenuti, non devi pagare il costo del caricamento del contenuto più di una volta; e puoi persino mettere i CSS statici su un server più adatto a servire contenuto statico, che libera risorse per il contenuto dinamico effettivo sui tuoi server delle applicazioni.

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

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

Tuttavia, i casi d'uso in cui il recupero di CSS aggiuntivo da Ajax risolverebbe il problema sono piuttosto rari, questo potrebbe essere il motivo per cui non l'hai mai riscontrato: di solito è più facile mantenere un set di fogli di stile che sono preelaborati al momento della distribuzione (MENO + minificazione) e memorizzabili nella cache ( ad es. la pagina successiva sarà in grado di riutilizzare il foglio di stile precedentemente memorizzato nella cache, quindi il tempo iniziale è più breve).

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

1. Less - Less CSS è sostanzialmente un'estensione del linguaggio CSS che aggiunge "comportamento dinamico come variabili, mixin, operazioni e funzioni". Permette anche "regole nidificate", il che è molto conveniente. Ho usato Meno principalmente per rendere la scrittura CSS meno dettagliata eliminando parte della ripetizione.

2. Riscrittura URL - Proprio come una 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 lungo tempo. Lo faccio principalmente per servire file CSS da librerie che non si trovano all'interno della web root.

3. Rapporti dinamici - Su un progetto su cui ho lavorato, avevamo un generatore di rapporti per tutti i tipi di dati nel sistema. Produciamo (all'interno dei styletag, come dici tu) regole di stile dinamico principalmente per i colori che sono stati selezionati dall'utente nel generatore di report.

^{Nota: quando si trasmette CSS direttamente a un URL (come in 1 o 2 ) e non lo si incorpora in una pagina che è già generata da uno script, si aggiungerà un carico piuttosto significativo al server rispetto alla pubblicazione di contenuto statico. Quindi, se hai un traffico considerevole, anche se puoi farlo in modo dinamico ogni volta, vorrai memorizzarlo nella cache come 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 creati per produrre contenuti. Quindi non c'è semplicemente un grande bisogno. Oltre a mostrare i colori dinamici scelti dall'utente, come abbiamo fatto noi, o eventualmente le immagini di sfondo (anche se l'immagine è contenuto , allora è probabilmente un buon argomento per usare il imgtag), cos'altro devi fare in modo dinamico?

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

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

Esistono DUE aspetti separati per il caricamento dinamico dei CSS ...

1. Generazione dinamica del file CSS sul server

   Questo è abbastanza semplice e molti siti web lo fanno. Questo è utile se cambi CSS in base a qualche condizione. 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

   Ciò potrebbe tornare utile se si crea dinamicamente gran parte del DOM e si caricano gli stili richiesti. MA come dice l'autore di LABjs ...

   in realtà determinare se un file CSS caricato in modo dinamico ha terminato il caricamento è in realtà abbastanza complicato e difficile da eseguire tra browser. Gli eventi di "caricamento" non si attivano come ci si aspetterebbe / aspettarsi. quindi l'aggiunta di tale supporto aggiungerebbe una dimensione non banale a LABjs

1. Lo facciamo. Tutto il tempo. Soprattutto per cose come il branding specifico del cliente in un'applicazione SaaS, in cui 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. Preferiamo generalmente pre-generare file CSS statici ogni volta che è possibile.
3. Per la massima velocità (dal punto di vista dell'utente), è meglio consegnare file CSS statici a una rete CDN e fare in modo che il browser li ottenga dalla rete CDN, anziché dai server delle applicazioni. Ciò è generalmente possibile solo quando i file CSS possono essere pre-generati prima o durante la distribuzione e quando parte della distribuzione sta consegnando i file CSS statici pre-generati alla CDN. I CDN ora sono molto economici e facili da usare: dai un'occhiata ai Cloud Cloud di Amazon CloudFront e Rackspace.

Ha problemi di cache? Io non la penso così. Lo script dovrebbe inviare no-cache ecc

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 quella ragione?

Se vuoi cambiare uno stile in base a vari parametri, devi farlo 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 (visto come l'HTML generato dinamicamente con un foglio di stile statico risolve la maggior parte delle esigenze quotidiane e il CSS stesso incorpora alcuni meccanismi per raggiungere la semi-dinamica), I ' l'ho visto usato in molte occasioni, e le uso io stesso ogni volta che ne ho bisogno.

Spesso, la parte 'dinamica' fa poco più che combinare diversi fogli di stile in uno (per ridurre il numero di richieste HTTP) e minimizzarli (per ridurre l'utilizzo della larghezza di banda), ma cose semplici come la sostituzione delle variabili (ad esempio, utilizzare le variabili per i colori utilizzati in tutto il foglio di stile) può semplificarti la vita. Tuttavia, poiché i CSS hanno una sintassi abbastanza semplice con pochi avvertimenti, un sistema di elaborazione del testo per scopi generici o un linguaggio di scripting come PHP è di solito sufficiente per questo, motivo per cui non vedi molti sistemi di elaborazione CSS standardizzati.

Forse li hai visti allo stato brado, senza riconoscerli. I server che inviano script dinamici di solito usano la riscrittura degli URL in modo che l'URL diventi indistinguibile dal contenuto offerto staticamente. Ciò è necessario perché alcuni browser (in particolare IE) si basano su estensioni per il corretto rilevamento del tipo MIME in determinate circostanze, ignorando (o scartando) le intestazioni di tipo di contenuto che potresti aver inviato.

Per quanto riguarda la memorizzazione nella cache: i fogli di stile vengono inseriti con richieste GET e renderli memorizzabili nella cache è assolutamente importante per un'esperienza utente decente. Non vuoi vedere la pagina ridisegnare 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 provoca un errore nella 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 di CSS che è potenzialmente diverso per ogni richiesta e dipende da effetti collaterali, considera di mettere la parte non dinamica in un foglio di stile servito staticamente e servi solo quelle cose che sono assolutamente richieste per essere dinamiche.

Ci sono alcuni scenari in cui mi piacerebbe usare il CSS dinamico, ma il più delle volte sono bloccato con l'utilizzo di designer che hanno bisogno di un po 'di aiuto per comprendere le basi del CSS. Lanciare un linguaggio dinamico nel mix potrebbe effettivamente far esplodere la testa.

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