CSS 설계에서 아쉬운 점으로 자주 언급되는 사항들을 모은 불완전한 목록.
누군가 타임머신을 발명한다면 고쳐야 할 것들. :P
white-space: nowrap는 white-space: no-wrap였어야 한다
white-space에 추가되지 말았어야 한다animation-iteration-count는 그냥 animation-count였어야 한다 (column-count처럼!)
vertical-align은 테이블 셀에 적용되면 안 된다. 대신 CSS3 정렬 속성들이 Level 1에 존재했어야 한다.
vertical-align: middle은 text-middle 또는 x-middle이어야 한다. 실제로는 가운데가 아니며, 그런 이름이 하는 일을 더 잘 설명한다.
퍼센트 높이는 auto 상황에서 정의되지 않는 대신 fill-available을 기준으로 계산되어야 한다.
테이블 레이아웃은 멀쩡해야 한다.
box-sizing은 기본값이 border-box여야 한다.
background-size에 값 하나를 주면 그 값을 복제해야지, 두 번째 값을 auto로 기본 설정하면 안 된다. translate()도 마찬가지.
background-position과 border-spacing(모든 2축 속성)은 margin 같은 4방향 속성과 맞추기 위해 _세로_를 먼저 받았어야 한다.
엄밀히 실수는 아니다. 90년대에는 합리적인 기본값이었지만, 그 이후로는 background-repeat의 기본값이 no-repeat이었다면 더 유용했을 것이다.
margin 같은 4값 단축 표기는 반시계 방향으로 가야 한다(즉, inline-start 값이 block-end와 inline-end 값들 뒤가 아니라 앞에 오도록).
z-index는 z-order 또는 depth라고 불렸어야 하고, (플렉스 아이템에서처럼) 모든 요소에서 그냥 작동해야 한다.
word-wrap/overflow-wrap는 존재하면 안 된다. 대신 overflow-wrap는 nowrap(no-wrap)처럼 ‘white-space’의 키워드였어야 한다.
단일 박스의 위/아래 마진이 자동으로 서로 겹쳐 접히도록 허용된 적이 없어야 한다. 이것이 모든 마진-접힘 악의 근원이다.
min/max-height를 처리하기 위한 이상한 규칙들 대신, 마진의 부분 접힘?
테이블은(다른 non-block들, 예: 플렉스 컨테이너처럼) 가짜 스태킹 컨텍스트를 형성해야 한다.
currentColor 키워드는 원래 명세대로 대시를 유지했어야 한다. 즉 current-color. 다른 모든 여러 단어로 된 색 키워드 이름도 마찬가지.
결국 채택된 임의의 X11 이름들 대신, (CNS 같은) 예측 가능한 색 이름 체계가 있었어야 한다.
border-radius는 corner-radius였어야 한다.
절대 위치 지정된 대체 요소(replaced elements)는 반대쪽 오프셋 속성(예: left+right)이 설정되면 시작 정렬되는 대신 늘어나야 한다.
hyphens 속성은 hyphenate라고 불려야 한다. (hyphenate는 XSL:FO 쪽 사람들이 반대해서 hyphens가 되었다.)
rgba()와 hsla()는 존재하면 안 된다. 대신 rgb()와 hsl()이 선택적 네 번째 매개변수를 가졌어야 한다(그리고 알파 값은 R, G, B 또는 S, L과 같은 형식을 사용했어야 한다).
자손 결합자(descendant combinator)는 >>였어야 하고, 간접 형제 결합자(indirect sibling combinator)는 ++였어야 한다. 그러면 선택자들의 ASCII 아트 사이에 논리적 관계가 생긴다.
*-blend-mode 속성들은 그냥 *-blend였어야 했다
유니코드 범위 구문은 u0001-u00c8처럼 CSS의 나머지와 일관되었어야 한다.
유니코드 범위는 자체 토크나이징이나 토큰 처리를 가진 별도의 마이크로 구문을 가지면 안 됐다. 선택자(예: u+a)가 유니코드-범위 토큰인 것들을 처리하게 만들거나, 유니코드-범위가 다른 거대한 범위의 토큰(과학적 표기법 포함/미포함의 숫자와 치수, 식별자, +)을 처리하게 만드는 데 필요한 토크나이징 해킹은 둘 다 끔찍하다.
font-family는(“CSS 밖”에서 오는 다른 모든 값들처럼) 글꼴 이름에 따옴표를 필수로 했어야 한다. 따옴표 없는 글꼴 이름을 처리하는 규칙 때문에 font 파싱이 멍청해지며, 모호성 해소를 위해 font-size 값이 필요해진다.
Flexbox는 flex-basis 대 width/height에 대해 덜 미친 듯이 동작했어야 한다. 예를 들면: width/height가 auto이면 flex-basis를 사용하고, 그렇지 않으면 width/height를 유연하지 않은 크기로 고수한다. (이렇게 하면 min/max width/height 동작도 일반 정의에서 자연스럽게 따라온다.)
:empty는 :void였어야 하고, :empty는 공백만 포함한 항목을 선택했어야 한다
table-layout: fixed; width: auto는 고정 레이아웃 열을 가진 fill-available 테이블이 되어야 한다.
text-orientation은(‘writing-mode’의 최신 변경을 고려하면) 초기값으로 upright를 가졌어야 한다.
@import 규칙은 (a) 캐시 헤더를 지정하지 않는 한 항상 네트워크를 치고, (b) 동일하더라도 매 import마다 새로운 CSSStyleSheet 객체를 구성해야 한다. 더 공격적인 URL 기반 중복 제거를 했어야 하고, 스타일시트 객체 공유를 허용했어야 한다.
Selectors는 미래 대비가 끔찍하다. 최상위 콤마에서 분리하고, 전체를 무시하는 대신 알 수 없거나 유효하지 않은 구간만 무시했어야 한다.
:link는 처음부터 :any-link 의미론을 가졌어야 한다.
flex 단축 표기(그리고 flex-shrink, flex-grow 장축 표기)는 flex 분수를 나타내기 위해 맨숫자 대신 fr 단위를 받아들여야 한다.
display 속성은 display-type이라고 불려야 한다.
list-style 속성들은 marker-style이라고 불려야 하고, list-item은 marked-block 같은 것으로 이름이 바뀌었어야 한다.
text-overflow 속성은 overflow에 의존하지 말고 항상 적용되어야 한다
line-height: <percentage>는 동등한 line-height: <number>로 계산되어, 사실상 길이가 아니라 백분율로 상속되도록 해야 한다
::placeholder는 ::placeholder-text여야 하고 :placeholder-shown은 :placeholder여야 한다
overflow: scroll은 스태킹 컨텍스트를 도입해야 한다
size는 다른 정의를 가진 @page 속성이 아니라 width와 height의 단축 표기였어야 한다
아마도 grid properties에서 키워드(span)와 식별자(idents)를 섞는 것은 피했어야 했다. 아마 함수 표기법(예: span(2))을 사용함으로써.
주석은 CSS에서 사실상 어디에나 허용되면 안 됐다(콘텐츠가 들어가는 곳에서만 사실상 허용하는 HTML과 비교). 그렇게 되면 객체 모델에서 사실상 표현 불가능해지고, 결국 객체 모델 위에 직접 편집 기능을 구축하는 것이 불가능해진다.
Flexbox의 정렬 속성들은 flex-flow 상대가 아니라 writing-mode 상대였어야 했고, 그래서 align-inline-*와 align-block-* 같은 reasonably understandable한 이름을 가질 수 있었을 것이다.
shape-outside는 사람들이 clip-path처럼 도형이 콘텐츠도 클리핑한다고 가정하므로, 이름에 어떻게든 wrap-이 들어갔어야 한다.
!important가 아니었어야 한다 — 엔지니어들 눈에는 “중요하지 않음”으로 읽힌다. 다른 방식의 표기를 골랐어야 했다.