CSS @property and the new style (ryanmulligan.dev)

Article summary

The article discusses the new CSS @property feature, which allows developers to explicitly define syntax, initial value, and inheritance for CSS custom properties. This feature enables smoother transitions and animations, and the article provides examples of its use in creating shiny call-to-action buttons and animated gradient borders. The author explores the possibilities of @property and its potential impact on large-scale applications and design systems. The feature is part of the CSS Houdini APIs, which provide a more powerful way to manipulate CSS from JavaScript.

Main themes

• CSS @property feature
• CSS Houdini APIs
• Custom properties
• Animations and transitions
• Design systems
• JavaScript and CSS interaction

What commenters say

• Some developers enjoy working with CSS and find it powerful and efficient, while others struggle with its complexity and nuances.
• The introduction of new CSS features like @property is seen as a positive development, allowing for more creative and efficient styling without the need for JavaScript.
• CSS is a declarative language that can be debugged using browser dev tools, but its complexity and cascading nature can make it challenging to work with.
• The use of advanced CSS features like @property does not necessarily introduce new privacy concerns, but users who disable JavaScript for security reasons may still need to be cautious.
• Some developers prefer to use CSS for styling and layout, while others rely on JavaScript and libraries like React or Angular for more complex tasks.
• The distinction between declarative and imperative languages is important for understanding how to work effectively with CSS and JavaScript.
• The evolution of CSS is making it more like a programming language, but its limitations and differences from traditional programming languages must be understood and respected.