크로스 브라우징과 벤더프리픽스

크로스 브라우징이란?

Cross Browsing이란 적어도 표준 웹기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것
※ '똑같이 보이게'가 아닌 '동등한 수준의 정보, 기능접근'이 포인트 → 동일성(x)  동등성(o)

 

 

벤더 프리픽스란?

브라우저별로 따로 놀던 CSS3의 속성을 잡아주기 위해서 사용되기 시작된 프리픽스는 마크업시 Css의 Class앞에 -moz-, -webkit-, -o-, -ms-라는 각 브라우저에서 판독이 가능한 접두어를 붙여서 해당 브라우저에서 인식할 수 있게 하는 것

 

현대에 와서는 브라우저의 버전에 올라가면서, 많은 스타일시트의 속성들이 표준으로 정의되면서 vendor prefix를 사용하지 않아도 되지만, 구형 브라우저(하위 브라우저)를 맞춰주기 위해 아직까지도 vendor prefix가 사용된다.

 

▶ 브라우저별 벤더프리픽스

IE or Edge → -ms-
Chrome → -moz-
Firefox → -webkit-
Opera → -o-
iOS Safari → -webkit-
Android Browser → -webkit-
Chrome for Android → -webkit-
일일이 prefix를 주기에는 신경쓸 속성이 너무 많다.

무분별한 사용은 브라우저의 성능에도 영향을 주기 때문에, 오픈소스 라이브러리인 Prefix Free 라이브러리를 사용하는것도 하나의 방법이다.

 

실험적인 CSS 속성(Property)은 최종적으로 동작이 결정되고 합의되기 전까지는 벤더 프리픽스(Vendor Prefixes)와 함께 제공된다. 대부분의 CSS3 속성이 사용하는 벤더 프리픽스로 Firefox (-moz), Safari/Chrome (-webkit), Opera (-o), and Internet Explorer (-ms)가 있다. 그렇지만 너무 다양하기 때문에 벤더 프리픽스 입력을 누락할 수도 있다.

다음의 속성들은 여러 브라우저에 쓸 수 있는 벤더 프리픽스를 가지고 있다.

animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
appearance
border-end
border-end-color
border-end-style
border-end-width
border-image
border-radius
border-start
border-start-color
border-start-style
border-start-width
box-align
box-direction
box-flex
box-lines
box-ordinal-group
box-orient
box-pack
box-sizing
box-shadow
column-count
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-width
hyphens
line-break
margin-end
margin-start
marquee-speed
marquee-style
padding-end
padding-start
tab-size
text-size-adjust
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
user-modify
user-select
word-break
writing-mode
모든 브라우저에서 같은 CSS 효과를 원한다면 벤더 프리픽스를 사용해야 한다.