Noticias de la plataforma: uso predeterminado de CSS lógico, API de Fugu, consultas de medios personalizadas y WordPress frente a cursiva

¡Parece que 2021 es el momento de empezar a utilizar las propiedades lógicas de CSS! Además, Chrome envió recientemente algunas API que han llamado la atención, SVG nos permite deshabilitar su relación de aspecto, WordPress se centra en la accesibilidad de su tipografía y todavía no hay ninguna actualización (o progreso) en el desarrollo de consultas de medios personalizadas de CSS.

Saltemos directamente a las noticias…

CSS lógico pronto podría convertirse en el nuevo valor predeterminado

Seis años después de que Mozilla enviara los primeros bits de propiedades lógicas CSS en Firefox, esta característica ahora está en camino de ser completamente compatible con el navegador en 2021. Las categorías de propiedades lógicas y valores enumerados en la siguiente tabla ya son compatibles con Firefox, Chrome y la última vista previa de Safari.

Propiedad o valor CSS	El equivalente lógico
margin-top	margin-block-start
text-align: right	text-align: end
bottom	inset-block-end
border-left	border-inline-start
(n / A)	margin-inline

El CSS lógico también presenta algunas abreviaturas útiles para tareas que en el pasado requerían múltiples declaraciones. Por ejemplo, margin-inlineestablece las propiedades margin-lefty margin-right, mientras que establece insetlas propiedades top, righty .bottomleft

/* BEFORE */main {  margin-left: auto;  margin-right: auto;}/* AFTER */main {  margin-inline: auto;}

Un sitio web puede agregar soporte para un diseño RTL (de derecha a izquierda) reemplazando todas las instancias de lefty rightcon sus contrapartes lógicas en el código CSS del sitio. Cambiar a CSS lógico tiene sentido para todos los sitios web porque el usuario puede traducir el sitio a un idioma escrito de derecha a izquierda mediante un servicio de traducción automática. Los idiomas más importantes con escritura RTL son el árabe ( 310 millones de hablantes nativos), el persa ( 70 millones ) y el urdu ( 70 millones ).

/* Switch to RTL when Google translates the page to an RTL language */.translated-rtl {  direction: rtl;}

El sitio web personal de David Bushell ahora utiliza CSS lógico y se basa en la clase de Google para alternar la dirección base en líneatranslated-rtl del sitio . Intente traducir el sitio web de David a un idioma RTL en Chrome y compare el diseño RTL con el diseño LTR predeterminado del sitio.

Chrome incluye tres API de Fugu controvertidas

La semana pasada, Chrome lanzó tres API web para “interacciones avanzadas de hardware”: WebHID y Web Serial API en escritorio, y Web NFC en Android. Las tres API son parte del proyecto de capacidades de Google, también conocido como Proyecto Fugu , y fueron desarrolladas en grupos comunitarios del W3C (aunque no son estándares web).

• La API WebHID permite que las aplicaciones web se conecten a dispositivos de interfaz humana antiguos y poco comunes que no tienen un controlador de dispositivo compatible para el sistema operativo (por ejemplo, el control remoto Wii de Nintendo ).
• La API Web Serial permite que las aplicaciones web se comuniquen (“byte a byte”) con dispositivos periféricos, como microcontroladores (por ejemplo, el sensor de temperatura/humedad Arduino DHT11 ) e impresoras 3D, a través de una conexión serial emulada .
• Web NFC permite que las aplicaciones web lean y escriban en etiquetas NFC de forma inalámbrica a distancias cortas (menos de 10 cm).

Apple y Mozilla, los desarrolladores de los otros dos principales motores de navegador, se oponen actualmente a estas API. Apple ha decidido “aún no implementarlo debido a cuestiones de huellas dactilares, seguridad y otras preocupaciones”. Las preocupaciones de Mozilla se resumen en la página Posiciones de especificación de Mozilla .

Estirar SVG conpreserveAspectRatio=none

De forma predeterminada, un SVG se escala para ajustarse al svgcuadro de contenido del elemento, manteniendo al mismo tiempo la relación de aspecto definida por el viewBoxatributo. En algunos casos, es posible que el autor desee estirar el SVG para que llene completamente el cuadro de contenido en ambos ejes. Esto se puede lograr estableciendo el preserveAspectRatioatributo noneen el svgelemento.

Distorsionar SVG de esta manera puede parecer contradictorio , pero deshabilitar la relación de aspecto a través del preserveAspectRatio=nonevalor puede tener sentido para gráficos SVG decorativos simples en una página web responsiva:

Este valor puede resultar útil cuando utiliza un trazado para un borde o para agregar un pequeño efecto a una sección (como una [línea] diagonal) y desea que el trazado llene el espacio.

WordPress reduce el uso de cursiva

Se puede utilizar una fuente en cursiva para resaltar palabras importantes (por ejemplo, el emelemento), títulos de trabajos creativos ( cite), términos técnicos, frases extranjeras ( i) y más. Las cursivas son útiles cuando se usan discretamente de esta manera, pero las secciones largas de texto en cursiva se consideran un problema de accesibilidad y deben evitarse .

El texto en cursiva puede resultar difícil de leer para algunas personas con dislexia o formas relacionadas de trastornos de la lectura.

WordPress 5.7, que se lanzó a principios de esta semana, eliminó las cursivas en las descripciones, el texto de ayuda, las etiquetas, el texto de detalles de error y otros lugares en el administrador de WordPress para “mejorar la accesibilidad y la legibilidad”.

En noticias relacionadas, WordPress 5.7 también eliminó las fuentes web personalizadas y optó por fuentes del sistema.

Aún no hay progreso en las consultas de medios personalizadas de CSS

The CSS Media Queries Level 5 module specifies a @custom-media rule for defining custom media queries. This proposed feature was originally added to the CSS spec almost seven years ago (in June 2014) and has since then not been further developed nor received any interest from browser vendors.

@custom-media --narrow-window (max-width: 30em);@media (--narrow-window) {  /* narrow window styles */}

A media query used in multiple places can instead be assigned to a custom media query, which can be used everywhere, and editing the media query requires touching only one line of code.

Custom media queries may not ship in browsers for quite some time, but websites can start using this feature today via the official PostCSS plugin (or PostCSS Preset Env) to reduce code repetition and make media queries more readable.

On a related note, there is also the idea of author-defined environment variables, which (unlike custom properties) could be used in media queries, but this potential feature has not yet been fully fleshed out in the CSS spec.

@media (max-width: env(--narrow-window)) {  /* narrow window styles */}