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 .

Si quieres conocer otros artículos parecidos a Funciones de color sin coma en CSS puedes visitar la categoría CSS.