Nouveau en CSS :

CSS peut désormais changer dynamiquement une propriété selon une custom property.

Pas besoin de JS. Fonction expérimentale, testée sous Chrome Canary.

📹 https://youtube.com/shorts/GuPirEbYoJo

#CSS #frontend #moderncss #stylequery #webdev

Captured Custom Properties

In a few of my latest CSS experiments and articles, I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. This pattern allows us to create a set of generic custom properties, covering a wide set of use cases for computing and storing their values.

#Development
Type definitions for CSS with @property · How to write safer, more resilient CSS custom properties https://ilo.im/15zjxy

_____
#TypedVariable #TypeDefinition #CustomProperty #ProgressiveEnhancement #DesignSystem #WebDev #Frontend #CSS #StyleQuery #JavaScript

Providing Type Definitions for CSS with @property | Modern CSS Solutions

Write safer CSS using `@property`, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how `@property` features improve the resilience of custom property definitions.

Modern CSS Solutions

#Development #Techniques
Feature detect CSS @property support · Testing browser support for custom property definitions https://ilo.im/15zegz

_____
#FeatureDetection #Browser #BrowserSupport #WebDev #Frontend #CSS #CustomProperty #StyleQuery #SpaceToggle #Workaround

Feature detect CSS @property support

Awaiting browser support for at-rule(), here’s how you do it.

Bram.us

#Development #Guides
CSS Container Queries · A contemporary approach to responsive web design https://ilo.im/15z5q7

_____
#Browser #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS #MediaQuery #ContainerQuery #StyleQuery

CSS Container Queries | CSS-Tricks

The main idea of CSS Container Queries is to register an element as a “container” and apply styles to other elements when the container element meets certain conditions.

CSS-Tricks

#Development #Techniques
Layered toggles: optional CSS mixins · “The next evolution of space and cyclic toggles.” https://ilo.im/15yio2

_____
#Toggle #WebDev #CSS #CssMixin #CustomProperty #StyleQuery

Layered Toggles: Optional CSS Mixins

In this article, I am sharing the next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them.

#Development #Techniques
Add superpowers to your CSS variables · “We’re on the verge of yet another CSS revolution.” https://ilo.im/15y7gy

_____
#Browser #ProgressiveEnhancement #WebDev #Frontend #CSS #MediaQuery #StyleQuery #CustomProperty #CssVariable

Add Superpowers to Your CSS Variables with Style Queries

We’re on the verge of yet another CSS revolution. Say hello to themes!

That HTML Blog

#Development #Techniques
CSS-based state management · The power and versatility of CSS custom properties https://ilo.im/15xiam

_____
#WebDev #Frontend #CSS #JavaScript #CustomProperty #CssVariable #StyleQuery

CSS-based state management

Use CSS for storing context-like JavaScript state.

If you've looked into using #CSS style queries, you may have stumbled onto this article by @Una (it's the first search result) https://developer.chrome.com/blog/style-queries/

One thing that stood out to me was a note about not having range queries yet.

Well... maybe we do! min() and max() to the rescue!

#CSSvariables #styleQuery #containerQuery #coding #frontend #webDev #webDevelopment

Getting Started with Style Queries - Chrome for Developers

Style queries allow developers to query a parent element's style values using the @container rule. In Chrome 111, style queries for CSS custom properties are landing stable. Learn how to get started with them.

Chrome for Developers

#Development #Techniques
Rebuilding a comment component with modern CSS · How to craft a state-of-the-art CSS comment section https://ilo.im/13js3h

_____
#Comments #WebDevelopment #WebDev #Frontend #CSS #CssSubgrid #ContainerQuery #StyleQuery #LogicalProperty #Layout #TextAlignments #Avatars #Emoji

Rebuilding a comment component with modern CSS - Ahmad Shadeed

Building a comment component with modern CSS like flexbox, logical properites, :has, style queries, and subgrid.

Ahmad Shadeed Blog