Randomize CSS Rules

Question

Stavo lavorando a un sito Web e ho pensato a quanto sarebbe divertente se avessi completamente randomizzato le regole CSS sulla pagina come uno scherzo. (Non solo gli stili degli elementi, ma anche le stesse regole CSS, perché il sito ha molti elementi creati dinamicamente.) Ogni volta che caricavi la pagina il risultato sarebbe stato completamente diverso, e la maggior parte di loro sarebbe stata terribile. Quindi la mia domanda ha due parti:

Uso di JavaScript/JQuery, come si ottiene a livello di programmazione un elenco di tutte le regole CSS? Come una sorta di dizionario, con le regole abbinate ai selettori.

Quindi, dopo aver suddiviso l'elenco e assegnato casualmente ciascuna regola a un altro selettore, come si eliminano le regole precedenti e si sostituiscono le proprie?

NOTA: Voglio dire, utilizzando JavaScript/JQuery, come si randomizzano le regole sul lato client, non solo un singolo file CSS.

Answer 1

Tenete presente che questo è un po 'psuedo-ey, anche notare che è possibile farlo utilizzando puro JS.

foreach (var e in document.getElementsByTagName("*")) { 
    foreach (var p in el.style) { 
    var r = Math.random(0, 255); 
    e.style[p] = r; 
    } 
} 

Si noti inoltre che non tutte le proprietà CSS prendere 0 - 255 in modo potrebbe essere necessario creare il proprio algoritmo, ma questo ti sicuri iniziare.

Answer 2

È possibile accedere e attraversare tutti i fogli di stile con document.styleSheets. Vedere la documentazione API su MDN

Answer 3

Fare il giro di tutti gli elementi nella pagina sarebbe banale (document.getElementsByTagName('*')).

Il ciclo di tutti gli stili disponibili per ciascun elemento sarebbe banale (element.style).

L'impostazione di valori casuali per qualsiasi stile specificato sarebbe più difficile.

È necessario disporre di elenchi con hard-coded di stili e valori possibili per ciascuno di essi, poiché i valori che possono essere impostati variano in modo imprevedibile. Alcuni possono essere in una varietà di unità diverse (px, em,%). Alcuni di essi hanno parole chiave predefinite come valori possibili.

E un valore casuale non va bene se non si dispone di limiti. L'impostazione di un numero casuale width sembra facile, ma devi sapere a quali intervalli hai intenzione di lavorare. width:5743731px non sarà molto utile anche per una pagina randomizzata.

E quindi si hanno le proprietà che possono recuperare risorse esterne. Un'immagine di sfondo CSS sarà praticamente impossibile da randomizzare e i font dovranno essere caricati in una dichiarazione separata @font-face, in modo da poter solo randomizzare i font che si sa siano caricati.

E poi devi pensare a come sarai randomizzato. Hai intenzione di randomizzare ogni stile possibile su ogni elemento? (pazzo, ma hey, tutta questa faccenda è pazzesca, quindi perché no? O solo uno stile per elemento?

Non dimenticare che molti stili funzionano in combinazione tra loro. Quindi, text-overflow:ellipsis non fa nulla a meno che tu non abbia anche white-space:nowrap e overflow:hidden. E l'impostazione di border-color non ha senso se non hai impostato anche gli altri attributi del bordo.

Quindi sì, penso che il tuo primo compito qui sarebbe quello di passare attraverso la lista degli stili CSS e capire quali potrebbero essere randomizzati e quali potrebbero essere i possibili valori randomizzati. Questo è il punto difficile. Una volta ottenuto ciò, inserire il codice nel programma e il resto dovrebbe essere abbastanza semplice.