This is an example of what you should be able to do once the major browsers implement some seriously cool features in the CSS3 draft spec as of April, 2016:
- CSS variables, using the
--name: value
assignment andvar(--name)
accessor syntax. (Already implemented by Chrome, Firefox, and Webkit!) - CSS3 calc(), which gives us calculated values between different units, e.g. subtracting a value in
px
orem
from a percentage. (Partially implemented in Chrome, Firefox, and Safari.) - CSS3 attr(), which grants the function the ability to parse values in specific units in the form
attr(attr-name units)
. (Not yet implemented in any major browser.)
Together, these features would enable us to use HTML element attribute values as the basis for calculated values in CSS on a per-element basis, and define (then change) which property the values are applied to. This would open up possibilities for more data-driven design entirely in CSS, without the need for JavaScript.
Note: I've used the x-
prefix to denote HTML custom elements, which are a great way to simplify your markup, encapsulate your CSS, and extend the DOM element API via JavaScript. You could just as easily HTML5 elements or classes, though.
Note: this is a simplification that doesn't cover cases in which
--min
is less than zero.