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 browser cómo leer y analizar CSS personalizado sin esperar a que los proveedores de browsers 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 JavaScript, 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
• url
• 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 degraded. 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 hace que una tecnología emocionante be aún más accesible al permitirle escribir CSS semánticamente significativo dentro del propio CSS. Para obtener más información sobre CSS Houdini y la API de propiedades y valores, consulte estos recursos:

Photo by Christian escobar on Unsplash.