Re: Adding functions in CSS (CSS4?)

Nicolas Duclos skrev:
> Hi css team,
>
> What is lacking the most in CSS is the ability to do some "easy"
> animations with CSS. Instead we need to use complex JavaScript to make
> something. I found some great stuffs yesterday made with SCSS :
> http://sass-lang.com/guide It's a kind of better CSS, but because it's
> not supported by browser, it's a bit useless, but I'm sure that it
> could be really great to have a new CSS4 with that.
>
> I really like the fact that instead of writing
> Syntax
> |nav { ul { margin: 0; padding: 0; list-style: none; } li { display:
> inline-block; } a { display: block; padding: 6px 12px;
> text-decoration: none; } } |
>
>
>       Sass Syntax
>
> |nav ul margin: 0 padding: 0 list-style: none li display: inline-block
> a display: block padding: 6px 12px text-decoration: none |
> You'll notice that the |ul|, |li|, and |a| selectors are nested inside
> the |nav| selector. This is a great way to organize your CSS and make
> it more readable. When you generate the CSS you'll get something
> like this:
> |nav ul { margin: 0; padding: 0; list-style: none; } nav li { display:
> inline-block; } nav a { display: block; padding: 6px 12px;
> text-decoration: none; }|
>
> We should also be able to put variable and some function inside CSS.
> It could allow us to make easy animation or drop down menu.
>
> *_New events :_*
> *_
> _*
> *:onclick* Add the possibility to change or animate something when you
> click on the class or id.
> *:onpageload* Instead of using complexe javascript to make text appear
> on the page. Could also be a possibility to add a loading screen?
> *:pageload:X s* Could allow to start an animation X seconds after the
> page loaded
> *:offscreen* What happen when item is offscreen?
> *:onscreen* What happen when item is onscreen? Could allow to make
> text appear/disappear if it's offscreen or onscreen or make something
> move.*
> :Scrolldown* Could be great if you want something appear or disappear
> on scrolldown only
> *:Scrollup *Could be great for navbar if you want it appear fixed only
> when you scroll up.
> *:position-top:Xpx* : Could be great if you want something appear
> after you scroll down X pixels from top. Maybe fixed menu after
> scrolling 100vh or 200px?
>
> *_New tags :_*
> *
> *
> *<spoiler></spoiler>*
> All the text inside the spoiler tag will be hidden behind a black box
> (default), but can be modified with new CSS.
> spoiler {
> spoiler-color: The color of the block. Possibility to add blurry box
> to make the hidden text blurry with blur(0 to 1);
> border-radius : To change the radius of the extremities.
> boder : possibility to add a border to the spoiler block.
> }
> spoiler:hover { Show hidden text when you are hover the spoiler tag.
> Hide the text again when not hover.
> background-color :
> color :
> font-style:
> }
> spoiler:onclick { Show hidden text when you click on spoiler tag.
> background-color :
> color :
> font-style:
> }
>
>
Lets start with the terminology. What you call "tags" is called
elements. Css does not define any elements. That's delegated to html and
other such standards. You are asking the wrong standard.

Second, what you present as events should be called pseudo classes. I am
not qualified to judge your ideas in that category.

Received on Thursday, 11 February 2016 15:04:45 UTC