Algunas cosas que me llevé de un evento fuera de 2022 en Denver | trucos CSS

Un evento además de 2022 Denver Terminé ayer. Y aunque esta vez no llegué a los tres días, pude captar la acción de ayer, y fue estupendo.. No soy muy sociable ni extrovertido, pero esta fue la primera conferencia a la que asistí en al menos algunos años, y ver a la gente en persona fue increíblemente refrescante.

¡Tomé notas, por supuesto! Pensé en publicarlos aquí porque compartir es solidario. Al menos eso es lo que mi hijo de seis años me dijo el otro día cuando me pidió un bocado de mi postre anoche.

Desglosaré esto por altavoz. Advertencia justa: Me encantan las notas escritas a mano y soy una persona bastante visual, por lo que mis notas tienden a ser menos... estructuradas que la mayoría. Y estas notas son solo cosas que me llamaron la atención. Puede que ni siquiera sean el punto principal del presentador, ¡pero me llamaron la atención!

Chris Coyer: Los sitios web son buenos ahora

Chris ha dado esta charla antes (la vinculamos la semana pasada), pero esta vez la ha ampliado considerablemente, particularmente detallando el unidades relativas del contenedor que, al combinarse con clamp()haga una respuesta más precisa porque los valores son relativos al contenedor y no a la ventana gráfica. Entonces, ya sabe cómo usamos a menudo el ancho de la ventana gráfica (vh) unidades para el tipo de fluido?

font-size: clamp(1rem, 1rem + 2vw, 2rem);

Bueno, podemos usar una unidad relativa al contenedor como solicitud de contenedor tamaño en línea (cqi) en lugar de donde 1cqi es igual al 1% del tamaño incorporado del contenedor (aquí está el borrador de especificaciones para ello):

font-size: clamp(1rem, 1rem + 1cqi, 2rem);

Chris también habla mucho sobre los beneficios de rendimiento de alojamiento en el borde.Probablemente no sea una sorpresa porque ha escrito sobre esto aquí más de unas pocas veces. Incluso como alguien que ya había leído estos artículos, honestamente no me di cuenta del concepto completo de edge computing.

La idea es engañosamente simple: las CDN globales pueden servir activos rápido porque los alojan geográficamente cerca del usuario. Esta es una práctica bastante estándar para servir mapas de bits. Pero también se ha extendido a los archivos estáticos, como los mismos archivos HTML, CSS y JavaScript que alimentan un sitio: créelos con anticipación y sírvales como archivos ya compilados y optimizados desde el rápido CDN global. ¡Ese es el concepto completo de Jamstack!

Pero, ¿qué sucede si aún necesita una respuesta del servidor? Eso no es muy nervioso, ¿verdad? Bueno, ahora tenemos controladores capaces de operar en una sola URL, precargando datos e inyectándolos antes de renderizar, directamente desde la CDN. Por supuesto, hay trabajo adicional que ocurre en segundo plano. Sin embargo, el hecho de que podamos obtener datos dinámicamente, inyectarlos, precrearlos, servirlos estáticamente Bajo demanday para trabajar geográficamente más cerca del usuario, lo hace a la velocidad de la luz.

Tolu Adegbite: Cómo ganar en ARIA e impactar la accesibilidad web

Dios, esa fue una excelente presentación! Tolu Adegbite me enseñó WAI-ARIA con tanta fuerza que fue difícil para mí dejar todas las gemas que compartió: ¡Raleigh! Estados! ¡Etiquetado! Descripciones! Todo estaba extremadamente bien cubierto y sé que volveré una y otra vez.

Pero una cosa específica que me llamó la atención es la accesibilidad del SVG incrustado. Aunque SVG está relacionado con otros tipos de activos de diseño, el hecho de que sea un marcado al final del día lo distingue porque no siempre identificado como una imagen.

<!-- Image tag is easily recognized as an image -->
<img src="https://css-tricks.com/some-things-i-took-away-from-an-event-apart-2022-in-denver/cat.svg" alt="An illustrated brown and white tabby kitten looking lovingly into the camera.">

<!-- Could be an image, maybe not? -->
<svg viewBox="0 0 100 100">
  <!-- etc. -->
</svg>

Es más probable que la tecnología de asistencia lea el SVG incrustado como una imagen, otorgándole la función y la etiqueta accesibles adecuadas:

<svg 
  role="image" 
  aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera."
  viewBox="0 0 100 100"
>
  <!-- etc. -->
</svg>

Miriam Suzanne: Capas en cascada de importancia

¡Hola, otro alumno de CSS-Tricks! Miriam dedicó mucho tiempo y esfuerzo a Especificación de capas en cascadaTambién escribió una gran guía antigua sobre ellos aquí en CSS-Tricks y habla sobre ellos en An Event Apart.

Lo que más me llamó la atención es cuánto cambio mental es esto. El concepto en sí no es complicado. Declarar @layer en la parte superior del documento CSS, enumere las capas en orden de especificidad, luego escriba estilos en esas capas. Pero para un viejo dinosaurio como yo que ha estado escribiendo CSS por un tiempo, tendré que acostumbrarme al hecho de que las capas en cascada permiten que un selector de clase simple supere algo que normalmente tendría una mayor especificidad como una identificación.

🤯

Miriam también recordó a la sala que las capas en cascada son solo una herramienta que tenemos en nuestra barra de herramientas para administrar la especificidad, además de los selectores que afectan la especificidad (p. ej. :is(), :where()y :has()).

Ah, y esa es información interesante. Mientras Miriam repasaba la historia de la especificidad en CSS, recordó que !important se diseñó originalmente como una herramienta para que los usuarios anularan los estilos de agente de usuario y autor. Pero en algún momento lo adoptamos para obligar a los estilos del autor a estar en la parte superior. Las capas en cascada ayudar a eliminar una disculpa necesitará usar !important porque nos dan el poder de "priorizar las capas y protección del patrimonio."

¡Eso está muy bien dicho, Miriam!

Dave Rupert: desbloquear su acumulación de accesibilidad

Imagine despertarse un día con cientos de notificaciones de GitHub sobre problemas informados en su sitio. ¿Por dónde empiezas? ¿Quizás hacerle jailbreak a su computadora portátil y obtener un tratamiento de conducto en su lugar? ¡Esto es lo que le pasó a Dave! Una auditoría de accesibilidad automatizada arrojó una gran cantidad de errores y los definió como tickets para que Dave los corrigiera.

Pero notó un patrón después de tomar una hoja de cálculo de Excel de estos problemas, moverlos a Notion para verlos mejor, ocultar columnas innecesarias, categorizar todo y mostrar los resultados en grupos lógicos. Muchos de los problemas informados eran el mismo problema repetido en varias páginas. El hecho de que una prueba automatizada devuelva un puñado de errores no significa que todos sean únicos. Esto redujo una buena parte de las entradas.

Continuó mostrando cómo, con relativamente poco esfuerzo, los retrasos se redujeron en casi un 50 %.

Hay mucho que recopilar allí, especialmente en términos de cómo procesamos y organizamos nuestro trabajo. Para mí, lo más importante es cuando Dave dijo que debemos enfatizar a las personas y las interacciones sobre los procesos y las herramientas. Las herramientas como esta, que busca errores de accesibilidad, son útiles, pero es posible que no cuenten toda la historia. En lugar de tomarles la palabra, vale la pena hacer preguntas y obtener más contexto antes de sumergirse en el lío.

Como beneficio adicional, la reorganización de problemas en Notion le permitió a Dave agrupar problemas de una manera que mostraba claramente qué discapacidades discriminaba activamente su producto, lo que le brindaba una mayor empatía por esos vacíos y cómo priorizarlos.

---

Otra sesión virtual de Hui Jing Chen completó el día, pero debo admitir que me perdí la mitad porque estaba charlando en el pasillo. La charla valió la pena, aunque estoy aterrorizada de haberme perdido la presentación. ¡Miraré el video cuando lo publiquen!