¡Qué es! Importante n.º 10: HTML en lienzo, mapas hexadecimales, optimización de tinta electrónica y más

Los desarrolladores han estado experimentando con HTML-in-Canvas, una función de análisis de mapas mundiales hexagonales que es un sistema operativo basado en web para dispositivos de tinta electrónica como alternativa. img srcusar content,etc. Esto es ¿Qué es importante? #10.

Experimento HTML en lienzo

HTML-in-Canvas, una nueva API que nos permite <canvas> Los efectos visuales son un tema candente en este momento, así que comencemos con eso. Amit Singh nos mostró Cómo funciona la API HTML-in-Canvasy también creó algunos Se completó la exhibición de la sala de exposiciones HiCcomo este (requiere Chrome 146 y chrome://flags/#canvas-draw-element habilitar bandera):

Construir función de análisis de mapa mundial hexagonal

Ben Schwarz (gran nombre, pero irrelevante) habla sobre Construir función de análisis de mapa mundial hexagonal. Si bien es más una revisión que un tutorial para desarrolladores, es una real Lectura interesante sobre análisis, limitaciones de diseño, inspiración, ingeniería y, por supuesto, SVG y CSS.

Rekindle: sistema operativo basado en web para dispositivos de tinta electrónica

reavivar Básicamente es un sistema operativo basado en web para dispositivos de tinta electrónica como Kindle, Kobo y Boox, que generalmente tienen un bajo consumo de energía y pocas funciones. Rekindle incluye una sorprendente cantidad de funciones y aplicaciones, está diseñado en blanco y negro, no tiene animaciones y, sin duda, está más optimizado para tinta electrónica.

El punto no es el tutorial (desafortunadamente), ni siquiera algunas de las revisiones (como la revisión del mapa mundial anterior), sino que tenemos un montón de consultas de medios que serían muy útiles para los dispositivos de tinta electrónica si no fuera por el hecho de que vienen con navegadores web propietarios de baja potencia que no los reconocen. Consulta de medios nivel 5 Puede consultar las capacidades de desplazamiento, la precisión del indicador, la frecuencia de actualización de la pantalla, la profundidad de color, la profundidad de bits monocromática, el tamaño del índice de color, el rango dinámico y más.

¿idea? ¿Es probable que la optimización de la tinta electrónica se dispare en los próximos años, o la demanda de estas consultas de medios es menor y por qué se necesita un servicio dedicado como Rekindle? Vale la pena señalar que el navegador y muchas consultas de medios están en desarrollo activo, así que no lo sé. ¿Quizás mirar este espacio?

De todos modos, ¡me encantaría ver a los desarrolladores de Rekindle profundizar en ello!

reemplazar img srcusar content

Jon encontró CSS se puede utilizar para reemplazar fuentes de imágenes de la siguiente manera:

<img src="https://css-tricks.com/whats-important-10/image.png" alt="Alt text">

img {
  content: url(new-image.png) / "New alt text";
}

¡hasta! ¿Quién diría que se podía cambiar #HTML usando #CSS? “src”: img { content: url(whatever.png) } ¡Sin hipocresía!

También parece funcionar en todos los navegadores actuales. ¿Cómo me perdí esto?

– Jon (@scrwd.mastodon.social.ap.brid.gy) 20 de abril de 2026 13:09

Es realmente interesante aprender sobre esto. content propiedad, que ha sido Baseline durante 11 años. Hice más experimentos y descubrí que este truco también funciona para image-set() Función:

img {
  content: image-set(
    url("https://css-tricks.com/whats-important-10/image.png") 1x,
    url("image-2x.png") 2x
  );
}

Entonces, si estás desarrollando un sitio web que no responde <img>Y el marcado no se puede cambiar, sino que la lógica está escrita en CSS.

Implementar imágenes responsivas sizes=auto

Dicho esto, si usted Hacer Al tener acceso a HTML, debe ofrecer imágenes responsivas usando srcset y sizes Atributos HTML. Matt Marqués probado que nuevo sizes=auto La combinación de valores de propiedad reemplaza los puntos de interrupción reactivos para imágenes de carga diferida.

Si está interesado, Amit Sheen también habló sobre Crear diseño sin puntos de interrupción (no necesariamente una imagen).

Nuevas funciones y actualizaciones de la plataforma web

Si tiene hambre de más, consulte la discusión de Syntax.fm con Wes Bos y Scott Tolinski. 10 nuevas API CSS y HTML:

¡Hasta la próxima!