jQuery로 HTML5 ```html 태그의 브라우저 호환성 감지하기

HTML5 <mark> 태그 호환성 확인이 필요한 이유

HTML5에서 새롭게 도입된 <mark> 태그는 텍스트를 형광펜으로 칠한 듯 하이라이트 처리할 때 사용합니다. 이 태그를 지원하는 브라우저에서는 기본적으로 노란색 배경(rgb(255, 255, 0))이 자동으로 적용됩니다.

하지만 Internet Explorer 8 이하와 같은 구형 브라우저는 <mark> 태그를 인식하지 못하므로, 스타일이 전혀 적용되지 않아 화면이 달라 보일 수 있습니다. 따라서 jQuery 등을 활용해 태그 지원 여부를 감지하고, 미지원 브라우저에는 별도의 CSS나 폴리필을 적용하는 것이 좋습니다.

jQuery를 활용한 <mark> 태그 호환성 검사 코드

아래 코드는 <mark> 요소를 실제로 생성해 DOM에 추가한 뒤, 브라우저가 기본 배경색을 적용했는지 확인하는 방식으로 호환성 여부를 판별합니다.

var $myEL = $('<mark>');
$myEL.appendTo('body');
var bgColor = $myEL.css('backgroundColor');

if (/rgb\(255\, 255\, 0\)/.test(bgColor))
    return true;
else
    return false;

코드 동작 방식

1. 요소 생성: $('<mark>')로 <mark> 요소를 메모리상에 생성합니다.
2. DOM 추가: appendTo('body')로 문서에 삽입해야 브라우저가 기본 스타일을 계산할 수 있습니다.
3. 배경색 확인: css('backgroundColor')로 계산된(computed) 배경색 값을 가져옵니다.
4. 정규식 검사: 반환값이 rgb(255, 255, 0)과 일치하는지 정규식으로 검사하여 지원 여부를 true/false로 판단합니다.

적용 시 참고 사항

일부 브라우저는 색상 값을 rgb(255,255,0)처럼 공백 없이 반환하거나, 최신 버전에서는 rgba 형식으로 반환하기도 합니다. 안정성을 높이려면 정규식에서 공백을 선택적으로 처리(\s*)하거나, Modernizr 같은 피처 디텍션(feature detection) 라이브러리를 함께 활용하는 것이 좋습니다.

또한 검사가 끝난 뒤에는 $myEL.remove()로 임시로 생성한 요소를 제거해 주어야 DOM이 불필요하게 오염되지 않습니다. 이러한 간단한 감지 로직을 통해 구형 브라우저에서도 일관된 하이라이트 효과를 제공할 수 있습니다.