2021 marca un cambio significativo hacia una adopción más amplia de las propiedades lógicas de CSS! Los recientes lanzamientos de API de Chrome han provocado un debate, el control de relación de aspecto de SVG ofrece una nueva flexibilidad, WordPress prioriza la tipografía accesible y el desarrollo de consultas de medios personalizados de CSS permanece estancado. Vamos a profundizar en los detalles.

CSS lógico: el predeterminado emergente

Seis años después de la implementación inicial de Mozilla, las propiedades lógicas de CSS se acercan al soporte completo del navegador en 2021. Firefox, Chrome y la última vista previa de Safari ya admiten las propiedades y valores que se describen a continuación. El CSS lógico simplifica el estilo con Shorthands como margin-inline (combinando margin-left y margin-right ) y INSET (para , [&], [&], , , , , , , ,

,

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

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

,

,

,

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

izquierda

). /* ANTES */ principal { margen-izquierda: auto; margen-derecha: auto; } /* DESPUÉS */ principal { margen en línea: auto; }

adaptarse a los diseños de derecha a izquierda (RTL) se vuelve significativamente más fácil. Un interruptor de clase simple maneja la transición, crucial para sitios traducidos a idiomas RTL como árabe, persa y urdu.

/ * cambia a rtl cuando se traduce */ .translada-rtl { Dirección: RTL; }

El sitio web de David Bushell ejemplifica este enfoque, aprovechando la clase de Google Translate
• traducido-rtl . Compare sus diseños RTL y LTR después de la traducción en Chrome para ver la diferencia.
Las controvertidas apis fugu de Chrome
• La reciente lanzamiento de Chrome de tres API para la interacción avanzada de hardware: WebHID y Web Serial (Desktop) y Web NFC (Android) - Parte del Proyecto Fugu, ha generado controversia. Mientras se desarrollan dentro de los grupos comunitarios W3C, aún no son estándares web.
• WebHid API: habilita la interacción de la aplicación web con dispositivos de interfaz humano poco comunes que carecen de controladores OS (por ejemplo, Nintendo Wii Remote).

API serial web:

facilita la comunicación byte-by-byte con periféricos como microcontroladores e impresoras 3D a través de conexiones seriales emuladas.

web nfc api:

permite lectura/escritura inalámbrica de corto alcance a las etiquetas NFC.

Apple y Mozilla Express Reservas, citando huellas digitales, seguridad y otras preocupaciones. La posición de Mozilla se detalla en su página de posiciones de especificación.

svg flexibilidad:

preserveSpectratio = none

por defecto, las escalas SVG al preservar la relación de aspecto. Configurar

preserveSpectratio = "Ninguno"

estira el SVG para llenar su contenedor, potencialmente distorsionando la imagen. Esto puede ser útil para elementos decorativos simples en páginas receptivas, como bordes o líneas diagonales que necesitan llenar un espacio específico. WordPress: reducción de cursiva para la accesibilidad

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

consultas de medios personalizados CSS: todavía esperando progreso

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

@custom-media

, propuesta hace casi siete años, permanece sin desarrollar. Esta característica permitiría definir consultas de medios reutilizables, reducir la duplicación de código y mejorar la legibilidad.

@Custom-Media--Narrow-Window (max-width: 30em); @Media (--Narrow-Window) { / * estilos de ventana estrechos */ }

Si bien el soporte del navegador es incierto, el complemento PostCSS oficial ofrece beneficios de implementación inmediatos. También se está explorando el concepto de variables de entorno definidas por el autor en las consultas de los medios, pero sigue siendo un trabajo en progreso.

@media (max-width: env (-window angosto)) { / * estilos de ventana estrechos */ }