css -webkit- vendor prefix는 webkit 엔진에서만 사용할까?

eunsoo kim·2023년 10월 22일
0

궁금한 웹 개발

목록 보기
6/6
post-thumbnail

Firefox(Gecko 엔진)에서도 사용됩니다.

Firefox는 Windows에선 Gecko엔진, iOS에선 webkit엔진을 사용합니다.
49버전 부터 호환성을 위해 일부 webkit prefix를 허용했습니다.

1. MDN에서의 vendor prefix.

  • -webkit-(Chrome, Safari, 최신 버전의 Opera 및 Edge, iOS용 Firefox를 포함한 거의 모든 iOS 브라우저, 기본적으로 모든 WebKit 또는 Chromium 기반 브라우저)
  • -moz-(파이어폭스)
  • -o-(오래된 WebKit 이전 버전의 Opera)
  • -ms-(Chromium 이전의 Internet Explorer 및 Microsoft Edge)

2. Firefox는 어떤 랜더링 엔진을 사용할까?

  • Desktop, Android, Thunderbird 에서는 Gecko엔진을 사용했습니다.(firefox-source-docs)
  • IOS Firefox는 webkit엔진을 사용했습니다.(firefox-source-docs)
    * Apple은 iOS의 브라우저 제한 정책으로 webkit엔진을 사용하게 합니다.(2.5.6 소프트웨어 요구사항 developer.apple)

3. 호환성을 위해 Mozilla는 webkit prefix를 허용했습니다.

2가지 종류의 Firefox(gecko엔진, WKWebView 프레임워크를 사용한 webkit엔진)는 기존 컨텐츠와의 호환성을 향상시키기 위해 Firefox 49버전부터 일부 webkit prefix를 허용했습니다.(MDN)
* 최근 Apple 정책 변화를 예상하고 Mozilla에서는 비webkit iOS버전을 만들고 있다는 뉴스가 있습니다.2023.02.07(macrumors)

4. -webkit- vendor prefix는 webkit 엔진 브라우저에서 사용되고, Firefox(Gecko 엔진)에서도 사용됩니다.

모든 webkit css속성이 아니라 일부 css속성을 Firefox에서 -webkit- prefix를 허용합니다.
허용되는 css속성은 문서에서 확인할 수 있습니다.(MDN)

참고사이트

profile
순간을 소중히

5개의 댓글

comment-user-thumbnail
2023년 10월 26일

본적 없는 주제라 한참을 보고 갑니당 …ㅎㅎ잘 읽었습니다~

답글 달기
comment-user-thumbnail
2023년 10월 29일

처음보는 개념이네영 잘보고 갑니당~

답글 달기
comment-user-thumbnail
2023년 10월 29일

항상 새로운 내용이라 재밌어요! 잘 읽고 갑니다 ㅎㅎ

답글 달기
comment-user-thumbnail
2023년 10월 29일

scroll 관련 개발 중에 저런 개념을 접한 적이 있네요. 크로미움에서 쓰는 웹킷, 엣지에서 쓰는 어쩌구 등 달랐던 게 기억나네요

답글 달기
comment-user-thumbnail
2023년 10월 30일

잘보고 갑니당 !!

답글 달기