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.
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.
#Development #Techniques
Captured custom properties · A noteworthy naming pattern for CSS variables https://ilo.im/15zz5d
_____
#CustomProperty #Naming #FeatureDetection #TypeLimitation #ContainerQuery #StyleQuery #WebDev #Frontend #CSS
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
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.
#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
#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
#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
#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
#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
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
#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