@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.
Read original article
The @property rule, a part of the CSS Houdini APIs, is now universally supported across modern browsers as of July 9, 2024. This feature enhances control and flexibility for CSS custom properties, also known as CSS variables. It allows for defining types for custom properties, setting fallback values to prevent style disappearance, and improving error handling within CSS. By registering CSS custom properties with @property, users can create advanced custom properties with detailed syntax and inheritance settings. This approach ensures that properties contain expected values, preventing failures in stylesheets. Additionally, @property enables smooth animation of properties like gradients, previously challenging to transition, by providing syntactic meaning to variables. This advancement in CSS empowers developers to create more dynamic and expressive stylesheets.
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.
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.
CSS Can Get You in Jail – Browser renderers, now deemed criminals
The blog post discusses the legal risks of using CSS for numbering in legal documents on websites. It advises hardcoding numbers for accuracy and legal compliance, prioritizing precision over aesthetics.
Fluid Breakout Layout with CSS Grid
Nathan Long, a Senior UI Developer, explains creating a fluid breakout layout with CSS Grid. It accommodates various component widths without media queries, using grid areas and CSS variables for scalability.
HTML5 Differences from HTML4 (2014)
The W3C Working Group's "HTML5 Differences from HTML4" document outlines changes in syntax, elements, APIs, and compatibility. HTML5 introduces new elements, MathML, SVG support, and emphasizes backward compatibility for modern web development.
5 comments .card {
border-radius: 1rem;
max-width: 36ch;
padding: 2rem;
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%
), radial-gradient(
farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%
);
background-blend-mode: color-burn;
animation: animate-color-1 8s infinite linear alternate, 4s animate-color-2 1s infinite linear alternate;
}I’ve been around a while, I understand that English is the lingua-franca of compiled languages … but CSS seems like a singular travesty.. other instructions in the “radial-gradient” function are “animate”, “infinite”, “alternate”.
I feel like CSS deserves to be internationalized, as it stands this group is creating a dialect that only English speakers can understand with relatively low cognitive load.
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.
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.
CSS Can Get You in Jail – Browser renderers, now deemed criminals
The blog post discusses the legal risks of using CSS for numbering in legal documents on websites. It advises hardcoding numbers for accuracy and legal compliance, prioritizing precision over aesthetics.
Fluid Breakout Layout with CSS Grid
Nathan Long, a Senior UI Developer, explains creating a fluid breakout layout with CSS Grid. It accommodates various component widths without media queries, using grid areas and CSS variables for scalability.
HTML5 Differences from HTML4 (2014)
The W3C Working Group's "HTML5 Differences from HTML4" document outlines changes in syntax, elements, APIs, and compatibility. HTML5 introduces new elements, MathML, SVG support, and emphasizes backward compatibility for modern web development.