

Idea: When (if) statements in CSS  - AntonTrollback
http://hastebin.com/fuyuniweco.rb

======
ars
This will allow never ending loops (two of these can @when each other) - css
is not an imperative language that works from top to bottom, it's more of a
state language where certain items override other.

If you add this, the language will become turing complete, and then you'll
have people disabling css just like they disable javascript.

If you want this, you'll need to find a syntax that makes it impossible for
css to become turing complete.

~~~
schmolzer
I don't really see why this syntax can't work as CSS does today? The last
style with equal "weight". This idea can be implemented with the same idea.

~~~
ars
The weight rules applies to any specific element on the page, but this is
different.

You can make one rule depend on another, and then that rules depends on the
first. This can cause a loop.

You could ignore one I guess, but how do you decide which? Do you use css
order? Do you use the order of the page? What is there is an inline style?
What is two elements have the style?

It's better not to make a syntax that can get you into trouble like that.

------
jenius
You can already do things like this with stylus
(<http://learnboost.github.com/stylus/>). As far as I can see, if you are
thinking at this level with css you should be using a preprocessor for sure. I
can't remember the last project I used vanilla css in.

Here's a totally silly example, but you can see the power:

    
    
        color-if-hidden(color)
          if @display == none
            color: color
    
        .hello
          display: none
          color-if-hidden(red)

~~~
yuchi
It's true, but you're not considering cascade rules, of course. How do you
know that another selector has `display: inline`ed that element?

EDIT: typo

------
jswinghammer
This is a lot like CSS expressions right?

If they weren't horrible for performance and not standard they'd probably be
fairly cool:

[http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_perf...](http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_6/)

------
yuchi
Ideologic errors apart (which are epic) the feature you propose will anyway be
not usable.

In a `@if` what does `li` means related to the `li` inside the body?
Absolutely nothing.

What could seriously be interesting __instead __is a property value selector
similar to attribute selector. Something similar to `[@color != red]`

------
orlandu63
This is a horrible idea.

------
alexobjelean
Probably a better idea would be to decide the appropriate content based on
various criteria on the server-side. Otherwise the stylesheet will become a
nightmare to maintain and would contain a lot of inappropriate logic which
doesn't belong to css.

------
vinspee
Check out SASS's control directives. They do everything you want.

<http://thesassway.com/intermediate/if-for-each-while>

------
rpwverheij
take a look at LESS CSS. It does exactly this and more. <http://lesscss.org/>

~~~
CWIZO
I don't think it does. What OP is proposing would require to modify the CSS
engine to update the style of elements when something changes (hide some
element when some other suddenly (via JS for instance) becomes visible).
LESS/SASS does not give you that. Yes you have "if" clauses, but they are
evaluated based on some fixed state when "compiling" to CSS.

------
bcardarella
CSS rendering engines will need to get much faster before anything like this
wouldn't feel glitchy or pop-in.

------
piparvecis
Why would you want to use CSS for something that seems like a job for
JavaScript?

------
francoisdevlin
Looks cool. My one thought is replace @when with @if, to make life easier for
every programmer ever.

~~~
zorbo
Depends on if the OP means this should be event-driven/dynamic or not. The
"when" seems to imply that it should be. When .widget becomes larger than
300px (screen resize/flip, for instance), then the font-size should become
larger.

If that is OP's intention, then I feel @when is more appropriate than @if

------
premist
looks like SASS or LESS.

------
salmanapk
Non-sense. This is relevant in JS not CSS.

