Quando un compito può essere compiuto sia da Javascript o CSS, è meglio usare i CSS? [chiuso]

11

Veto sempre JavaScript utilizzando CSS il più possibile.

vale a dire. Creo tab e pulsanti di rollover usando CSS piuttosto che JavaScript.

Ho visto alcune soluzioni, in particolare il Wt web-framework -che difendono JavaScript; ma esegui il downgrade con grazia del CSS se il browser non è abilitato / js-disabled.

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

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

    
posta A T 17.12.2011 - 15:46
fonte

5 risposte

10

Sì.

Lo scopo CSS è layout, aspetto grafico e animazioni

Lo scopo di JavaScript è l'interazione.

Se stai facendo il layout, usa CSS, se stai configurando l'aspetto e usa CSS, se stai facendo l'animazione usa CSS3

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

Tieni presente che le persone utilizzano JavaScript anziché CSS per il supporto del browser. Ci sono altre soluzioni come l'emulazione delle funzionalità CSS usando javascript.

    
risposta data 17.12.2011 - 16:15
fonte
12

Beh, questa è in realtà una domanda piuttosto interessante. Sto provando a pensare a come potresti persino fare un benchmark su qualcosa di simile, specialmente dal momento che la maggior parte delle volte né CSS né JavaScript stanno facendo cose molto intense sul web in una computazione.

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

a:hover {
  background-color: green;
}

è meglio semanticamente di

$('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 in JavaScript direttamente, ma ci ho pensato per un paio di minuti, e anche qui, la soluzione giusta potrebbe benissimo essere un CSS , ad esempio se stavi impostando molti attributi quando fai il passaggio del mouse.

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

    
risposta data 17.12.2011 - 16:20
fonte
3

Pensa a quanto segue dal Yahoo Developer Network :

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

Con percentuali così basse (al massimo) sembra quasi che ne valga la pena (a meno che gli utenti dei tuoi siti web provengano principalmente da quel 2%) per preoccuparsi del caso in cui gli utenti hanno disattivato il loro javascript. L'utente medio non sa come disattivare javascript e probabilmente non gli interessa. Se stai sviluppando un sito Web di tecnologia, potresti considerare la possibilità che abbiano disattivato JavaScript, tuttavia, se sono probabilmente abituati a siti Web che non funzionano correttamente, molti siti utilizzano pesantemente javascript.

Tutto ciò che ho detto che ho trovato molti casi in cui lo sviluppo di javascript rende quello che sto cercando di realizzare molto più facile e altri casi in cui css fa lo stesso.

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

    
risposta data 17.12.2011 - 17:16
fonte
2

JavaScript è un vero linguaggio informatico, il che significa che ha lo stato e il controllo dell'esecuzione del programma. In quanto tale, non esiste un limite massimo alla complessità che può ottenere, e qualsiasi cosa tu scriva in essa è destinata ad avere un sostanziale minimo di complessità. CSS è un codice descrittivo; la sua complessità è limitata al livello di complessità che può avere una ricetta. Pertanto, se qualcosa può essere fatto sia in CSS che in JavaScript, preferirei usare i CSS, poiché è destinato a essere meno complesso.

    
risposta data 17.12.2011 - 16:16
fonte
1

Javascript è un linguaggio di scripting, il che significa che ha la capacità di aggiungere qualche 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 i CSS erano destinati a farlo, io andrei con i CSS per lo stile del sito e lascerò il resto a Javascript.

Wikipedia:

Javascript use:

  • Opening or popping up a new window with programmatic control over the size, position, and attributes of the new window (e.g. whether the menus, toolbars, etc., are visible).
  • Validating input values of a web form to make sure that they are acceptable before being submitted to the server.
  • Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements.

UPDATE. As for the third point, the W3C says regarding CSS:

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element.

CSS use:

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate style sheet resulting in considerably simpler HTML markup.

    
risposta data 17.12.2011 - 19:58
fonte

Leggi altre domande sui tag