CSS module: box sizing & box model #33182
Conversation
github-actions
bot
added
Content:CSS
Preview URLs (7 pages)External URLs (1)URL:
(comment last updated: 2024-04-26 20:17:14) |
estelle
changed the title
|
I've just removed myself as a reviewer for now, until you have finished it. Feel free to add me as a reviewer again once you are done with it, and I'll review it then. |
estelle
changed the title
There was a problem hiding this comment.
@estelle nice work as always; a few comments for you to look over.
There was a problem hiding this comment.
@estelle couple more bits for you; I still feel like the intrinsic size content could be a bit clearer. Getting closer!
|
|
||
| The `max-content` size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior. | ||
| For example, the minimum intrinsic, or {{cssxref("min-content")}} size of a {{htmlelement("span")}} element is the minimum size it would have if it was floated with no other CSS box properties applied inside a container with a inline-size of `0px`. For text, the `min-content` size would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. |
There was a problem hiding this comment.
| For example, the minimum intrinsic, or {{cssxref("min-content")}} size of a {{htmlelement("span")}} element is the minimum size it would have if it was floated with no other CSS box properties applied inside a container with a inline-size of `0px`. For text, the `min-content` size would be if the text was wrapped as small as possible in the inline direction without causing an overflow, with as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} and {{cssxref("inline-size")}} properties will size an element according to the `min-content` size. | |
| The {{cssxref("min-content")}} keyword, when set as the value for properties such as {{cssxref("width")}} or {{cssxref("inline-size")}}, will size an element according to its minimum intrinsic or `min-content` size. | |
| For example, the `min-content` width of a {{htmlelement("span")}} element is the width it would have if it were floated with no other CSS box properties applied to it, inside a container with an inline size of `0px`. Text content would be wrapped as narrowly as possible in the inline direction without causing an overflow — its inline size defined by the longest word — with as much soft-wrapping as possible. | |
| You can see this in action below: |
Does this still say what you want it to say? Trying to simplify it a bit.
There was a problem hiding this comment.
I changed the order of the page so that the values are way lower down, as this is a glossary page I wanted to de-emphasize guide-ish stuff (css properties and values), so moved all the non-guide stuff above the first h4, and then showed examples of min and max intrinsic content, changing the headings to what I am defining rather than the properties used.
I only used h4 because i could not get the "show this example to work without a header" syntax to work and spent way too long trying.
| {{ EmbedLiveSample('max-content', '100%', '200') }} | ||
|
|
||
| Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). | ||
|
|
There was a problem hiding this comment.
Add another subheading for the part about images? We are moving on to a different subject.
There was a problem hiding this comment.
moved the images part way higher, above any examples.
|
|
||
| {{ EmbedLiveSample('max-content', '100%', '200') }} | ||
|
|
||
| Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). |
There was a problem hiding this comment.
It feels a bit weird to have this nested away in a subsection. Make it a note nearer the top?
Co-authored-by: Chris Mills <[email protected]>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
thanks @chrisdavidmills. I committed almost all your suggestions, then reworked the glossary page to incorporate your suggestions that weren't directly committed. |
| @@ -6,12 +6,64 @@ page-type: glossary-definition | |||
|
|
|||
| {{GlossarySidebar}} | |||
|
|
|||
| In CSS, the _intrinsic size_ of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and vertical margin and padding have no impact, though horizontal margin and padding do. | |||
| In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in, for example, the sizing applied by CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. | |||
There was a problem hiding this comment.
I find the last sentence confusing, because it reads as though CSS sets the intrinsic size, but intrinsic (at least in English) would mean "inherent" - so not something you can "apply". I'm pretty sure this fixes it.
| In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in, for example, the sizing applied by CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. | |
| In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in, for example, the sizing applied by CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are represented by its {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. |
|
|
||
| Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the {{cssxref("width")}} property will size an element according to the `min-content` size. | ||
| For example, the minimum intrinsic size of a {{htmlelement("span")}} element is the minimum size it would have if it was floated with no other CSS box properties applied inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `<span>` would have if its container's inline size were infinite. |
There was a problem hiding this comment.
I find this hard to parse. I think some punctuation helps.
| For example, the minimum intrinsic size of a {{htmlelement("span")}} element is the minimum size it would have if it was floated with no other CSS box properties applied inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `<span>` would have if its container's inline size were infinite. | |
| For example, the minimum intrinsic size of the inline {{htmlelement("span")}} element is the minimum size it would have if it was floated (with no other CSS box properties applied), inside a container with an inline-size of `0px`. The maximum intrinsic size is the opposite. It is the size the same `<span>` would have if its container's inline size were infinite. |
|
|
||
| Intrinsic sizes and how they are calculated are defined in the [CSS sizing module](/en-US/docs/Web/CSS/CSS_box_sizing). | ||
|
|
||
| #### minimum intrinsic size |
There was a problem hiding this comment.
FWIW I really like this and the following example.
| @@ -6,12 +6,64 @@ page-type: glossary-definition | |||
|
|
|||
| {{GlossarySidebar}} | |||
|
|
|||
| In CSS, the _intrinsic size_ of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and vertical margin and padding have no impact, though horizontal margin and padding do. | |||
| In CSS, the _intrinsic size_ of an element is the size it would be based purely on its content without taking into account the effects of the context it appears in, for example, the sizing applied by CSS [box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) properties. An element's intrinsic sizes are the element's {{cssxref("min-content")}} and {{cssxref("max-content")}} sizes. | |||
There was a problem hiding this comment.
JUST "FWIW", it took me a while to get my head around because I learned the concept in terms of images, where the inherent size max/min is the same. So reading this confused me a bit - because I was assuming that text and other elements might be the same. What really helped with my confusion was the examples, which make it clear that the value depends on the content, and can hence have a max and min.
| @@ -95,3 +95,4 @@ grid-template-columns: 200px 1fr min-content; | |||
| ## See also | |||
|
|
|||
| - Related sizing keywords: {{cssxref("max-content")}}, {{cssxref("fit-content")}} | |||
| - [CSS box sizing](/en-US/docs/Web/CSS/CSS_box_sizing) module | |||
There was a problem hiding this comment.
Perhaps in intro "The min-content sizing keyword represents the intrinsic minimum width of the content." link to the glossary? Also for the max-content page?
|
|
||
| {{CSSRef}} | ||
|
|
||
| The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing properties. It also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling developers to specify how elements fit their content or fit into a particular layout context. |
There was a problem hiding this comment.
Up to you, but I would prefer a first line that states what something is used for rather than what it provides. So perhaps:
| The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing properties. It also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling developers to specify how elements fit their content or fit into a particular layout context. | |
| The **CSS box sizing** module enables developers to specify how elements fit their content or fit into a particular layout context. It defines sizing, minimum sizing, and maximum sizing properties, and also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based [extrinsic](/en-US/docs/Glossary/Intrinsic_Size#extrinsic_sizing) size. |
|
|
||
| The **CSS box sizing** module defines sizing, minimum sizing, and maximum sizing properties. It also extends the CSS sizing properties with keywords that represent content-based {{glossary("intrinsic size")}} and context-based "extrinsic" size, enabling developers to specify how elements fit their content or fit into a particular layout context. | ||
|
|
||
| Elements can either be extrinsically or intrinsically sized. The [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) defines page-relative properties to explicitly, or "extrinsically" set an element's size, including `width`, `height`, `padding`, and `margin` properties (along with `border` properties defined in the [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. |
There was a problem hiding this comment.
There is nothing wrong with this, but I initially found it confusing because I read it as though "CSS box model" was the doc that we're talking about now. A bit of a brain fade, but maybe:
| Elements can either be extrinsically or intrinsically sized. The [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) defines page-relative properties to explicitly, or "extrinsically" set an element's size, including `width`, `height`, `padding`, and `margin` properties (along with `border` properties defined in the [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. | |
| Elements can either be extrinsically or intrinsically sized. The original [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) defines page-relative properties to explicitly, or "extrinsically" set an element's size, including `width`, `height`, `padding`, and `margin` properties (along with `border` properties defined in the [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module (this module) extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. |
There was a problem hiding this comment.
went with
Elements can either be extrinsically or intrinsically sized. The CSS box model defines page-relative properties to explicitly, or "extrinsically" set an element's size, including
width,height,padding, andmarginproperties (along withborderproperties defined in the CSS backgrounds and borders module). This CSS box sizing module extends the CSS box model module to enable an element to be sized intrinsically — setting element size based on the size of its content.
|
|
||
| Elements can either be extrinsically or intrinsically sized. The [CSS box model](/en-US/docs/Web/CSS/CSS_box_model) defines page-relative properties to explicitly, or "extrinsically" set an element's size, including `width`, `height`, `padding`, and `margin` properties (along with `border` properties defined in the [CSS backgrounds and borders](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders) module). The box sizing module extends the box model module to enable an element to be sized intrinsically — setting element size based on the size of its content. | ||
|
|
||
| The sizing values introduced in this module allow elements with [size containment](/en-US/docs/Web/CSS/CSS_containment#size_containment) to take explicit intrinsic sizes, as if their in-flow content's width and height match the specified explicit intrinsic size, rather than being sized as if they were empty. |
There was a problem hiding this comment.
What is "in-flow content"?
There was a problem hiding this comment.
@estelle nice work. I'm pretty happy with this now, and think it's ready to go, pending Hamish's suggestions.
|
Nice update. I quite like late-reviewing stuff so you get to learn new things :-) |
Part of the CSS: specification module landing pages