#Development
PerformanCSS · “How CSS relates to web performance is a funny dance.” https://ilo.im/162uqq
_____
#CSS #CustomProperty #DOM #Rendering #Browser #WebPerf #WebDev #Frontend
ilo.imChris’ Corner: PerformanCSS – CodePen
Recent searches
Search options
#customproperty
0 posts0 participants0 posts today
#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
Bram.usCSS Custom Functions are coming … and they are going to be a game changer!
More from 
Bramus
#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
ilo.imSharing a Variable Across HTML, CSS, and JavaScript – Frontend Masters BoostSet a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.
#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
web.devBenchmarking the performance of CSS @property | Articles | web.devWhat impact does @property have on the performance of your 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
PiccalilliHow I build a button componentA button is arguably the most likely component to find itself in your codebase so I’m going to show you how I approach building one.
#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
frontendmasters.comSplit Effects with no Content Duplication – Frontend Masters BoostThe `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we'll expand on some existing ideas, improving them by not requiring any content duplication.
#Development #Techniques
CSS @property and the new style · Custom property definitions unlock countless opportunities https://ilo.im/15zzg2
_____
#ModernCSS #CustomProperty #Browser #WebDev #Frontend #CSS
ryanmulligan.devCSS @property and the New StyleAn exploration of the newly supported at-rule for explicitly defining and animating custom properties in 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
blog.kizu.devCaptured Custom PropertiesIn 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 #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
frontendmasters.comRelative Color Syntax — Basic Use Cases – Frontend Masters BoostSupport for the relative color syntax in CSS is across the board now (go interop!), so here we look at some basic (and still very useful) use cases, like applying alpha to a color you have on hand.
#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
kizu.devFit-to-Width Text: A New Technique
More from 
Roma Komarov
#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
www.kooslooijesteijn.netBeautiful shadows have beautiful colors | Koos LooijesteijnLet's make user interfaces truly colorful!
#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
css-tip.comGet the screen width & height without JavaScriptA few lines of CSS to get the screen width/height as integer 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
Modern CSS SolutionsProviding Type Definitions for CSS with @property | Modern CSS SolutionsWrite 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 #Releases
@property · Another exciting CSS feature lands in all major browsers https://ilo.im/15zhck
_____
#Baseline #Browser #BrowserSupport #WebDev #Frontend #CSS #CssHoudini #CustomProperty
web.dev@property: Next-gen CSS variables now with universal browser support | Blog | web.devSemantic custom properties with @property just reached Baseline newly available.
#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
Bram.usFeature detect CSS @property supportAwaiting browser support for at-rule(), here’s how you do it.
#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
tools.keithjgrant.comTheme Machine | Theme Machine
#Development #Explorations
Conditionals on Custom Properties · What if CSS had an ‘if’ function? https://ilo.im/15z7m8
_____
#Programming #Condition #WebDev #Frontend #CSS #CustomProperty
Geoff Graham · Conditionals on Custom Properties - Geoff GrahamSaw this from Lea being passed around yesterday:
#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
Smashing Magazine · Modern CSS Layouts: You Might Not Need A Framework For That — Smashing MagazineIt’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. Brecht De Ruyte demonstrates four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.