Funciones de color sin coma en CSS

 

 

 

Últimamente ha habido un par de tweets virales sobre esto, uno de Adam Argyle y otro de Mathias Bynes . Este es un buen cambio que hace que CSS sea un poco más claro. Antes, cada función de color en realidad necesitaba dos funciones, una para la transparencia y otra sin ella, esto elimina esa necesidad y hace que la sintaxis esté más en línea con la gramática CSS en general.

Déjame rehacer los bloques de código del tweet de Mathias aquí:

/* Old Syntax */rgb(0, 128, 255)rgba(0, 128, 255, 0.5)hsl(198, 38% 50%)hsla(198, 28%, 50%, 0.5)
/* New Syntax */rgb(0 128 255)rgb(0 128 255 / 50%)hsl(198deg 28% 50%)hsl(198deg 28% 50% / 50%)lab(56.29% -10.93 16.58 / 50%)lch(56.29% 19.86 236.62 / 50%)color(sRGB 0 0.50 1 / 50%)

Partido de pensamiento:

 

  • La compatibilidad con el navegador es bastante buena: todo menos IE 11.
  • Si necesita compatibilidad con IE 11, puede preprocesarlo (o no usarlo). El preset-env de PostCSS lo hace tan bien como el complemento muy específico postcss-color-rgb (es extraño que no haga HSL también).
  • Si no te gusta, literalmente nunca necesitarás usarlo. Ningún navegador admitirá jamás una característica tan importante.
  • La razón para cambiar es la memoria muscular y las bases de código de apariencia consistente, ya que las nuevas funciones de color (por ejemplo, lab, lchy color) solo admitirán esta nueva sintaxis.
  • Existe un extraño híbrido entre lo antiguo y lo nuevo. Puede pasar un valor de opacidad rgb()y todavía funciona como rgb(255, 0, 0, 0.5);.
  • Si lo necesita en Sass (que aparentemente es complicado de soportar), existe una solución alternativa extraña . Supongo que Sass lo apoyará. Si no pueden, este es el tipo de dardo que aleja a la gente de los proyectos.
  • Prettier, que se dedica a limpiar su código desde la perspectiva del espaciado y la sintaxis, podría intervenir aquí y convertir la sintaxis, pero no lo hará (la postura de Prettier es no cambiar el AST).
  • Me imagino que DevTools comenzará a mostrar colores en este formato, lo que impulsará la adopción.
  • Recuerde que incluso los colores del código hexadecimal tienen un formato nuevo y elegante .





SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Funciones de color sin coma en CSS

Funciones de color sin coma en CSS

Últimamente ha habido un par de tweets virales sobre esto, uno de Adam Argyle y otro de Mathias Bynes . Este es un buen cambio que hace que CSS sea un poco m�

programar

es

https://pseint.es/static/images/programar-funciones-de-color-sin-coma-en-css-1458-0.jpg

2024-06-13

 

Funciones de color sin coma en CSS
Funciones de color sin coma en CSS

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences