We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
In CSS, we often use layered properties. Example:
box-shadow: 0 0 10px black, 0 0 20px white; text-shadow: 0 0 10px black, 0 0 20px white; background: url(cat.png), url(dog.png), linear-gradient(to bottom, red 0%, blue 100%); transition: opacity 0.5s, height 1s, background-color 2s;
I propose composite properties. We are adding a plus sign "+". Example:
box-shadow: 0 0 10px black; box-shadow+: 0 0 20px white; text-shadow: 0 0 10px black; text-shadow+: 0 0 20px white; background: url(cat.png); background+: url(dog.png); background+: linear-gradient(to bottom, red 0%, blue 100%); transition: opacity 0.5s; transition+: height 1s; transition+: background-color 2s;
This will allow you to structure styles by meaning.
button{ /* Transition Width */ width: 50px; transition: width 0.5s; /* Transition box-shadow */ box-shadow: 0 0 10px black; transition+: box-shadow 0.5s; /* Transition background-color */ background-color: red; transition+: background-color 1s; }
You can consider the syntax with a plus sign "+" at the very end .
button{ transition: width 0.5s; transition: box-shadow 0.5s +; transition: background-color 1s +; }
Optionally, you can consider specifying the order of the member after the plus sign "+"
button{ transition: width 0.5s; transition: background-color 1s +2; transition: box-shadow 0.5s +1; }
This is the equivalent of
button{ transition: width 0.5s, box-shadow 0.5s, background-color 1s; }
The text was updated successfully, but these errors were encountered:
This idea (often called "additive cascade"; you could search www-style archives for that term) has been discussed before, in places such as: https://lists.w3.org/Archives/Public/www-style/1999Oct/0025.html https://lists.w3.org/Archives/Public/www-style/2012Apr/thread.html#msg231 #1594
I think this is probably a duplicate of #1594, although there's a recent comment from @tabatkins suggesting otherwise.
Sorry, something went wrong.
Closing as duplicate of #1594.
No branches or pull requests
In CSS, we often use layered properties. Example:
I propose composite properties. We are adding a plus sign "+". Example:
This will allow you to structure styles by meaning.
You can consider the syntax with a plus sign "+" at the very end .
Optionally, you can consider specifying the order of the member after the plus sign "+"
This is the equivalent of
The text was updated successfully, but these errors were encountered: