Giving superpowers to CSS variables

CSS Houdini es un término general que cubre un conjunto de API de bajo nivel que exponen partes del motor de renderizado CSS y dan a los desarrolladores acceso al modelo de objetos CSS. Este es un gran cambio para el ecosistema CSS, ya que permite a los desarrolladores decirle al browserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los plus cómo leer y analizar CSS personalizado sin esperar a que los proveedores de browsersConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet plus implementen de forma nativa estas características. ¡Qué emocionante!

One of the most exciting additions to CSS within the Houdini umbrella is the
Properties and values API. This API supercharges your custom CSS properties (also commonly known as CSS variables) by giving them semantic meaning (defined by a syntax) and even alternative values, allowing for CSS testing.

Write Houdini custom properties

Here's an example of setting a custom property (think: CSS variable), but now with a syntax (type), an initial value (backing), and an inheritance boolean (does it inherit the value from its parent or not?). The current way to do this is through CSS.registerProperty () in JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar plus, pero en Chromium 85 y posteriores, el
@property the syntax will be compatible with your CSS files:

CSS.registerProperty({
yam: '--colorPrimary',
syntax: '<color>',
initialValue: 'magenta',
inherits: false
});

@property --colorPrimary {
syntax: '<color>';
initial-value: magenta;
inherits: false;
}

Now you can access --colorPrimary like any other CSS custom property, via
var (- colorPrimary). However, the difference here is that --colorPrimary it is not read just as a string. You have data!

Alternative values

As with any other custom property, you can get (using var) or set (write / rewrite) values, but with Houdini custom properties, if you set a false value when overriding it, the CSS rendering engine will send the initial value ( its reserve value) instead of ignoring the line.

Consider the following example. the --colorPrimary variable has a
initial-value from magenta. But the developer has given it the invalid value "23". Without @property, the CSS parser would ignore the invalid code. Now the analyzer returns to magenta. This allows for true safeguards and tests within CSS. Tidy!

.card {
background-color: var(--colorPrimary); 
}
.highlight-card {
--colorPrimary: yellow;
background-color: var(--colorPrimary); 
}
.another-card {
--colorPrimary: 23;
background-color: var(--colorPrimary); 
}

Syntax

With the syntax function, you can now write semantic CSS by specifying a type. Current types that are allowed include:

• length
• number
• percentage
• length-percentage
• color
• image
• urlEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo plus
• integer
• angle
• time
• resolution
• transform-list
• transform-function
• custom-ident (a custom identification string)

Setting a syntax allows the browser to check for custom properties. This has many benefits.

Para ilustrar este punto, le mostraré cómo animar un degradedConcepto de Degradado¿Qué es un Degradado?El Degradado es una técnica que está fundamentalmente vinculado con el terreno del diseño gráfico y la maquetación, con todo lo que tiene que ver con la elaboración de imágenes o su modificación. Se trata de combinar dos colores de forma que uno va perdiendo intensidad a medida que el otro la va ganando, realizando una transición cromática suave que puede obtener resultados muy impactantes.Una plus. Actualmente, no hay forma de animar (o interpolar) sin problemas entre los valores de gradiente, ya que cada declaración de gradiente se analiza como una cadena.

In this example, the gradient stop percentage is animated from a starting value of 40% to a ending value of 100% using a shift interaction. You should see a smooth transition from that top gradient color down.

The browser on the left supports the Houdini Properties and Values API, allowing for a smooth gradient stop transition. The browser on the right does not. The unsupported browser can only understand this change as a string going from point A to point B. There is no opportunity to interpolate the values, and therefore no such smooth transition is seen.

However, if you declare the syntax type when writing custom properties and then use those custom properties to enable animation, you will see the transition. You can instantiate the custom property --gradPoint like:

@supports (background: paint(something)) {
@property --gradPoint {
syntax: '<percentage>';
inherits: false;
initial-value: 40%;
}
}

And then when it's time to animate it, you can update the value of the initial 40% to 100%:

@supports (background: paint(something)) {
.post:hover,
.post:focus {
--gradPoint: 100%;
}
}

This will now allow for that smooth gradient transition.

conclusion

the @property rule makes an exciting technology even more accessible by allowing you to write semantically meaningful CSS within the CSS itself. For more information on CSS Houdini and the Properties and Values API, see these resources:

Photo by Christian escobar on Unsplash.