0
576
Views¿Qué significan las funciones color() y l() en un valor CSS?
Hoy encontré un código al excavar en el código de Ghost . Estoy tratando de crear el mismo estilo en mi aplicación React después de extraer datos de la API.
Encontré esto:
:root { /* Colours */ --blue: #3eb0ef; --green: #a4d037; --purple: #ad26b4; --yellow: #fecd35; --red: #f05230; --darkgrey: #15171A; --midgrey: #738a94; --lightgrey: #141e24; --whitegrey: #e5eff5; --pink: #fa3a57; --brown: #a3821a; --darkmode: color(var(--darkgrey) l(+2%)); } .post-full-content pre { overflow-x: auto; margin: 1.5em 0 3em; padding: 20px; max-width: 100%; border: color(var(--darkgrey) l(-10%)) 1px solid; color: var(--whitegrey); font-size: 1.4rem; line-height: 1.5em; background: color(var(--darkgrey) l(-3%)); border-radius: 5px; } ¿Qué es la función l() en el CSS? No puedo encontrarlo por ninguna parte. WebStorm no lo reconoce, ni VSCode. Tampoco funciona en mi aplicación CRA. Tampoco creo que Ghost esté usando ningún procesador CSS después. ¿Así que qué es lo?
Descubrí que gatsby-ghost-starter también lo tiene en su código.
Pero no está renderizando para mi aplicación:
Aplicación fantasma:
2 answers
Answer question0
Forma parte del ajustador HSL/HWB y sirve para ajustar la luminosidad; los otros son la saturación, la blancura y la negrura. (atajos s , w , b )
[saturation( | s(] ['+' | '-' | *]? <percentage> ) [lightness( | l(] ['+' | '-' | *]? <percentage> ) [whiteness( | w(] ['+' | '-' | *]? <percentage> ) [blackness( | b(] ['+' | '-' | *]? <percentage> )
Entonces, la declaración
color(var(--darkgrey) l(+2%));significa ajustar la luminosidad del "gris oscuro" en +2%
Aquí hay algunos detalles sobre la modificación de colores con la función color()
Editar:
A partir de julio de 2020, esta característica es solo un borrador. La otra respuesta contiene muchos detalles en esa línea.
0
Personalmente, siento que la otra respuesta carece de detalles prácticos, así que aquí están. Antes de que pueda considerar usar algo de esto, debe saber que estas funciones actualmente no están ampliamente disponibles. De hecho, a partir de ahora parece que solo son compatibles con Safari:
https://caniuse.com#feat=css-color-function
y, en particular, actualmente no son compatibles con Firefox o Chrome:
- https://bugzilla.mozilla.org/show_bug.cgi?id=1128204
- https://bugs.chromium.org/p/chromium/issues/detail?id=1068610
Están documentados con el Borrador de trabajo CSS Color Module Level 4:
https://w3.org/TR/2019/WD-css-color-4-20191105
Sin embargo, como se puede ver a continuación, la versión actual (y única) recomendada es el Módulo de color CSS Nivel 3 , por lo que cualquier otra cosa que no sea esta solo debe usarse en un entorno de prueba: