Re: [css-ui-3] box-sizing: padding-box

On 6/25/2015 3:56 PM, Garrett Smith wrote:
> On 6/13/15, Patrick Dark <www-style.at.w3.org@patrick.dark.name> wrote:
>> On 6/12/2015 7:34 AM, Florian Rivoal wrote:
>>>> There are times where borders could be decorative elements where it is
>>>> more optimal for it to be excluded from the width. I’ve put together a
>>>> small demo here. On hover, a border-right is appearing on the <div>s on
>>>> the left side. If border-box had been used, the border would have become
>>>> inside the element, shrinking the dark green width, but on Firefox it is
>>>> rendering outside as intended. If I had been using content-box, I
>>>> would’ve had to shrink the div widths as a hack instead of the more easy
>>>> «width: 100%».
>>>>
>>>> http://jsbin.com/cepifuyuru/1/edit?html,css,output
>> This use case can be accommodated by:
>> (A) removing |box-sizing: padding-box| and |width: 100%| from the |div|
>> element.
>> (B) applying |width: calc(100% + 25px)| to the |div:hover|
>> element/pseudo-class.
>>
> It can also be done using absolute positioning. I don't see people
> doing that despite the advantages.

What are the advantages?

In any case, I don't see how one can use absolute positioning for the example at http://jsbin.com/cepifuyuru/1/edit?html,css,output given that the |after| pseudo-element is already in use for decorative text. Even without that issue, using absolute positioning would require the additional complexity of declaring a total of five declarations within two rules instead of one declaration (within one rule):

div {
     [...]
     position: relative;
}
div:hover::after {
[...]
     bottom: 0;
     position: absolute;
right: -25px;
     top: 0;
}

(And nevermind that the position property syntax is just clumsy; the bottom, left, right, and top property values should be a part of the position property value like, for example, in a hypothetical position: absolute(0 -25px 0 auto) declaration. But that's another discussion.)

On 6/25/2015 3:56 PM, Garrett Smith wrote:
> When it's not advantageous; I
> prefer padding box to calc because padding box works in IE8 and calc
> does not.

I don't see how this point is relevant. It sounds like you're suggesting that the padding-box value should be supported in perpetuity because it makes it easier to code for Internet Explorer 8, a browser which no one should be using given (A) the lack of security updates for Windows XP and (B) availability of newer versions of Internet Explorer (9 through 11) on newer versions of Windows. Internet Explorer 8 itself won't be officially supported in approximately 5.5 months anyway.¹

¹ http://blogs.msdn.com/b/ie/archive/2014/08/07/stay-up-to-date-with-internet-explorer.aspx

(It might be worth noting that the above-linked JS Bin example doesn't work in IE8. I tried viewing it in IE8 to code a quick workaround for the |padding-box| value, but decided not to bother after finding that the JS Bin page was non-functional in that browser. The endeavor probably wasn't worth the effort anyway.)

On 6/25/2015 3:56 PM, Garrett Smith wrote:
>> (|box-sizing: padding-box| isn't needed.)
>>
> No, but it can be handy at times as another way to do what you want.

This sounds like a rehash of the "we need expressiveness" argument put forth by Florian in https://lists.w3.org/Archives/Public/www-style/2015Jun/0134.html, which I addressed in https://lists.w3.org/Archives/Public/www-style/2015Jun/0135.html.