Can I use? 여기는 도대체 뭐하는 사이트일까? : 크로스브라우징

크로스브라우징 준비하기 : Can I use

 

 

 

 

 

프론트엔드 개발을 공부하거나 웹퍼블리셔를 공부하는 사람이라면 크로스브라우징을 모두 한 번 이상은 들어보게 된다.

 

크로스브라우징이란?

 

웹사이트를 제작을 하게 되면 다양한 html과 css를 사용하게 된다.

 

그런데 브라우저에 따라 html과 css를 받아들일 수 있는게 달라진다.

 

그래서 소스가 같아도 브라우저에 따라 모니터에서 보이는 효과가 달라질 수 있다.

 

이러한 것을 미리 확인해 볼 수 있는 사이트가 있어 이번에 소개한다.

 

사이트 이름은 "캔 아이 유즈"이다.

 

caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

홈페이지의 화면은 아래와 같다.

 

영어로 된 사이트이기 때문에 검색도 영어로 하면 된다.

 

html과 css 코드가 모두 영어이기 때문에 영어로 검색이 크게 문제는 되지 않을 것이다.

 

<캔 아이 유즈 홈페이지 화면>

검색의 결과를 예로 보여주기 위해 "grid"로 검색을 해보았다.

 

grid는 레이아웃 방식 중에서 많이 각광을 받고 있는 방식이다.

 

SK-II 화장품 홈페이지를 벤치마킹 하면서 display: grid 방식을 적용해 보았다.

 

display:flex에 비해서 아주 효과적으로, 효율적으로 레이아웃을 꾸밀 수 있었다.

 

 

www.ezdesign.or.kr/webdesign/portfolio3/ohm/skII/html/sub_news.html#sub_news_header

SK-II News

 

 

하지만 나온지 얼마되지 않는 기술이기 때문에 적용이 되는 브라우저가 제한이 되어 있다.

 

grid를 입력하면 바로 아래 화면과 같이 grid가 각 브라우저에서 어떻게 적용이 되는지 알 수 있다.

 

IE, Edge, Firefox, Chrome, Safari, Opera 등 각 브라우저가 있고, 각 브라우저별로 빨간색, 녹색, 갈색이 표시되고 있다.

 

녹색은 브라우저에서 장애가 없이 해당 소스가 적용이 되는 것을 의미한다.

 

붉은 색은 해당 소스가 그 브라우저에서 적용이 되지 않는 것을 의미한다.

 

갈색은 반반이다. 불안정하다는 의미이다.

 

내가 지금 사용하는 소스가 크로스브라우징에 적합한지 아닌지 확인이 필요할 때 이 사이트는 많은 도움이 된다.

 

<캔 아이 유즈에서 grid 검색 결과 예시>

 

참고로 크로스브라우징을 준비하는 2가지 방법을 추가로 소개한다.

 

하나는 벤더 프리픽스이다. 구글에서 검색을 해보면 간단한 설명과 사용법을 알 수 있다.

 

두번째는 SASS와 같은 Css 전처리기이다. Css 전처리기의 옵션에서 벤더 프리픽스 사용을 설정해 놓으면 저절로 벤더 프리픽스를 적용해 주어서 코딩을 하면서 놓칠 수 있는 크로스브라우징을 잡아준다.

 

sass-lang.com/

Sass: Syntactically Awesome Style Sheets