


The What If Machine: Bringing the 'Iffy' Future of CSS into the Present
Mar 07, 2025 pm 05:12 PMThe CSS working group decided to develop inline conditional statements, which sparked heated discussions in the comments section. Some developers are excited about this, while others are concerned that this will make the future of CSS uncertain. Will this slide into a hellish situation filled with developers who abuse CSS, who implement too much logic where it should be a style language? Won't. Even if some people do that, no mainstream blog posts the nonsense of the hypothetical madman who adds crazy logic to CSS for their own purposes. Therefore, we know that the future of CSS is safe.
The end of the world? It's over long ago
The arguments in this article further confirm that inline conditional statements may not be a harbinger of the end of civilization: I think we can now use style queries to achieve the same functionality, which are getting quite good browser support.
Lea's proposal is more like syntactic sugar, sometimes convenient and allows for a cleaner markup. Any panic remarks about inline conditional statements that ruin CSS are equivalent to exaggerating the addition of ternary operators to languages ??that already support if statements.
In fact, Lea said of the syntax she proposed: "Just like the ternary operator in JS, it may also be more ergonomic for situations where only a small part of the value changes." She also mentioned that CSS has always been conditional. It is not that the conditional statements in CSS are forbidden, but that CSS is not always good at handling it.
I want a conditional Oompa Loompa!
So too. There are many others, as evidenced by Lea's carefully organized list of amazing complex tricks, people have discovered ways to simulate inline conditional statements using current CSS. Some of these tips are so complicated that I'm still not sure if I understand them, but their names are really cool. Lea concluded: "If you know any other techniques, please let me know so I can add them."
Hmm...I definitely missed some questions about these tips to solve. I noticed that Lea had a PhD and I was an idiot. So I scroll up and reread, but I can't stop thinking: Are these people trying to avoid adding extra divs around their parts and using style queries?
It's fair if people want to avoid unnecessary elements in the DOM, but Lea's list of tips shows that the alternatives are very complex, so it's worth trying how far apart a style query with wrapping divs can take us.
Convincing Examples
Lea's example revolves around setting a "variant" property on the prompt box and points out that we can almost implement what she wants with style query, but the syntax of this assumption is unfortunately invalid :
<code>.callout { @container (style(--variant: success)) { border-color: var(--color-success-30); background-color: var(--color-success-95); &::before { content: var(--icon-success); color: var(--color-success-05); } } }</code>
She wants to style the container itself and its child elements according to --variant. Now, in this concrete example, I can use z-index to modify the ::after pseudo-element to create the illusion that it is a container. Then I can set its borders and background. Unfortunately, this solution is as fragile as I do, in this other example, Lea wants to set the flex-flow of the container based on the variant. My pseudo-element solution is not good enough in this case.
Remember, Lea's proposal was incorporated into the CSS norm, just like the birthday gifts the universe gave her, so it would be unfair to try to replace her gifts with those cheap fake containers I bought on Temu. She deserves a real container.
Let's try again.
Using the wrapper
The Lea proposal's comment mentions type grinding, but calls it "a very (I say again, very) complex but effective" way to solve the problem that inline conditional statements are designed to solve. This is not fair. Type grinding took me a little while to understand, but I think it's easier to understand than other tips and has fewer drawbacks. Nevertheless, this kind of code in production can be boring when you look at the examples. So let's grit our teeth and try to build an alternative version of Lea's flexbox variant example. My version does not use type grinding or any tricks, but uses "old-fashioned" (not so old-fashioned) style queries as well as wrapping divs to solve the problem that we can't style the container itself using style queries.
Packaging Comparison Type Grinding
Compare Lea's example with my version of the code to help us understand the differences in complexity.
The following are two versions of CSS:
The following are two versions of the tag:
Therefore, simpler CSS and slightly more markup. Maybe we found the direction.
The reason I like style queries is that Lea's proposal uses the style() function, so if her proposal is adopted by the browser, it seems feasible to migrate the style query to an inline conditional statement and remove the wrapper. If I don't mention that migrating this kind of code might be a viable use case for AI, this post is not the 2025 article. Maybe the AI ??won't be that bad when we get inline conditional statements.
But we were a little off topic. Have you tried adopting some cool JavaScript frameworks that look elegant in the To-Do example? If anything, you will know that a solution that looks compelling in simple examples may challenge your will to survive in real examples. So let's see how effective it works with style queries in more realistic examples.
Seeking verification
Combine my above example with MDN's example on HTML5 validation and Seth Jeffery's cool demonstration of transforming pure CSS icons, and then type them all into the "What If" machine for the following demonstration.
If you make the form valid, all changes made to the prompt box are based on a custom property. This property is never directly used in the CSS property value of the prompt box, but it controls the style query that sets the border color, icon, background color, and content of the prompt box. We set the --variant property at the .callout-wrapper level. I set it up using CSS as follows:
<code>.callout { @container (style(--variant: success)) { border-color: var(--color-success-30); background-color: var(--color-success-95); &::before { content: var(--icon-success); color: var(--color-success-05); } } }</code>
However, this variable can be set by inline styles in JavaScript or HTML, just like Lea's example. Form validation is just my way to make the demo more interactive to show the prompt box that can be changed dynamically based on --variant.
Summary
I write an article against the techniques of bending CSS to our will, which doesn't fit my style, and I'm totally in favor of the "deception" language to do what we want to do. However, using wrappers and style queries may be the easiest way to get support for inline conditional statements. If we want to feel more like living in the future, we can use the above approach as the basis for polyfills of inline conditional statements or using preprocessor magic like Parcel plugin or PostCSS plugin – but for this compromise, my trigger finger will always crave the Delete key. Lea admits, “If you can do something with style queries, use style queries as much as you like – they are almost certainly a better solution.”
Through the experiments in this article, I have convinced myself that style query is still a good choice even in Lea's case - but I'm still looking forward to inline conditional statements. Meanwhile, style queries are easier to understand at least compared to other known solutions. Ironically, I agree with the comments that question the requirement of inline conditional statements, not because it will ruin CSS, but because I believe we can now implement Lea with modern CSS, without any tricks. So, we may not need inline conditional statements, but they allow us to write more readable, more concise code. If you can think of some examples of complexity barriers that you can encounter using style queries instead of inline conditional statements, please let me know in the comments section.
The above is the detailed content of The What If Machine: Bringing the 'Iffy' Future of CSS into the Present. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.

Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.

Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

The scope of CSS custom properties depends on the context of their declaration, global variables are usually defined in :root, while local variables are defined within a specific selector for componentization and isolation of styles. For example, variables defined in the .card class are only available for elements that match the class and their children. Best practices include: 1. Use: root to define global variables such as topic color; 2. Define local variables inside the component to implement encapsulation; 3. Avoid repeatedly declaring the same variable; 4. Pay attention to the coverage problems that may be caused by selector specificity. Additionally, CSS variables are case sensitive and should be defined before use to avoid errors. If the variable is undefined or the reference fails, the fallback value or default value initial will be used. Debug can be done through the browser developer

ThefrunitinCSSGriddistributesavailablespaceproportionally.1.Itworksbydividingspacebasedonthesumoffrvalues,e.g.,1fr2frgivesone-thirdandtwo-thirds.2.Itenablesflexiblelayouts,avoidsmanualcalculations,andsupportsresponsivedesign.3.Commonusesincludeequal-

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

Yes, you can use Flexbox in CSSGrid items. The specific approach is to first divide the page structure with Grid and set the subcontainer into a Grid cell as a Flex container to achieve more fine alignment and arrangement; for example, nest a div with display:flex style in HTML; the benefits of doing this include hierarchical layout, easier responsive design, and more friendly component development; it is necessary to note that the display attribute only affects direct child elements, avoids excessive nesting, and considers the compatibility issues of old browsers.
