크로스 브라우징을 위한 핵테그(hack tag)와 CSS접두어(Vendor Prefix)

Photo by Patrick Perkins on Unsplash

hack tag 핵테그

특정 브라우저에만 적용하기 위해 사용하는 코드를 핵테크라고 부릅니다.

/* Chrome hack tag */
@media screen and (-webkit-min-device-pixel-ratio:0){ /*CSS 코드작성*/ }

/* Firefox hack tag */
@-moz-document url-prefix() { /*CSS 코드작성*/ }

/* Safari, Chrome hack tag */
@media screen and (-webkit-min-device-pixel-ratio:0) { /*CSS 코드작성*/ }

CSS 브라우저별 접두어(Vendor Prefix)

브라우저의 어떤 엔진을 사용하는지 선언하여 적용하지 못하는 브라우저는 해당 속성을 무시하게 되어 오류를 방지할 수 있습니다.

• -webkit- : 구글, 사파리 브라우저에 적용
• -moz- : 파이어폭스 브라우저에 적용
• -ms- : 익스플로러에 적용, 보통 생략합니다.
• -o- : 오페라 브라우저에 적용

예시로 여러줄 말줄임표를 사용할 때 자주 사용합니다.

/* 브라우저 접두어 예시 - 세번째 줄부터 말줄임표*/
article {display:-webkit-box; 
word-wrap:break-word; 
-webkit-line-clamp:3;  
-webkit-box-orient:vertical; 
overflow:hidden; 
text-overflow:ellipsis;}