- From: Brian J. Fink <desertowl23@gmail.com>
- Date: Mon, 10 Feb 2014 20:54:41 +0000
- To: www-style@w3.org
- Message-ID: <CAFdju=5T19uMuicX_vAE+qLq1WmJ0ud0bD+PDVZoWd1TAy3LGw@mail.gmail.com> (sfid-20140210_205448_462196_7DD5BA78)
I have a new unit to propose that you may not have considered. Currently there is a way to use the width of the containing element in a CSS value: %. But what about the element's *own width?* Let's suppose you want to overlap one element halfway over of another, or set borders on an element based on the width of that element. How cool would that be? My proposed new unit would be called el (pronounced like the first syllable of "element") and would be shorthand for 100% of the element's width. I would use this syntax: <decimal number value>el or <percentage>el Examples: border: .005el solid; margin: auto -50%el; Currently the best way to use the element's width in a value requires JavaScript to accomplish. There exists a workaround for the overlap trick, but it requires absolute positioning and transform tricks (transform uses percentages of the element's actual dimensions) and is extremely temperamental in some contexts. Why not just set the element's width explicitly, you ask? Because sometimes you just don't know ahead of time what size you're going to need, and setting width ahead of knowing what the result might be can lead to a formatting nightmare! That's why I'm proposing this solution.
Received on Tuesday, 18 February 2014 17:30:19 UTC