Quando un'attività può essere eseguita da Javascript o CSS, è meglio usare CSS? [chiuso]

Ho sempre posto il veto a JavaScript usando CSS il più possibile.

cioè creo schede e pulsanti di rollover usando CSS anziché JavaScript.

Ho visto alcune soluzioni - in particolare il framework Web Wt - che sostengono JavaScript; ma esegui il downgrade grazioso a CSS se il browser non è abilitato / js-disabled.

So che CSS e JavaScript hanno scopi diversi, tuttavia c'è sovrapposizione; che è il motivo di questa domanda.

Devo continuare a utilizzare CSS il più possibile su JavaScript?

Sì.

Lo scopo del CSS è layout, aspetto grafico e animazioni

Lo scopo di JavaScript è l'interazione.

Se stai facendo layout, usa CSS, se stai impostando l'aspetto e usa CSS, se l'animazione che stai facendo usa CSS3

Se si collegano i gestori di eventi o si reagisce all'input dell'utente, utilizzare JavaScript.

Si noti che le persone utilizzano JavaScript anziché CSS per il supporto del browser. Esistono altre soluzioni come emulare le funzionalità CSS utilizzando JavaScript.

Bene, questa è in realtà una domanda piuttosto interessante. Sto cercando di pensare a come farebbe un punto di riferimento su qualcosa del genere, soprattutto dal momento che la maggior parte delle volte né i CSS né i JavaScript stanno andando a fare cose intensamente computazionali su una pagina web.

Il mio istinto direbbe che usa CSS il più possibile, ma non trasformarlo in una regola dura e veloce.

a:hover {
  background-color: green;
}

è semanticamente migliore allora

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

MA

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

sarebbe difficile (anche se non impossibile) nei CSS. Potresti farlo in questo modo.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Questo sarebbe davvero un modo leggermente più imbarazzante di fare ciò che avrebbe potuto essere fatto direttamente in JavaScript, ma ci sto pensando da un paio di minuti, e anche qui, la soluzione giusta potrebbe benissimo essere un CSS, ad esempio se stavi impostando molti attributi durante il passaggio del mouse.

** Si noti che nessuno di questo codice dovrebbe funzionare, questi sono solo a scopo dimostrativo. **

Considera se dalla rete per sviluppatori di Yahoo :

"Dopo aver analizzato i numeri, abbiamo riscontrato un tasso costante di richieste disabilitate per JavaScript che si aggiravano intorno all'1% del traffico di visitatori effettivo, con il tasso più alto circa il 2% circa negli Stati Uniti e il più basso circa lo 0,25% circa in Brasile. gli altri paesi testati hanno mostrato numeri molto vicini all'1,3 percento ".

Con percentuali così basse (al massimo) sembra non valerne la pena (a meno che gli utenti dei tuoi siti web non provengano principalmente da quel 2%) preoccuparsi del caso in cui gli utenti hanno disattivato il loro javascript. L'utente medio non sa come disattivare JavaScript e probabilmente non gliene importa. Se stai sviluppando un sito Web tecnologico, potresti prendere in considerazione la possibilità che abbiano disabilitato javascript, tuttavia se hanno probabilmente sono abituati a siti Web che non funzionano correttamente poiché molti siti Web usano javascript pesantemente.

Detto questo, ho trovato molti casi in cui lo sviluppo di javascript rende molto più facile quello che sto cercando di realizzare e altri casi in cui css fa lo stesso.

Alla fine ogni "lingua" ha il suo posto appropriato nello sviluppo web e usata saggiamente può migliorare sia lo sviluppo che l'esperienza dell'utente. Scopri quali sono questi usi (ti consiglio di imparare l'esperienza) e applicare saggiamente. Nella mia esperienza, impostare regole di pietra come "Non usare mai JS quando esiste una soluzione CSS" (parafrasato) raramente sono le migliori nel mondo pratico.

JavaScript è un vero linguaggio informatico, nel senso che ha lo stato e il controllo dell'esecuzione del programma. Pertanto, non esiste un limite massimo alla complessità che può ottenere e qualsiasi cosa tu scriva al suo interno ha un minimo indispensabile di complessità. CSS è un codice descrittivo; la sua complessità è limitata al livello di complessità che una ricetta può avere. Pertanto, se si può fare qualcosa sia in CSS che in JavaScript, preferirei di gran lunga utilizzare i CSS, poiché è destinato a essere meno complesso.

Javascript è un linguaggio di scripting, il che significa che ha la capacità di aggiungere un po 'di logica. Il CSS è usato per descrivere l'aspetto e lo stile di un documento. È stato progettato principalmente per separare la struttura del documento dalla formattazione e dal layout (presentazione).

Puoi usare Javascript per modificare l'aspetto di una pagina web ma dato che CSS voleva farlo, andrei con CSS per lo stile del sito e lascerei il resto a Javascript.

Wikipedia:

Javascript utilizza:

• Apertura o pop-up di una nuova finestra con controllo programmatico su dimensioni, posizione e attributi della nuova finestra (ad es. Se i menu, le barre degli strumenti, ecc. Sono visibili).
• Convalida dei valori di input di un modulo Web per assicurarsi che siano accettabili prima di essere inviati al server.
• Modifica delle immagini mentre il cursore del mouse si sposta su di esse: questo effetto viene spesso utilizzato per attirare l'attenzione dell'utente su collegamenti importanti visualizzati come elementi grafici.

AGGIORNARE. Per quanto riguarda il terzo punto, il W3C dice riguardo ai CSS:

La :hoverpseudo-classe si applica mentre l'utente designa un elemento con un dispositivo di puntamento, ma non necessariamente lo attiva. Ad esempio, un agente utente visivo potrebbe applicare questa pseudo-classe quando il cursore (puntatore del mouse) passa sopra una casella generata dall'elemento.

Uso CSS:

Prima del CSS, quasi tutti gli attributi di presentazione dei documenti HTML erano contenuti nel markup HTML; tutti i colori dei caratteri, gli stili di sfondo, gli allineamenti degli elementi, i bordi e le dimensioni dovevano essere esplicitamente descritti, spesso ripetutamente, all'interno dell'HTML. Il CSS consente agli autori di spostare gran parte di tali informazioni in un foglio di stile separato con conseguente markup HTML notevolmente più semplice.