Elusive Style

Molly’s has a ‘I wish I had…’ post and it reminded me of once wishing I had something like ‘invert’ just like the CSS values ‘auto’ and ‘inherit’. When I change a background colour I’d like not to have go and change the text colour as well. Usually it’s better to tweak the colour to get the best result but in some cases it doesn’t require such fine tuning.

In fact ‘invert’ might work better as property instead of as a value. This would be an override property, something we don’t have and it’s something we do a lot in CSS.

Margins could have inverted values based on padding values of its parent. I bit like margin collapse on steroids.

<div class="panel"> 
    <h2>heading</h2>
</div>
.panel {
    padding: 12px 18px 14px;
}
h2 { 
    invert: padding-margin;
}

Inverting a red background colour would make it green. Text colour could be something similar. Dark text would become light.

<div class="panel"> 
    <h2>heading</h2>
</div>

h2 { 
    color: white;
    background-color: DarkBlue;
}
.panel h2 { 
    invert: text background;
}

Floats would switch from left to right, the same for text alignment. Gradients could invert either colour or direction. Masks could also benefit by inverting the knockout. Too complex? Maybe, but it’s supposed to be a fantasy.

Next entry: $CSS
Previous entry: Plus one