I haven't used style queries much, but just gave them a spin and got an idea (that I've just tested & works) about how we can have ranges in style queries right now. 🥳

That is, red background if --k <= 20, orange background if 20 < --k <= 40 and so on...

#CSS #styleQueries #cssVariables #code #coding #frontend #containerQueries #web #dev #webDev #webDevelopment

#Development #Outlooks
A future of themes · What to expect from CSS inline if() for theming? https://ilo.im/162ftx

_____
#ModernCSS #CssIf #StyleQueries #Chrome #Browser #WebDev #Frontend #CSS

🟠 Querying the Color Scheme

by Roma Komarov

@kizu

#StyleQueries #ColorScheme #CSSVariables #css #webdev

https://blog.kizu.dev/querying-the-color-scheme/

As the discussion around container queries, especially style queries, continues to grow, I've found the real-world use cases interesting

This inspired me to take this further and look at how this would work with a mixed-component approach.

https://codepen.io/dutchcelt/pen/YzbYyPW?editors=0100

Using style queries to pass down a given context and data attributes for the DOM to configure them from the outside. (Note the use of javascript setting the disqualified player)

#css #stylequeries

🟢 Alternating Style Queries
by Roma Komarov @kizu
#css #webdev #StyleQueries #ContainerQueries

https://kizu.dev/alternating-style-queries/

🟢🔴 Layered Toggles: Optional CSS Mixins
by Roma Komarov @kizu @kizmarh
#CSSLayers #CSSVariables #CSSLogic #StyleQueries #Experiment #Practical #CSS

https://kizu.dev/layered-toggles/

🔴🔵 Add Superpowers to Your CSS Variables with Style Queries
by Jared White @jaredwhite
@jaredcwhite
#css #CSS #cariables #stylequeries

https://thathtml.blog/2024/03/superpowered-container-style-queries/

#Development #Techniques
A future of themes with CSS Container Style Queries · Style Queries will make website theming much more convenient https://ilo.im/14nd2z

_____
#Theming #Website #WebDesign #WebDev #Frontend #ContainerQueries #StyleQueries #LightMode #DarkMode

#styleQueries are a pretty interesting thing. You can test for existing styles on parents. This opens huge possibilities like defining css variables as a sort of boolean or choice value.

Learn all in this great @chrome article: https://developer.chrome.com/blog/style-queries

#Development #Reviews
Writing CSS In 2023 · Is it any different than a few years ago? https://ilo.im/145tp0

_____
#WebDevelopment #WebDev #Frontend #CSS #ContainerQueries #StyleQueries #CascadeLayers #CssNesting #CssIs #CssWhere #DynamicViewportUnits #ColorSpaces #ColorFunctionSyntax #MediaQueryRangeSyntax #UserPreferences

#Development #Previews
Future CSS: State Container Queries · The Chromium team is experimenting with a new type of query https://ilo.im/13u1nb

_____
#StateContainerQueries #Chrome #Browser #WebDevelopment #WebDev #Frontend #CSS #CustomProperties #CssVariables #StyleQueries #ChromeCanary

🔵🟣 Simplified Dark Mode With Style Queries
by Stephanie Eckles @5t3ph
#webdev #darkmode #StyleQueries

https://thinkdobecreate.com/articles/simplified-dark-mode-with-style-queries/

🔴🔵 Getting Started with Style Queries
Una Kravets @Una@front-end.social @Una
at @ChromiumDev
#stylequeries #css #webdev

https://developer.chrome.com/en/blog/style-queries/