- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
브라우저 접두어
그런데 css3의 브라우저 접두어에 대하여 별얘기들이 없습니다.
브라우저 접두어는 현재 css3에서 브라우저마다 틀린 렌더링 방식을 지원하기위해 접두어를 사용하는 방법입니다.
접두어 사용방식은 사파리에서 사용하기 위해 웹킷팀이 먼저 개발하고 사용했습니다.
그런데 웹킷팀이 먼저 사용한 접두어가 w3c권고안으로 되면서 파이어폭스,오페라,크롬 등등 진지하게 접두어에 대하여
조사하고 연구한결과 우리도 접두어를 사용하겠다, 현재 안정적으로 구현되기에 지원을 하겠다 발표를 했습니다.
사용법은 간단합니다.
-webkit- 웹키트 계열
-moz- 모질라 계열
-o- 오페라 계열
-ms- ms계열
-khtml- 콘쿼러 계열
-chrome- 크롬 계열
현재 총 6개의 브라우저별 접두어가 있습니다.
그런데 과연 다들 잘 알고 사용 하고 있을까요?
현재 w3c권고 표준안과 브라우저 접두어 의 순서는 아래와 같습니다.
-webkit-transition:
-moz-transition:
-o-trasition:
trasition:
먼저 브라우저 접두어속성을 가장 상위에 써주고 마지막에 표준안을 써주는 것입니다.
현재 css3를 사용하기 위해 접두어를 사용하는 우리는 그저 현재 지원하는 브라우저부터 잘 작동되게끔 해야 합니다.
그러기 위해서는 먼저 지원하는 브라우저부터 순서대로 써주는 것입니다.
나중에 접두어가 사라질 확률이 높을것으로 예상됩니다.
이유는 css3의 표준권고안이 제안에서 최종으로 확정되면 그때는 접두어를 사용할 필요가 없어지기 때문입니다.
최종권고안때는 위와같이 코드를 써놓은부분들이 브라우저마다 인식을 안하고 마지막 표준안만 인식 할 것입니다.
그렇기에 우리는 현재 지원률이 높은 브라우저부터 지원을하고 나중에 표준권고안이 최종으로 되면 마지막으로 인식 될것이기에
미리 문제가 발생되는 사태를 안일어나게끔 하는편이 좋습니다.
사실 현재 브라우저마다 표준으로 지원하는 것들도 있지만 일부 지원이 안되는 것들이 있기에 접두어를 사용하는 이유도 있습니다.
댓글 쓰기 권한이 없습니다.
20 | Modernizr - 브라우저 기능검사 | 2017.05.29 |
19 | 화면 깜빡임(FOUC) 문제해결 | 2017.05.29 |
18 | HTML5 브라우저 파편화를 최소화해주는 폴리필(POLYFILL)이란? | 2017.02.08 |
17 | 인라인 코딩 사이에 개행으로인한 공백 없애기 | 2017.02.08 |
16 | opacity | 2016.05.30 |
15 | background-size: cover | 2016.05.27 |
14 | [IE] IE의 호환성보기 설정하기 | 2016.05.13 |
13 | 크로스브라우징 | 2016.02.04 |
12 | IE6 버그 정리 | 2016.02.04 |
11 | 브라우저별 핵 | 2015.05.02 |
> | css3의 브라우저 접두어 | 2015.05.02 |
9 | Caption을 제어하는 방식을 | 2014.11.11 |
8 | [tip]ie7에서 caption 인식 밀리는 현상 발생 | 2014.11.11 |
7 | text-shadow 크로스브라우징 | 2013.02.25 |
6 | 브라우저별 CSS | 2013.02.25 |
5 | 이미지에 포함된 텍스트의 양이 너무 많을때 | 2013.08.02 |
4 | 브라우저별 셀렉터 옵션 검색하기 | 2013.08.02 |
3 | ie6, ie7 display:inline-block 버그 | 2013.08.02 |
2 | 크로스브라우징 팁 | 2013.08.02 |
1 | PNG-24를 배경으로만 사용하려는 경우의 CSS Hack | 2013.08.02 |