[csswg-drafts] [css-display] Add a new property to replace `display: none` declaration (#4897)

tzi has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-display] Add a new property to replace `display: none` declaration ==
I want to discuss about the `display` property, and more specifically about the `none`value. 

The associated specification is here: https://drafts.csswg.org/css-display-3/#box-generation

## Usecase

I sometimes find `display: none` behavior very frustrating. I want to use it to prevent the rendering, but as a "side-effect" it also changes the display type of the element.

For example:

```css
/* Flexible menu */
.menu {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 600px) {

    /* Hidden menu on mobile */
    .menu {
        display: none;
    }

    /* Visible menu on user action */
    .menu--visible {

        /* I just want to "unhide" the menu, but I have to set it as flexible again */
        display: flex;
    }
}
```

## Workaround

When discussing it on twitter with other CSS developers, they said they currently change their CSS architecture because of this problem.

For example, you can avoid this problem by using the `:not()` selector:

```css
/* Flexible menu */
.menu {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 600px) {

    /* Hidden menu on mobile, except after a user action */
    .menu:not(.menu--visible) {
        display: none;
    }
}
```

There are at least two downside of this kind of solution:
 - the developer intentions are less clear (at least for me), and it could create maintenance difficulties
 - it adds more specificity on the selector, so it could break architectures like BEM

## Suggestion

What would be great is a new property. It would avoid developers to change their CSS structure because of the current `display: none` behavior. I'm not really good at naming 😄, but since I'm here I will play the game:

Name: | render
--|--
Value: | normal \| none
Initial: | normal
Applies to: | all elements
Inherited: | yes
Percentages: | N/A
Computed value: | as specified
Animatable: | no

An example inspired from the previous examples:

```css
/* Flexible menu */
.menu {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 600px) {

    /* Hidden menu on mobile */
    .menu {
        render: none;
    }

    /* Visible menu on user action */
    .menu--visible {
        render: normal;
    }
}
```

If we compare with the current available solutions, I find the code with the new property `render` reflects much better the developer intentions. It also allows us to keep a low selector specificity.

There are probably others solutions to find. I just suggested one to start the discussion!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4897 using your GitHub account

Received on Monday, 23 March 2020 23:08:45 UTC