브라우저 기능검사 / 브라우저 호환성 / SVG 지원 불가일 때 대체 이미지 띄우기

제일 속상할때가

열심히 만들어놨는데

익스에서 동작 안 할때...........ㄱ-...

우리나라에서 가장 많이 쓰는 인터넷익스플로러가 지원하는 내용이 적어서

항상 브라우저 호환성을 염두에 두고 작업을 해야한다

하지만 만들고 발견하는 경우가 허다하니..

이런 부분을 보완해주는 것이 바로 Modernizr 모더나이저이다

구글에서 modernizr.com 을 입력하면 바로 들어간다

사용하는 브라우저의 특성에 대응해준다고 한다.

영어로 되어있지만 당황하지 않고

Add your detects 버튼을 눌러준다

그럼 이렇게 지원이 필요한 기능을 선택할 수 있다

오늘의 경우  SVG 이미지가 지원 안 되는 브라우저일 때

SVG 이미지 대신 대체 이미지를 띄울 부분을 보완하는 것이라

SVG만 클릭했다

클릭하면 이렇게 오른쪽에 SVG에 관한 내용이 나온다.

그냥 그 위의 BUILD 버튼을 눌러주면된다

그럼 이렇게 팝업이 뜨는데,

Build 부분의 DOWNLOAD 를 눌러주면 된다.

js 파일을 다운 받는 것이라 경고창이 나타난다

무시하고 계속 받으면 된다

다운로드 받은 modernizr!

이를 보완이 필요한 페이지에 link태그로 연결하고

스크립트 내용을 넣어주면 된다.

만약 muffin.svg 이미지가 표시되지 않는경우

pf.png 를 보여주라는 내용의 스크립트!

자바 스크립트 잘 못 쓰는 나도

이건 쉬웠다..헤헿