- From: Jonathan Kingston <jonathan@jooped.com>
- Date: Fri, 03 Jul 2015 07:18:49 +0000
- 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>
- Message-ID: <CAKrjaaUZxOeAHZdm3ts744S=tHg6du3h22gijxMoE1H1duAspw@mail.gmail.com>
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