11

I wonder if is it possible to refer to some elements using something like the Javascript DOM, without using Javascript or other programming languages.
This is what I mean. Suppose that we have two divs that should have the same height. I would like to get the first div's height to assign this to the second one, like this : 

#div1 {
    height:400px;
}

#div2 {
    height:#div1.height;
}

As you can see, I'm doing exactly the same of document.getElementById("id").style.height in Javascript.
Is it possible to do this? If not, I was wondering if exists a forum, a website and so on to discuss about CSS improvements or get a view of this language's development.
Thanks in advance!

DamiToma
  • 921
  • 3
  • 9
  • 27

4 Answers4

13

The approach for this is using CSS Variable

/*css*/

body {
  --div-height: 400px;
}

#div1 {
  height: var(--div-height);
}

#div2 {
  height: var(--div-height);
}
<!DOCTYPE html>
<!---html--->
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div id="div1">
    <p>This is div1</p>
  </div>
  <div id="div2">
    <p>This is div2</p>
  </div>
</body>

</html>

In this example i have declared the variable --div-height in the body scope, so any elements inside body tag can access this variable through the css.

Ski3r3n
  • 19
  • 7
Yuri Santos
  • 179
  • 7
  • Must say, that the support isn't the worst... but you should always be ready for people, who don't update their browsers... (thanks God, that browsers like Chrome update automatically) –  Oct 04 '17 at 17:44
3

Internet Explorer used to support "CSS expressions" that worked (work?) much as you describe. This was never widely adopted by developers, other browsers, or standards bodies.

The general principle for why this is not a good design is called "separation of concerns", which is something the W3C in particular has always strongly promoted. The idea is that the language for defining abstract content (HTML) is completely independent of the language for defining visual appearance (CSS) and the language for dynamic behavior (JavaScript).

Although it often feels like it would make sense to put "quick" calculations directly in your CSS, rather than creating a separate script, in practice this causes a lot of problems, for example:

  • it is more complex to understand how JS and CSS interact; which code runs first, do JS properties reflect the calculated value or the expression itself, etc.
  • it duplicates work that has already been done in creating JavaScript
  • CSS becomes even more complicated to implement, and likely slower and buggier
  • Since CSS is not designed as a programming language, it will be harder (if it's even possible) to understand and control when code runs; in practice this is likely to mean expressions being recomputed more often than they need to be
  • CSS becomes a new vector for security issues, especially if the expression language is Turing-complete or close to it

IE's implementation reputedly had terrible performance for these reasons (like most people, I never seriously used it). It was essentially just a way to embed JS in CSS files, and as such it didn't work with scripts disabled.

You might argue that there's still a case for "simple" expressions like your example, and that this doesn't require a Turing-complete syntax. But however you define "simple", there will always come a point where your desired expression isn't "simple" enough and you have to migrate everything to JS anyway. The logical choice is to have CSS handle only constant values (making it as simple as possible to implement), and use JS for any dynamic calculation.

So the short answer is: the W3C, and individual browser vendors, considered this direction for CSS and concluded that it would do more harm than good.

ETA

Re-reading the question, it's not clear if you were talking about general expressions (like width:element1.width*2), or just straightforward symbolic values. CSS-Variable does let you use macro-type variables, which makes stylesheets easier to edit. However, it doesn't let you, say, set the height of an element to the actual rendered height of another element; that would involve a potentially complicated run-time calculation, and for the reasons mentioned above, this is better done via JS where you have control of when the calculation is made, how to account for CSS transformations, and so on.

Community
  • 1
  • 1
bobtato
  • 1,157
  • 1
  • 9
  • 11
  • PS the definitive discussion of the future evolution of CSS is at https://www.w3.org/Style/CSS/current-work It's pretty dry stuff, because naturally enough, the focus is on standardisation, not experimentation. New features come from browser developers, so you might find discussion on the project mailing lists for Chromium, WebKit, Edge, Mozilla etc. – bobtato Mar 21 '17 at 20:51
2

Use CSS Flexbox....

Check out this tutorial and this demo.

.container {
  align-items: stretch;
}
Mottie
  • 84,355
  • 30
  • 126
  • 241
0

This is not possible. You'll have to use JS and the DOM.

sheriffderek
  • 8,848
  • 6
  • 43
  • 70
  • You can get property from other element via variable that setup in rules :root { }. Here is the reference link - https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables – Masa S-AiYa Aug 14 '18 at 12:19
  • If you have an answer to the question - you should go ahead and write one up. : ) – sheriffderek Aug 18 '18 at 19:59
  • I just tell you that it possible that you can get property from other element in CSS (in case that you didn't know this info). There's an answer from other's user above if you want to see it. – Masa S-AiYa Aug 21 '18 at 05:51