JavaScript hat Best Practices deaktiviert? [geschlossen]

Question

JavaScript hat Best Practices deaktiviert? [geschlossen]

8

Ich würde gerne wissen, ob jemand seine Webseiten optimiert, um ein freundliches Verhalten zu haben, wenn der Benutzer Javascript deaktiviert hat. Gibt es Tricks, um in solchen Fällen Pseudo-Skripting-Verhalten zu bieten? Ich spreche grundlegende Dinge wie das Öffnen von Links in neuen Fenstern. Ich würde mir vorstellen, dass es immer noch viel gibt, was man ohne Javascript machen kann. In manchen Fällen könnte es nützlich sein, eine Seite mit einigen Funktionen zu haben, auf die sie zurückgreifen kann. Gibt es Praktiken?

Edit: gute Antworten soweit! Würde es den Leuten etwas ausmachen, ein paar Beispielcodes zu verwenden (komm schon, HTML ist sooo einfach!), Da ich glaube, ich habe noch keine solche Frage auf SO gesehen.

javascript html cross-browser

tkotitan 04.03.2009, 14:58

quelle

9 Antworten

Tags und Links javascript html cross-browser

Django: Verwenden von Annotate, Count und Distinct in einem Queryset ___ answer29585579 ___

Michaels Antwort ist großartig, und ich wünschte, ich hätte sie schon einmal gesehen; aber da ich nicht nur verstehen muss, dass sie verdammt komisch sind, sondern auch auf welche Art und Weise (ich möchte ihre Logik so bearbeiten, dass ich die Mathematik brauche), habe ich eine %code% Implementierung in Javascript (das hauptsächlich aus dem Lesen des Firefox-Quellcodes stammt), der das %code% emuliert, das Webkit / Blink / Gecko verwendet.

Auch hier ist der springende Punkt, nur um zu verstehen, welche Ergebnisse es erzeugt.

%Vor%
%Vor%
%Vor%

Das Snippet wurde aus dieser Antwort übernommen.

___ qstntxt ___

Durch das Lesen der HSL / HSV-Farbtheorie habe ich den Eindruck, dass die Farbtonkomponente ein zyklisches Attribut ist, das sich alle 360 Grad wiederholt und unabhängig von Sättigung und Helligkeit / Wert verändert werden kann. Korrigiere mich, wenn ich falsch liege, aber diese Aussagen folgen logisch der vorherigen Definition:

Wenn Sie den Farbton um 360 Grad drehen, erhalten Sie die gleiche Farbe
Wenn Sie den Farbton zweimal um 180 Grad drehen, erhalten Sie die ursprüngliche Farbe
Die Drehung des Farbtons um 180 Grad gefolgt von -180 Grad ergibt die ursprüngliche Farbe

Allerdings ist nur die Option 1 korrekt. Wenn Sie den Farbton viermal um +90 Grad drehen, ergibt sich eine Farbe, die dem Original nicht einmal annähernd ähnelt.

Außerdem mit -webkit-filter und SVG's

%Vor%

erzeugt nicht das gleiche Ergebnis für dieselbe Rotation. Auf der anderen Seite sind die von SVG-Filtern erzeugten Farben in allen Browsern konsistent.

Gibt es irgendeine "versteckte" Eigenschaft der Farbtonrotation, die die Operation nicht assoziativ macht?

Beispiele für Webkit-Filter und SVGs finden Sie hier: Ссылка

___ tag123graphics ___ Grafiken sind visuelle Präsentationen. Fragen, die dieses Tag verwenden, sollten auch mit dem entsprechenden verwendeten Sprach- und Grafiksubsystem versehen sein. Bei allgemeinen Grafikfragen sollten Sie Computer Graphics Stack Exchange (computergraphics.stackexchange.com) in Erwägung ziehen. ___ tag123svg ___ Scalable Vector Graphics (SVG) ist ein XML-basiertes zweidimensionales Vektorgrafikformat, das auch in HTML verwendet werden kann. Fügen Sie dieses Tag nicht hinzu, nur weil Ihr Projekt SVG verwendet. Fügen Sie stattdessen das Tag hinzu, wenn Ihre Frage entweder SVG betrifft oder eng damit verbunden ist, wie Sie etwas mit SVG erreichen können. ___ tag123colors ___ Verwenden Sie dieses Tag für Fragen zum Darstellen oder Bearbeiten von Farben in einer Programmiersprache. ___ tag123svgfilters ___ SVG-Filter sind eine Gruppe von Bildbearbeitungsprimitiven, die kombiniert werden können, um anspruchsvolle visuelle Effekte zu erzeugen. ___ answer46533498 ___

tl; dr Fehler beim Umwandeln von Farben von Floats (innerhalb des Filters) in Bytes (überall sonst).

Also ist es ein bisschen komplizierter als das, die Spezifikation liefert eine gute Formel für Farbtonrotationsmatrizen, zB die für 180 Grad (außer Alpha und Verschiebungen):

%Vor%

Beachten Sie, wenn Sie das selbst multiplizieren, erhalten Sie (auf vier Dezimalstellen):

%Vor%

, das der Identitätsmatrix oder einer Nulltransformation sehr ähnlich ist.

Das wäre perfekt, außer dass der Browser zwischen jedem Filter wieder in RGB konvertiert. Schauen Sie was passiert, wenn wir rot leuchten:

%Vor%

Wir erhalten eine Farbe, die in RGB mit Werten von 0 bis 255 nicht dargestellt werden kann. Daher wird sie während der RGB-Konvertierung auf %code% gebunden und gerundet, und wenn sie erneut gedreht wird, erhalten wir ein dunkles desaturiertes Rot, %code% anstelle des hellen reinen Rot, mit dem wir angefangen haben.

___ tag123hsl ___ HSV ist ein zylindrisches Farbmodell, das Farben nach Farbton (0 ° -360 °), Sättigung (Farbintensität) und Helligkeit (von Schwarz über die Farbe zu Weiß) bestimmt. ___ antwort19325417 ___

Sowohl in CSS- als auch in SVG-Filtern gibt es keine Konvertierung in HSV oder HSL - die shorthands von hueRotation verwenden eine lineare Matrixapproximation im RGB-Raum, um die Farbtonrotation durchzuführen. Dies spart Sättigung oder Helligkeit für kleine Rotationen und stark gesättigte Farben nicht gut - wie Sie sehen.

Eine echte Farbtonrotation würde zuerst die RGB-Eingangsfarbe in HSL umwandeln, das H anpassen und dann zurück in RGB konvertieren. Filter tun das nicht. Und diese Umwandlung kann nicht genau mit einer linearen Matrix approximiert werden, so dass, während der Farbton (hauptsächlich) genau verändert wird, die Sättigung und Helligkeit überall verteilt sind. Diese Effekte sind nichtlinear, sodass das Hinzufügen kleinerer Ops zu anderen Farben führt als die Ausführung einer großen Operation.

(Der Unterschied zwischen huerotation in SVG- und CSS-Filtern könnte auf die Verwendung anderer Farbräume zurückzuführen sein (sRGB vs. linearRGB) - diese sollten gleich sein.)

Update: Ich bin interessiert genug, um einen manuellen Vergleich zu machen. Wie Sie sehen können, machen Filter eine schreckliche Arbeit, indem sie reine Farben im Bereich von 0 bis 180 Grad rotieren lassen. Dieses Bild vergleicht eine manuelle Farbtonrotation, indem Sie hsl Farben manuell (äußerer Ring) gegen eine Filterfarbtonrotation auf der Grundfarbe (innerer Ring)

einstecken

Aber sie machen einen besseren Job bei weniger reinen Farben wie HSL (0,50%, 75%), wie Sie sehen können.

codepen Link, falls Sie spielen möchten: Ссылка

___

score 11 · Answer 1

Was ich manchmal tun kann, ist die Funktionen einzustellen, die Javascript nicht anzeigen müssen, und dann Javascript verwenden, um sie anzuzeigen. Auf diese Weise sehen Leute ohne Javascript keine Funktionen, die sie nicht verwenden können. Fügen Sie dann alternative Features in <noscript> -Tags ein.

score 5 · Answer 2

Zum Öffnen von Links in neuen Fenstern können Sie target="_ blank"

verwenden %Vor%

Wo ich arbeite, verwenden wir eine Zielseite, um (bis zu einem gewissen Grad) sicherzustellen, dass sie Javascript aktiviert haben, bevor sie in die Anwendung gelangen ...

%Vor%

Außerdem bin ich oft erstaunt, wie CSS so mächtig sein kann .

score 4 · Answer 3

Stackoverflow erledigt das auf eine nette Art und Weise. Die Seite ist komplett ohne Javascript nutzbar, man kann Fragen stellen und beantworten. Erweiterte Funktionen wie Voting funktionieren nicht.

Sie müssen einen Kompromiss finden zwischen der Zeit, die Sie ausgeben wollen, um die Website ohne Javascript nutzbar zu machen, und der Menge an Funktionen, die funktionieren müssen.

score 3 · Answer 4

Sie können & lt; Noscript & gt; Tag zum Erstellen eines Hyperlinks, dessen Ziel _blank ist, um ein neues Fenster zu öffnen.

Es ist auch gut für SEO, so dass Suchmaschinen wie Google und Yahoo! kann Ihre Links auf Ihren Webseiten identifizieren und crawlen.

& lt; Noscript & gt; kann diese js-disabled Browser auch normale Funktion bieten.

score 3 · Answer 5

Wenn Sie Javascript verwenden, um ein Fenster über einen Link zu öffnen, können Sie es transparent machen, so dass es auf das ursprüngliche Verhalten des Links zurückgreift, wenn Javascript deaktiviert ist:

%Vor%

Wenn Javascript aktiviert ist, wird das onclick-Ereignis den Klick erfassen und ein Fenster öffnen, dann gibt es false aus dem Ereignis zurück, so dass der Link nicht befolgt wird. Wenn Jaspascript deaktiviert ist, wird stattdessen der Link verwendet.

score 3 · Answer 6

"Ich würde mir vorstellen, dass es immer noch eine Menge gibt, die man ohne Javascript machen kann" - komisch, vor nicht allzu langer Zeit haben wir alles ohne Javascript gemacht.

Der beste Ansatz ist die sogenannte progressive Verbesserung. Das Prinzip besteht darin, etwas zu erstellen, das ohne JavaScript funktioniert, und dann zusätzliche Verhaltensweisen zu "schichten", indem das JavaScript an die Objekte gebunden wird. Bibliotheken wie jQuery machen dies einfach, da sie CSS-Selektoren unterstützen. Auf diese Weise können Sie JS-Verhalten fast so anwenden, wie Sie CSS anwenden würden (OK, eine leichte Übertreibung).

Man muss darüber nachdenken, was eine gute Grundlinie ist und wie Seiten geändert werden sollten.

Oft liegt die eigentliche Mehrarbeit auf der Serverseite, wo Sie möglicherweise mehrere Anforderungsverarbeitungssysteme haben müssen. Es ist ein bisschen ein großes Feld in einer kleinen Antwort anzusprechen!

Es lohnt sich auch darüber nachzudenken, wer und warum Benutzer kein Javascript verwenden. Hier ist etwas, das ich vor einiger Zeit geschrieben habe das Thema sollten Sie interessiert sein.

Ein Beispiel? Nehmen Sie etwas Einfaches, z. Sie möchten nette "Tooltips" nach Formularfeldern anzeigen, wenn der Benutzer zu ihnen mauset. Im HTML könnten diese zB als Absätze markiert sein:

%Vor%

Für Nicht-JS-Benutzer kann die Eingabeaufforderung einfach als ein schöner Absatz angezeigt werden. Du machst das also mit CSS. Verfügen Sie über zusätzliches CSS für JS-Benutzer, das den Absatz standardmäßig ausblendet. Also: 2 CSS-Sets, eines überschreibt das andere.

nicht JS:

%Vor%

js:

%Vor%

Wie Sie CSS für JS / Nicht-JS-Situationen anwenden, bleibt Ihnen überlassen. Es gibt zahlreiche Möglichkeiten. Persönlich möchte ich für JS im CSS codieren und habe eine noscript.css-Variante (d. H. Rückwärts arbeiten) in einem Tag. Welches ist nicht gültig XHTML, aber funktioniert gut.

Dann haben Sie ein JS, das nach den Elementen sucht und den Anzeigecode für die Tooltips verwaltet. zB:

%Vor%

Das ist Pseudo-Code, aber Sie bekommen das Bild. Was Sie am Ende haben, ist 1 Satz HTML, mit 2 Präsentationen und zusätzlichen Verhaltensweisen, und keine JS in Ihrem HTML selbst verwickelt.

score 1 · Answer 7

Leute, die JavaScript deaktivieren, können auch CSS, Java und andere "Präsentations" -Funktionen kürzen, um die Rechenleistung in einem leistungsschwächeren Browser zu sparen. (Zum Beispiel ein Web-Telefon oder ein älterer Modell-Computer.) Sie könnten dies etwas abschwächen, indem Sie dem Server einfache Funktionen hinzufügen, so wie sie es in den Tagen von CGI getan haben ( zufälliges Intro hier ). In diesem Fall könnte Ihr Server Nicht-JS-Benutzer auf eine GET / POST-Seitenversion umleiten. Ich würde auch die Antworten so einfach und ungeschminkt wie möglich machen, da Sie möglicherweise auf einen winzigen Bildschirm ausgeben.

score 0 · Answer 8

0

Hier ist eine Frage (< a href="https://stackoverflow.com/questions/155615/is-it-reasonable-to-assume-my-visitors-have-javascript-enabled"> und ein anderes ), die viele (abweichende ) Meinungen über das Erstellen einer Website, die anmutig behandelt, dass JavaScript deaktiviert ist.

Adam Neal 04.03.2009 15:45

quelle

score 0 · Answer 9

jQuery hilft wirklich. Sehr oft schreiben Sie mit großen JavaScript-Plugins (Tabs, Tooltips, etc ...) Ihr Markup sehr semantisch.

Beispiel: Das Tabs-Plug-In erfordert, dass Sie verankerte divs erstellen, d. H.

%Vor%

Dies macht semantisch Sinn, und ohne das Tabs-Plug-in erhalten Sie einige Funktionen. Wenn Sie javascript und jquery-tabs aktiviert haben, erhalten Sie eine wirklich schöne, reichhaltige Schnittstelle.

Dies ist wirklich nur progressive Verbesserung, wie einige andere bemerkt haben. Schreiben Sie semantisches Markup, verbessern Sie es mit CSS, und verbessern Sie es dann mit Javascript. Sie sollten mit etwas enden, das für alle funktioniert, sogar für Luchsbenutzer.