Incomplete List of Mistakes in the Design of CSS（在设计CSS时发生的错误的不完整统计）

原文链接：Incomplete List of Mistakes in the Design of CSS

基于2023/04/10版进行的翻译，翻译的不好，还有一些段落还不理解作者表达的意思，如果有什么问题请在评论区留言讨论，我会及时修正

That should be corrected if anyone invents a time machine. :P（如果有谁发明了时光机的话，那这些错误都能被纠正:P）

• white-space: nowrap should be white-space: no-wrap (white-space: nowrap应该被改为 white-space: no-wrap )

  • and line wrapping behavior should not have been added to white-space 超出容器时的换行行为也不应该被加到 white-space 功能中设置）

• animation-iteration-count should just have been animation-count (like column-count!)( animation-iteration-count 应该就改为 animation-count ，就像 column-count 这样)

• vertical-align should not apply to table cells. Instead the CSS3 alignment properties should exist in Level 1. （ vertical-align 不应该能应用到表格单元格中，CSS3对齐属性应存在于级别1中）

• vertical-align: middle should be text-middle or x-middle because it's not really in the middle, and such a name would better describes what it does.（ vertical-align: middle 应该被改成 text-middle 或者 x-middle ，因为他其实不是真正的中间，text-middle 或者 x-middle 更能体现他的表现）

• Percentage heights should be calculated against fill-available rather than being undefined in auto situations.（百分比高度应该被计算为相对于fill-available 所计算出的高度，而不是被当成在在 auto 情况下的无效值）

• Table layout should be sane. （表格布局应该更合理）

• Box-sizing should be border-box by default. （盒模型默认就应该是 border-box ）

• background-size with one value should duplicate its value, not default the second one to auto. Ditto translate(). （ background-size 在属性只写了一个值的时候，应该把该值也赋给第二个值，也就是同时当成宽和高，而不是把第二的值默认赋成 auto ，translate() 同上）

• background-position and border-spacing (all 2-axis properties) should take vertical first, to match with the 4-direction properties like margin. （background-position 和 border-spacing 以及所有两轴的属性，也就是通过两个值定位的属性，都应该把第一个值作为垂直那条轴的数据，这样可以和4轴定位的那些属性保持一致，就像margin那样）

• 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. （不算是一个很明确的错误，毕竟在90年代，background-repeat 默认值是 repeat 是合理的，不过如果从那时起把background-repeat 的默认值设置成no-repeat 会更好）

• The 4-value shorthands like margin should go counter-clockwise (so that the inline-start value is before the block-end and inline-end values instead of after them). （像 margin 这样的有4个值的属性简写时应该是逆时针的，这样 inline-start 才可以也应该写在 block-end 和 inline-end 前面，而不是像现在这样写在后面）

• z-index should be called z-order or depth and should Just Work on all elements (like it does on flex items). （z-index 应该被改为叫作 z-order 或者 depth ，并且它应该在所有元素上都生效，就像他在flex item 上一样，目前z-index只对于定位盒子，即 position 属性值非 static 的盒子生效）

• word-wrap/overflow-wrap should not exist. Instead, overflow-wrap should be a keyword on white-space, like nowrap (no-wrap). （不应该有 word-wrap 和 overflow-wrap ，而且overflow-wrap 应该作为一个 white-space 的值存在，就像nowrap / 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. （不应该发生前一个块级元素的 margin-bottom 或者说 margin-block-end 和后一个块级元素的 margin-top 或者说 margin-block-start 外边距坍塌的情况，这是所有外边距塌陷麻烦的根源）

• 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. (看不懂，table相关的)

• The currentColor keyword should have retained the dash, current-color, as originally specified. Likewise all other color multi-word keyword names. ( currentColor 写法应该被改成 current-color ，就像最初定义的那样， 同样的，其他包含多个单词的的颜色关键词也应该改为连字符写法)

• There should have been a predictable color naming system (like CNS) instead of the arbitrary X11 names which were eventually adopted. （应该有一个可预测的颜色命名系统（如CNS），而不是最终采用的任意X11名称，应该是颜色关键词没有规律）

• border-radius should have been corner-radius. （border-radius 应该被命名为 corner-radius ）

• Absolutely-positioned replaced elements should stretch when opposite offset properties (e.g. left+right) are set, instead of being start-aligned. （元素被绝对定位时的行为应该是将元素拉伸到对应的位置，而不是只是作为元素的起始坐标，就比如如果在元素上设置了绝对定位和left+right,那么该元素应该被拉伸为距离左右有left和right宽度的样子）

• The hyphens property should be called hyphenate. (It's called hyphens because the XSL:FO people objected to hyphenate.) （属性hyphens 应该被叫做hyphenate，它之所以现在是hyphens 是因为XSL:FO的人反对叫 hyphenate ）

• rgba() and hsla() should not exist, rgb() and hsl() 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). (不应该有 rgba() 和 hsla() ，而是 rgb() and hsl() 提供一个可选的第四的参数，并且alpha值应该使用和RGB/BSL一样的格式)

• 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 （包含 -blend-mode 的属性应该改为 -blend 就可以）

• The syntax of unicode ranges should have consistent with the rest of CSS, like u0001-u00c8. (看不懂， unicode相关的)

• 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. （看不懂， unicode相关的）

• 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 parsing font stupid, as it requires a font-size value for disambiguation. ( font-family 应该接受一个被引号括起来的字体名， 就像其他使用外界资源的css属性那样，像现在这样使用没有用引号括起来的方式使得解析字体的过程很蠢，当其中包含一个 font-size 并且要消除歧异的时候)

• 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.) （Flexbox在处理 flex-basis 加上 width/height 的元素的时候应该简单点，就比如，如果 width/height 的值是 auto 时，采用 flex-basis 的值，否则，就以width/height 的值作为不可伸缩的值， 这也使得最小/最大宽度/高度行为脱离了通用定义）

• ~~:empty should have been :void, and :empty should select items that contain only white space~~ FIXED in the spec, waiting for implementations to check for Web-compat… （规范中已修复，正在等待实现检查Web兼容性， 所以删除的部分我没翻译～）

• 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'). （text-orientation 应该使用  upright 作为初始值， 考虑到 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 URLbased deduping and allowed sharing of stylesheet objects. （除非使用指定缓存头，否则 @import 总是会发起网络请求，及时是相同的请求，应该使用更积极的基于URLbased的机制去减少重复请求，允许共享样式文件）

• 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. （:link 应该有:any-link 的语义）

• The flex shorthand (and flex-shrink and flex-grow longhands) should accept fr units instead of bare numbers to represent flex fractions. （简写的 flex 以及 flex-shrink 和 flex-grow 应该使用带有fr单位的参数而不是单纯的数字参数）

• The display property should be called display-type. （属性 display 应该被改为 display-type ）

• The list-style properties should be called marker-style, and list-item renamed to marked-block or something. （ list-style 应该被叫做 marker-style ，list-item 应该被叫做 marked-block 或者别的什么）

• The text-overflow property should always apply, not be dependent on overflow （text-overflow 应该直接生效，而不是还需要依赖于 overflow）

• line-height: <percentage> should compute to the equivalent line-height: <number>, so that it effectively inherits as a percentage not a length

• ::placeholder should be ::placeholder-text and :placeholder-shown should be :placeholder （::placeholder 应该改成 ::placeholder-text ，:placeholder-shown 应该改成 :placeholder ）

• overflow: scroll should introduce a stacking context （overflow: scroll 应该加入一个层叠上下文）

• size should have been a shorthand for width and height instead of an @page property with a different definition （size 应该作为设置  width  和 height 的简写形式，而不是现在作为一个和 @page 相关的，有完全不同含义的属性）

• We probably should have avoided mixing keywords (span) with idents in the grid properties, possibly by using functional notation (like span(2)). （不应该混淆关键词 span ，特别是在grid properties中，也许使用方法形式的 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 （注释不应该允许被写在css中的任意地方，HTML语法只允许他们出现在内容的位置，因为它使得它们在对象模型中基本上不可表示，这反过来使得直接在对象模型之上进行构建编辑不可能，还没不能理解什么意思 ）

• 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-*. (alignment属性在flex布局中应该根据 writing-mode ，而不是根据flex-flow ，所以按理来说也应该存在像 align-inline-* 和 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. （shape-outside 应该在名字上加上  wrap- ，因为人们认为形状也应该像剪辑路径一样剪辑内容）

• It shouldn't be !important — that reads to engineers as “not important”. We should have picked another way to write this. （不应该有 !important 这种写法， 对于开发者来说 ，就好像意思是 ”不重要“ 一样，需要换一种方式写这个东西）