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

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.

(|box-sizing: padding-box| isn't needed.)

Following is copy-and-paste code for your link:

div,
aside {
     padding: 25px;
}
div::after,
p::after {
     color: hsl(15, 100%, 60%);
     content: ".";
}
div {
     background-color: hsl(180, 100%, 10%);
     color: hsl(120, 50%, 60%);
     font-size: 25px;
     margin-bottom: 25px;
}
div:hover {
     border-right: 25px solid hsl(15, 100%, 60%);
     width: calc(100% + 25px);
}

It'd probably be better to express that using variable functionality though as that makes what's going on in the |calc| function more clear and enhances code maintainability:

body {
     --accent-color: hsl(15, 100%, 60%);
     --gutter-width: 25px;
}
div,
aside {
     padding: var(--gutter-width);
}
div::after,
p::after {
     color: var(--accent-color);
     content: ".";
}
div {
     background-color: hsl(180, 100%, 10%);
     color: hsl(120, 50%, 60%);
     font-size: 25px;
     margin-bottom: var(--gutter-width);
}
div:hover {
     border-right: var(--gutter-width) solid var(--accent-color);
     width: calc(100% + var(--gutter-width));
}