#customproperty — Public Fediverse posts

#Development
PerformanCSS · “How CSS relates to web performance is a funny dance.” https://ilo.im/162uqq

_____
#CSS #CustomProperty #DOM #Rendering #Browser #WebPerf #WebDev #Frontend

#Development #Previews
CSS Custom Functions are coming · “They are going to be a game changer.” https://ilo.im/1629uu

_____
#ModernCSS #CustomFunction #CustomProperty #Chrome #Browser #WebDev #Frontend #CSS

#Development #Techniques
Sharing a variable across HTML, CSS, and JS · How to make use of a variable in three languages https://ilo.im/161qol

_____
#Grid #Layout #HTML #CSS #JavaScript #CustomProperty #CssGrid #WebDev #Frontend

#Development #Findings
Benchmarking the performance of CSS @property · Regular vs. registered vs. unregistered custom properties https://ilo.im/160as3

_____
#ModernCSS #Benchmark #CustomProperty #Browser #WebPerf #WebDev #Frontend #CSS

#Development #Approaches
How I build a button component · A set of button component instances with their variants https://ilo.im/160525

_____
#Button #Icon #Typography #Interactivity #SemanticHTML #WebDev #Frontend #HTML #CSS #CustomProperty

#Development #Techniques
CSS split effects without content duplication · A little ride through the land of fun split effects https://ilo.im/1602pn

_____
#ModernCSS #Effects #Slider #Image #Content #WebDev #Frontend #SVG #CSS #CustomProperty

#Development #Techniques
CSS @property and the new style · Custom property definitions unlock countless opportunities https://ilo.im/15zzg2

_____
#ModernCSS #CustomProperty #Browser #WebDev #Frontend #CSS

#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

#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

#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

#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

#Development #Techniques
Relative color syntax: basic use cases · “It’s an extremely powerful way to manipulate colors in CSS.” https://ilo.im/15zrws

_____
#Color #ColorPalette #BrowserSupport #Browser #WebDev #Frontend #CSS #CustomProperty

#Development #Techniques
External, styleable, and scalable SVGs · SVG embeddings that leave little to be desired https://ilo.im/15zn1a

_____
#VectorGraphic #SVG #Embedding #WebPage #WebDev #Frontend #HTML #CSS #CustomProperty

#Development #Techniques
Fit-to-width text: A new technique · How modern CSS helps to solve an ancient challenge https://ilo.im/15zk30

_____
#ModernCSS #Layout #Typography #WebDev #Frontend #ARIA #HTML #CSS #ContainerQuery #CustomProperty

#Development #Techniques
Beautiful shadows have beautiful colors · Shadows that also look great on a colored surface https://ilo.im/15zien

_____
#Shadow #Color #Background #WebDev #Frontend #CSS #CustomProperty

#Development #Techniques
Get the screen width/height without JavaScript · Powered by @property and trigonometric functions https://ilo.im/15zige

_____
#Device #Screen #Dimension #WebDev #Frontend #CSS #CustomProperty

#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

#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

#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

#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

#Development #Releases
@property · Another exciting CSS feature lands in all major browsers https://ilo.im/15zhck

_____
#Baseline #Browser #BrowserSupport #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Releases
@property · Another exciting CSS feature lands in all major browsers https://ilo.im/15zhck

_____
#Baseline #Browser #BrowserSupport #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Releases
@property · Another exciting CSS feature lands in all major browsers https://ilo.im/15zhck

_____
#Baseline #Browser #BrowserSupport #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Releases
@property · Another exciting CSS feature lands in all major browsers https://ilo.im/15zhck

_____
#Baseline #Browser #BrowserSupport #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#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 #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 #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 #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 #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz

_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS

#Development #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz

_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS

#Development #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz

_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS

#Development #Approaches
A structured approach to custom properties · How can we manage CSS variables effectively? https://ilo.im/15zcqz

_____
#CustomProperty #Typology #Naming #DesignToken #DesignSystem #WebDev #Frontend #CSS

#Development #Launches
Theme Machine · Pick your colors, build palette, get CSS variables https://ilo.im/15zcbd

_____
#Generator #Color #ColorPalette #OKLCH #Design #WebDesign #WebDev #Frontend #CSS #CustomProperty

#Development #Explorations
Conditionals on Custom Properties · What if CSS had an ‘if’ function? https://ilo.im/15z7m8

_____
#Programming #Condition #WebDev #Frontend #CSS #CustomProperty

#Development #Approaches
Modern CSS layouts · You might not need a framework for that https://ilo.im/15yynz

_____
#Layout #Framework #WebDev #Frontend #CSS #UtilityClass #CssGrid #CssFlexbox #CustomProperty #CssCalc

#Development #Techniques
The modern guide for making CSS shapes · Shapes with the smallest and most flexible code possible https://ilo.im/15yu2g

_____
#Shape #Tab #Tooltip #Clipping #Masking #WebDev #Frontend #HTML #CSS #CustomProperty

Animating a custom property* that the gradients used for the effect depend on can also produce cool effects, like in https://codepen.io/thebabydino/pen/wvRVNgv - also an entry for this week's #CodePenChallenge😎

And a solution to https://mastodon.social/@anatudor/111261576456520013

*not yet in Firefox stable, only in Nightly https://mastodon.social/@anatudor/112157049928865915

#css #cssVariables #customProperty #filter #cssFilter #blending #blendMode #cssTricks #code #coding #frontend #webDev #webDevelopment #CodePen

#Development #Approaches
Time-based CSS animations · The power of the time-based way of animation https://ilo.im/15yrzw

_____
#Animation #Easing #Math #Time #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Approaches
Time-based CSS animations · The power of the time-based way of animation https://ilo.im/15yrzw

_____
#Animation #Easing #Math #Time #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Approaches
Time-based CSS animations · The power of the time-based way of animation https://ilo.im/15yrzw

_____
#Animation #Easing #Math #Time #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Approaches
Time-based CSS animations · The power of the time-based way of animation https://ilo.im/15yrzw

_____
#Animation #Easing #Math #Time #WebDev #Frontend #CSS #CssHoudini #CustomProperty

#Development #Techniques
Can you detect overflow with CSS? · Yes, you can, thanks to scroll driven animations https://ilo.im/15ypaq

_____
#WebDev #Frontend #CSS #ScrollDrivenAnimation #CustomProperty

#Development #Techniques
Can you detect overflow with CSS? · Yes, you can, thanks to scroll driven animations https://ilo.im/15ypaq

_____
#WebDev #Frontend #CSS #ScrollDrivenAnimation #CustomProperty

#Development #Techniques
Can you detect overflow with CSS? · Yes, you can, thanks to scroll driven animations https://ilo.im/15ypaq

_____
#WebDev #Frontend #CSS #ScrollDrivenAnimation #CustomProperty

#Development #Techniques
Can you detect overflow with CSS? · Yes, you can, thanks to scroll driven animations https://ilo.im/15ypaq

_____
#WebDev #Frontend #CSS #ScrollDrivenAnimation #CustomProperty

#Development #Techniques
Write better CSS with modern CSS · New CSS features can help you streamline your code https://ilo.im/15ynzs

_____
#ModernCSS #Code #Optimization #WebDev #Frontend #CSS #CssNesting #CustomProperty #MediaQuery

#Development #Launches
CSS Shape · A collection of easily customizable CSS-only shapes https://ilo.im/15yn9c

_____
#Shape #Gradient #Color #ModernCSS #WebDev #Frontend #HTML #CSS #CustomProperty

#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

Here's the #SVG #filter version of the mono emoji demo on #CodePen https://codepen.io/thebabydino/pen/YzgwErb - shows both this `feColorMatrix` approach and a `feFlood` one which allows for animation... via a custom property, which is now possible in @FirefoxNightly too! https://mastodon.social/@anatudor/112157049928865915

Goes without saying, don't do this infinite animation in practice, a simple transition on `:hover`/ `:focus` is enough.

#svgFilter #cssVariables #customProperty #Firefox #code #coding #frontend #webDev #webDevelopment

#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