Wenn eine Aufgabe entweder mit Javascript oder CSS ausgeführt werden kann, ist es besser, CSS zu verwenden? [geschlossen]

Ich habe immer ein Veto gegen JavaScript eingelegt, indem ich so viel wie möglich CSS verwendet habe.

dh ich erstelle Registerkarten und Rollover-Schaltflächen mit CSS anstelle von JavaScript.

Ich habe einige Lösungen gesehen - insbesondere das Wt-Webframework -, die JavaScript befürworten. aber ein elegantes Downgrade auf CSS, wenn der Browser nicht in der Lage ist / js-deaktiviert.

Ich weiß, dass CSS und JavaScript unterschiedliche Zwecke haben, es gibt jedoch Überschneidungen. Welches ist die Bourne dieser Frage.

Sollte ich CSS so oft wie möglich über JavaScript verwenden?

Ja.

CSS-Zweck ist Layout, Look and Feel und Animationen

JavaScript-Zweck ist die Interaktion.

Wenn Sie ein Layout erstellen, verwenden Sie CSS. Wenn Sie das Erscheinungsbild festlegen, verwenden Sie CSS. Wenn Sie eine Animation ausführen, verwenden Sie CSS3

Wenn Sie Ereignishandler anhängen oder auf Benutzereingaben reagieren, verwenden Sie JavaScript.

Beachten Sie, dass Benutzer JavaScript anstelle von CSS für die Browserunterstützung verwenden. Es gibt andere Lösungen wie das Emulieren von CSS-Funktionen mit Javascript.

Nun, das ist eigentlich eine ziemlich interessante Frage. Ich versuche zu überlegen, wie Sie überhaupt einen Benchmark für so etwas durchführen würden, zumal weder CSS noch JavaScript die meiste Zeit wirklich rechenintensive Dinge auf einer Webseite tun werden.

Mein Bauchgefühl würde sagen, dass CSS so oft wie möglich verwendet wird, aber es nicht zu einer festen Regel wird.

a:hover {
  background-color: green;
}

ist dann semantisch besser

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

ABER

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

wäre in CSS schwierig (wenn auch nicht unmöglich). Sie könnten es auf diese Weise tun.

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

a.green {
  background-color: green;
}

Dies wäre wirklich ein etwas umständlicherer Weg, um das zu tun, was in JavaScript direkt hätte getan werden können, aber ich habe ein paar Minuten darüber nachgedacht, und selbst hier könnte die richtige Lösung beispielsweise ein CSS sein wenn Sie beim Hover viele Attribute festgelegt haben.

** Bitte beachten Sie, dass keiner dieser Codes funktionieren soll. Diese dienen nur zu Demonstrationszwecken. **

Überlegen Sie, ob Sie Folgendes aus dem Yahoo Developer Network erhalten :

"Nach der Eingabe der Zahlen haben wir eine konsistente Rate von Anfragen mit deaktiviertem JavaScript festgestellt, die bei etwa 1% des tatsächlichen Besucherverkehrs liegen, wobei die höchste Rate in den USA bei etwa 2 Prozent und die niedrigste in Brasilien bei etwa 0,25 Prozent liegt Die anderen getesteten Länder zeigten Zahlen nahe 1,3 Prozent. "

Bei so niedrigen Prozentsätzen (maximal) scheint es sich kaum zu lohnen (es sei denn, Ihre Website-Benutzer kommen hauptsächlich von diesen 2%), sich über den Fall Gedanken zu machen, in dem Benutzer ihr Javascript deaktiviert haben. Der durchschnittliche Benutzer weiß nicht, wie er Javascript ausschalten soll, und es ist ihm wahrscheinlich egal. Wenn Sie eine technische Website entwickeln, sollten Sie die Möglichkeit in Betracht ziehen, dass sie Javascript deaktiviert haben. Wenn dies jedoch der Fall ist, sind sie wahrscheinlich an Websites gewöhnt, die nicht ordnungsgemäß funktionieren, da viele Websites Javascript häufig verwenden.

Abgesehen davon habe ich viele Fälle gefunden, in denen die Entwicklung von Javascript das, was ich versuche, viel einfacher macht, und andere Fälle, in denen CSS dasselbe tut.

Am Ende hat jede "Sprache" ihren angemessenen Platz in der Webentwicklung und kann mit Bedacht eingesetzt werden, um sowohl die Entwicklung als auch die Benutzererfahrung zu verbessern. Erfahren Sie, was diese Verwendungszwecke sind (ich empfehle Erfahrungslernen) und wenden Sie sie mit Bedacht an. Nach meiner Erfahrung sind in Stein gemeißelte Regeln wie "Niemals JS verwenden, wenn eine CSS-Lösung vorhanden ist" (umschrieben) in der praktischen Welt selten am besten.

JavaScript ist eine echte Computersprache, dh es verfügt über den Status und die Kontrolle der Programmausführung. Daher gibt es keine Obergrenze dafür, wie komplex es werden kann, und alles, was Sie darin schreiben, muss ein Minimum an Komplexität aufweisen. CSS ist ein beschreibender Code. Seine Komplexität ist auf den Grad der Komplexität beschränkt, den ein Rezept haben kann. Wenn also etwas sowohl in CSS als auch in JavaScript möglich ist, würde ich CSS viel lieber verwenden, da es weniger komplex sein muss.

Javascript ist eine Skriptsprache, dh es kann Logik hinzugefügt werden. CSS wird verwendet, um das Aussehen und den Stil eines Dokuments zu beschreiben. Es wurde hauptsächlich entwickelt, um die Dokumentstruktur von der Formatierung und dem Layout (Präsentation) zu trennen.

Sie können Javascript verwenden, um das Aussehen einer Webseite zu ändern. Da CSS dies jedoch beabsichtigt hatte, würde ich CSS für den Site-Stil verwenden und den Rest Javascript überlassen.

Wikipedia:

Verwendung von Javascript:

• Öffnen oder Öffnen eines neuen Fensters mit programmgesteuerter Steuerung von Größe, Position und Attributen des neuen Fensters (z. B. ob die Menüs, Symbolleisten usw. sichtbar sind).
• Überprüfen der Eingabewerte eines Webformulars, um sicherzustellen, dass sie akzeptabel sind, bevor sie an den Server gesendet werden.
• Ändern von Bildern, wenn sich der Mauszeiger darüber bewegt: Dieser Effekt wird häufig verwendet, um den Benutzer auf wichtige Links aufmerksam zu machen, die als grafische Elemente angezeigt werden.

AKTUALISIEREN. Zum dritten Punkt sagt das W3C zu CSS:

Die :hoverPseudoklasse gilt, während der Benutzer ein Element mit einem Zeigegerät bezeichnet, es jedoch nicht unbedingt aktiviert. Beispielsweise könnte ein visueller Benutzeragent diese Pseudoklasse anwenden, wenn der Cursor (Mauszeiger) über einem vom Element generierten Feld bewegt wird.

CSS-Verwendung:

Vor CSS waren fast alle Präsentationsattribute von HTML-Dokumenten im HTML-Markup enthalten. Alle Schriftfarben, Hintergrundstile, Elementausrichtungen, Rahmen und Größen mussten im HTML häufig wiederholt explizit beschrieben werden. Mit CSS können Autoren einen Großteil dieser Informationen in ein separates Stylesheet verschieben, was zu einem erheblich einfacheren HTML-Markup führt.