- How the element will contribute to layout/flow: display:block/inline/flex/etc…
- Should the element contribute to layout/flow: display:none
It would be useful to have the means to separate these concerns.
Given this HTML:
<div class="bar has-flex-items">
<div class="item">…</div>
<div class="item hidden-small-only" hidden>…</div>
</div>
And this fanciful CSS:
/* Proposing a `hidden` CSS property that determines if the element *should* contribute to layout/flow */
[hidden] {
hidden: hidden; /* declare element should not display – equivalent to `display:none` */
}
/* The `hidden` property is not overriden by `display` – */
/* permitting the layout properties to be assigned latently */
.has-flex-items .item {
display: flex; /* The element remains hidden */
}
@media (min-width: 40em) {
/* Restore the display layout behaviour without redefining it */
.hidden-small-only {
hidden: display; /* restore the default value */
}
}
As it stands we need to repeat the display layout when using display to hide the element.
Given an element to hide and show:
<div class="item">…</div>
Hide it with hidden
:
<div class="item" hidden>…</div>
Until display is set:
.item { display: flex }
Then hidden
may need a specificity bump:
[hidden] { display: none }
Override on large screens?
@media (min-width: 40em) {
.item[hidden] {
display: flex;
}
}
Using a class instead of HTML hidden attribute
Increasing the importance of the hidden attribute to ensure hidden means hidden.
[hidden] {
display: none !important;
}
Use a class to clearly signifiy we are only hiding the element sometimes:
<div class="item hidden-small-only">…</div>
Hide the element and override with a media query:
.hidden-small-only {
display: none;
}
@media (min-width: 40em) {
.hidden-small-only {
display: flex;
}
}
<div class="bar has-flex-items">
<div class="item">…</div>
<div class="item hidden-small-only">…</div>
</div>
Repeat the override, because specificity:
.item {
display: block;
}
.has-flex-items .item {
display: flex;
}
@media (min-width: 40em) {
.item.hidden-small-only {
display: block;
}
.has-flex-items .item.hidden-small-only {
display: flex;
}
}