Cette fois, j'ai essayé de naviguer sur le Web sans CSS

CSS est ce qui donne à chaque site Web sa conception. Les sites Web ne sont certainement pas très amusants et sympathiques sans cela! J'ai lu sur quelqu'un qui passe une semaine sans JavaScript et comment l'expérience a abouti à des sites Web plus rapides, bien que certains aspects d'eux ne fonctionneraient pas comme prévu.

Mais CSS. Désactiver CSS tout en parcourant le Web ne rendrait pas exactement le Web beaucoup moins utilisable… non? Ou, comme JavaScript, certaines fonctionnalités ne fonctionneraient-elles pas comme prévu? Par curiosité, j'ai décidé de lui donner un tourbillon et de déchirer la chair CSS du squelette HTML tout en parcourant quelques sites.

Pourquoi, vous pourriez demander? Y a-t-il des raisons non masochistes de désactiver le CSS? Heydon Pickering a une fois tweeté que la désactivation de CSS est un bon moyen de vérifier certaines normes d'accessibilité:

1. Des éléments communs comme les titres, les listes et les contrôles de forme sont sémantiques et ont toujours l'air bien.
2. Une hiérarchie visuelle est toujours établie avec des styles par défaut.
3. Le contenu peut toujours être lu dans un ordre logique.
4. Les images existent toujours sous forme de balises plutôt que de se perdre comme arrière-plans CSS.

Une enquête WebAiM de 2018 a indiqué que 12,5% des utilisateurs qui comptent sur toute sorte de technologie assistée parcourent le Web avec des feuilles de style personnalisées, ce qui peut inclure la suppression de chaque déclaration CSS sur un site. Et, si nous parlons de connexions Internet lentes, l'abandon de CSS pourrait être une façon de consommer du contenu plus rapidement. Il y a aussi la possibilité que CSS soit désactivé pour des raisons en dehors de notre contrôle immédiat, comme lorsqu'un serveur a un hoquet de ne pas charger d'actifs.

En tant qu'expérience, j'ai utilisé cinq sites Web et une application Web sans CSS, et ce post couvrira mes expériences. Il a fini par être une aventure plutôt révélatrice pour moi personnellement, mais m'a également informé professionnellement en tant que développeur d'une manière que j'espère que vous verrez également.

Mais d'abord, voici comment désactiver CSS

Vous êtes absolument les bienvenus pour vivre par procuration sous la forme de ce post. Mais pour ceux d'entre vous qui se sentent à la hauteur et veulent vivre un Web sans style, voici comment désactiver le CSS dans divers navigateurs:

• Chrome: Il n'y a en fait aucun réglage dans Chrome pour désactiver le CSS, nous devons donc recourir à une extension, comme Disable-HTML.
• Firefox: Affichage > Style de page > Pas de style
• Safari: Safari > Préférences ... > Afficher le menu Développer dans la barre de menus . Ensuite, accédez à la liste déroulante Develop et sélectionnez l'option «Désactiver les styles».
• Opéra: Comme Chrome, nous avons besoin d'une extension et le développeur Web correspond à la facture.
• Internet Explorer 11: Voir > Style > Pas de style

Je n'ai pas trouvé de moyen documenté de désactiver CSS dans le bord, mais nous pouvons en supprimer CSS et tout autre navigateur par programme via l'API du modèle d'objet CSS dans la console Devtools:

 var d = document;

pour (var s dans s = d.Stylesheets)
    S [S] .Disabled = true;

pour (var i dans i = d.Queryselectorall ("[style]"))
    I [i] .style = "";

La première boucle désactive tous les styles externes et internes (dans et ), et le second élimine tous les styles en ligne. La mise en garde ici, cependant, est que les éléments peuvent toujours recevoir dynamiquement de nouveaux styles en ligne. Pour les effacer instantanément, la meilleure solution de contournement consiste à ajouter une minuterie. Quelque chose comme ça:

 (f = fonction () {
    // supprimer CSS
    ...

    setTimeout (F, 20);
}) ();

Alternativement, il existe des navigateurs en texte uniquement - comme l'ancien lynx - mais attendez-vous à vivre sans vidéo, des images (y compris les SVG) et JavaScript.

À travers le verre sans style…

Pour chaque site que j'ai surfé sans CSS - Amazon, DuckDuckgo, Github, Stack Overflow, Wikipedia et Contrast Checker appelé Hex NAW - je partagerai mes premières impressions et mettrai quelques suggestions qui pourraient aider à l'expérience.

Préparez-vous, car les choses pourraient devenir un peu… épouvantables. ?

Site Web 1: Amazon.com

Il n'y a aucun besoin réel d'une introduction ici. Non seulement Amazon est un aliment de base du ménage pour tant d'entre nous, mais il alimente également une énorme partie du Web, grâce à leur plate-forme omniprésente de services Web d'Amazon.

Il y a un grand nombre de choses qui se passent ici, donc je vais explorer les trucs sans style qui se mettent sur mon chemin tout en trouvant un produit et en faisant semblant de l'acheter.

Sur la page d'accueil, je vois immédiatement une feuille de sprite utilisée par le site. C'est vraiment à la place de l'endroit où le logo pourrait être, ce qui rend difficile de savoir si ces images sont destinées à être là. Chaque sprite contient plusieurs versions du logo, et même si je pouvais voir la marque de mots «Amazon», il est étonnamment que ce n'est pas le lien domestique mondial. Si vous êtes curieux où se trouve le lien de la maison, c'est cette structure de travées où le logo est servi comme image de fond… en CSS:

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

Le problème suivant qui se pose est que le lien «Skip to Principal Content» ne ressemble pas à un lien de saut typique, mais il fonctionne comme un. Il s'avère être un élément sans HREF, et JavaScript (oui, j'ai laissé celui activé) est utilisé pour imiter la fonctionnalité d'ancrage.

Lorsque je commence une recherche, je dois regarder plus loin en dessous du lien «démarrer» pour voir les suggestions. Dans le cadre des éléments «vos listes» et «votre compte», il devient difficile de distinguer les liens. Ils apparaissent tous ensemble comme s'ils étaient un lien de méga super long. Je crois qu'il aurait été plus efficace d'utiliser une liste sémantique non ordonnée dans ce scénario pour maintenir un sentiment de hiérarchie.

Selon toutes ces suggestions de recherche, cependant, les liens de compte et de navigation sont plus faciles à lire car ils sont séparés par un espace.

Fait intéressant, le carrousel plus bas sur la page est encore quelque peu fonctionnel. Si je clique sur les options «page précédente» ou «page suivante», l'ordre des images est modifié. Cependant, le saut entre ces options m'a obligé à faire défiler.

Sautant un peu plus loin, il y a un élément publicitaire. Il contient une chaîne «REFORMATION AD» qui ressemble à ce que nous avons vu avec le lien «Skip to Principal Content» plus tôt. Eh bien, j'ai quand même cliqué et cela a révélé un formulaire pour partager des commentaires sur la pertinence de la publicité.

Vous l'avez peut-être manqué, mais il y a un bouton vide au-dessus des deux groupes d'étiquettes de formulaires et les boutons Radios sont hors de propos. La structure est déroutante car je ne sais pas quelles étiquettes appartiennent à quels boutons radio. Je veux dire, je suppose que je pourrais supposer que la première étiquette va avec la première entrée radio, mais c'est exactement ce que c'est: une supposition.

Ce qui est également déroutant, c'est qu'il existe des boutons de soumission entre les options «Fermer Fendre», «Annuler» et «Envoyer des commentaires» en bas du formulaire. Si j'appuie l'un de ces éléments, je suis ramené à l'annonce. Maintenant, supposons que j'étais aveugle et que j'utilisais un lecteur d'écran pour naviguer dans cette même partie, même avec la présence de CSS. On me dit «soumettre, bouton» pour deux des boutons et je n'aurais donc aucune idée de quoi faire sans deviner. C'est un autre bon rappel de l'importance de la sémantique lors de la gestion du balisage (Button Labels dans ce cas) et de la conscience de la quantité de recours accordé à JavaScript pour remplacer les paramètres Web.

Faire une recherche - disons pour «Mac Minis» - je peux toujours accéder et comprendre les cotes de produit car ils sont affichés en texte (au lieu des info-bulles qu'ils sont autrement) à la place des étoiles. Ceci est un bon exemple de l'utilisation d'une secours textuel solide lorsqu'une image est utilisée comme contenu visuel, mais est servie comme image de fond dans CSS.

Après avoir choisi le Mac Mini avec Intel Core i3, je suis accueilli par d'autres produits Mac au-dessus du produit que j'ai sélectionné et je dois naviguer au-delà pour sélectionner la quantité que je souhaite acheter.

Faites défiler vers le bas et un bouton «Ajouter au panier» s'affiche à côté d'une étiquette portant le même contenu. C'est redondant et probablement inutile car un élément est capable de tenir sa propre étiquette:

 <froit> Ajouter au panier </froit>

Ensuite, nous avons une offre pour un abonnement Amazon Prime. C'est bien et dandy, mais notez qu'il est inséré entre le produit que j'achète et le bouton «Acheter maintenant». J'ai vraiment du mal à savoir si cliquer sur «acheter maintenant» va ajouter le Mac Mini à la caisse, ou si j'achète Amazon Prime à la place.

Je voulais aussi jouer un peu, alors j'ai essayé de retirer le Mac Mini de mon panier une fois que j'ai compris comment l'ajouter. Il m'a fallu dix secondes pour localiser le chariot afin que je puisse le modifier. Il s'avère qu'il était directement à côté de «Procéder à la caisse (1 élément)», mais les amènes à côté de lui, donc tout ressemble à un seul lien.

Dans l'ensemble, il n'était pas difficile de trouver un produit. D'un autre côté, le chemin de la caisse est devenu plus un mal de tête à mesure que je procédais. Il y avait de mauvaises pratiques sémantiques et liées à l'accessibilité qui ont causé la confusion, et les boutons et les liens importants sont devenus plus difficiles à trouver.

? Ce que le site fait bien	? Ce que le site peut améliorer
Les carrousels sont fonctionnels même sans style.	Le logo s'appuie sur une image d'arrière-plan, masquant le chemin de la maison.
La hiérarchie de contenu est toujours généralement utile pour savoir où nous sommes sur une page.	De nombreux liens et ancres reposent sur JavaScript et ne semblent pas être interactifs.
L'ordre des éléments reste à peu près dans le tact.	Les liens se heurtent souvent les uns aux autres ou sont placés à l'extérieur où ils seraient pertinents.
Excellente utilisation des replies pour la notation des produits qui reposent sur les images d'arrière-plan.	Les étiquettes de bouton sont trompeuses ou répétitives.
	Les éléments de la forme ne parviennent pas à s'aligner correctement.
	Il y a un voyage difficile à vérifier.

Site Web 2: DuckDuckgo

Avez-vous déjà utilisé DuckDuckgo? Je suppose que de nombreuses personnes qui lisent CSS-Tricks l'ont, mais pour ceux qui peuvent en entendre parler pour la première fois, c'est une alternative à la recherche Google en mettant l'accent sur la confidentialité des utilisateurs.

Donc, commencer avec cela est un peu trompeur parce que la page d'accueil de DuckDuckgo est super simple. Peu de choses peuvent mal tourner là-bas, non? Eh bien, c'est un peu plus impliqué que cela, car nous avons affaire aux résultats de recherche, à la hiérarchie de contenu et à la pertinence une fois que nous aurons eu des questions de recherche.

Dès le départ, ce que je suis accueilli, c'est beaucoup plus de contenu que je ne m'attendais à un landeur aussi simple. À ce n'est pas totalement clair de quel site Web est-il en numérisant le site Web. La première mention du nom du produit est le quatrième élément de la première liste non ordonnée et c'est un appel à l'action pour «répandre DuckDuckgo». Le logo est totalement manquant, ce qui signifie évidemment qu'il est utilisé comme arrière-plan… dans CSS.

En parlant de cette liste non ordonnée, je suppose que ce que je vois appartient à l'en-tête, et il n'y a pas de navigation à sauter. Nous avons une icône Triple Arrow (est-ce un menu mobile ou un menu pour cacher les éléments les moins importants, ou autre chose?), Suivi du contenu lié à la confidentialité, des liens de médias sociaux, quelque chose qui ressemble à un lien mais qui est en fait deux liens pour «About DuckDuckgo» et «En savoir plus».

Enfin, vers le bas est l'endroit où le principal cas d'utilisation du site apparaît réellement: la barre de recherche. Je suppose que l'étiquette «S» signifie «recherche» et que l'étiquette «X» est un raccourci pour effacer le champ de recherche.

Très bien, pour effectuer une recherche. C'est super cool que je puisse toujours voir les auto-légères et utiliser les touches de flèche haut et bas pour mettre en évidence chacune. En nettoyant le champ cependant, les suggestions ne disparaissent qu'après avoir rafraîchi la page.

Tout dans le menu des paramètres est des éléments d'une liste, y compris ce qui devrait être des titres - «Paramètres», «Privacy Essentials», «Pourquoi la confidentialité», «qui nous sommes» et «Rester en contact». Celles-ci font très probablement partie d'un homme mobile si CSS a été activé, peut-être déclenché par ce truc de triple liaison flèche en haut. Dans ce menu, je vois quatre puces vierges entre «Paramètres» et «plus de thèmes».

Venant ici en tant que nouvel utilisateur, je n'ai aucune idée de ces éléments de liste vide, mais les balles que j'ai mis en évidence dans la capture d'écran ci-dessus sont en fait les boutons de thème. Pour clarifier l'intention, un texte de secours serait utile, et il devrait s'agir de boutons radio ou normaux au lieu de répertorier les éléments (compte tenu de leur fonctionnalité).

Chaque bloc de contenu avec un «x» - y compris les «paramètres» - ne peut pas être rejeté; Cependant, cliquer sur le «X» au-dessus d'une image d'une image de randonneur entraîne une épreuve de contenu à l'écran - grâce à JavaScript toujours activé. Ce que je trouve vraiment maladroit, c'est la numérotation redondante dans la liste ordonnée sous «Switch to DuckDuckgo…» Nous voyons ceci:

 1. 1 Nous ne stockons pas vos informations personnelles
2. 2 Nous ne vous suivons pas avec des annonces
3. 3 Nous ne vous suivons pas. Jamais.

Cela ressemble à un cas d'utilisation mixte de balisage sémantique avec une autre façon d'afficher les numéros d'élément de liste.

Il y a une quantité colossale d'espace blanc sous l'image du randonneur jusqu'au premier élément

. En supposant que ce sont des liens ou des boutons, en cliquant sur chaque instance de «Ajouter DuckDuckgo à [Browser]» ne fait rien. L'illustration de chaque section provoque un défilement horizontal inutile, qui est un problème courant que nous verrons dans les autres sites que nous examinons.

Après ces sections, il y a une boîte vierge et je n'ai aucune idée de ce que c'est.

J'ai ouvert Devtools ouvert et il s'avère que c'est un élément

dans un qui ne contient que JavaScript pour quelque chose lié aux demandes de poste. Ce pourrait aussi bien être l'un de ces éléments que nous devons laisser seuls.

Suivant cela, je vois deux instances répétées de «set en tant que moteur de recherche par défaut» enroulé autour d'une section «Set As Home Page».

Ce devaient être les instructions qui sont apparues lorsque j'ai cliqué sur les actions «Ajouter DuckDuckgo…», mais cela montre que l'impact de la cachette et de la diffusion de contenu peut avoir lorsque nous avons affaire à un balisage droit. Au lieu de répéter du contenu, les liens ou boutons correspondants doivent pointer vers une instance. Cela réduirait la redondance ici.

Ok, il est temps de se mettre à la recherche. La première chose que je vois dans les résultats de recherche est une boîte vide avec une instruction pour ignorer la boîte. Okey-Dokey alors.

En passant à autre chose, avez-vous vu ce lien DuckDuckgo? Ce doit être le logo, et je me demande pourquoi ce n'était pas sur la page d'accueil. Semble être des fruits à faible collecte pour l'amélioration.

La barre de recherche fonctionne toujours normalement à l'exception des boutons «S» et «X» qui ont échangé des endroits d'où ils se trouvaient sur la page d'accueil.

Sur les résultats de recherche. Je pouvais facilement distinguer un résultat d'une autre. Ce que j'ai trouvé assez inutile, mais drôle, c'est que le message «Votre navigateur indique si vous avez visité ce lien» qui se trouve à la fin de chaque titre de page. Ce serait super ennuyeux du point de vue de la lecture d'écran. Imaginez entendre cela répété à la fin de chaque titre de page. Cette messagerie est là pour être affichée aux côtés des charges de contrôle contenant des info-bulleurs qui contiennent cette messagerie. Mais, avec CSS désactivé, eh bien, pas de marques de contrôle et pas d'infiltrations. En conséquence, tout ce que j'obtiens est une longue longue durée.

La barre de navigation qui est normalement affichée sous forme d'onglets pour filtrer par différents types de résultats (par exemple, les images) ne semble rien faire à ce stade car il est difficile de dire qu'ils sont des filtres sans style. Mais si je clique sur le filtre des images, les résultats de l'image sont en fait chargés plus bas sur la page, empilés juste au-dessus des résultats Web, et la page devient méga longtemps. Oh, et vous pourriez penser que le fait de faire défiler tout le long du chemin (et c'est un long chemin vers le haut), puis de cliquer sur un autre filtre, par exemple des vidéos, remplacerait les images, mais cela insère simplement des images de vignettes vidéo sous les images faisant une page déjà méga longue une page super méga. Imaginez le poids de la page de tous ces actifs!

Eh bien, vous n'avez pas à le faire. Selon Devtools, les images représentent à elles seules 831 demandes et un poids total de 23,7 Mo. Lourd!

Les deux derniers articles méritent d'être notés. Cliquer sur le lien «Envoyer des commentaires» ne fait apparemment rien. Peut-être que cela a déclenché un modal avec CSS? Et, bien que le lien «toutes les régions» ne ressemble pas à un lien et que j'aurais pu facilement l'ignorer, j'étais assez curieux pour cliquer dessus et j'ai été emmené à un point d'ancrage d'une liste de pays. Les deux derniers liens ont fait apparaître leur contenu correspondant sous les options du pays de la liste.

Il se passe beaucoup de choses ici et il y a clairement des opportunités d'amélioration. Par exemple, il existe des appels à l'action qui affichent comme texte normal qui devraient être des liens ou des boutons à la place. De plus, nous pensons que les performances d'un site s'amélioreraient avec CSS désactivé, mais tous ces actifs chargés dans les résultats de recherche sont prohibitifs. Cela dit, l'expérience de recherche n'est pas du tout douloureuse… c'est-à-dire, à moins que vous ne fouilliez des images ou des vidéos en le faisant.

? Ce que le site fait bien	? Ce que le site peut améliorer
La recherche est cohérente et fonctionne avec ou sans CSS.	Un lien «Skip» pour aider à la navigation au clavier.
La hiérarchie de contenu rend le contenu facile à lire et les résultats de recherche une expérience propre.	Les éléments non liens dans le menu «Paramètres» doivent être des en-têtes pour des listes non ordonnées séparées, il existe donc une hiérarchie claire pour la façon dont les options sont regroupées.
Bonne utilisation d'un lien de page d'accueil en haut de la page des résultats de la recherche.	Un contenu est dupliqué ou répété car le site repose sur l'affichage conditionnellement et la cachette de contenu.
	Assurez-vous que tous les appels à l'action rendent comme des liens au lieu d'un texte brut.
	Utilisez une solution de secours pour filtrer les types de résultats de recherche pour empêcher l'empilement des éléments et aider à contrôler le poids de la page.

Site Web 3: GitHub

Hé, voici un site que beaucoup d'entre nous connaissent bien! Eh bien, beaucoup d'entre nous sont habitués à y être connectés tout le temps, mais je vais le surfer en déconnecté.

Déjà, il y a un lien de saut (yay). Il y a aussi une icône de navigation mobile qui, je m'attends, ne fera rien, et je suis prouvé quand j'essaierai.

Entre certains des articles de navigation, il y a des lacunes inutilement géantes. Si vous cliquez dessus, ils fonctionnent toujours comme des menus déroulants. Ce sont des éléments et

… mais quelque chose se sent sémantiquement mal. Il est bien que les éléments de menu soient en fait des éléments de liste non ordonnés et que la fonctionnalité du navigateur natif puisse toujours avoir lieu en utilisant un moyen sémantique d'élargir le contenu. Mais cette icône SVG me dérange.

Avant de taper quoi que ce soit sur le terrain, je vois trois instances de «Recherchez tous les liens GitHub» et «Jump to». Je n'ai aucune idée de laquelle cliquer, mais si je fais une recherche, le mot-clé apparaît dans le troisième groupe.

Tout le reste sur la page d'accueil semble bien, sauf pour un certain nombre d'images trop grandes débordant horizontalement la fenêtre.

Revenons à la barre de recherche et naviguons vers n'importe quel dépôt que nous pouvons trouver. Juste sous le bouton de recherche, nous avons deux barres de navigation secondaire presque identiques qui renvoient le nombre de référentiels, le code, les commits et autres méta. Sans regarder la source, je n'ai aucune idée du but pour en avoir deux.

Les pages du référentiel ont toujours une structure facile à suivre et une hiérarchie logique pour la plupart. Bien que déconnecté et que mon cache soit effacé avant de venir, le bouton «Rejeter» pour le bloc «Join Github Today» fonctionne toujours comme je m'y attendais. Comme nous l'avons vu plus tôt sur Amazon, les liens de balises sont difficiles à distinguer car ils fonctionnent ensemble en une seule ligne.

Les deux boutons suivants - «Javascript» et «nouvelle demande de traction» - ne semblent rien faire lorsque je clique sur eux. J'imagine que le bouton de demande de traction doit être désactivé lors de la visualisation en tant qu'invité car, à moins qu'il ne soit destiné à amener un utilisateur à un écran de connexion d'abord… mais même cela ne semble pas bien. Il s'avère que le bouton est en effet désactivé lorsque CSS est actif, cependant. Ensuite, le reste de la page est assez facile à comprendre.

Si vous êtes ici principalement pour gérer, contribuer ou vérifier les référentiels, vous ne serez pas confronté à beaucoup de friction car la hiérarchie se déroule bien. Vous ressentirez à peu près la même chose ailleurs, que vous envisagiez des demandes de traction, des problèmes ou des fichiers individuels. La plupart des obstacles vivent dans des pages moins importantes sur le site.

? Ce que le site fait bien	? Ce que le site peut améliorer
La hiérarchie et la structure de nombreuses pages sont vraiment faciles à suivre et ont un sens logique.	Utilisez les attributs de hauteur et de largeur sur les éléments et les SVG pour les empêcher de faire exploser.
La plupart des icônes SVG intégrées sur la page sont de taille appropriée.	Surveillez les éléments de liste vide.
Belle utilisation d'un lien de saut dans l'en-tête.	Assurez-vous que les étiquettes de bouton utilisent des mots complets.
	Assurez-vous que les liens ont des espaces ou des ruptures de ligne entre eux pour empêcher les run-ons.

Site Web 4: Hex NAW

Ce site suivant est un outil en ligne que j'utilise souvent pour vérifier les contrastes de couleurs pour l'accessibilité. Et pour un site si grand sur la couleur , il se passe probablement beaucoup ici avec CSS, donc ça devrait devenir intéressant.

Il y a immédiatement une grande quantité d'espace au-dessus de la navigation et pas de liens de sauts. Le hamburger et les boutons de fermeture pour la disposition mobile et les boutons «X» à côté de chaque couleur à tester sont surdimensionnés.

Oh, et consultez cet écart géant entre le bouton «Test Colors» et la section suivante du contenu.

L'une des nombreuses fonctionnalités de ce site est une case à cocher qui vous permet de ne voir que les couleurs qui ont réussi le test, plutôt que de visualiser toutes les couleurs testées. Malheureusement, ce bouton ne fait rien avec CSS désactivé. Cependant, je peux toujours voir quelles couleurs fonctionnent et obtenir les définitions du rapport de contraste, du grand texte et du petit texte directement dans le tableau de résultat.

Cacheter et montrer les termes est probablement ce que le bouton fait avec CSS. La déception est que je ne saurai pas le but de ces lettres simples (par exemple S et R) après les en-têtes de table. Il est également à la fois ironique et déroutant de voir ce message pour toutes les couleurs défaillantes après la table car, eh bien, il y a des couleurs qui passent dans cette liste. Ce qui pourrait être fait, c'est le cacher par défaut, mais l'injecter conditionnellement plus tard si toutes les couleurs d'un seul test échouent.

Tirant Devtools, il s'avère que l'espace blanc en haut est le logo Hex NAW en tant que fichier SVG. L'espace ci-dessus est associé à d'autres symboles SVG utilisés pour la page. En utilisant une couleur par défaut du noir pour le logo, cela aiderait à réduire une partie de l'espace. J'ai fait ce changement rapide dans Devtools et cela fait une différence notable.

Le deuxième espace de l'espace est causé par un chargeur SVG qui apparaît lors du calcul des contrastes de couleur. Cela pourrait être aidé en spécifiant une largeur et une hauteur beaucoup plus petites, mais proportionnelles, comme le menu mobile et les icônes «X».

L'ajout d'une largeur et d'une hauteur initiales à chaque SVG réduirait certainement la nécessité de faire défiler. C'est également ce que nous pouvons faire pour réparer les lacunes que nous avons vues dans la navigation de Github également.

En fin de compte, Hex NAW reste assez utile sans CSS. Je peux toujours tester les couleurs, obtenir des résultats de couleurs de passage et d'échec et naviguer sur la page. C'est juste dommage que je n'ai pas pu travailler avec des couleurs réelles et que j'ai dû contourner ces icônes SVG très grandes.

? Ce que le site fait bien	? Ce que le site peut améliorer
Le site maintient une bonne hiérarchie de contenu sur tout le site.	Les SVG doivent utiliser une couleur de remblai de secours et utiliser les attributs de hauteur et de largeur.
Tous les éléments sont écrits sémantiquement.	Les commentaires pour toutes les couleurs défaillants peuvent être ajoutés et supprimés dynamiquement pour empêcher la messagerie maladroite.
Les tests eux-mêmes fonctionnent correctement à l'exception de pouvoir afficher ou masquer des informations.	Considérez un autre moyen d'afficher la couleur pour les valeurs testées, comme les cellules de table avec l'attribut de couleur d'arrière-plan.

Site Web 5: Stack Overflow

Comme Github, Stack Overflow est l'une de ces ressources que beaucoup (sinon la plupart) d'entre nous gardent dans notre poche arrière, car cela aide à découvrir si quelqu'un a déjà posé une question de développement et les réponses à eux.

Sur la page pour poser une question, je vois un tas de puces vierges au-dessus de l'élément principal . Je ne sais pas pourquoi ces éléments de liste vide sont là. Je ne vois aucun des boutons de formatage non plus, mais après avoir joué un peu, j'ai découvert qu'ils ne sont rien de plus que des éléments de liste vierge. Peut-être que le texte de secours ou une icône SVG pour chaque élément aiderait à identifier ce que ce sont et à faire. Ils devraient également être transformés en vrais boutons.

Il est également possible d'obtenir une liste de questions similaires tout en entrant du texte dans le champ de titre. Chaque fonctionne ici comme prévu, ce qui est bien. Bien qu'il soit étrange que le vote compte pour chaque question suggérée apparaît deux fois, une fois au-dessus du titre en tant que lien et à nouveau à côté du titre sans être lié.

L'un des éléments clés que nous recherchons tous lors de l'atterrissage sur une page de question de débordement de pile est cette grande coche verte qui indique la bonne réponse de toutes les réponses soumises. Mais avec CSS désactivé, il est difficile de dire quelle réponse a été acceptée car chaque réponse dans la liste a une coche noire. Même si la réponse acceptée est toujours en haut, il n'y a toujours pas d'indication alternative ou de repli sans avoir à interagir avec la page. De plus, il n'y a aucune indication si vous avez déjà voté ou en baisse la question ou l'une des réponses.

Pour résumer mon expérience sur Stack Overflow, j'ai pu accomplir ce que je viens normalement sur le site: trouver des réponses à un problème de programmation. Cela dit, il y avait en effet quelques opportunités d'amélioration et ce site est un excellent exemple de la façon dont le design repose souvent sur la couleur pour indiquer la hiérarchie ou la valeur sur une page, qui manquait cruellement dans les pages de questions de cette expérience.

? Ce que le site fait bien	? Ce que le site peut améliorer
Presque chaque élément est écrit sémantiquement.	Utilisez des contrôles clairs pour identifier les outils d'édition tout en posant ou en répondant aux questions.
Les icônes SVG utilisent les attributs de largeur et de hauteur.	Considérez une icône visuelle pour distinguer la réponse acceptée de toute autre réponse à une question.
Les listes de réponses sont claires et faciles à analyser.	Considérez une méthode différente pour indiquer un vote ou un vote en baisse en plus de la couleur seule.

Site Web 6: Wikipedia

Wikipedia, le principal point de référence du Web! C'est un aliment de base en ligne et l'une de ses qualités attrayantes est une sorte de manque de conception. Cela devrait faire un test intéressant.

Quelques liens vers le bas, nous avons une option de navigation de saut pour la navigation et la recherche réelles. L'en-tête de page d'accueil contenant l'image du globe maintient sa disposition de deux colonnes, et vous avez peut-être deviné pourquoi: il s'agit d'une disposition de table. Bien que ce ne soit pas un problème d'utilisation, nous savons qu'il n'est pas sémantique de compter sur des tables pour créer une mise en page. C'était une relique du passé lorsque nous n'avions pas de flotteurs, de flex-box, de grille ou de toute autre façon de gérer le placement de contenu. Cela dit, il n'y a pas de problèmes de convivialité notables ou d'éléments déroutants sur la page.

Passons à ce que beaucoup d'entre nous passent le plus de temps dans Wikipedia: une entrée d'article. C'est souvent le point d'entrée de Wikipedia, en particulier pour ceux d'entre nous qui commencent par taper quelque chose dans un moteur de recherche, puis cliquez sur le résultat de la recherche Wikipedia.

L'essentiel est que cette page est toujours extrêmement utilisable et hiérarchique avec CSS désactivé. La mise en page descend en une seule colonne, mais le contenu circule toujours dans un ordre logique et maintient même des bits de style, grâce à une dépendance à une dépendance aux tables et aux propriétés de table en ligne.

Un problème contre lequel je me suis heurté est la navigation. Il y a un lien «Jump to Navigation» dans l'en-tête qui me dépose en effet à la navigation lorsque je clique dessus. Au cas où vous vous posez la question, la navigation est contenue dans le pied de page, ce qui est la raison de la nécessité de s'y sauter.

Il existe des cases à cocher apparemment aléatoires au-dessus de quelques-unes des en-têtes de navigation (en particulier pour les «variantes» et «plus») et ils semblent ne servir à rien, bien que la case à cocher ci-dessus «plus» devienne des écrans à une certaine largeur de la fenêtre lorsque CSS est activé.

Il y a en fait une chose étrange dans la navigation, et c'est un bouton sans étiquette entre les en-têtes «dans d'autres projets» et «langues».

En cliquant sur ce bouton, je suis toujours en mesure d'accéder aux paramètres de la langue, et cela fonctionne principalement comme prévu. Par exemple, la mise en page maintient une disposition à onglets qui est super fonctionnelle.

Dans l'onglet Affichage, cependant, les boutons «langue» et «polices» ne font rien. Ce sont probablement aussi des onglets, mais au moins je peux voir ce qu'ils offrent. À côté de ces boutons se trouvent deux menus sélectionnés vides qui ne font absolument rien (le premier devient rempli d'options de bandes dessinées, d'OpenDyslexic et de police système lorsque vous cochez la case). En regardant l'onglet «d'entrée», les boutons de la langue d'écriture se produisent toujours pour fonctionner comme des onglets. Je suis toujours en mesure de sélectionner des options autres que l'anglais, l'espagnol et le chinois.

Les articles ne sont pas du tout difficiles à lire sans CSS et c'est parce que presque chaque élément est sémantiquement correct et suit une hiérarchie de documents cohérente. Une chose que je me suis demandé était où se déroulait le bouton «Show / Hide» qui se trouve normalement dans la table des matières. Il s'avère être une case à cocher solitaire, et l'étiquette est fausse - il utilise la propriété de contenu sur un pseudo-élément dans CSS pour afficher l'étiquette.

Un autre numéro dans les articles est que vous devez passer du temps à traquer des images lors de la prévisualisation. Normalement, cliquer sur une image dans la barre latérale de l'article déclenchera un modal complet qui contient un carrousel d'images. Sans CSS, ce carrousel est parti et, à sa place, est l'image avec une rangée de boutons non étiquetés au-dessus. C'est une déception, mais serait parfaitement OK si le carrousel n'était pas tout le long de la page, en face de l'endroit où l'image cliquée se trouve en haut de la page sans possibilité de s'y rendre.

Je serais négligent si je ne mentionnais pas que le logo Wikipedia était introuvable sur l'article! Ce n'est même pas un SVG blanc sur blanc. Le lien ne contient en fait rien:

 <a href="/%20wiki%20/%20main_page" title="Visitez la page principale"> </a>

Heureusement, le lien «Page principale» sous «Navigation» est le chemin du retour sans appuyer sur le bouton Retour du navigateur. Mais, c'est toujours étrange de ne pas avoir de marque sur la page lorsqu'il en fait un si excellent travail sur la page d'accueil.

Les problèmes HTML de Wikipedia existent principalement dans les fonctionnalités que je m'attends à être moins souvent utilisées plutôt que dans les articles. Ils n'ont jamais gêné mon expérience de lecture à long terme.

? Ce que le site fait bien	? Ce que le site peut améliorer
Le site maintient une structure propre et une hiérarchie.	Le placement du logo pourrait être déplacé (ou ajouté, dans certains cas) en haut de la page sans image d'arrière-plan CSS.
Les liens de sauts sont utilisés efficacement pour la recherche et la navigation.	Les boutons doivent inclure des étiquettes.
Le contenu de l'article est sémantique et facile à lire.	Le carrousel d'image sur les pages pourrait se charger où le déclencheur se produit et utiliser des étiquettes de bouton appropriées pour les commandes.

Façons de faire de CSS sans une meilleure expérience

CSS est un composant clé du Web moderne. Comme nous l'avons vu jusqu'à ce point, il existe un certain nombre de sites qui deviennent à côté de l'insuffisance sans lui - et nous comptons certains des sites les plus reconnaissables et les plus utilisés dans ce mélange. Ce que nous avons vu, c'est qu'au mieux, l'objectif principal d'un site peut encore être accompli, mais il y a des obstacles en cours de route. Des choses comme:

• liens de sauts manquants ou sémantiquement incorrects
• des liens qui coulent ensemble
• des images surdimensionnées qui nécessitent un défilement supplémentaire
• Éléments vides, comme les éléments de liste et les étiquettes des boutones

Voyons si nous pouvons les compiler dans une sorte de liste de meilleures pratiques à considérer pour les situations où CSS peut être désactivé ou même indisponible.

Incluez un lien de navigation Skip en haut du document

Avoir un lien caché pour sauter la navigation est un must. 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);
  débordement: caché;
  rembourrage: 0;
  Position: absolue;
  height: 1px;
  Largeur: 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="Cette fois, j'ai essayé de naviguer sur le Web sans CSS" >

<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>
 bouton></button>

Then the CSS can be something like this:

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

.btn-label {
  Affichage: bloc;
  débordement: caché;
  height: 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>
 bouton></button>

Conclusion

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!