W3C home > Mailing lists > Public > www-style@w3.org > February 2014

Re: [css3-values] feedback

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Tue, 18 Feb 2014 11:27:35 -0800
Message-ID: <CAAWBYDAsNhvkqF+z1cKvtXUXYzB2zq1OoyrpLCX-muTRvo5GtA@mail.gmail.com>
To: "Brian J. Fink" <desertowl23@gmail.com>
Cc: www-style list <www-style@w3.org>
On Mon, Feb 10, 2014 at 12:54 PM, Brian J. Fink <desertowl23@gmail.com> wrote:
> 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.

Interesting idea, but one with a few difficulties.  ^_^

For example, what "width" are we talking about?  If you set the
border-width to be, say, .5el, is that half the width of the content
box? (So that if the content box is 100px wide, the whole element is
now 200px wide.)  How does this interact with 'box-sizing'?  If I have
"box-sizing: border-box; width: 100px;", how wide are the borders now?
 (CURSE YOU, BOX-SIZING!)

Alternately, maybe it's just a percentage of the 'width' or 'height'
properties.  This probably isn't useful, though - if width/height is
explicitly specified, then setting another property to a percentage of
it is something you can do yourself by hand.  There's some maintenance
savings by using the 'el' unit in that case, but it can similarly be
done slightly more verbosely by instead using Custom Properties.

There's probably also some issues with parent layout modes needing to
know the preferred size of children before giving them a real size,
but that could be resolved in the same way as percentages currently
are when resolved against an uncertain value, and effectively ignored.

~TJ
Received on Tuesday, 18 February 2014 19:28:22 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:19 UTC