5 ms·

'display' is way too overloaded. block/inline-block/inline are fine, defining how other elements stack against this element. Visibility should not be included

'display' is way too overloaded. block/inline-block/inline are fine, defining how other elements stack against this element. Visibility should not be included though - display:none; should instead be visible: true|false. Then the layouts are shoved inside this property too: grid, flex, table. There should instead be a layout: grid|flex|table

0df8dkdf 6y ago
There is a difference between dispaly and visible in CSS. One just hides the element but doesn't rearrange the other elements around it, the other display as if the element doesn't exist. https://www.tutorialrepublic.com/css-tutorial/css-visibility.php https://www.tutorialrepublic.com/css-tutorial/css-visibility...
- bluedevil2k 6y ago
  I just learned something today, and I do CSS (amongst other things) for a living. Maybe it should be visible: true|false|ghost
  - ivanhoe 6y ago
    Seriously, never had to deal with visibility:hidden before? To quote the Pythons: You lucky, lucky bastard....
    - bluedevil2k 6y ago
      It’s kind of unusual to set visibility to hidden in CSS, it’s more something you’d code in jQuery, or handle in the React code itself.
      - ivanhoe 6y ago
        If you've never before seen this hack consider yourself privileged to been born in a better world, without IE6 :P .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
- inopinatus 6y ago
  In addition, visibility may participate in animations. In particular we can delay the transition of visibility to false, but not of display to hidden. So it is very helpful in some pure-CSS disappearance animations, such as fading out a modal's background overlay.
naniwaduni 6y ago
To make matters worse, the "visibility" property exists, with values "visible", "hidden", and "collapse". "collapse" works kind of like display: none, but ... not in all contexts.
unabst 6y ago
I would go far as to say it's obfuscation. But I don't think the CSS people feel the same. At this point I've chalked it up to a difference in philosophy and ideology. Brevity, explicitness, obviousness, conciseness, and symmetry all contribute to the simplicity and order of a language, which minimizes the learning curve and maximizes ease of utility. If that were the goal, there are tons of things that could and would have been done differently. Most lists such as that of the OP and most criticism of CSS I find to be about users from a user standpoint criticising something about CSS that is either obfuscating or obstructive to their experience and productivity.
inopinatus 6y ago
CSS Display Module Level 3 sort of takes this criticism on board and has a more compositional approach to display. It's still one property but the attribute is multi-valued. c.f. https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/ https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-th.... However browser support is very limited, it's not yet in Chrome or Safari, and whether this goes far enough is a matter of taste.

0df8dkdf 6y ago

There is a difference between dispaly and visible in CSS. One just hides the element but doesn't rearrange the other elements around it, the other display as if the element doesn't exist. https://www.tutorialrepublic.com/css-tutorial/css-visibility.php https://www.tutorialrepublic.com/css-tutorial/css-visibility...

bluedevil2k 6y ago
I just learned something today, and I do CSS (amongst other things) for a living. Maybe it should be visible: true|false|ghost
- ivanhoe 6y ago
  Seriously, never had to deal with visibility:hidden before? To quote the Pythons: You lucky, lucky bastard....
  - bluedevil2k 6y ago
    It’s kind of unusual to set visibility to hidden in CSS, it’s more something you’d code in jQuery, or handle in the React code itself.
    - ivanhoe 6y ago
      If you've never before seen this hack consider yourself privileged to been born in a better world, without IE6 :P .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
inopinatus 6y ago
In addition, visibility may participate in animations. In particular we can delay the transition of visibility to false, but not of display to hidden. So it is very helpful in some pure-CSS disappearance animations, such as fading out a modal's background overlay.

naniwaduni 6y ago

To make matters worse, the "visibility" property exists, with values "visible", "hidden", and "collapse". "collapse" works kind of like display: none, but ... not in all contexts.

unabst 6y ago

I would go far as to say it's obfuscation. But I don't think the CSS people feel the same. At this point I've chalked it up to a difference in philosophy and ideology. Brevity, explicitness, obviousness, conciseness, and symmetry all contribute to the simplicity and order of a language, which minimizes the learning curve and maximizes ease of utility. If that were the goal, there are tons of things that could and would have been done differently. Most lists such as that of the OP and most criticism of CSS I find to be about users from a user standpoint criticising something about CSS that is either obfuscating or obstructive to their experience and productivity.

inopinatus 6y ago

CSS Display Module Level 3 sort of takes this criticism on board and has a more compositional approach to display. It's still one property but the attribute is multi-valued. c.f. https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/ https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-th.... However browser support is very limited, it's not yet in Chrome or Safari, and whether this goes far enough is a matter of taste.