Dieses Mal habe ich versucht, das Web ohne CSS zu durchsuchen

CSS gibt jeder Website das Design. Websites sind sicher ohne es nicht sehr lustig und freundlich! Ich habe über jemanden gelesen, der eine Woche ohne JavaScript ist und wie die Erfahrung zu Websites führte, die schneller waren, obwohl bestimmte Aspekte von ihnen nicht wie erwartet funktionieren würden.

Aber CSS. Wenn Sie das CSS beim Stöbern im Web ausschalten, würde das Web das Web nicht weniger verwendbar machen ... oder? Oder würden einige Funktionen wie JavaScript nicht wie erwartet funktionieren? Aus Neugier entschied ich mich, ihm einen Wirbel zu machen und das CSS -Fleisch vom HTML -Skelett zu rippen, während ich ein paar Sites stöberte.

Warum könnten Sie fragen? Gibt es nicht masochistische Gründe, CSS auszuschalten? Heydon Pickering einmal getwittert, dass das Deaktivieren von CSS eine gute Möglichkeit ist, einige Barrierefreiheitsstandards zu überprüfen:

1. Gemeinsame Elemente wie Überschriften, Listen und Formelemente sind semantisch und sehen immer noch gut aus.
2. Eine visuelle Hierarchie ist immer noch mit Standardstilen festgelegt.
3. Der Inhalt kann weiterhin in einer logischen Reihenfolge gelesen werden.
4. Bilder existieren immer noch als -Tags, anstatt sich als CSS -Hintergründe zu verlieren.

In einer Webaim -Umfrage aus dem Jahr 2018 wurde berichtet, dass 12,5% der Benutzer, die sich auf jede Art von unterstützten Technologie verlassen, mit benutzerdefinierten Stylesheets im Internet durchsuchen, zu denen jede CSS -Erklärung auf einer Website abgeschafft wird. Und wenn wir über langsame Internetverbindungen sprechen, könnte das Abbrechen von CSS eine Möglichkeit sein, Inhalte schneller zu konsumieren. Es besteht auch die Möglichkeit, dass CSS aus Gründen außerhalb unserer sofortigen Kontrolle deaktiviert ist, z.

Als Experiment habe ich fünf Websites und eine Web -App ohne CSS verwendet, und dieser Beitrag wird meine Erfahrungen behandeln. Es war ein ziemlich augenöffnendes Abenteuer für mich persönlich, hat mich aber auch als Entwickler beruflich informiert, in einer Weise, die ich hoffe, dass Sie auch sehen werden.

Aber zuerst können Sie CSS deaktivieren

Sie sind absolut willkommen, in Form dieses Beitrags stellvertretend durch mich zu leben. Aber für diejenigen unter Ihnen, die sich der Aufgabe befassen und ein stilloses Netz erleben möchten, können Sie CSS in verschiedenen Browsern deaktivieren:

• Chrome: Es gibt tatsächlich keine Einstellung in Chrome, um CSS zu deaktivieren. Daher müssen wir auf eine Erweiterung zurückgreifen, z. B. Deaktivieren-HTML.
• Firefox: Ansicht > Seitenstil > Kein Stil
• Safari: Safari > Einstellungen ... > Menü entwickeln in der Menüleiste . Gehen Sie dann zum Dropdown -Unternehmen entwickeln und wählen Sie die Option "Stile deaktivieren" aus.
• Opera: Wie Chrome benötigen wir eine Erweiterung und Webentwickler passt zur Rechnung.
• Internet Explorer 11: View > Stil > Kein Stil

Ich konnte keinen dokumentierten Weg finden, um CSS in Kante zu deaktivieren, aber wir können CSS und jeden anderen Browser programmgesteuert über die CSS -Objektmodell -API in der Devtools -Konsole entfernen:

 var d = dokument;

für (var s in s = d.stylesheets)
    S [s] .Disabled = true;

für (var i in i = d.QuerySelectorAll ("[Stil]"))
    I [i] .style = "";

Die erste Schleife deaktiviert alle externen und internen Stile (in und

 (f = function () {
    // CSS entfernen
    ...

    setTimeout (f, 20);
}) ();

Alternativ gibt es nur SMS-Browser-wie den alten Luchs-erwarten, ohne Video, Bilder (einschließlich SVGs) und JavaScript zu leben.

Durch das stillosen Glas ...

Für jede Seite, die ich ohne CSS surfte - Amazon, Duckduckgo, Github, Stack Overflow, Wikipedia und Kontrastprüfer namens Hex Naw - werde ich meine ersten Eindrücke teilen und einige Vorschläge geben, die bei der Erfahrung helfen könnten.

Machen Sie sich bereit, denn die Dinge werden möglicherweise ein bisschen ... entsetzlich. ?

Website 1: Amazon.com

Es gibt hier keine wirkliche Notwendigkeit einer Einführung. Amazon ist nicht nur ein Haushaltsnot für so viele von uns, sondern führt dank ihrer allgegenwärtigen Amazon Web Services -Plattform auch einen riesigen Teil des Webs.

Hier gibt es eine große Anzahl von Dingen, also werde ich die stillosen Dinge erkunden, die mir in den Weg gehen, während ich ein Produkt findet und vorgibt, es zu kaufen.

Auf der Homepage sehe ich sofort ein Sprite -Blatt, das von der Website verwendet wird. Es ist wirklich anstelle dessen, wo das Logo sein könnte, und macht es schwierig zu wissen, ob diese Bilder dort sein sollen oder nicht. Jedes Sprite enthält mehrere Versionen des Logos, und selbst wenn ich das „Amazon“ -Wordmarken darin sehen konnte, ist es überraschend, dass es nicht die globale Heimatverbindung ist. Wenn Sie neugierig sind, wo sich die Heimlink wirklich befindet, ist diese Struktur von Spannweiten, in denen das Logo als Hintergrundbild serviert wird… in CSS:

 <a href="/ref%20=%20nav_logo" aria-label="Amazon" tabindex="6">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

Das nächste Problem, das auftritt, ist, dass der Link „zum Hauptinhalt überspringen“ nicht wie ein typischer Skip -Link aussieht, aber er funktioniert wie einer. Es stellt sich heraus, dass es sich um ein Elements ohne HREF handelt, und JavaScript (ja, ich habe das aktiviert gelassen) wird verwendet, um die Verankerungsfunktionalität nachzuahmen.

Wenn ich eine Suche beginne, muss ich weiter unter dem Link „Erste Schritte“ schauen, um die Vorschläge zu sehen. Unter den Artikeln „Ihre Listen“ und „Ihr Konto“ wird es schwierig, die Links auseinander zu unterscheiden. Sie erscheinen alle zusammen, als wären sie ein super langer Mega -Link. Ich glaube, es wäre effektiver gewesen, in diesem Szenario eine semantische ungeordnete Liste zu verwenden, um ein Gefühl der Hierarchie aufrechtzuerhalten.

Unter all diesen Suchvorschlägen sind die Konto- und Navigationslinks jedoch leichter zu lesen, da sie durch einen Platz getrennt werden.

Interessanterweise ist das Karussell niedriger auf der Seite immer noch etwas funktional. Wenn ich auf die Optionen "Vorherige Seite" oder "nächste Seite" klicke, wird die Reihenfolge der Bilder geändert. Wenn ich zwischen diesen Optionen hüpfte, mussten ich scrollen.

Wenn Sie etwas weiter nach unten überspringen, gibt es ein Werbeelement. Es enthält eine "Anzeigen -Feedback" -Szge, die so statisch aussieht wie das, was wir früher mit dem Link „zum Hauptinhalt überspringen“ gesehen haben. Nun, ich habe es trotzdem angeklickt und es enthüllte ein Formular zum Teilen von Feedback zur Werbung.

Sie haben es vielleicht übersehen, aber über den beiden Gruppen von Formularbeetikeln befindet sich eine leere Taste und die Funkgeräte sind fehl am Platz. Die Struktur ist verwirrend, weil ich nicht weiß, welche Etiketten zu welchen Optionsfeldern gehören. Ich meine, ich denke, ich könnte davon ausgehen, dass das erste Label mit der ersten Funkeingabe passt, aber genau das ist es: eine Vermutung.

Auch verwirrend ist, dass sich am unteren Rand des Formulars zwischen den Optionen „Schließen“, "Abbrechen" und "Feedback" -Optionen "Schließen", "Abbrechen" und "Feedback" befinden. Wenn ich eine davon drücke, bin ich zurück zur Anzeige zurückgebracht. Nehmen wir nun an, ich war blind und benutzte einen Bildschirmleser, um denselben Teil selbst mit CSS zu navigieren. Für zwei der Tasten würde mir "Senden, Button" mitgeteilt werden und hätte daher keine Ahnung, was ich tun soll, ohne zu erraten. Es ist eine weitere gute Erinnerung an die Bedeutung der Semantik bei der Behandlung von Markup (in diesem Fall Tastenbezeichnungen) und achten Sie darauf, wie viel Vertrauen in JavaScript platziert wird, um Web -Standardeinstellungen zu überschreiben.

Wenn Sie eine Suche durchführen - sagen wir nach „Mac Minis“ - kann ich immer noch auf die Produktbewertungen zugreifen und verstehen, da sie anstelle von Sternen als Text angezeigt werden (anstelle der Tooltips, die sie sonst sind). Dies ist ein gutes Beispiel für die Verwendung eines soliden textuellen Fallbacks, wenn ein Bild als visueller Inhalt verwendet wird, aber als Hintergrundbild in CSS serviert wird.

Nachdem ich den Mac Mini mit Intel Core i3 ausgewählt habe, werde ich von anderen Mac -Produkten über dem Produkt begrüßt, das ich ausgewählt habe, und muss über sie hinausgehen, um die Menge, die ich kaufen möchte, auszuwählen.

Scrollen Sie nach unten, und eine Schaltfläche „zum Warenkorb hinzufügen“ wird neben einem Etikett mit demselben Inhalt angezeigt. Das ist überflüssig und wahrscheinlich unnötig, da ein Element in der Lage ist, ein eigenes Etikett zu halten:

 <taste> zum Warenkorb  hinzufügen</taste>

Als nächstes haben wir ein Angebot für eine Amazon Prime -Mitgliedschaft. Das ist alles in Ordnung und Dandy, aber beachten Sie, dass es zwischen dem Produkt, das ich kaufe, und der Taste "Jetzt kaufen" eingefügt wird. Es fällt mir sehr schwer zu wissen, ob das Klicken auf "Now Buy" den Mac Mini zum Auschecken hinzufügen wird oder ob ich stattdessen Amazon Prime kaufe.

Ich wollte auch ein bisschen herumspielen, also habe ich versucht, den Mac Mini aus meinem Wagen aus dem Wagen zu entfernen, als ich herausgefunden habe, wie man ihn hinzufügt. Ich habe zehn Sekunden gebraucht, um den Wagen zu finden, damit ich ihn bearbeiten konnte. Es stellte sich heraus, dass es direkt neben dem Link „Weiter mit dem Checkout (1 Element)“ war, aber RAMS direkt neben ihm, so dass alles wie ein einzelner Link aussieht.

Insgesamt war es nicht schwierig, ein Produkt zu finden. Andererseits wurde der Weg zur Kasse mehr Kopfschmerzen, als ich vorging. Es gab einige schlechte semantische und barrierefreie Praktiken, die Verwirrung verursachten, und wichtige Schaltflächen und Verbindungen wurden schwieriger zu finden.

? Was die Website gut macht	? Was die Website verbessern kann
Karussells sind auch ohne Styling funktionsfähig.	Das Logo stützt sich auf ein Hintergrundbild und verdeckt den Weg nach Hause.
Die Inhaltshierarchie ist im Allgemeinen immer noch hilfreich, um zu wissen, wo wir uns auf einer Seite befinden.	Viele Links und Anker stützen sich auf JavaScript und scheinen nicht interaktiv zu sein.
Die Reihenfolge der Elemente bleibt ungefähr im Takt.	Links treffen oft gegeneinander oder werden draußen platziert, wo sie relevant sind.
Großartige Verwendung von Fallbacks für die Produktbewertung, die auf Hintergrundbildern beruht.	Knopfbezeichnungen sind entweder irreführend oder sich wiederholend.
	Formelemente können sich nicht richtig ausrichten.
	Es gibt eine schwierige Reise zu überprüfen.

Website 2: Duckduckgo

Hast du Duckduckgo schon einmal benutzt? Ich nehme an, dass viele Leute, die CSS-Tricks lesen, haben, aber für diejenigen, die zum ersten Mal davon hören, ist dies eine Alternative zur Google-Suche mit Schwerpunkt auf Benutzer des Benutzers.

Der Einstieg damit ist also ein wenig irreführend, da die Homepage der Duckduckgo super einfach ist. Nicht viel kann dort schief gehen, oder? Nun, es ist ein bisschen mehr involviert als das, da wir uns mit Suchergebnissen, Inhaltshierarchie und Relevanz befassen, sobald wir Suchanfragen vornehmen.

Mir, mit dem ich begrüßt werde, ist viel mehr Inhalt als ich für einen so einfachen Lander erwartet hätte. Es ist nicht ganz klar, welche Website dies durch Scannen der Website ist. Die erste Erwähnung des Produktnamens ist der vierte Artikel in der ersten ungeordneten Liste und ein Aufruf zum Handeln, um Duckduckgo zu verteilt. Das Logo fehlt völlig, was offensichtlich bedeutet, dass es als Hintergrund verwendet wird… in CSS.

Wenn ich von dieser ungeordneten Liste spreche, gehe ich davon aus, dass das, was ich sehe, in den Header gehört, und es gibt keine Skip -Navigation. Wir haben ein dreifaches Pfeilsymbol (ist das ein mobiles Menü oder ein Menü, um die am wenigsten wichtigen Elemente oder etwas anderes auszublenden, gefolgt von Datenschutzinhalten, Social-Media-Links, etwas, das wie ein Link aussieht, aber tatsächlich zwei Links für "About DuckDuckgo" und "More" ist.

Nach unten kommt der primäre Anwendungsfall für die Site tatsächlich auf: die Suchleiste. Ich gehe davon aus, dass das Etikett "S" "Such" bedeutet und das "X" -Label ist eine Abkürzung, um das Suchfeld zu löschen.

Okay, eine Suche durchzuführen. Es ist super cool, dass ich immer noch automatische Beschäftigungen sehen und die Auf- und Ab-Pfeil-Tasten verwenden kann, um jeden einzelnen hervorzuheben. Wenn Sie das Feld räumen, verschwinden die Vorschläge erst, nachdem ich die Seite aktualisiert hatte.

Alles im Einstellungsmenü sind Elemente in einer Liste, einschließlich der Überschriften - „Einstellungen“, „Privatsphäre Essentials“, „Warum Privatsphäre“, „wer wir sind“ und „in Kontakt bleiben“. Dies sind sehr wahrscheinlich Teil eines Mobilfunks, wenn CSS aktiviert war, möglicherweise von dieser dreifachen Pfeilverbindungssache an der Spitze ausgelöst. In diesem Menü sehe ich vier leere Kugelpunkte zwischen „Einstellungen“ und „mehr Themen“.

Als neuer Benutzer habe ich keine Ahnung, was diese leeren Listenelemente sind, aber die Kugeln, die ich im obigen Screenshot hervorgehoben habe, sind tatsächlich die Themenschaltflächen. Um die Absicht zu verdeutlichen, wäre ein Fallback -Text hilfreich, und dies sollten Radio- oder normale Schaltflächen anstelle von Listenelementen (berücksichtigt ihre Funktionalität) sein.

Jeder Inhaltsblock mit einem „X“ - einschließlich der „Einstellungen“ - kann nicht abgewiesen werden; Durch Klicken auf das "X" über einem Bild eines Wanderbildes wird jedoch ein Teil des Inhalts den Bildschirm gelöscht - dank JavaScript, die noch aktiviert ist. Was ich wirklich umständlich finde, ist die redundante Schalltätigkeit in der bestellten Liste unter „Wechsel zu DuckDuckgo“. Wir sehen Folgendes:

 1. 1Wir speichern Ihre persönlichen Informationen nicht
2. 2Wir folge dir nicht mit Anzeigen herum
3. 3we verfolgen dich nicht. Immer.

Sieht aus wie ein gemischter Anwendungsfall von semantischem Markup mit einer anderen Möglichkeit, Listenelementnummern anzuzeigen.

Bis zum ersten

Element gibt es eine kolossale Menge an Weißraum unter dem Wanderbild. Angenommen, es ist entweder Links oder Schaltflächen, wenn Sie auf jede Instanz von "DuckDuckgo hinzufügen" [Browser] hinzufügen "addieren" tut nichts. Die Abbildung jedes Abschnitts führt zu unnötigen horizontalen Scrollen. Dies ist ein häufiges Problem, das wir an den anderen Websites sehen, die wir uns ansehen.

Nach diesen Abschnitten gibt es eine leere Box und ich habe keine Ahnung, was es ist.

Ich habe Devtools geknackt und es stellt sich heraus, dass es sich um ein

Element in einem

Website 3: GitHub

Hey, hier ist eine Seite, mit der viele von uns gut vertraut sind! Nun, viele von uns sind es gewohnt, die ganze Zeit darauf eingeloggt zu werden, aber ich werde es surfen, während ich mich angemeldet habe.

Es gibt bereits einen Skip -Link (yay). Es gibt auch ein mobiles Navigations -Symbol, von dem ich erwarte, dass er nichts bewirkt, und ich bin richtig bewährt, wenn ich es versuche.

Zwischen einigen Navigationsgegenständen gibt es unnötig riesige Lücken. Wenn Sie auf diese klicken, fungieren sie immer noch als Dropdown -Menüs. Sie sind

und

Elemente… aber etwas fühlt sich semantisch falsch an. Es ist schön, dass die Menüelemente tatsächlich nicht ordnungsgemäße Listenelemente sind und dass die native Browserfunktionalität immer noch mit einer semantischen Methode zur Erweiterung von Inhalten erfolgen kann. Aber diese SVG -Ikon macht mich mit.

Bevor ich etwas in das Feld eingreife, sehe ich drei Instanzen "Suchen Sie alle Github" und "Sprung zu" Links. Ich habe keine Ahnung, welche ich klicken soll, aber wenn ich eine Suche mache, wird das Schlüsselwort in der dritten Gruppe angezeigt.

Alles andere auf der Homepage scheint in Ordnung zu sein, bis auf eine Reihe übermäßig großer Bilder, die das Fenster horizontal überfließen.

Kehren wir zur Suchleiste zurück und navigieren Sie zu jedem Repo, das wir finden können. Gleich unter der Suchstaste haben wir zwei nahezu identische sekundäre Navigationsleisten, die die Repository -Zählungen, Code, Commits und andere Meta zurückgeben. Ohne auf die Quelle zu schauen, habe ich keine Ahnung, wie viel davon der Zweck ist, zwei davon zu haben.

Repository-Seiten haben zum größten Teil eine leicht zu befolgende Struktur und eine logische Hierarchie. Während ich vor dem Kommen angemeldet und mein Cache gelöscht hat, tritt die Schaltfläche „Entlass“ für den Block „Joy Github Today“ immer noch wie ich erwarten kann. Wie wir bereits bei Amazon gesehen haben, sind die Tag -Links schwer zu unterscheiden, da sie zusammen als einzelne Linie laufen.

Die nächsten beiden Schaltflächen - "JavaScript" und "New Pull Request" - scheinen nichts zu tun, wenn ich auf sie klicke. Ich würde mir vorstellen, dass die Pull -Anfrage -Taste seitdem deaktiviert werden sollte, wenn es sich um einen Gast ansieht, es sei denn, er soll einen Benutzer zuerst zu einem Anmeldung auf dem Bildschirm bringen ... aber selbst das fühlt sich nicht richtig an. Es stellt sich jedoch heraus, dass die Taste tatsächlich deaktiviert ist, wenn CSS aktiv ist. Dann ist der Rest der Seite ziemlich leicht zu verstehen.

Wenn Sie hier hauptsächlich für das Management, den Beitrag zu Repositorys hier sind, werden Sie nicht viel Reibung ausgesetzt, da sich die Hierarchie gut abspielt. Sie werden an anderer Stelle so ziemlich gleich erleben, egal ob Sie sich mit Pull -Anfragen, Problemen oder einzelnen Dateien befassen. Die meisten Hürden leben auf weniger prominenten Seiten auf dem Gelände.

? Was die Website gut macht	? Was die Website verbessern kann
Die Hierarchie und Struktur vieler Seiten sind wirklich leicht zu befolgen und logisch zu machen.	Verwenden Sie die Höhe und Breitenattribute für Elemente und SVGs, um zu verhindern, dass sie in die Luft jagen.
Die meisten der auf der Seite eingebetteten SVG -Symbole sind entsprechend dimensioniert.	Achten Sie auf leere Listenelemente.
Schöne Verwendung eines Skip -Links im Header.	Stellen Sie sicher, dass die Schaltflächenbezeichnungen vollständige Wörter verwenden.
	Stellen Sie sicher, dass Links auf Weiß- oder Leitungsunterbrechungen zwischen ihnen sind, um Run-Ons zu verhindern.

Website 4: Hex Naw

Diese nächste Website ist ein Online -Tool, das ich häufig verwende, um Farbkontraste auf Barrierefreiheit zu überprüfen. Und für eine Seite, die in der Farbe so groß ist, dass hier wahrscheinlich viel mit CSS passiert, sollte es interessant werden.

Über der Navigation befindet sich sofort eine große Menge an Platz und keine Überspring -Links. Die Hamburger- und Schließtasten für das mobile Layout und die Tasten „X“ neben jeder zu testenden Farbe sind übergroß.

Oh, und schauen Sie sich diese riesige Lücke zwischen der Schaltfläche „Testfarben“ und dem nächsten Abschnitt des Inhalts an.

Eine der vielen schönen Funktionen dieser Website ist ein Kontrollkästchen, mit dem Sie nur die Farben sehen können, die den Test bestanden haben, anstatt alle getesteten Farben anzusehen. Leider macht diese Taste nichts mit deaktivierter CSS. Ich kann jedoch immer noch sehen, welche Farben funktionieren und die Definitionen für Kontrastverhältnisse, großen Text und kleinen Text direkt in der Ergebnistabelle erhalten.

Das Verstecken und Zeigen der Begriffe ist wahrscheinlich das, was die Taste mit CSS macht. Der Mist ist, dass ich den Zweck dieser einzelnen Buchstaben (z. B. und r) nach den Tischkopfzeilen nicht kennen werde. Es ist auch ironisch und verwirrend zu sehen, dass diese Nachricht für alle fehlenden Farben nach der Tabelle erfolgt, da in dieser Liste Farben vorhanden sind. Was getan werden könnte, ist, es standardmäßig auszublenden, aber es später bedingt injizieren, wenn alle Farben in einem einzelnen Test ausfallen.

Wenn es Devtools herauszieht, stellt sich heraus, dass ein Teil des weißen Raums oben das Hex Naw -Logo als SVG -Datei ist. Der oben genannte Raum, der anderen SVG -Symbolen zugeordnet ist, die für die Seite verwendet werden. Durch die Verwendung einer Standardfarbe von Schwarz für das Logo würde dies dazu beitragen, einen Teil des Raums zu verringern. Ich habe diese schnelle Änderung in Devtools vorgenommen und es macht einen merklichen Unterschied.

Die zweite Spaltung des Raums wird durch einen SVG -Lader verursacht, der während der Berechnung von Farbkontrasten erscheint. Dies könnte unterstützt werden, indem eine viel kleinere und dennoch proportionale Breite und Höhe genau wie im mobilen Menü und „X“ -Symbole angegeben wird.

Das Hinzufügen einer anfänglichen Breite und Höhe zu jedem SVG würde definitiv die Notwendigkeit des Scrollens verringern. Dies können wir auch tun, um die Lücken zu beheben, die wir auch in Githubs Navigation gesehen haben.

Letztendlich bleibt Hex Naw ohne CSS ziemlich nützlich. Ich kann immer noch Farben testen, Farbergebnisse verabschieden und fehlschlagen und durch die Seite navigieren. Es ist einfach schade, dass ich nicht mit tatsächlichen Farben arbeiten konnte und musste diese extra großen SVG -Ikonen herumarbeiten.

? Was die Website gut macht	? Was die Website verbessern kann
Die Website behält eine gute Inhaltshierarchie auf der gesamten Website bei.	SVGs sollten eine fallback -Füllfarbe verwenden und die Höhe und Breitenattribute verwenden.
Alle Elemente sind semantisch geschrieben.	Das Feedback für alle fehlenden Farben kann dynamisch hinzugefügt und entfernt werden, um unangenehme Nachrichten zu verhindern.
Die Tests selbst funktionieren ordnungsgemäß mit Ausnahme, dass Informationen angezeigt oder ausblenden können.	Berücksichtigen Sie eine alternative Möglichkeit, die Farbe für die getesteten Werte anzuzeigen, z. B. Tabellenzellen mit dem Hintergrundfarbenattribut.

Website 5: Stapelüberlauf

Wie Github ist Stack -Überlauf eine dieser Ressourcen, die viele (wenn nicht die meisten) von uns in unserer Gesäßtasche behalten, da es hilft, zu finden, ob jemand bereits eine Entwicklungsfrage gestellt hat und welche Antworten auf sie sind.

Auf der Seite, um eine Frage zu stellen, sehe ich eine Reihe leerer Kugelpunkte über dem Hauptelement . Ich habe keine Ahnung, warum diese leeren Listenelemente da sind. Ich sehe auch keine der Formatierungsschaltflächen, aber nachdem ich ein bisschen herumgemüße, stellte ich fest, dass sie zufällig nichts anderes als leere Listenelemente sind. Vielleicht würde der Fallback -Text oder ein SVG -Symbol für jedes Element identifizieren, was diese sind und tun. Sie sollten auch in echte Tasten verwandelt werden.

Es ist auch noch möglich, eine Liste ähnlicher Fragen zu erhalten, während Sie Text in das Titelfeld eingeben. Jeder hier funktioniert wie erwartet, was schön ist. Obwohl es seltsam ist, dass die Stimmen für jede vorgeschlagene Frage zweimal erscheint, einmal über dem Titel als Link und erneut neben dem Titel, ohne verknüpft zu werden.

Eines der Schlüsselelemente, nach denen wir alle suchen, wenn wir auf einer Frageseite über den Stapelüberlauf landen, ist das Big Green Checkmark, das die richtige Antwort aus allen eingereichten Antworten angibt. Aber wenn CSS ausgeschaltet ist, ist es schwer zu sagen, welche Antwort angenommen wurde, da jede Antwort in der Liste ein schwarzes Checkmark enthält. Auch wenn die akzeptierte Antwort immer ganz oben ist, gibt es immer noch keine alternative oder Fallback -Anzeige, ohne mit der Seite interagieren zu müssen. Darüber hinaus gibt es keinen Hinweis darauf, ob Sie bereits gewählt oder abgeschaltet haben, die die Frage oder die Antworten gestimmt haben.

Um meine Erfahrungen mit Stack Overflow zusammenzufassen, konnte ich das erreichen, was ich normalerweise auf die Website komme: Antworten auf ein Programmierungsproblem zu finden. Trotzdem gab es in der Tat einige Verbesserungsmöglichkeiten, und diese Seite ist ein hervorragendes Beispiel dafür, wie Design häufig auf Farben beruht, um auf einer Seite Hierarchie oder Wert anzuzeigen, was auf den Fragenseiten in diesem Experiment schmerzlich fehlte.

? Was die Website gut macht	? Was die Website verbessern kann
Fast jedes Element ist semantisch geschrieben.	Verwenden Sie klare Kontrollen, um Bearbeitungswerkzeuge zu identifizieren, während Sie Fragen stellen oder beantworten.
SVG -Symbole verwenden die Breiten- und Höhenattribute.	Betrachten Sie ein visuelles Symbol, um die akzeptierte Antwort von anderen Antworten auf eine Frage zu unterscheiden.
Antwortenlisten sind klar und leicht zu scannen.	Stellen Sie sich eine andere Methode vor, um eine Stimmung oder eine Down -Abstimmung neben der Farbe allein anzuzeigen.

Website 6: Wikipedia

Wikipedia, der primäre Bezugspunkt des Webs! Es ist ein Online -Grundnahrungsmittel und eine seiner ansprechenden Eigenschaften ist eine Art Mangel an Design. Dies sollte für einen interessanten Test sorgen.

Ein paar Links down, wir haben eine Skip -Navigation -Option für die reale Navigation und Suche. Der Homepage -Header, der das Globe -Bild enthält, behält sein zwei Säulenlayout bei, und Sie haben möglicherweise vermutet, warum: Dies ist ein Tischlayout. Obwohl es sich möglicherweise nicht um ein Usability -Problem handelt, wissen wir, dass es nicht semantisch ist, sich auf Tische zu verlassen, um ein Layout zu erstellen. Das war ein Relikt des Weges, als wir keine Schwimmer, Flexbox, Raster oder eine andere Möglichkeit hatten, die Platzierung von Inhalten zu bewältigen. Trotzdem gibt es auf der Seite keine spürbaren Usability -Probleme oder verwirrenden Elemente.

Lassen Sie uns zu dem übergehen, was viele von uns in Wikipedia die meiste Zeit verbringen: einen Artikeleintrag. Dies ist oft der Einstiegspunkt zu Wikipedia, insbesondere für diejenigen von uns, die zunächst etwas in eine Suchmaschine eingeben, und dann auf das Suchergebnis von Wikipedia klicken.

Das Fazit ist, dass diese Seite immer noch äußerst nutzbar und hierarchisch ist, wobei CSS deaktiviert ist. Das Layout geht auf eine einzelne Spalte ab, aber der Inhalt fließt immer noch in einer logischen Reihenfolge und hält sogar Styling -Teile. Nochmals danken Sie eine Abhängigkeit von Tabellen und Inline -Tabelleneigenschaften.

Ein Problem, gegen das ich mich gestoßen habe, ist die Navigation. In dem Header gibt es einen Link „Sprung zur Navigation“, der mich tatsächlich zur Navigation fallen lässt, wenn ich darauf klicke. Für den Fall, dass Sie sich fragen, ist die Navigation im Fußzeilen enthalten, was der Grund dafür ist, dass sie darauf springen müssen.

Es gibt scheinbar zufällige Kontrollkästchen über einigen der Navigationsüberschriften (insbesondere für „Varianten“ und „mehr“) und sie scheinen keinen Zweck zu erfüllen, obwohl das Kontrollkästchen über „mehr“ bei aktivierter CSS in einer bestimmten Ansichtsfenster -Breite angezeigt wird.

Es gibt tatsächlich eine seltsame Sache in der Navigation, und es handelt sich um eine Schaltfläche ohne Etikett zwischen den Überschriften „in anderen Projekten“ und „Sprachen“.

Wenn ich auf diese Schaltfläche klicke, kann ich immer noch auf die Spracheinstellungen zugreifen, und es funktioniert hauptsächlich wie erwartet. Das Layout führt beispielsweise ein Layout von Registerkarten bei, das super funktional ist.

Auf der Registerkarte "Anzeige" tun jedoch die Schaltflächen "Sprache" und "Schriftarten" nichts. Sie sind wahrscheinlich auch Registerkarten, aber zumindest kann ich sehen, was sie anbieten. Neben diesen Schaltflächen befinden sich zwei leere ausgewählte Menüs, die absolut nichts tun (der erste wird mit Comicneue-, OpendySlexic- und System -Schriftoptionen besiedelt, wenn Sie das Kontrollkästchen überprüfen). Wenn Sie sich die Registerkarte "Eingabe" ansehen, fungieren die Schaltflächen für Schreibsprachen immer noch als Registerkarten. Ich kann immer noch andere Optionen als Englisch, Spanisch und Chinesisch auswählen.

Ohne CSS sind die Artikel nicht schwer zu lesen, und das liegt daran, dass fast jedes Element semantisch korrekt ist und einer konsistenten Dokumenthierarchie folgt. Eine Sache, die ich mich gefragt habe, war, wo der "Show/Hide" -Button, der normalerweise im Inhaltsverzeichnis liegt,. Es stellt sich heraus, dass es sich um ein einsames Kontrollkästchen handelt, und das Etikett ist gefälscht-es verwendet die Inhaltseigenschaft auf einem Pseudo-Element in CSS, um das Etikett anzuzeigen.

Ein weiteres Thema in Artikeln ist, dass Sie Zeit damit verbringen müssen, Bilder zu jagen, wenn Sie sie vorschauten. Normalerweise löst das Klicken auf ein Bild im Artikel-Seitenleiste ein Vollbildmodal aus, das ein Karussell von Bildern enthält. Ohne CSS ist dieses Karussell verschwunden und an seiner Stelle das Bild mit einer Reihe von nicht markierten Schaltflächen darüber. Das ist ein Mist, aber es wäre vollkommen in Ordnung, wenn das Karussell nicht ganz auf der Seite wäre, gegenüber dem, wo sich das geklickte Bild oben auf der Seite befindet, ohne darauf zu springen.

Ich wäre nachlässig, wenn ich nicht erwähnen würde, dass das Wikipedia -Logo nirgends in dem Artikel zu finden war! Es ist nicht einmal ein weißes SVG auf Weiß. Der Link enthält eigentlich nichts:

 <a href="/wiki/main_page" title="Besuchen Sie die Hauptseite"> </a>

Zum Glück ist der Link "Hauptseite" unter "Navigation" der andere Weg nach Hause, ohne den Browser zurück zu drücken. Aber es fühlt sich immer noch seltsam an, kein Branding auf der Seite zu haben, wenn es auf der Homepage so eine großartige Arbeit leistet.

Die HTML -Probleme von Wikipedia bestehen hauptsächlich in Funktionen, die ich erwarte, weniger häufig als Artikel verwendet zu werden. Sie haben meine Leseerfahrung auf lange Sicht nie behindert.

? Was die Website gut macht	? Was die Website verbessern kann
Die Website behält eine saubere Struktur und Hierarchie bei.	Die Logo -Platzierung kann ohne CSS -Hintergrundbild an die Spitze der Seite verschoben (oder in einigen Fällen hinzugefügt werden).
Überspringen von Links werden effektiv für die Suche und Navigation verwendet.	Tasten sollten Etiketten enthalten.
Der Artikelinhalt ist semantisch und leicht zu lesen.	Das Bildkarousel auf Seiten kann laden, wo der Auslöser auftritt, und verwenden die richtigen Tastendiketten für die Steuerelemente.

Möglichkeiten, CSS-weniger zu einer besseren Erfahrung zu machen

CSS ist eine Schlüsselkomponente für das moderne Web. Wie wir bis zu diesem Zeitpunkt gesehen haben, gibt es eine Reihe von Websites, die ohne sie nicht unausweichlich werden-und wir zählen einige der bekanntesten und gebrauchten Websites in dieser Mischung. Was wir gesehen haben, ist, dass im besten Fall der Hauptzweck für eine Website noch erreicht werden kann, aber es gibt Hürden auf dem Weg. Dinge wie:

• fehlende oder semantisch inkorrekte Überspring -Links
• Links, die zusammen laufen
• übergroße Bilder, die zusätzliche Scrollen erfordern
• leere Elemente wie Listenelemente und Schaltflächenbezeichnungen

Lassen Sie uns sehen, ob wir diese in eine Art Best Practices zusammenstellen können, die für Situationen berücksichtigt werden können, in denen CSS möglicherweise deaktiviert oder sogar nicht verfügbar ist.

Fügen Sie einen Link Skip Navigation ganz oben im Dokument hinzu

Ein versteckter Link zum Überspringen der Navigation ist ein Muss. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  padding: 0;
  Position: absolut;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Leave whitespaces where they make sense

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

Use width and height attributes liberally

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghwm/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Dieses Mal habe ich versucht, das Web ohne CSS zu durchsuchen" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Prepare SVGs for a white background

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Label those buttons!

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
</button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  Anzeige: Block;
  overflow: hidden;
  Höhe: 0;
}

If there are

elements acting as buttons, they can remain, but they should be static, and the contents should be placed in a button.

Now, if the icon is an SVG, we can ensure the title tooltip can still be seen by using aria-labelledby and assigning the id to the title.

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
</button>

Abschluss

It can be easy to either forget or be afraid to check how a site appears when CSS isn't available to make the UI look as good as intended. After a brief tour of the Non-CSS Web™, we saw just how important CSS is to the overall design and experience of sites, both small and large.

And, like any tool we have in our set, leaning too heavily on CSS to handle the functionality and behavior of elements can lead to poor experiences when it's not around to do its magic. We've seen the same be true of sites that lean too heavily on JavaScript. This isn't to say that we should not use them and rely on them, but to remember that they are not bulletproof on their own and need proper fallbacks to ensure an optimal experience is still available with or without our tooling.

Seen in that light, CSS is really a layer of progressive enhancement. The hierarchy, form controls, and other elements should also remain intact under their user agent styles. The look and feel, while important, is second when it comes to making sure elements are functional at their core.

Das obige ist der detaillierte Inhalt vonDieses Mal habe ich versucht, das Web ohne CSS zu durchsuchen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!