CSS es lo que le da a cada sitio web su diseño. ¡Los sitios web no son muy divertidos y amigables sin él! He leído sobre a alguien que pasa una semana sin JavaScript y cómo la experiencia resultó en sitios web que eran más rápidos, aunque ciertos aspectos de ellos no funcionarían como se esperaba.
Pero CSS. Desactivar CSS mientras se navega por la web no haría exactamente que la web sea mucho menos útil … ¿verdad? O, como JavaScript, ¿algunas características no funcionarán como se esperaba? Por curiosidad, decidí darle una vuelta y arrancar el CSS del esqueleto HTML mientras navegaba por algunos sitios.
¿Por qué, podría preguntar? ¿Hay razones no masoquistas para desactivar CSS? Heydon Pickering una vez tuiteó que deshabilitar CSS es una buena manera de verificar algunos estándares de accesibilidad:
Elementos comunes como encabezados, listas y controles de forma son semánticos y aún se ven bien.
Una jerarquía visual es aún establecido con los estilos predeterminados.
El contenido todavía puede leerse en un orden lógico.
Las imágenes aún existen como etiquetas en lugar de perderse como fondos CSS.
Una encuesta de WebAIM desde 2018 informó que el 12.5% de los usuarios que confían en cualquier tipo de tecnología asistida navega por la web con hojas de estilo personalizadas, que pueden incluir eliminar todas las declaraciones de CSS en un sitio. Y, si estamos hablando de conexiones de Internet lentas, descartar CSS podría ser una forma de consumir contenido más rápido. También existe la posibilidad de que CSS esté deshabilitado por razones fuera de nuestro control inmediato, como cuando un servidor tiene problemas para cargar activos.
Como experimento, usé cinco sitios web y una aplicación web sin CSS, y esta publicación cubrirá mis experiencias. Terminé siendo una aventura bastante reveladora para mí personalmente, pero también me ha informado profesionalmente como desarrollador en formas que espero que también veas.
Pero primero, aquí está cómo deshabilitar el CSS
. Estoy absolutamente bienvenido a vivir indirectamente a través de mí en la forma de este post. Pero para aquellos de ustedes que se sienten a la altura de la tarea y desean experimentar una web sin estilo, aquí le explicamos cómo deshabilitar CSS en varios navegadores:
Chrome: En realidad, no hay configuraciones en Chrome para deshabilitar CSS, así que tenemos que recurrir a una extensión, como disable-HTML .
Firefox: Ver > Estilo de página > Sin estilo
Safari: Safari > Preferencias ... > Mostrar el menú de Desarrollo en la barra de menú . Luego vaya al menú desplegable Desarrollar y seleccione la opción "Deshabilitar estilos".
Ópera: Al igual que Chrome, necesitamos una extensión, y Web Developer se ajusta the bill.
Internet Explorer 11: View > Style > No style
No pude encontrar una manera documentada de deshabilitar CSS en Edge , pero podemos eliminar CSS de él y de cualquier otro navegador mediante la API Modelo de objeto en la consola de DevTools:
var d = document;
para (var s en S = d.styleSheets)
S [s]. Deshabilitado = verdadero;
para (var i en I = d.querySelectorAll ("[style]"))
I [i] .style = "";
El primer bucle desactiva todos los estilos externos e internos (en y
), y el segundo elimina cualquier estilo en línea. La advertencia aquí, sin embargo, es que a los elementos todavía se les puede dar dinámicamente nuevos estilos en línea. Para borrarlos instantáneamente, la mejor solución es agregar un temporizador. Algo como esto:
Alternativamente, existen navegadores de solo texto, como el antiguo Lynx pero esperan vivir sin video, imágenes (incluyendo SVG) y JavaScript.
el espejo sin estilo …
Por cada sitio que navegué sin CSS: Amazon, DuckDuckGo, GitHub, Stack Overflow, Wikipedia y el comprobador de contraste llamado Hex Naw. Compartiré mis primeras impresiones y haré algunas sugerencias. eso podría ayudar con la experiencia.
Prepárate, porque las cosas pueden ponerse un poco … terribles.
Sitio web 1: Amazon.com La página de inicio de Amazon.com con CSS (izquierda) y sin CSS (derecha).
No hay una necesidad real de Una introducción aquí. Amazon no solo es un elemento básico del hogar para muchos de nosotros, sino que también alimenta una gran parte de la web, gracias a su ubicua plataforma de servicios web de Amazon.
Hay una gran cantidad de cosas que están sucediendo aquí, así que exploraré las cosas sin estilo que se interponen en mi camino al encontrar un producto y pretender comprarlo.
Los resultados de Amazon.com para una "mac mini" Consulta de búsqueda.
En la página de inicio, veo de inmediato una hoja de sprite utilizada por el sitio. Está realmente en lugar de donde podría estar el logotipo, por lo que es difícil saber si esas imágenes están destinadas a estar allí. Cada sprite contiene varias versiones del logotipo, e incluso si pudiera ver la marca de la palabra "Amazon" en él, es sorprendente que no sea el enlace global de inicio. Si tienes curiosidad por saber dónde está realmente el enlace de inicio, es esta estructura de tramos donde el logotipo se presenta como imagen de fondo … en CSS:
El siguiente problema que surge es que el enlace "Saltar al contenido principal" no se parece a un enlace de salto típico, pero funciona como tal. Resulta ser un elemento sin href y JavaScript (sí, lo dejé habilitado) se utiliza para imitar la funcionalidad de ancla.
Cuando comienzo una búsqueda, tengo que buscar más abajo en el enlace "Comenzar" para ver las sugerencias. Bajo los elementos "Sus listas" y "Su cuenta", se vuelve difícil distinguir los enlaces. Aparecen todos juntos como si fueran un mega enlace súper largo. Creo que hubiera sido más efectivo usar una lista semántica no ordenada en este escenario para mantener un sentido de jerarquía.
Sin embargo, bajo todas esas sugerencias de búsqueda, los enlaces de cuenta y navegación son más fáciles de leer ya que están separados por algo de espacio.
Curiosamente, el carrusel que se encuentra más abajo en la página sigue siendo algo funcional. Si hago clic en las opciones "Página anterior" o "Página siguiente", se cambia el orden de las imágenes. Sin embargo, saltando entre esas opciones me requería desplazarme.
El carrusel aparece con su pila de páginas encima de la otra. La página anterior o siguiente se muestra en la parte superior.
Al saltar un poco más, hay un elemento de publicidad. Contiene una cadena de "Comentarios del anuncio" que se ve estática como lo vimos con el enlace "Saltar al contenido principal" anterior. Bueno, hice clic en él de todos modos y reveló un formulario para compartir comentarios sobre la relevancia del anuncio.
Para que la llamada a la acción sea más clara, " Los comentarios deben ser un enlace o un botón.
Es posible que lo haya perdido, pero hay un botón en blanco sobre los dos grupos de etiquetas de formulario y los botones de la radio están fuera de lugar. La estructura es confusa porque no sé qué etiquetas pertenecen a qué botones de opción. Quiero decir, supongo que podría suponer que la primera etiqueta va con la primera entrada de radio, pero eso es exactamente lo que es: una conjetura.
Lo que también es confuso es que hay botones Enviar entre "Cerrar ventana", "Cancelar , "Y" Enviar comentarios "en la parte inferior del formulario. Si presiono alguno de estos, volveré al anuncio. Ahora, supongamos que era ciego y utilizaba un lector de pantalla para navegar por esta misma parte, incluso con la presencia de CSS. Me dirían “Enviar, botón” para dos de los botones y, por lo tanto, no tendrían la menor idea de qué hacer sin adivinar. Es otro buen recordatorio acerca de la importancia de la semántica al manejar el marcado (etiquetas de botones en este caso) y tener en cuenta la confianza que se deposita en JavaScript para anular los valores predeterminados de la web.
Realizar una búsqueda, digamos "Mac Minis" Todavía puedo acceder y entender las calificaciones de los productos, ya que se muestran como texto (en lugar de la información sobre herramientas que de otra forma son) en lugar de estrellas. Este es un buen ejemplo del uso de un respaldo textual sólido cuando una imagen se usa como contenido visual, pero se sirve como imagen de fondo en CSS.
La página requerida Me desplaza un rato para llegar a los resultados de búsqueda reales. Observe la superposición de un producto patrocinado.
Tras elegir el Mac Mini con Intel Core i3, otros productos de Mac me saludan sobre el producto que seleccioné y tengo que navegar más allá de ellos para seleccionar la cantidad que deseo compra.
La página del producto muestra información de membresía de Amazon Prime entre la selección de cantidad y los botones de compra.
Desplácese hacia abajo y se muestra el botón "Agregar al carrito" Junto a una etiqueta con el mismo contenido. Eso es redundante y probablemente innecesario ya que un elemento es capaz de mantener su propia etiqueta:
Agregar al carrito
A continuación, tenemos una oferta para ser miembro de Amazon Prime. Todo está bien y elegante, pero observe que está insertado entre el producto que estoy comprando y el botón "Comprar ahora". Me cuesta mucho saber si hacer clic en "Comprar ahora" agregará el Mac Mini a la caja, o si estoy comprando Amazon Prime en su lugar.
También quería jugar un poco, así que intenté eliminar el Mac Mini de mi carrito una vez que descubrí cómo agregarlo. Tardé unos diez segundos en localizar el carrito para poder editarlo. Resulta que estaba justo al lado del enlace "Continuar con el pago (1 artículo)", pero se ramifica justo a su lado para que todo parezca un solo enlace.
En general, no fue difícil encontrar un producto. Por otro lado, el camino hacia el pago se convirtió más en un dolor de cabeza a medida que avanzaba. Hubo algunas malas prácticas relacionadas con la semántica y la accesibilidad que causaron confusión, y los botones y enlaces importantes se hicieron más difíciles de encontrar.
Lo que el sitio hace bien
Lo que el sitio puede mejorar
Los carruseles son funcionales incluso sin estilo.
El logotipo se basa en una imagen de fondo, lo que oculta el camino de regreso a casa.
La jerarquía de contenido sigue siendo generalmente útil para saber dónde estamos en una página.
Muchos enlaces y anclajes dependen de JavaScript y no parecen ser interactivos.
El orden de los elementos se mantiene aproximadamente intacto.
Los enlaces a menudo se topan entre sí o se colocan afuera donde serían relevantes.
Gran uso de recursos para la calificación de productos que se basan en imágenes de fondo.
Las etiquetas de los botones pueden ser engañosas o repetitivas.
Los elementos del formulario no se alinean correctamente.
Hay un viaje difícil de verificar.
Sitio web 2: DuckDuckGo La página de inicio de DuckDuckGo con CSS (izquierda) y sin CSS (derecha).
¿Has usado DuckDuckGo antes? Supongo que muchas personas que leen los trucos de CSS tienen, pero para aquellos que pueden escucharlo por primera vez, es una alternativa a la búsqueda de Google con un énfasis en la privacidad del usuario.
Entonces, comenzar con esto es un poco engañoso. Porque la página de inicio de DuckDuckGo es super simple. No mucho puede ir mal allí, ¿verdad? Bueno, es un poco más complicado que eso, ya que nos ocupamos de los resultados de búsqueda, la jerarquía de contenido y la relevancia una vez que empezamos a realizar consultas de búsqueda.
Desde el principio, saludos Con es mucho más contenido de lo que hubiera esperado para un vehículo de aterrizaje tan simple. Al no estar totalmente claro de qué sitio web se está escaneando. La primera mención del nombre del producto es el cuarto elemento de la primera lista desordenada y es una llamada a la acción para "Extender DuckDuckGo". El logotipo está totalmente perdido, lo que obviamente significa que se usa como fondo … en CSS. [19659002] Hablando de esa lista desordenada, asumo que lo que estoy viendo pertenece al encabezado, y no hay navegación de salto. Tenemos un icono de flecha triple (¿es un menú móvil o un menú para ocultar los elementos menos importantes, o algo más?), Seguido de contenido relacionado con la privacidad, enlaces de redes sociales, algo que parece un enlace pero en realidad es dos enlaces para "Acerca de DuckDuckGo" y "Más información".
Finalmente, hacia la parte inferior es donde aparece el caso de uso principal del sitio: la barra de búsqueda. Supongo que la etiqueta "S" significa "Buscar" y la etiqueta "X" es una abreviatura para borrar el campo de búsqueda.
Muy bien, para realizar una búsqueda. Es genial que aún pueda ver sugerencias automáticas y usar las teclas de flecha hacia arriba y hacia abajo para resaltar cada una. Sin embargo, al borrar el campo, las sugerencias no desaparecen hasta que actualice la página.
Realice una búsqueda y revise las sugerencias automáticas.
el menú de configuración son elementos en una lista que incluye los encabezados: "Configuración", "Esenciales de privacidad", "Por qué privacidad", "Quiénes somos" y "Mantente en contacto". Es muy probable que sean parte de un móvil. si CSS estaba habilitado, tal vez activado por ese enlace de triple flecha en la parte superior. En ese menú, veo cuatro viñetas en blanco entre "Configuración" y "Más temas".
La página de inicio de DuckDuckGo expone algunos deslumbramientos
Viniendo aquí como un nuevo usuario, no tengo idea de qué son esos elementos de la lista vacía, pero las viñetas que resalté en la captura de pantalla de arriba son en realidad los botones de tema. Para aclarar la intención, algún texto alternativo sería útil, y deberían ser botones de radio o normales en lugar de elementos de la lista (considerando su funcionalidad).
Cada bloque de contenido con una "X", incluida la "Configuración", no puede ser despedido sin embargo, hacer clic en la "X" sobre la imagen de una imagen de excursionista hace que una parte del contenido se borre de la pantalla, gracias a que JavaScript aún está habilitado. Lo que realmente me parece extraño es la numeración redundante en la lista ordenada en "Cambiar a DuckDuckGo …" Vemos esto:
1. 1No almacenamos tu información personal
2. 2No te seguimos con los anuncios
3. 3No te seguimos.
Parece ser un caso de uso mixto de marcado semántico con alguna otra forma de mostrar los números de los elementos de la lista.
La tercera "X" hacia abajo tiene funcionalidad.
Hay una cantidad colosal de espacio en blanco debajo de la imagen del excursionista hasta el primer elemento
. Suponiendo que sean enlaces o botones, hacer clic en cada instancia de "Agregar DuckDuckGo a [browser]" no hace nada. La ilustración de cada sección provoca un desplazamiento horizontal innecesario, que es un problema común que veremos en los otros sitios que observamos.
Desplazamiento por el espacio en blanco entre el excursionista Imagen y título de primer nivel. Wheee!
Después de esas secciones, hay un cuadro en blanco y no tengo idea de lo que es.
Un cuadro en blanco que parece no tener ningún propósito.
Abrí DevTools y resultó ser un elemento en que solo contiene JavaScript para algo relacionado con POST solicitudes. También podría ser uno de esos elementos que deberíamos dejar solo.
A continuación, veo dos instancias repetidas de "Establecer como motor de búsqueda predeterminado" en torno a la sección "Establecer como página de inicio".
Las instrucciones en Safari para configurar el motor de búsqueda como tu predeterminado o tu página de inicio. Las instrucciones pueden diferir de un navegador a otro.
Estas deben haber sido las instrucciones que aparecieron cuando hice clic en las acciones "Agregar DuckDuckGo …", pero muestra el impacto que puede tener ocultar y mostrar el contenido cuando tratamos Con marcado recto. En lugar de repetir el contenido, los enlaces o botones correspondientes deberían apuntar a una instancia. Eso reduciría la redundancia aquí.
OK, es hora de finalmente entrar en la búsqueda. Lo primero que veo en los resultados de búsqueda es un cuadro vacío con una instrucción para ignorar el cuadro. Okey-dokey entonces.
DuckDuckGo quiere que ignore un cuadro.
Siguiendo, ¿viste el enlace de DuckDuckGo? ? Ese debe ser el logotipo, y me pregunto por qué esto no estaba en la página de inicio. Parece que la mejora de la fruta es baja.
La barra de búsqueda todavía funciona normalmente con la excepción de los botones "S" y "X" que han cambiado de lugar desde donde estaban en la página de inicio.
En los resultados de búsqueda . Fácilmente podría distinguir un resultado de otro. Lo que encontré bastante innecesario, pero divertido, es que el mensaje "Su navegador indica si ha visitado este enlace" que se encuentra al final de cada título de página. Eso sería super molesto desde una perspectiva de lectura de pantalla. Imagina escuchar eso que se repite al final de cada título de página. Ese mensaje está ahí para ser mostrado junto con las marcas de verificación que contienen información sobre herramientas que contienen ese mensaje. Pero, con CSS deshabilitado, bueno, sin marcas de verificación ni información sobre herramientas. Como resultado, todo lo que obtengo es un encabezado extra largo.
Los resultados de búsqueda en DuckDuckGo todavía están bien estructurados con CSS deshabilitado, pero observe la mensajería que se adjunta a cada título del resultado.
La barra de navegación que normalmente se muestra Como las pestañas para filtrar por diferentes tipos de resultados (por ejemplo, Imágenes) parece no hacer nada en este punto porque es difícil decir que son filtros sin estilo. Pero si hago clic en el filtro de Imágenes, los resultados de la imagen se cargan en la parte inferior de la página, se apilan justo encima de los resultados de la Web, y la página se convierte en mega larga como resultado. Ah, y podría pensar que desplazarse hacia arriba (y es un largo hacia arriba) luego hacer clic en otro filtro, digamos Videos, reemplazaría las imágenes, pero eso simplemente inserta las imágenes en miniatura del video debajo de las imágenes haciendo una página ya mega larga una página [megalarga super ]. ¡Imagina el peso de la página de todos esos recursos!
Bueno, no tienes que hacerlo. Según DevTools, solo las imágenes cuentan con 831 solicitudes y un peso total de 23.7 MB. ¡Hefty!
El verdadero efecto es que no está claro de inmediato que todas esas imágenes se hayan cargado visualmente.
El último par de elementos son dignos de notar. Al hacer clic en el enlace "Enviar comentarios" aparentemente no hace nada. Tal vez eso provocó un modal con CSS? Y, aunque el enlace "Todas las regiones" no se parece a un enlace y podría haberlo ignorado fácilmente, tuve la curiosidad de hacer clic en él y me llevaron a un punto de anclaje de una lista de países. Los últimos dos enlaces acaban de hacer que sus contenidos correspondientes aparezcan en la lista de opciones de país.
La opción "Todas las regiones" actúa en secreto como ancla.
Hay mucho que hacer aquí y claramente hay oportunidades para mejorar. Por ejemplo, hay llamadas a la acción que se muestran como texto normal que deberían ser enlaces o botones. Además, pensamos que el rendimiento de un sitio mejoraría con CSS deshabilitado, pero todos los activos cargados en los resultados de búsqueda son prohibitivos. Dicho esto, la experiencia de búsqueda no es dolorosa en absoluto … es decir, a menos que esté investigando imágenes o videos mientras lo hace.
Lo que el sitio hace bien
Lo que el sitio puede mejorar [19659066] La búsqueda es coherente y funciona con o sin CSS.
Un enlace de "omisión" ayudaría con la navegación por el teclado.
La jerarquía de contenido hace que el contenido sea fácil de leer y los resultados de búsqueda sean una experiencia limpia.
los elementos del enlace en el menú "Configuración" deben ser encabezados para listas separadas no ordenadas, de modo que haya una clara jerarquía de cómo se agrupan las opciones.
Buen uso de un enlace de página de inicio en la parte superior de la página de resultados de búsqueda.
Algunos el contenido se duplica o se repite porque el sitio se basa en mostrar y ocultar condicionalmente el contenido.
Asegúrese de que todas las llamadas a la acción se representen como enlaces en lugar de texto simple.
Use una solución alternativa para filtrar los tipos de resultados de búsqueda a previene el apilamiento de artículos y ayuda a controlar las p
Sitio web 3: GitHub La página de inicio de GitHub con CSS (izquierda) y sin CSS (derecha).
Hola, aquí hay un sitio que muchos de nosotros somos bien familiarizado con! Bueno, muchos de nosotros estamos acostumbrados a iniciar sesión en él todo el tiempo, pero voy a navegarlo mientras esté desconectado.
Ya hay un enlace de salto (sí). También hay un ícono de navegación móvil que espero que no haga nada, y se ha comprobado que tengo razón cuando lo intento.
¿Esa gran brecha de blanco? Es un icono SVG con un relleno blanco, según DevTools.
Entre algunos de los elementos de navegación, hay vacíos innecesariamente gigantescos. Si hace clic en estos, seguirán funcionando como menús desplegables. Son elementos
y … pero algo se siente semánticamente mal. Es bueno que los elementos del menú sean en realidad elementos de lista desordenados y que la funcionalidad del navegador nativo aún pueda llevarse a cabo utilizando una forma semántica para expandir el contenido. Pero ese ícono de SVG se mete conmigo.
Antes de escribir algo en el campo, veo tres instancias de los enlaces "Buscar en todos los GitHub" y "Saltar a". No tengo idea en qué hacer clic, pero si hago una búsqueda, la palabra clave aparece en el tercer grupo.
No hay una conexión clara entre la entrada de búsqueda y los tres grupos de enlaces.
Todo lo demás en la página de inicio parece estar bien, excepto por una cantidad de imágenes demasiado grandes que desbordan horizontalmente la ventana.
Desplácese hacia abajo para ver desbordamiento de imágenes grandes la ventana del navegador.
Regresemos a la barra de búsqueda y navegamos a cualquier repositorio que podamos encontrar. Justo debajo del botón Buscar, tenemos dos barras de navegación secundarias casi idénticas que devuelven los recuentos, código, confirmaciones y otros meta del repositorio. Sin mirar la fuente, no tengo idea de cuál es el propósito de tener dos de estos.
Resultados de búsqueda para una consulta de "consejos de javascript".
Repositorio las páginas aún tienen una estructura fácil de seguir y una jerarquía lógica en su mayor parte. Mientras se desconecta y se borra mi caché antes de llegar, el botón "Descartar" del bloque "Unirse a GitHub hoy" sigue funcionando como esperaba. Como vimos anteriormente en Amazon, los enlaces de etiquetas son difíciles de diferenciar porque se ejecutan juntos como una sola línea.
Una página de repositorio en un estado de cierre de sesión.
Los siguientes dos botones: "JavaScript" y "Nuevo Solicitud de extracción ": no parece hacer nada cuando hago clic en ellos. Me imagino que el botón de solicitud de extracción debería estar deshabilitado mientras se visualiza como invitado desde entonces, a menos que esté destinado a llevar a un usuario a una pantalla de inicio de sesión primero … pero incluso eso no se siente bien. Sin embargo, resulta que el botón está desactivado cuando CSS está activo. Luego, el resto de la página es bastante fácil de entender.
Si estás aquí principalmente para administrar, contribuir o revisar depósitos, no enfrentarás mucha fricción ya que la jerarquía funciona bien. Experimentará prácticamente lo mismo en cualquier otro lugar, ya sea que esté viendo solicitudes de extracción, problemas o archivos individuales. La mayoría de los obstáculos viven en páginas menos prominentes en el sitio.
Lo que el sitio hace bien
Lo que el sitio puede mejorar
La jerarquía y la estructura de muchas páginas son realmente fáciles de seguir y tienen un sentido lógico .
Use los atributos de altura y anchura en los elementos y SVG para evitar que exploten.
La mayoría de los iconos de SVG incrustados en la página tienen el tamaño adecuado.
Observe los elementos de la lista vacía. 19659068] Buen uso de un enlace de salto en el encabezado.
Asegúrate de que las etiquetas de los botones usen palabras completas.
Asegúrate de que los enlaces tengan espacios en blanco o saltos de línea entre ellos para evitar que se ejecuten.
Sitio web 4: Hex Naw La página de inicio de Hex Naw con CSS (izquierda) y sin CSS (derecha).
El siguiente sitio es una herramienta en línea que utilizo a menudo para verificar la accesibilidad de los contrastes de color. Y para un sitio que es tan grande en color probablemente aquí suceda mucho con CSS, por lo que debería ser interesante.
Inmediatamente hay una gran cantidad de espacio sobre la navegación y no hay enlaces de salto . Los botones de hamburguesa y de cierre para el diseño móvil y los botones "X" al lado de cada color para probar son de gran tamaño.
Nos faltan enlaces omitidos y hay espacio excesivo por encima de la navegación.
Ah, y compruebe esta brecha gigante entre el botón "Probar colores" y la siguiente sección de contenido.
Sería bueno cerrar esta brecha para que los contadores" sí "y" nuevo "sean visibles en la prueba.
Una de las muchas características interesantes de este sitio es una casilla de verificación que le permite ver solo los colores que pasaron la prueba, en lugar de ver todos los colores probados. Desafortunadamente, ese botón no hace nada con CSS deshabilitado. Sin embargo, todavía puedo ver qué colores funcionan y obtener las definiciones de relación de contraste, texto grande y texto pequeño directamente en la tabla de resultados.
Es probable que el botón oculte y muestre los términos con lo que hace el botón con CSS. Lo malo es que no sabré el propósito de esas letras simples (por ejemplo, S y R) después de los encabezados de la tabla. También es irónico y confuso ver ese mensaje para todos los colores que fallan después de la tabla porque, bueno, hay colores que pasan en esta lista. Lo que se podría hacer es ocultarlo por defecto, pero inyectarlo condicionalmente más tarde si todos los colores en una sola prueba fallan.
Al extraer DevTools, resulta que parte del espacio en blanco en la parte superior es el logotipo Hex Naw como un Archivo SVG. El espacio de arriba está asociado con otros símbolos SVG utilizados para la página. Al usar un color predeterminado de negro para el logotipo, esto ayudaría a reducir algo del espacio. Hice ese cambio rápido en DevTools y marca una gran diferencia.
El tamaño del menú móvil y los iconos de "X" se pueden reducir fácilmente y ser proporcionales a su atributos de viewBox . Esta es una forma de reducir el tamaño del menú móvil y los íconos "X".
La segunda brecha de espacio es causada por un cargador SVG que aparece al calcular los contrastes de color. Esto podría ayudarse especificando un ancho y una altura mucho más pequeños, pero proporcionales, exactamente como el menú móvil y los íconos "X".
Pude revelar y redimensionar el SVG icono de cargador en DevTools.
Agregar un ancho y una altura iniciales a cada SVG definitivamente reduciría la necesidad de desplazarse. Esto también es lo que podemos hacer para solucionar los vacíos que vimos en la navegación de GitHub.
En última instancia, Hex Naw sigue siendo bastante útil sin CSS. Todavía puedo probar los colores, obtener resultados de color que pasan y que fallan, y navegar por la página. Es simplemente una lástima que no pude trabajar con los colores reales y tuve que trabajar con los íconos SVG extra grandes.
Lo que el sitio hace bien
Lo que el sitio puede mejorar
El sitio se mantiene bien jerarquía de contenido en todo el sitio.
Los SVG deben usar un color de relleno alternativo y usar los atributos de altura y anchura.
Todos los elementos se escriben de forma semántica.
La información de todos los colores que fallan se puede agregar y eliminar de forma dinámica para evitar mensajes incómodos.
Las propias pruebas funcionan correctamente con la excepción de poder mostrar u ocultar información.
Considere una forma alternativa de mostrar el color de los valores que se están probando, como las celdas de la tabla con el atributo de color de fondo.
Sitio web 5: Desbordamiento de pila La página de inicio de Overflow de pila con CSS (izquierda) y sin CSS (derecha).
Al igual que GitHub, Stack Overflow es una de esas opciones. recursos Lo que muchos (si no la mayoría) de nosotros guardamos en nuestro bolsillo trasero porque ayuda a encontrar si alguien ya ha hecho una pregunta de desarrollo y las respuestas a ella.
En la página para hacer una pregunta, veo un montón de espacios en blanco. viñetas sobre el elemento principal . No tengo idea de por qué están allí esos elementos de la lista vacía. Tampoco veo ninguno de los botones de formato, pero después de perder un poco de tiempo, descubrí que no son más que elementos de lista en blanco. Quizás un texto alternativo o un icono SVG para cada elemento ayude a identificar qué son y qué hacen. They should be turned into real buttons as well.
It’s also still possible to get a list of similar questions while entering text into the title field. Every works here as expected, which is nice. Although, it is strange that the vote counts for each suggested question appears twice, once above the title as a link and again next to the title without being linked.
The “Ask a Question” page has a little awkward formatting, but the overall functionality is in tact and the page is relatively easy to navigate.
One of the key elements we all look for when landing on a Stack Overflow question page is that big green checkmark that indicates the correct answer out of all the submitted answers. But with CSS turned off, it’s hard to tell which answer was accepted because each answer in the list has a black checkmark. Even if the accepted answer is always at the top, there’s still no alternative or fallback indication without having to interact with the page. Additionally, there’s no indication if you have already up voted or down voted the question or any of the answers.
The question (left) next to the list of provided answers (right). We lose a lot of hierarchy when styles are taken away.
To sum up my experience on Stack Overflow, I was able to accomplish what I normally come to the site for: finding answers to a programming problem. That said, there were indeed a few opportunities for improvement and this site is a prime example of how design often relies on color to indicate hierarchy or value on a page, which was sorely missing from the question pages in this experiment.
What the Site Does Well
What the Site Can Improve
Almost every element is written semantically.
Use clear controls to identify editing tools while asking or answering questions.
SVG icons use the width and height attributes.
Consider a visual icon to distinguish the accepted answer from any other answers to a question.
Lists of answers are clear and easy to scan.
Consider a different method to indicate an up vote or a down vote besides color alone.
Website 6: WikipediaThe Wikipedia homepage with CSS (left) and without CSS (right).
Wikipedia, the web’s primary point of reference! It’s an online staple and one of its appealing qualities is a sort of lack of design. This should make for an interesting test.
A few links down, we have a skip navigation option for the real navigation and search. The homepage header containing the globe image maintains its two column layout, and you may have guessed why: this is a table layout. While it may not be a usability issue, we know it isn’t semantic to rely on tables to create a layout. That was a relic of the way past when we didn’t have floats, flexbox, grid or any other way to handle content placement. That said, there are no noticeable usability issues or confusing elements on the page.
Let’s move on to what many of us spend the most time on in Wikipedia: an article entry. This is often the entry point to Wikipedia, especially for those of us that start by typing something into a search engine, then click on the Wikipedia search result.
Notice how similar the style-less page is to the styled page, even though it becomes a single column.
The bottom line is that this page is still extremely usable and hierarchical with CSS disabled. The layout goes down to a single column, but the content still flows in a logical order and even maintains bits of styling, thanks again to a reliance on tables and inline table properties.
One issue I bumped up against is the navigation. There is a “Jump to navigation” link in the header which indeed drops me down to the navigation when I click it. In case you’re wondering, the navigation is contained in the footer, which is the reason for needing to jump to it.
Navigation menu with stranded checkboxes above “Variants” and “More.”
There are seemingly random checkboxes above a couple of the navigation headings (specifically for “Variants” and “More”) and they appear to serve no purpose, although the checkbox above “More” becomes displays at a certain viewport width when CSS is enabled.
There actually is one odd thing in the navigation, and it’s a label-less button between the “In other projects” and “Languages” headings.
Hovering over the button provides a hint that it’s for language settings, but the button should at least have a title to make that clear up front.[19659034]Clicking that button, I’m still able to access the language settings, and it mostly works as expected. For example, the layout maintains a tabbed layout which is super functional.
In the Display tab, however, the “Language” and “Fonts” buttons do nothing. They probably are tabs as well, but at least I can see what they offer. Beside those buttons are two empty select menus that do absolutely nothing (the first one does become populated with ComicNeue, OpenDyslexic, and System font options when you check the checkbox). Looking at the “Input” tab, the writing language buttons still happen to function as tabs. I’m still able to select options other than English, Spanish, and Chinese.
Pressing the […] button takes me to a list of languages at the top of the page.
The articles aren’t difficult to read at all without CSS and that’s because nearly every element is semantically correct and follows a consistent document hierarchy. One thing I did wonder was where the “Show/Hide” button that’s normally in the table of contents went. It turns out to be a lone checkbox, and the label is fake — it uses the content property on a pseudo-element in CSS to display the label.
Another issue in articles is that you have to spend time hunting images down when previewing them. Normally, clicking an image in the article sidebar will trigger a full-screen modal that contains a carousel of images. Without CSS, that carousel is gone and, in its place, is the image with a row of unlabeled buttons above it. That’s a bummer, but would be perfectly OK if the carousel wasn’t all the way down the page, opposite of where the clicked image is at the top of the page without an ability to jump down to it.
The image carousel is no longer contained in a modal, but at the end of the page.
I’d be careless if I didn’t mention that the Wikipedia logo was nowhere to be found on the article! It’s not even a white SVG on white. The link contains actually nothing:
Thankfully, the “Main page” link under “Navigation” is the another way back home without pressing the browser Back button. But, still feels odd to have no branding on the page when it does such a great job of it on the homepage.
Wikipedia’s HTML issues exist mostly in features I expect to be less often used rather than articles. They never hampered my reading experience in the long run.
What the Site Does Well
What the Site Can Improve
The site maintains a clean structure and hierarchy.
The logo placement could be moved (or added, in some cases) to the top of the page without a CSS background image.
Skip links are used effectively for search and navigation.
Buttons should include labels.
The article content is semantic and easy to read.
The image carousel on pages could load where the trigger occurs and use proper button labels for the controls.
Ways to make CSS-less a better experience
CSS is a key component to the modern web. As we’ve seen up to this point, there are a number of sites that become next to un-unusable without it — and we’re counting some of the most recognizable and used sites in that mix. What we’ve seen is that, at best, the primary purpose for a site can still be accomplished, but there are hurdles along the way. Things like:
missing or semantically incorrect skip links
links that run together
oversized images that require additional scrolling
empty elements, like list items and button labels
Let’s see if we can compile these into a sort of list of best practices to consider for situations where CSS might be disabled or even unavailable.
Include a skip navigation link at the top of the document
Having a hidden link to skip the navigation is a 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.
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.
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:
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:
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.
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.
/* ...and it’s still red when CSS is enabled */
svg {
fill: #ff0000;
}
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 (e.g. VoiceOver says, “Add button Add” instead).
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.
Add
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.
Lo que el sitio hace bien 
Lo que el sitio puede mejorar 
![Blue arrow pointing out the jump to a list of languages at the top of the page when pressing the [...] button](https://css-tricks.com/wp-content/uploads/2019/04/s_071AECC15C6EB5F429B89D008BC0081AA5693F96DD2911AF4BC7C24CC0BB7965_1551730969400_wikipedia4.png)
, we saw just how important CSS is to the overall design and experience of sites, both small and large.
stips 