서울신문 웹사이트입니다. 다른부분도 많이 깨지지만 글자에 대한 스타일이 거의 적용이되지 않은 것을 볼 수 있습니다. CSS 코드를 열어보니 CSS 클래스명을 숫자로 시작한 것이 많습니다.

.07_log {font-size:8pt color:#717171; text-decoration:none}
.07_log a{font-size:8pt; color:#717171; text-decoration:none}
.07_log a:visited {text-decoration:none; color:#717171}
.07_log a:hover {text-decoration:none; color:#E04540}
.07_log a:active {text-decoration:none; color:#717171}

.07_sm {font-size:9pt color:#191243; text-decoration:none; padding: 1px 0px 0px 11px}
.07_sm a{font-size:9pt; color:#191243; text-decoration:none}
.07_sm a:visited {text-decoration:none; color:#191243}
.07_sm a:hover {text-decoration:none; font-weight: bold; color:#191243}
.07_sm a:active {text-decoration:none; color:#191243}

CSS 2.1문서의 글자와 대소문자에서는 아래와 같이 설명하고 있습니다.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B&W?" or "B26 W3F".

CSS 2.1과 CSS1 문법을 비교한 부분에서는 아래와 같이 설명하고 있습니다.(정확히 무슨 말인지는 저도 잘 모르겠네요.)

In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".35 5ft")

간단히 말해서 CSS 클래스명이 숫자로 시작해서는 안된다는 얘기입니다. 서울신문 웹사이트는 숫자로 시작하는 클래스명을 많이 사용해서 서체 설정과 관련된 부분은 거의 다 누락되었습니다. 아마도 서체의 크기를 클래스명 앞부분에 표기한 것 같은데 이 부분을 뒤로 옮기면 해결될 것입니다. 더 좋은 것은 서체 크기와 같이 디자인과 관련된 의미를 클래스명에 사용하지 않고 콘텐츠의 의미를 나타내는 키워드를 사용하는 것입니다.

아마도 개발자 분이 IE외의 브라우저는 거들떠도 안본 것 같습니다. 한번 열어보기만 해도 뭔가 문제가 있다는 것을 쉽게 발견했을텐데 말입니다. CSS를 사용했지만 IE외의 브라우저에서는 형편없이 깨지는 사이트들이 많이 보여서 안타깝습니다. 웹표준을 하려고는 하는데 제대로 올바른 길로 가지 못하고 있는 것 같습니다. 좋은 정보있으면 서로들 나누고 도왔으면 좋겠습니다.