Difference between revisions of "User:RainSlide/CSS Boxes"
Jump to navigation
Jump to search
(CSS Boxes, part one) |
(web dev tools) |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
If a set of style is not | This page is mainly for showing why [[Template:Hint]], [[Template:Note]] and [[Template:Warning]] uses <code>display: table</code> to archive compatibility for both adaptive width and floating sibling(s). | ||
If a set of style is not compatible with adaptive width, | |||
it span to its full width even when it don't need to. | it span to its full width even when it don't need to. | ||
If a set of style is not | If a set of style is not compatible with floating sibling(s), | ||
the element may still work well with some short content in it; | the element may still work well with some short content in it; | ||
in another word, it may still looks fine when its | in another word, it may still looks fine when its | ||
| Line 14: | Line 16: | ||
and maybe you are maintaining a MediaWiki [[Template:Template|Template]], | and maybe you are maintaining a MediaWiki [[Template:Template|Template]], | ||
with only inline styles. | with only inline styles. | ||
'''You may want to view this page with Web developer tools opened.''' | |||
<div style="position: fixed; top: 12.5vh; font-size: 25vh; line-height: 1; font-weight: bold; white-space: pre; color: lightblue; opacity: .1; user-select: none; pointer-events: none;">CSS<br>is<br>Awesome</div> | |||
== Table == | == Table == | ||
| Line 25: | Line 31: | ||
<div style="display: table; background-color: #EFE; | <div style="display: table; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for adaptive width.</div> | ||
No problem for adaptive width.</div> | |||
<div style="display: table; background-color: #EFE; | <div style="display: table; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for floating siblings. | ||
No problem for floating siblings.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
</div> | </div> | ||
==== The border-collapse & padding problem ==== | |||
{| class="wikitable" | {| class="wikitable" | ||
| Line 38: | Line 44: | ||
|- | |- | ||
| <div style="display: table; background-color: #FEE; | | <div style="display: table; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No padding when it's in a wikitable.</div> | ||
No padding when it's in another table | |} | ||
This is beacuse <code>.wikitable</code> has <code>border-collapse: collapse</code> on it, and our box inherits it from <code>.wikitable</code>. <code>border-collapse: collapse</code> Disables padding on the table itself, allowing only padding on the table cells, to collapse the outer table borders. | |||
To fix this padding problem in <code>.wikitable</code>s, one must apply <code>border-collapse: separate</code> to the box. | |||
However, if one day, someone REALLY need to use the box as a CSS table, | |||
the border of its cell will be separated by default, which may affect the visual. | |||
{| class="wikitable" | |||
! This is another wikitable | |||
|- | |||
| <div style="display: table; background-color: #FEE; border-collapse: separate; | |||
margin: .5em 0; padding: .5em 1em; border: 1px solid;">The padding is back with <code>border-collapse: separate</code>!</div> | |||
|} | |} | ||
<table style="border-collapse: collapse; margin: .5em 0; padding: .5em 1em; border: 1px solid; background-color: #EFE;"> | |||
<tr> | |||
<th colspan="2" style="padding: .25em .5em; border: 1px solid;">Here inside a <code>border-collapse: collapse</code> table...</th> | |||
</tr> | |||
<tr> | |||
<td style="padding: .25em .5em; border: 1px solid;">Every thing is fine.</td> | |||
<td style="padding: .25em .5em; border: 1px solid;">Just fine</td> | |||
</tr> | |||
</table> | |||
<table style="border-collapse: separate; margin: .5em 0; padding: .5em 1em; border: 1px solid; background-color: #FEE;"> | |||
<tr> | |||
<th colspan="2" style="padding: .25em .5em; border: 1px solid;">But, here inside a <code>border-collapse: separate</code> table...</th> | |||
</tr> | |||
<tr> | |||
<td style="padding: .25em .5em; border: 1px solid;">The separated border...</td> | |||
<td style="padding: .25em .5em; border: 1px solid;">Maybe that's not what we want.</td> | |||
</tr> | |||
</table> | |||
For those who are interested, | |||
to use the box or other elements with <code>display: table</code> as a CSS table and actually do something, | |||
or to work around with this padding problem with an additional div, | |||
see [https://chrisnager.github.io/ungrid/ ungrid]. | |||
<small>But, don't use two elements when you can just use one element + one CSS rule to archive the exact same result.</small> | |||
Since I don't think the [[Template:Hint|Hint]], [[Template:Note|Note]] and [[Template:Warning|Warning]] boxes should be put into a <code>.wikitable</code>, | |||
and it seems no one will use them as CSS tables any time sooner, | |||
I'm not favouring either of those two usage, and keep those templates minimal. | |||
=== <code>display: table-cell</code> === | === <code>display: table-cell</code> === | ||
| Line 50: | Line 98: | ||
<div style="display: table-cell; background-color: #EFE; | <div style="display: table-cell; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for adaptive width.</div> | ||
No problem for adaptive width.</div> | |||
<p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table cells are not blocky! Without this sentence, they are in the same row by now.</p> | <p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table cells are not blocky! Without this sentence, they are in the same row by now.</p> | ||
<div style="display: table-cell; background-color: #EFE; | <div style="display: table-cell; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for floating siblings. | ||
No problem for floating siblings.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
<p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table cells have no margin.</p> | <p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table cells have no margin.</p> | ||
| Line 71: | Line 118: | ||
<div style="display: table-caption; background-color: #FEE; | <div style="display: table-caption; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No adaptive width.</div> | ||
No adaptive width.</div> | |||
<div style="display: table-caption; background-color: #FEE; | <div style="display: table-caption; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">It's hiding. | ||
It's hiding.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
<p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">There can only be one table caption per table, or, per anything.</p> | <p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">There can only be one table caption per table, or, per anything.</p> | ||
| Line 90: | Line 136: | ||
<div style="display: table-row; background-color: #EFE; | <div style="display: table-row; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for adaptive width?</div> | ||
No problem for adaptive width?</div> | |||
<div style="display: table-row; background-color: #EFE; | <div style="display: table-row; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for floating siblings? | ||
No problem for floating siblings?< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
<p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table rows have no margin, padding or border.</p> | <p style="display: table; background-color: #FEE; padding: 0 1ch; border: 1px solid;">Table rows have no margin, padding or border.</p> | ||
| Line 101: | Line 146: | ||
</div> | </div> | ||
Other table display values works like table rows, or won't even display its contents. | === <code>display: table-<em>others</em></code> === | ||
Other table display values works just like table rows, (<code>table-row-group</code>, <code>table-header-group</code> and <code>table-footer-group</code>), or won't even display its contents (<code>table-column</code> and <code>table-column-group</code>). | |||
== A new block formatting context == | == A new block formatting context == | ||
See guide [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context Block formatting context] on MDN. | |||
''Will everything go right?'' | === <code>float: left</code> === | ||
''Will everything go right with float set to left?'' | |||
<div style="overflow: auto;"> | <div style="overflow: auto;"> | ||
| Line 115: | Line 164: | ||
<div style="float: left; background-color: #EFE; | <div style="float: left; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for adaptive width.</div> | ||
No problem for adaptive width.</div> | |||
<div style="float: left; background-color: #FEE; | <div style="float: left; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">It falls off from its floating siblings. | ||
It falls off from its floating siblings.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
</div> | </div> | ||
| Line 134: | Line 182: | ||
<div style="display: inline-block; background-color: #EFE; | <div style="display: inline-block; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for adaptive width.</div> | ||
No problem for adaptive width.</div> | |||
<div style="display: inline-block; background-color: #FEE; | <div style="display: inline-block; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">But inline blocks are inline.</div> | ||
But inline blocks are inline.</div> | |||
<div style="display: inline-block; background-color: #FEE; | <div style="display: inline-block; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">It also falls off from its floating siblings. | ||
It also falls off from its floating siblings.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
</div> | </div> | ||
== <code>display: flow-root</code> == | == <code>display: flow-root</code> == | ||
<div style="overflow: auto;"> | |||
<div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: "> | <div style="float: right; margin: .5em 0 .5em .5em; padding: .5em 1em; border: 1px solid; background-color: "> | ||
| Line 153: | Line 201: | ||
<div style="display: flow-root; background-color: #FEE; | <div style="display: flow-root; background-color: #FEE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No adaptive width.</div> | ||
No adaptive width.</div> | |||
<div style="display: flow-root; background-color: #EFE; | <div style="display: flow-root; background-color: #EFE; | ||
margin: .5em 0; padding: .5em 1em; border: 1px solid;"> | margin: .5em 0; padding: .5em 1em; border: 1px solid;">No problem for floating siblings. | ||
No problem for floating siblings.< | <span style="display: block; opacity: .5; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div> | ||
</div> | </div> | ||
This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two. | == And… == | ||
This is the end of part one. Part two will feature <code>contain: content</code>, <code>width: fit-content</code>, <code>width: max-content</code>, <code>box-sizing: border-box; max-width: 100%</code>, <code>display: flex</code>, <code>display: grid</code>, and more, if I ever got time to work on the part two. | |||
Latest revision as of 07:02, 21 January 2022
This page is mainly for showing why Template:Hint, Template:Note and Template:Warning uses display: table to archive compatibility for both adaptive width and floating sibling(s).
If a set of style is not compatible with adaptive width, it span to its full width even when it don't need to.
If a set of style is not compatible with floating sibling(s), the element may still work well with some short content in it; in another word, it may still looks fine when its content width + margin + padding + border is lower than the "remaining width" lefted by the floating sibling(s). So we have to use Lorem ipsum (as well as a floating box, for sure) to test it.
Ideally, you may just set the widths to fixed values, and pretend nothing happens and CSS is awesome. However, the content container of MediaWiki got adaptive width, and maybe you are maintaining a MediaWiki Template, with only inline styles.
You may want to view this page with Web developer tools opened.
CSS
is
Awesome
is
Awesome
Table
display: table
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
No problem for floating siblings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The border-collapse & padding problem
| This is a wikitable |
|---|
No padding when it's in a wikitable.
|
This is beacuse .wikitable has border-collapse: collapse on it, and our box inherits it from .wikitable. border-collapse: collapse Disables padding on the table itself, allowing only padding on the table cells, to collapse the outer table borders.
To fix this padding problem in .wikitables, one must apply border-collapse: separate to the box.
However, if one day, someone REALLY need to use the box as a CSS table,
the border of its cell will be separated by default, which may affect the visual.
| This is another wikitable |
|---|
The padding is back with
border-collapse: separate! |
Here inside a border-collapse: collapse table... |
|
|---|---|
| Every thing is fine. | Just fine |
But, here inside a border-collapse: separate table... |
|
|---|---|
| The separated border... | Maybe that's not what we want. |
For those who are interested,
to use the box or other elements with display: table as a CSS table and actually do something,
or to work around with this padding problem with an additional div,
see ungrid.
But, don't use two elements when you can just use one element + one CSS rule to archive the exact same result.
Since I don't think the Hint, Note and Warning boxes should be put into a .wikitable,
and it seems no one will use them as CSS tables any time sooner,
I'm not favouring either of those two usage, and keep those templates minimal.
display: table-cell
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
Table cells are not blocky! Without this sentence, they are in the same row by now.
No problem for floating siblings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Table cells have no margin.
display: table-caption
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No adaptive width.
It's hiding.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
There can only be one table caption per table, or, per anything.
display: table-row
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width?
No problem for floating siblings?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Table rows have no margin, padding or border.
display: table-others
Other table display values works just like table rows, (table-row-group, table-header-group and table-footer-group), or won't even display its contents (table-column and table-column-group).
A new block formatting context
See guide Block formatting context on MDN.
float: left
Will everything go right with float set to left?
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
It falls off from its floating siblings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
No, something falls down.
display: inline-block
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No problem for adaptive width.
But inline blocks are inline.
It also falls off from its floating siblings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
display: flow-root
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
This is a floating box.
No adaptive width.
No problem for floating siblings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
And…
This is the end of part one. Part two will feature contain: content, width: fit-content, width: max-content, box-sizing: border-box; max-width: 100%, display: flex, display: grid, and more, if I ever got time to work on the part two.