Is there a way to put relationships/contraints into CSS?

Question

In every design tool or art principle I've heard of, relationships are a central theme. By relationships I mean the thing you can do in Adobe Illustrator to specify that the height of one shape is equal to half the height of another. You cannot express this information in CSS. CSS hard-codes all values. Using a language like LESS that allows variables and arithmetic you can get closer to relationships but it's still a CSS variant.

This inability in my mind is the biggest problem with CSS. CSS is supposed to be a language that describes the visual component of a Web page but it ignores relationships and contraints, ideas that are at the core of art.

How possible is it to imagine a new Web design language that can express relationships and contraints that can be implemented in JavaScript using the current CSS properties?

Answer 1

Are you looking for something like CSS Scripting Layout Specification or Constraint Cascading Style Sheets for the Web? Both are still in the research/prototype stage though.

The CSS Scripting Layout Specification has been implemented as a Google Chrome plugin, it seems.

Answer 2

There was also a JavaScript Style Sheets spec from Netscape back in 1996, http://en.wikipedia.org/wiki/JavaScript_Style_Sheets.

The CSS Scripting Layout Specification is not a Chrome plugin. What is provided is a proof of concept. Many people are not convinced that JavaScript can perform well enough for CSS layout due to Microsoft's CSS Expressions implementation that had severe performance issues.

It is limited to layout as this seems to be the biggest complaint with CSS. It's aim is to give power users the ability to do nearly anything they want, but at the same time make it such that layouts can be encapsulated, referenced, and reused by novice users.

Answer 3

Directly, this isn't something you can do in pure CSS without causing more trouble than helping due to varying amounts of support from different browsers.

Indirectly,frameworks like Less or by running your CSS through a server-side script before sending it to the client are your best bet but, like you said, not ideal.

In Javascript, using jQuery to set one element's height property based on another's outerHeight is probably the start of a decent solution, but I can't find any code examples people have written to solve your specific problem. I'd imagine it might be something like this, though:

var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());

That would set the height of one based on the height + border + padding of the other. In order to be more robust, there's more that needs to go into it than that, but it's the beginning of a solution.

Answer 4

You may want to take a look at Clever CSS, a pythonic approach to writing CSS. It includes variables, arithmetic, you can even do operations on colors.

I'm also looking after one such approach to writing styles, something that is a higher level over CSS. But one of the big problems, I believe, will be the fact that CSS style sheets are often written by designers and not programmers, using design tools that probably allow them to work at a higher level and generate the CSS afterwards. What for us programmers could be a good flexible approach may not work because it is too geekish for designers.

Answer 5

If you set the size attributes using a percentage, and place the element as a child of the one you're sizing, you will be able to size an element relatively to another. Then, use positioning to move the child outside the parent physically.