sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다.
원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다.

1. color는 글자에만 적용되는 게 아니다.
– 이미지가 없을 때의 대체 텍스트 색상
– 기본 보더 색상
– 목록 엘리먼트의 불릿 기호 또는 숫자 마커의 색상
–hr엘리먼트의 선 색상
등으로도 적용된다고 합니다.

2.visibility속성에는 collapse 값도 설정할 수 있다.
테이블 내부 요소에 한해visibility : collapse를 설정하면display : none과 같이 동작한다고 합니다(즉 공간을 차지하지 않는다는 얘기). 하지만 브라우저마다 동작이 다르고 특히 크롬에서는visibility : hidden처럼 동작합니다.

3.background단축 속성에 3가지 값을 더 쓸 수 있다.
CSS3에서는background-size,background-origin,background-clip속성도background속성에 추가할 수 있습니다. 단, CSS3에 추가된 속성을 사용하려면 앞에 슬래시를 붙여야 한다고 합니다.

4. clip 속성은 엘리먼트가 절대 좌표일 때만 동작한다.
position: absolute혹은fixed인 경우에 한해서만 적용된다고 합니다.

5. 수직 공간(위 또는 아래)에 대한 퍼센트는 높이가 아닌 너비에 비례한다.
margin-top/bottom,padding-top/bottom에 퍼센트를 쓰면 너비에 비례해서 값이 바뀌네요. 왜 이렇게 만든 걸까요…

6.border는 인셉션 같다.
border는 단축 속성인데 알고 보면border에서 설정할 수 있는 각 속성들도 사실은 또 단축 속성이고…

7.text-decoration은 단축 속성이 됐다.
새로운 스펙에 따라 선 종류, 선 색상, 선 스타일을 한꺼번에 설정할 수 있다. 현재는 파이어폭스만 지원한다.

8.border-width속성에는medium,thin,thick같은 키워드도 사용할 수 있다.

9.border-image는 아무도 안 쓴다.
데모에서 박스 크기 바꿔보면 안 쓰는 이유를 알 것도 같네요. -_-;;

10.empty-cells라는 속성도 있다.
테이블의 빈 셀을 보여줄건지 / 아닌지 설정할 수 있는 속성. 심지어 IE8부터 모든 브라우저가 다 지원하네요.

11.font-style속성에는oblique라는 값도 있다.
우리가 “이탤릭”이라고 알고 있던 기울임꼴은 사실oblique가 맞는 거고, 원래 “이탤릭”이라고 불리는 글꼴은 따로 있네요(위키피디아 Oblique Type참고). “진짜 이탤릭”을 지원하는 폰트가 있다면 기대했던 모양과 달라질 수 있으니 현재 사용되고 있는 이탤릭체에 적절한 값은olbique가 더 맞다는 얘기입니다.

12.word-wrap은overflow-wrap과 같다.
word-wrap이 되려면 단어 단위로 줄이 바뀌어야 되는데 지금은 그냥 정해진 영역을 넘어간 내용을 자르고 있으므로overflow-wrap과 같이 동작한다는 뜻입니다. 용어가 혼란스럽게 잘못 만들어졌다는 얘기인데, CSS 워킹 그룹의Incomplete List of Mistakes in the Design of CSS (CSS 설계상의 실수)라는 글을 읽어보면 같은 내용이 나옵니다. W3C에서도word-wrap을overflow-wrap으로 대체하기로 했다고 하네요.