Platform News: Rounded Outlines, GPU-Accelerated SVG Animations, and How CSS Variables Are Resolved
Rounded Outlines in CSS
The new CSS property outline-radius is here to make it easier to add rounded edges to an element's outline. This useful new property can be used to add aesthetic curved borders to buttons, frames, or any other HTML elements. The border will appear with the same level of smoothness regardless of the device or browser used. Here’s an example of what it looks like: outline: 1px solid #222; outline-radius: 8px; Using this snippet of code, you can add a sharp 1px border with an 8px radius and a black colour to every side of the element.
GPU-Accelerated SVG Animations
SVG Animation is becoming increasingly popular as a powerful way to create complex animations with a few lines of code. Now, with GPU-accelerated SVG Animations, developers can take advantage of modern hardware to run more complex animations quickly. GPUs are optimized for running graphically-intensive tasks, so if you're developing SVG-based animations, you'll benefit from giving them a performance boost. By using the transform: translateZ(0) property on an SVG, you can achieve substantial performance gains for your animations. Using this property, the animation will be rendered using GPU instead of CPU. This means that complex animations can be run more quickly without compromising on quality.
How CSS Variables Are Resolved
CSS variables can be a great tool for enhancing the flexibility of your web designs. With them, you can store frequently used values in variables and reuse them in different places without having to input them manually every time. But how exactly do they work? Whenever a web browser encounters a CSS variable, it will look for a declared value in the same scope. This is known as "resolving" the variable. If no value is found in the same scope, the browser will look for the value in a higher scope - this is known as "cascading". If the variable can't be resolved at all, an error will be thrown. This means that you need to always make sure that all the variables you use are properly declared.