IE 조건부 주석부터 GeoURL까지, 웹 페이지에 남은 HTML 잔재 정리

루비 태그를 중국어 텍스트에 쓰는 게 좋더라. 일본어와 한국어 같은 다른 문자 체계에도 적용되고 CSS Ruby 명세에도 정리돼 있음.

IE 전용 폴백은 우리 사이트에서 2021년쯤 마지막으로 지웠고, 조건부 주석도 2020년까지 남아 있었던 듯함. msapplication- 메타 필드는 그 뒤에 뺐고, 이제 apple-touch-와 application-name도 정리할까 싶음.

Safari 고정 탭용 메타 태그도 빠졌음. 흑백 SVG를 지정하면 탭을 고정했을 때 활성 상태는 색상으로, 비활성 상태는 검정으로 표시됐음.

GeoURL 같은 건 지금도 쓸모 있을 것 같음. 사이트 주제의 지리적 위치를 연결하는 방식 자체는 아직 유효함.

IE의 PNG 알파 우회 코드 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...)는 아직도 기억남. IE6에서 투명 PNG 때문에 그래픽 작업 선택지가 너무 줄었음.

나도 그 필터를 기본 페이지 설정에 넣었음. 투명 PNG로 둥근 테두리를 만들려고 div 9개를 중첩하고 이미지 9개를 썼고, spacer.gif도 생각남.

이런 잔재가 벽 밑에 쌓인 진흙처럼 많다는 건 나쁜 징후는 아니라고 봄. 다만 <?xml-stylesheet?> 처리 명령과 JavaScript XSLTProcessor API가 사라진 건 아쉬움.

예전 doctype은 매 페이지에 XHTML DTD URL까지 넣어야 해서 번거로웠음. X-UA-Compatible까지 합치면 CMS가 없는 사람은 문서 첫 줄 몇 개를 튜토리얼에서 계속 복사했을 듯함.

나중에는 그 doctype 패턴을 외워서 직접 타이핑하게 됐음.

글은 X가 Open Graph로 대체돼 twitter: 메타 태그가 대체로 쓸모없다고 하는데, twitter:card에는 OG 대응 항목이 없고 지금도 작동하는 것으로 앎.

예전에는 파일 맨 앞의 문자셋이나 BOM 설정이 조금만 틀려도 æøå 같은 문자가 깨졌음. 지금은 UTF-8로 통일돼서 이 문제는 거의 끝난 느낌임.

viewport에는 initial-scale=1만 넣어도 iOS Safari가 세로에서는 device-width, 가로에서는 device-height를 추론함. 직접 시험해 봤음.

그 동작은 Safari 전용일 수도 있음. Google은 Lighthouse 문서에서 width=device-width와 initial-scale=1을 둘 다 넣으라고 권함.

Netscape 3.x부터 현재 브라우저까지 지원하는 호환성 프레임워크를 만들고 있는데 이 자료가 도움 됨. 나는 오래된 코드를 걷어내는 쪽보다 레거시 환경에 넣는 쪽으로 보게 됐음.

서버 측 이미지 맵도 이런 목록에 들어갈 만함. 좌표 클릭을 서버가 해석하던 방식임.