JavaScript vs. CSS-Techniken

[Kadey]

Der Anfänger stellt wieder komische Fragen

Es ist ja möglich mit JS, Hover-Effekte zu machen oder aber auch die Linkfarben und Hintergrundfarben zu ändern. Und natürlich noch vieles vieles mehr.
Welchen Weg sollte man denn einschlagen bei solch Standardsachen ?? ...CSS oder JS.... ist ja beides möglich. Klar kann man mit JS - CSS Eigenschaften manipulieren usw.
Verstehe den Sinn und Zweck aber nicht...

Wieso, Weshalb, Warum...Wer nicht fragt bleibt .....

Mfg Kadey

 

[MyBad]

AW: JavaScript vs. CSS-Techniken

Bei solchen Dingen ist es am Besten dies über CSS zu lösen und nicht über JavaScript. Einige Besucher könnten JavaScript deaktiviert haben. Von daher ist CSS immer die bessere Lösung (gerade wenn es um Formatierungen geht. Dafür ist Javascript eigentlich nicht gedacht). Vorausgesetzt, das Vorhaben lässt sich mit reinem CSS realisieren.

 

[Curanai]

AW: JavaScript vs. CSS-Techniken

Sehe ich fast ähnlich wie der Vorredner, weise aber darauf hin, dass kurzfristige visuelle Änderungen in der aktuellen Seite nicht ohne JavaScript auskommen könnten.

Beispiel ...

Es existiert ein DIV-Container, in dem bspw. eine Hinweismeldung ausgegeben werden soll. Da wir so gut wie möglich vorarbeiten wollen, trägt der auch noch ein 'id="errorView"'. Bei Seitenstart (CSS für "#errorView" wird gelesen) hat dieser keine Hintergrundfarbe und einen "display:none" (keine Reservierung des evtl. benötigten Platzes). Aufgrund Aktionen Deines Users wird dieser DIV dann aber benötigt - er soll "gezeigt" und mit einer klassischen Warnfarbe (rot) belegt werden. Was machst Du? Genau ... Du legst Dir eine Klasse für Deinen DIV an - bspw. "errorView_passiv" (keine Farbe) sowie "errorView_aktiv" mit Farbe Rot. Um Deinem User aber nun das "Problem", was wohl aufgetreten ist, auch zu zeigen, müsstest Du die Seite neu laden und mitschicken, dass er doch bitte statt <div id="errorView" class="errorView_passiv"></div> den schicken muss (!): <div id="errorView" class="errorView_aktiv">[Meldung]</div>

Das ist fürchterlich, oder? Als Leitsatz also: Bereite so viel wie möglich mit regulärem CSS (Formatierungen!!) vor (1. Ansicht der Seite - da hat JavaScript bzgl. Formatierung noch gar nichts verloren). Interaktionen, Änderungen im DOM/Anzeige und "Usability" lassen sich dann mit JavaScript erzielen und so obige Formatierung im Beispiel tauschen.

In jQuery sähe obige Aktion dann nur so aus:

$("#errorView").toggleClass("errorView_aktiv").html("Meine Meldung für den Fehler").css("display","block");

... alles ohne Seitenneuaufbau, da das CSS einfach getauscht wird - und zwar in der laufenden Ansicht.

jQuery = Framework für JavaScript (was ich sonst über mehrere Zeilen mit JavaScript selbst schreiben müsste, wurde hier bequem auf wenige Befehle zusammengefasst). Beispiel schnell noch ...

$("#errorView").html("Der neue Inhalt ...");

... sieht in normalem JavaScript so aus ...

document.getElementById('errorView').innerHTML = "Der neue Inhalt ...";

 

[Chriss1987]

AW: JavaScript vs. CSS-Techniken

Hi,

@Curani: ja, das ist zwar richtig, aber wenn bei dem User die Interaktion funktioniert, ist JS aktiviert und kann für die dynamische Anzeige von Feldern verwendet werden. Hat der User jedoch JS deaktiviert, funktioniert die ganze Interaktion nicht dynamisch (manche Seiten funktionieren dann leider garnicht mehr) und dann kann man nur auf normales CSS zurückgreifen.

Generell sollte eine Seite ohne JS lauffähig sein, d.h. grundlegendes wird mit CSS gestaltet und dynamische Aktionen dürfen bzw. müssen sich JS bedienen. Ohne Interaktion fällt mir spontan auch kein Fall ein, bei dem nach dem Laden ein Style geändert werden müsste...

@Kadey: Style generell mit CSS und verwende JS (wie du schon erwähnt hast) nur zur Manipulation der Styles.

Schöne Grüße aus dem Sauerland!
Chriss

 

[Myhar]

AW: JavaScript vs. CSS-Techniken

Kann mich den Vorrednern nur anschließen, verwende CSS für die Styles.
Eine Anmerkung zu dem Post von Curanai habe ich jedoch auch:
Es ist meiner Meinung nach nicht nötig, bei deinem Befehl auch noch das CSS zu setzen. Wird die Klasse verändert, dann kann man den neuen Stil auch im CSS festlegen.
Etwas anderes ist es mit JS Libraries wie jQuery, diese müssen CSS direkt per JS verändern, da sie keinen Einfluss auf das Stylesheet des Users haben.

L. G.

 

[Curanai]

AW: JavaScript vs. CSS-Techniken

@Myhar: Dann habe ich mal eine Frage an Dich! Ich habe zwei Klassen für DIV XY hinterlegt. Beim Laden der Seite wird "body_start" benutzt. Jetzt soll aber ohne Seitenneuaufbau "body_runtime" gesetzt werden ... wenn ich kein JS nehmen dürfe, wie müsste es gehen ohne Seiteneuladen?! Und ein kleiner Hinweis: Ich nehme auch CSS für Styles ... Denn ich sprach eigentlich vom ÄNDERN ...

@Chris: Dann hat man nur noch die bekannten 08/15 Pseudoklassen in CSS - korrekt.

Auch bin ich ein Verfechter (!) von "Seite mus laufen, wenn Javascript aus ist" - bekommst von mir ein dickes Veto. Das hat aber letztendlich damit zu tun, was mich auf der Seite erwartet und wieviel Luxus ich (!) meinen Usern anbieten will. Die finden es bspw. toller in einem Kalender von jQuery UI einen Termin per Klick zu nennen ... statt Eintippen, versteht sich. Oder auch die gern - von euch? - verwendeten Tools von Google der Marke Texteditor, Tabellenkalkulation ... hmmm ... also wie gesagt: "pauschal off" klares Nein ... ansonsten beim "unbewussten Surfen und überall hinklicken" ist wie üblich Vorsicht geboten, aber "JavaScript" ist dann mein kleinstes Problem.

... ist wie mit Fußballfans - einige randalieren, andere nicht. Aber deswegen werden Fans nicht verboten (obwohl das Fußballspiel auch ohne die laufen würde - lach ... nur das Modul "Stimmung" wäre 'offline').

 

[Myhar]

AW: JavaScript vs. CSS-Techniken

ich meinte damit, es reicht, wenn du die Klasse mit JS änderst. Das Aussehen des Div XY kannst du dann mit CSS definieren:

$(divXY).toggleClass("jsClass");

CSS:
.jsClass{border:red 4px solid}

Das es auf beide Arten geht weiß ich schon, nur finde ich die Methode schöner... Hier lässt sich jedoch streiten.

Beim zweiten Punkt mit dem dicken Veto: Das habe ich schon in genügend Threads gesagt und ich weiche nicht davon ab, dass eine Seite zuerst zugänglich sein muss ,also auch ohne JS laufen muss(1. Sicher, es gibt auch Ausnahmen und 2. JS an Sich heißt nicht, dass es unzugänglich ist.) Ein gutes Beispiel ist das "Tool von Google" der Marke Google Maps: Die funktioniert nämlich auch ohne JS. Es stimmt, es ist nicht so bequem wie mit JS, aber warum sollte man bestimmte Besuchergruppen aussperren?
Wieso sollte man beim Entwickeln faul sein und kein Textfeld zur Verfügung stellen, in das man ein Datum eintippen kann? Und sollte JS aktiviert sein, dann ist es eine Sache von 1-2 Codezeilen, den Kalender (welchen man ja sowieso haben will) hinzuzufügen. Und mit den neuen input Feldern mit HTML5 sind die Kalender dann sowieso obsolet ;-)
Dass es Webanwendungen gibt, bei denen man um JS nicht herumkommt ist korrekt, jedoch finde ich ist dies kein Grund sich als Entwickler faul zu stellen und einfachste Features nicht einzubauen. Die von dir genannte Tabellenkalkulation/Texteditor etc. sind klassische Fälle von JS Anwendungen. Und dagegen ist ja auch nichts einzuwenden.
Es geht eher darum, dass auch bei einfachsten Funktionen nicht an eine Lösung ohne JS gedacht wird.
Wer lieber ein Textfeld befüllt statt "bequem" einen Kalender zu bedienen, der soll es doch machen ;-)

L. G.