W3C home > Mailing lists > Public > www-style@w3.org > July 2015

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

From: Jonathan Kingston <jonathan@jooped.com>
Date: Fri, 03 Jul 2015 07:18:49 +0000
Message-ID: <CAKrjaaUZxOeAHZdm3ts744S=tHg6du3h22gijxMoE1H1duAspw@mail.gmail.com>
To: Patrick Dark <www-style.at.w3.org@patrick.dark.name>
Cc: Florian Rivoal <florian@rivoal.net>, "www-style@w3.org" <www-style@w3.org>
Sorry for the super delayed response.

>>calc however as mentioned removes meaning
>There are no semantics tied to CSS property values

Less 'semantic' and more readable, CSS properties like all programming
languages have intent. The easier that is to read the easier a developers
life is.

The flex example would still need to use calc with min-width specified also
variable width is often required.

Which means we are back to if:

--margin-size: 2rem;
--width-size: 20%;
margin: 1rem var(--margin-size);
width: calc(--width-size - var(--margin-size) * 2);

is more readable than:

width: 20%;
margin: 1rem 2rem;
box-sizing: margin-box;

Authors choosing to extend the properties example would need to know of
--width-size and --margin-size where as setting the width or margin works
here.

On Fri, Jun 26, 2015 at 6:28 AM Patrick Dark <
www-style.at.w3.org@patrick.dark.name> wrote:

> On 6/22/2015 2:40 PM, Jonathan Kingston wrote:
>
> I can think of a few use-cases for border-box mostly that could be solved
> with calc however as mentioned removes meaning.
>
>
> There are no semantics tied to CSS property values (e.g., padding-box).
> If one needs meaning for style sheet authors, one can use CSS variables as
> I demonstrated at the end of a response to Florian on this topic:
> <https://lists.w3.org/Archives/Public/www-style/2015Jun/0133.html>
> https://lists.w3.org/Archives/Public/www-style/2015Jun/0133.html.
>
>
> On 6/22/2015 2:40 PM, Jonathan Kingston wrote:
>
> However could I ask if there was a reason margin-box was never considered?
> The use case would be brilliant for structure where by adding margin could
> control the layout and spacing of boxes.
>
>
> There are already at least two ways to do this: calc() values and
> flexible box layout. See the following examples (also provided as an
> attachment for quick viewing):
>
> <!doctype html>
> <html lang="en">
>     <head>
>         <meta charset="utf-8">
>         <title>HTML Demo</title>
>         <style>
>             * {
>                 margin: 0; /* fallback */
>                 margin: initial;
>                 padding: 0; /* fallback */
>                 padding: initial;
>             }
>             li {
>                 background-color: currentcolor;
>             }
>             /* *[class~="box-sizing:.margin-box"], */
>             *[class~="calc().value"],
>             *[class~="calc().value.with.variables"] {
>                 overflow: auto;
>             }
>             /* Hypothetical margin-box Code:
>             *[class~="box-sizing:.margin-box"] li {
>                 box-sizing: margin-box;
>                 float: left;
>                 margin: 1rem 2rem;
>                 width: 33.333%;
>             } */
>             *[class~="calc().value"] li {
>                 float: left;
>                 margin: 1rem 2rem;
>                 width: calc(33.333% - 2rem * 2);
>             }
>             *[class~="calc().value.with.variables"] li {
>                 /* Currently, CSS variables are only supported in Firefox.
> */
>                 --margin-width: 2rem;
>                 float: left;
>                 margin: 1rem var(--margin-width);
>                 width: calc(33.333% - var(--margin-width) * 2);
>             }
>             *[class~="flexible.box.layout"] {
>                 display: flex;
>             }
>             *[class~="flexible.box.layout"] li {
>                 flex-grow: 1;
>                 justify-content: space-around;
>                 margin: 1rem 2rem;
>             }
>         </style>
>     </head>
>     <body>
>         <!-- <ul class="box-sizing:.margin-box">
>             <li>List Item</li>
>             <li>List Item</li>
>             <li>List Item</li>
>         </ul> -->
>         <ul class="calc().value">
>             <li>List Item</li>
>             <li>List Item</li>
>             <li>List Item</li>
>         </ul>
>         <ul class="calc().value.with.variables">
>             <li>List Item</li>
>             <li>List Item</li>
>             <li>List Item</li>
>         </ul>
>         <ul class="flexible.box.layout">
>             <li>List Item</li>
>             <li>List Item</li>
>             <li>List Item</li>
>         </ul>
>     </body>
> </html>
>
Received on Friday, 3 July 2015 07:19:29 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC