4 ms·

I think display:none is a regularly annoying design mistake. It would be better to separate the concepts of how the content should be displayed, and whether it

by ambrop7 10y ago

I think display:none is a regularly annoying design mistake. It would be better to separate the concepts of how the content should be displayed, and whether it should be displayed in the first place. It causes issues such as: - The built-in rule for *[hidden] { display: none; } is often of no help as another css class may set display to something else, so from the developer's perspective the "hidden" attribute seems to be broken. - Often a CSS class sets display:none and another CSS class which merely wants to undo that sets display:block. This gets in the way of the developer if they really wanted to use another display type like flex. (one example: Bootstrap's tabs, .tab-content.active{display:block}) - In both cases the fix gets ugly in cases where the problematic css which you want to override comes from parent classes elements, as in that case it is not sufficient to use a simple class like .display-flex{display:flex;} but you need complex rules to override specific cases of parent css.

steveax 10y ago
> I think display:none is a regularly annoying design mistake. It would be better to separate the concepts of how the content should be displayed, and whether it should be displayed in the first place. This is exactly what the proposed box-suppress property [1] does: "The display: none value was historically used as a "toggle" to switch between showing and hiding an element. Making this reversible requires either setting up the CSS cascade carefully, or remembering what the display value was before it was set to none. To make this common use-case easier, this module introduces the separate box-suppress property to do the same thing, so that toggling whether or not an element appears in the formatting tree can now be done without affecting its display type when it is displayed." [1]: https://drafts.csswg.org/css-display/#propdef-box-suppress https://drafts.csswg.org/css-display/#propdef-box-suppress
talmand 10y ago
I don't like the idea of an attribute affecting things that applies what is essentially a CSS property. Besides, any IE version before 11 doesn't seem to support it. Most can't use it yet. Best case is that you don't have one class that applies block (or whatever) and another that applies none. You let the element display as its default state and then you have a class that hides it, possibly overriding the CSS of the element. You then remove/add the class as needed. The .show() and .hide() in jQuery caused problems like you described for years. As for your third example, I would say the CSS structure should be considerd broken at that point and should be refactored because something went wrong along the way.
acbabis 10y ago
> - The built-in rule for [hidden] { display: none; } is often of no help as another css class may set display to something else, so from the developer's perspective the "hidden" attribute seems to be broken. [hidden] { display: none !imporant; } is one of the few examples where I think `!important` is OK.

by ambrop7 10y ago

steveax 10y ago

> I think display:none is a regularly annoying design mistake. It would be better to separate the concepts of how the content should be displayed, and whether it should be displayed in the first place. This is exactly what the proposed box-suppress property [1] does: "The display: none value was historically used as a "toggle" to switch between showing and hiding an element. Making this reversible requires either setting up the CSS cascade carefully, or remembering what the display value was before it was set to none. To make this common use-case easier, this module introduces the separate box-suppress property to do the same thing, so that toggling whether or not an element appears in the formatting tree can now be done without affecting its display type when it is displayed." [1]: https://drafts.csswg.org/css-display/#propdef-box-suppress https://drafts.csswg.org/css-display/#propdef-box-suppress

talmand 10y ago

I don't like the idea of an attribute affecting things that applies what is essentially a CSS property. Besides, any IE version before 11 doesn't seem to support it. Most can't use it yet. Best case is that you don't have one class that applies block (or whatever) and another that applies none. You let the element display as its default state and then you have a class that hides it, possibly overriding the CSS of the element. You then remove/add the class as needed. The .show() and .hide() in jQuery caused problems like you described for years. As for your third example, I would say the CSS structure should be considerd broken at that point and should be refactored because something went wrong along the way.

acbabis 10y ago

> - The built-in rule for [hidden] { display: none; } is often of no help as another css class may set display to something else, so from the developer's perspective the "hidden" attribute seems to be broken. [hidden] { display: none !imporant; } is one of the few examples where I think `!important` is OK.