Is there a way to put relationships/contraints into CSS? [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this 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

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.

Answer 3

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 4

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 5

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 6

Use of percentages to determine the height is to express a relationship with a hard-coded value.
"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" BUT ONLY IF parent elements heights are expressed explicitly (and this apply iterating until the html element).
In CSS Level 2 "The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'".
But from Revision 1 "percentage heights on absolutely-positioned elements are no longer treated as 'auto' when the containing block's height is not explicitly specified."
With absolute positioning this solution breaks because "For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element. This is a change from CSS1, where the percentage was always calculated with respect to the content box of the parent element."
In the following code the inner wrapper divs heights will collaps using absolute positioning, losing the ability to use them to place margins.
<body>
<style type="text/css">
html, body {
height: 100%;
}
div#wrapper {
height: 100%;
}
div#content-wrap {
height: auto;
}
div#wrapper-upper-half {
height: 50%;
background-color:aqua;
}
div#wrapper-lower-half {
height: 50%;
background-color:fuchsia;
}
</style>
<div id="wrapper">
<div id="wrapper-upper-half">
</div>
<div id="content">
</div>
<div id="wrapper-lower-half">
</div>
</div>
</body>