Неполный список ошибок при разработке CSS
Перепечатка из https://wiki.csswg.org/ideas/mistakes
That should be corrected if anyone invents a time machine. :P
white-space: nowrap
should bewhite-space: no-wrap
- and line wrapping behavior should not have been added to
white-space
vertical-align
should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1.vertical-align: middle
should betext-middle
orx-middle
because it's not really in the middle, and such a name would better describes what it does.- Percentage heights should be calculated against
fill-available
rather than being undefined in auto situations. - Table layout should be sane.
- Box-sizing should be
border-box
by default. background-size
with one value should duplicate its value, not default the second one toauto
. Dittotranslate()
.background-position
andborder-spacing
(all 2-axis properties) should take *vertical* first, to match with the 4-direction properties likemargin
.- Not quite a mistake, because it was a reasonable default for the 90s, but it would be more helpful since then if `background-repeat` defaulted to `no-repeat`.
- The 4-value shorthands like
margin
should go counter-clockwise (so that the inline-start value is before the block-start value). z-index
should be calledz-order
ordepth
and should Just Work on all elements (like it does on flex items).word-wrap
/overflow-wrap
should not exist. Instead,overflow-wrap
should be a keyword on 'white-space', likenowrap
(no-wrap
).- The top and bottom margins of a single box should never have been allowed to collapse together automatically as this is the root of all margin-collapsing evil.
- Partial collapsing of margins instead of weird rules to handle min/max-heights?
- Tables (like other non-blocks, e.g. flex containers) should form pseudo-stacking contexts.
- The
currentColor
keyword should have retained the dash,current-color
, as originally specified. Likewise all other color multi-word keyword names. - There should have been a predictable color naming system (like CNS) instead of the arbitrary X11 names which were eventually adopted.
border-radius
should have beencorner-radius
.- Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned.
- The
hyphens
property should be calledhyphenate
. (It's calledhyphens
because the XSL:FO people objected tohyphenate
.) rgba()
andhsla()
should not exist,rgb()
andhsl()
should have gotten an optional fourth parameter instead (and the alpha value should have used the same format as R, G, and B or S and L).- descendant combinator should have been
»
and indirect sibling combinator should have been++
, so there's some logical relationships among the selectors' ascii art - the
*-blend-mode
properties should've just been*-blend
- The syntax of unicode ranges should have consistent with the rest of CSS, like
u0001-u00c8
. - Unicode ranges should not have had a separate microsyntax with their own tokenization or token handling. The tokenization hacks required either to make selectors (e.g., u+a) handle things that are unicode-range tokens, or make unicode-range handle the other huge range of tokens (numbers and dimensions with and without scientific notation, identifiers, +) are both horrible.
font-family
should have required the font name to be quoted (like all other values that come from “outside” CSS). The rules for handling unquoted font names make parsingfont
stupid, as it requires afont-size
value for disambiguation.- Flexbox should have been less crazy about flex-basis vs width/height. Perhaps: if width/height is
auto
, use flex-basis; otherwise, stick with width/height as an inflexible size. (This also makes min/max width/height behavior fall out of the generic definition.) :empty should have been :void, and :empty should select items that contain only white spaceFIXED in the spec, waiting for implementations to check for Web-compat…table-layout: fixed; width: auto
should result in a fill-available table with fixed-layout columns.- 'text-orientation' should have had
upright
as the initial value (given the latest changes to 'writing-mode'). - The @import rule is required to (a) always hit the network unless you specify cache headers, and (b) construct fresh CSSStyleSheet objects for every import, even if they're identical. It should have had more aggressive URL-based deduping and allowed sharing of stylesheet objects.
- Selectors have terrible future-proofing. We should have split on top-level commas, and only ignored unknown/invalid segments, not the entire thing.
:link
should have had the:any-link
semantics all along.- The
flex
shorthand (andflex-shrink
andflex-grow
longhands) should acceptfr
units instead of bare numbers to represent flex fractions. - The
display
property should be calleddisplay-type
. - The
list-style
properties should be calledmarker-style
, andlist-item
renamed tomarked-block
or something. - The 'text-overflow' property should always apply, not be dependent on
overflow
- line-height:
should compute to the equivalent line-height: , so that it effectively inherits as a percentage not a length ::placeholder
should be::placeholder-text
and:placeholder-shown
should be:placeholder
- 'overflow: scroll' should introduce a stacking context
size
should have been a shorthand forwidth
andheight
instead of an @page property with a different definition- We probably should have avoided mixing keywords (span) with idents in the grid properties, possibly by using functional notation (like
span(2)
). - comments shouldn't have been allowed basically everywhere in CSS (compare to HTML, which basically only allows them where content goes), because it makes them basically unrepresentable in the object model, which in turn makes building editing directly on top of the object model impossible
- The alignment properties in Flexbox should have been writing-mode relative, not flex-flow relative, and thus could have reasonably understandable names like align-inline-* and align-block-*.
- shape-outside should have had wrap- in the name somehow, as people assume the shape should also clip the content as in clip-path.
- It shouldn't be `!important` — that reads to engineers as “not important”. We should have picked another way to write this.