https://github.com/mitranim/css-ideas
Ideas for useful features missing from the CSS spec
https://github.com/mitranim/css-ideas
Last synced: 3 months ago
JSON representation
Ideas for useful features missing from the CSS spec
- Host: GitHub
- URL: https://github.com/mitranim/css-ideas
- Owner: mitranim
- License: mit
- Created: 2015-06-28T10:14:42.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-06-28T10:39:46.000Z (over 10 years ago)
- Last Synced: 2025-02-24T06:44:38.264Z (11 months ago)
- Size: 176 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Description
Ideas for useful features missing from the CSS spec.
## Quicklinks
* [`as-if`](#as-if-property)
* [`!default`](#default-rule)
## `as-if` property
Makes the matched element look _as if_ it also matched the selectors listed
in the property.
Speaking in procedural terms, the rule adds the listed selectors to the currently matched
selector, then recalculates the element's styles. This has the potential to make
several passes, adding more selectors with each pass. User agents will need to
guard against infinite recursion by ignoring duplicates.
Borrowing an example from below:
```css
input[type=checkbox]: checked + label {
as-if: [theme=primary] .active;
}
```
### Example
Suppose we have a colour theme defined as follows.
```css
[theme=primary] {
color: blue;
}
[theme=primary] .active {
color: darkblue;
}
```
We might use it like so:
```html
```
Suppose we want a pair of `input[type=checkbox] + label` to take advantage of
the theme, so that `:checked` makes the label use the already defined `.active`
state.
```html
I'm selected
I'm not
```
Currently, you have to add an exception to the theme definition, duplicating
the colour:
```css
[theme=primary] {
input[type=checkbox]:checked + label {
color: darkblue;
}
}
```
With the proposal, you can make it behave _as if_ it matched the given selector
combination:
```css
input[type=checkbox]: checked + label {
as-if: [theme=primary] .active;
}
```
This way, you can reuse rules in cases where duplication is otherwise
unavoidable.
### Considerations
* Additive by nature: additional declarations don't override the previous ones.
* Adding `!important` results in a "final" declaration that prevents further
additions, but doesn't remove the selectors previously added to the list.
## `!default` rule
Similar to the `!default` feature in Sass. Applies the property if there isn't
an existing rule, or if it's set to `initial`. Mutually exclusive with
`!important`.
### Example
Suppose we have a rule that only works with elements that don't have their
`display` property set to `inline`:
```css
.wide {
width: 100%;
height: 2em;
}
```
To apply this to an element in HTML, we need to know its `display` property
in advance. Blindly adding a declaration like `display: block` would break
elements with a different display property, like `display: flex`:
```html
...
...
.block {display: block}
```
With the proposal, we can safely specify the default without breaking elements
with their own rules:
```css
.wide {
width: 100%;
height: 2em;
display: block !default;
}
```
```html
...
...
```