Idea to adding a feature for CSS

#css #webdev #javascript #beginners

i feel like if we had an option in css to get the width of an element

example.css

:root{
    --btnWidth: getWidth('#sourceEl');
               and / or
    --btnWidth: getWidth('.sourceEl');

}
.targetEl{
    width: var(--btnWidth);
}

Top comments (4)

Tyler V. (he/him) • Jul 18

I think that because you can just set both elements to the same width is the reason this doesn't need to exist?

I also feel like being able to do this would potentially introduce issues - consider this type of setup:

<div>
  <button id="sourceEl">I'm a button</button>
</div>


<style>
:root{
    --btnWidth: getWidth('#sourceEl');
}

div {
  width: var(--btnWidth);
}

button {
  width: 50%;
}
</style>

Should the element's width be a snapshot when the page loads? Should it dynamically change? Will every browser implement the decision the same way?

You can get/set the width via JS if you wanted - but I suspect this will lead to a lot more headaches down the road, especially if you're trying to implement a mobile and desktop layout.

But the best way to find out for sure is to give it a try! 🧪