#cssfunctions
LightNews LightNews
inautilo.bsky.social
#Development #Outlooks
Media queries might look very different soon · Streamlining media queries with @function and if() ilo.im/16doju by Kevin Powell

_____
#ModernCSS #MediaQueries #CssFunctions #CssIf #Chrome #Browsers #WebDev #Frontend #CSS
Media queries might look very different soon.
Would love to know what you think about this :)
ilo.im
June 11, 2026 at 5:18 PM
inautilo.bsky.social
#Development #Explorations
Thoughts on native CSS mixins · What they might mean for front-end developers ilo.im/1693wl by Chris Coyier

_____
#CssMixins #CssFunctions #CustomProperties #Sass #W3C #WebStandards #Browser #WebDev #Frontend #CSS
Thoughts on Native CSS Mixins
There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine.
ilo.im
December 12, 2025 at 6:07 AM
websitestrategist.bsky.social
Save time and code smarter with this CSS functions cheat sheet!

#WebDev #FrontendDevelopment #CSSFunctions #CSS

dev.to/web_dev-usma...
Every CSS Function You Need – With Practical Examples
Here’s a complete cheat sheet of CSS functions, neatly organized by category for quick reference....
dev.to
April 5, 2025 at 10:49 AM
inautilo.bsky.social
#Development #Techniques
Fluid typography with progress() · Viewport-based type sizing without the pitfalls ilo.im/16e5ng by Matthew Morete

_____
#ModernCSS #Typography #FluidDesign #Viewport #CssFunctions #CssCalc #Browsers #WebDev #Frontend #CSS
Fluid Typography with progress()
With the `progress()` function in CSS we've got a new way to calculate the size for type based on the viewport without problems of the past.
ilo.im
June 29, 2026 at 9:56 PM
websitestrategist.bsky.social
Custom CSS Functions: Write Your Own Custom Functions in Pure CSS

Welcome to the future. Your stylesheets are about to get a lot smarter.

#FrontendDevelopment #WebDevelopment #CSS #HTML #CSSFunctions

pixicstudio.medium.com/custom-css-f...
Custom CSS Functions: Write Your Own Custom Functions in Pure CSS
CSS now lets you write actual functions. Not the built-in ones like calc() or clamp() I'm talking about your own custom functions that take…
pixicstudio.medium.com
January 6, 2026 at 6:18 AM
jay52-tx.bsky.social
CSS :is() :where() the Magic Happens — Revisits these two pseudo-class functions, looking at some use-cases, and how they can now be combined with :has() || #CSS #CSSFunctions #WebDev #FrontendDev bit.ly/4qFtxQ3
CSS :is() :where() the Magic Happens · Matthias Ott
Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.
bit.ly
November 6, 2025 at 2:02 PM
greynotgrey.bsky.social
Just bookmarking this one for my students:
"Functional Colors"

#css #cssFunctions #interface #uiux
How To Configure Application Color Schemes With CSS Custom Properties — Smashing Magazine
In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite use...
www.smashingmagazine.com
March 10, 2024 at 4:57 PM
pablolarah.bsky.social
🟠🟡 CSS Olympic Rings
by Amit Sheen
@amit_sheen
#css #webdev #cssAnimation #cssFunctions #relativecolor
css-tricks.com/css-olympic-...
Orange text on yellow background: CSS Olympic Rings
August 7, 2024 at 2:07 PM
pablolarah.bsky.social
🎙️ CSS Podcast Ep 82:
What's new in color functions
@Una and @argyleink provide a color update, covering changes to the specs and new functions.
#color #css #webdev #cssFunctions #podcast
youtu.be/H3bEyrv0RmU?...
White text: What's new in color & color functions Gradient text below: CSS Podcast. On left bottom, Una Kravets. On bottom right, Adam Argyle, Bith sat and laghing. Behind them a cyan glow on a blue background with colored geometric shapes.
June 27, 2024 at 11:09 PM
morfes.bsky.social
🚀 CSS @function lets you write custom functions for dynamic, reusable styles—like variables, but parameterized! Supported in Chrome 139+ only. It’s a game changer for design systems and utility CSS! #css #frontend #webdev #cssfunctions
Read more:
w3.org/TR/css-mixins-1/
una.im/5-css-functions/
/* Semi-transparent color using a custom function */ @function --opacity(--color, --opacity) { result: rgb(from var(--color) r g b / var(--opacity)); } /* CSS negation function */ @function --negate(--value) { result: calc(-1 * var(--value)); } .card { --color: rgb(108, 20, 20); background-color: --opacity(var(--color), 80%); height: 100px; width: 100px; --gap: 1em; padding: --negate(var(--gap)); }
August 14, 2025 at 4:12 AM