New in CSS: Relative Colors
The article discusses CSS's new relative color feature, resembling Sass functions. It allows flexible color manipulation by deconstructing values into components like rgb, hsl, or lch. Available in Safari Tech Preview, it enables easy color transformations.
Read original article
The article discusses the introduction of relative colors in CSS, a feature reminiscent of Sass functionalities like darken or lighten. This new syntax allows for flexible color manipulations by using the 'from' keyword to deconstruct color values into their components like rgb, hsl, or lch. The article highlights that this feature is currently only available in Safari Tech Preview and requires toggling a development flag. Developers can now transform color values into different formats for easy manipulation, enabling tasks like darkening colors using calculations. The addition of relative colors showcases the responsiveness of CSS to developer requests for functionalities like lighten and darken. The article also provides examples of how relative colors can be used to create color palettes by defining color steps. Overall, the new relative color syntax in CSS offers a promising way to manipulate colors efficiently and creatively.
Related
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.
Notes on implementing dark mode
The article explores refining dark mode implementation on websites using Tailwind for styling. It emphasizes a tri-state setting (dark, light, system default), local storage usage, and technical considerations for a seamless experience.
CSS Surprise Manga Lines
The article explains creating a manga-style surprise effect with CSS, focusing on replicating character facial lines. It suggests using GIF overlays for better performance than CSS animations. Published on July 2, 2024.
@property: Next-gen CSS variables now with universal browser support
The CSS Houdini APIs now universally support the @property rule in modern browsers. This feature enhances CSS custom properties by allowing type definitions, fallback values, error handling, and advanced syntax for smoother property animations.
CSS Classes Considered Harmful
The use of CSS classes is criticized for limitations and conflicts. History of HTML/CSS evolution is discussed, proposing attributes over classes for more flexible styling in modern web development.
3 commentsRelated
HSL: An Intuitive Way to Represent Color in CSS
HSL in CSS simplifies color representation by breaking it into hue, saturation, and lightness components. It enables easy color manipulation and transparency adjustments, aiding dynamic effects without external tools or JavaScript.
Notes on implementing dark mode
The article explores refining dark mode implementation on websites using Tailwind for styling. It emphasizes a tri-state setting (dark, light, system default), local storage usage, and technical considerations for a seamless experience.
CSS Surprise Manga Lines
The article explains creating a manga-style surprise effect with CSS, focusing on replicating character facial lines. It suggests using GIF overlays for better performance than CSS animations. Published on July 2, 2024.
@property: Next-gen CSS variables now with universal browser support
The CSS Houdini APIs now universally support the @property rule in modern browsers. This feature enhances CSS custom properties by allowing type definitions, fallback values, error handling, and advanced syntax for smoother property animations.
CSS Classes Considered Harmful
The use of CSS classes is criticized for limitations and conflicts. History of HTML/CSS evolution is discussed, proposing attributes over classes for more flexible styling in modern web development.