CSS에서 공급 업체 접두사를 다시 생각할 때가되었습니다

키 포인트

CSS에서 에서 접두사를 광범위하게 사용하면 일부 웹 사이트가 IT없이 제대로 작동하지 않아 Mozilla가 접두사를 사용하여 웹 페이지와 Fire-Fox 호환성을 향상시키기 위해 Mozilla가 비표준

접두사를 지원하도록합니다. 이것은 Microsoft Edge 및 Opera의 접근 방식과 일치합니다.

개발자는 접두사 사용을 다시 생각하고 웹 사이트 호환성, 특히
• 접두사를 생략하는 웹 사이트 호환성을 테스트하는 것이 좋습니다. 새로운 변경 사항은 Firefox 46 또는 47 성능의 웹 사이트에 영향을 줄 수 있습니다. -webkit- Chrome/Blink, Firefox 및 Microsoft Edge 팀이 더 나은 솔루션을 찾고, 공급 업체 접두사가 점차 사라지고 있습니다. 공급 업체 접두사를 포기하는 것은 우아한 다운 그레이드에이를 사용하는 것은 실행 가능한 접근 방식이 아니라는 것을 의미하며 개발자는 접두사를 사용하지 않는 비트 브라우저에서 예상치 못한 결과를 생성하지 않도록해야합니다. -webkit -webkit-
• 접두사가 네트워크에서 CSS를 지배하기 때문에 일부 웹 사이트는 제대로 작동하지 않습니다. 이것은 지난 몇 년 동안 개발자의 접근 방식이 이상적이지 않다는 신호이지만, 모질라는 다소 불행하지만 거의 필요한 측정으로 이어졌습니다. Mozilla는 Firefox 46 또는 47 (각각 2016 년 4 월 또는 5 월에 출시)까지 다양한 비표준 -moz- 접두사에 대한 지원을 구현하여 Firefox를 개선하고
접두사 (일반적으로 모바일) 웹 페이지 호환성을 사용합니다.
• 이것은 새로운 아이디어가 아니며 Microsoft Edge는 호환성을위한 다양한
접두사를 지원합니다. Opera는 2012 년 초에

접두사를 구현하기 시작했으며 이후 WebKit 기반 깜박임 엔진으로 옮겼습니다.

W3C 및 브라우저 제조업체는 생산 웹 사이트에서 제조업체 접두사를 사용하지 않습니다 : -webkit- "W3C의 공식 정책 성명서에서, 당신은 생산 코드에서 실험 속성을 사용해서는 안됩니다. 그러나 사람들은 웹 사이트를 멋지게 보이고 기술의 최전선에 머물기를 원하기 때문에합니다." -webkit- -webkit 그러나 그러나 개발자는 모든 곳에서 최신 기능에 액세스하기 위해 가능한 빨리 사용하기를 원합니다. 접두사가 WebKit의 지배력으로 인해 약간의 혼란을 야기했지만 네트워크가 빠르게 성장하는 데 성공하는 데 도움이되었다고 생각합니다. Mozilla와 Microsoft의 접근 방식은 대부분의 웹 사이트에 무해 할 수 있습니다. 대부분의 온라인 사이트에는 이미

접두사가 포함되어 있거나 Mozilla의 업데이트는 웹 사이트의 호환성을 향상시키기 위해 조치가 필요하지 않다는 것을 알게 될 것입니다. 그러나 전문 웹 개발자로서 우리는 일부 디자인에 비정상적인 결과가있을 수 있음을 철저하고 이해해야합니다. 업데이트로 어떤 작품이 중단 될 수 있는지 이미 알고있을 수 있습니다.

개발자, 접두사를 사용하는 방법을 다시 생각 하고이 사이트를 테스트 할 때입니다. -webkit- -webkit- 접두사가 포함되어

모질라에는 일련의

접두사를 포함해야 할 수도 있습니다. 내가 이해하는 한, Mozilla는 Edge에서 지원하는 -webkit- 접두사 목록과 일치하지 않을 것입니다.이 모든 것이 Mozilla의 Gecko 레이아웃 엔진이 더 넓은 네트워크와 호환되도록해야 할 수도 있기 때문입니다. -webkit- 호환성/모바일/비표준 호환성에 대한 위키 페이지의 진술에 따르면 Mozilla가 채택 할 수있는 접두사는 다음을 포함합니다.

접두사의 그라디언트
• -webkit-flexbox
• -webkit-
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
와 같은 다른 기능도 영향을받을 수 있습니다.
• 크로스 브라우저 테스트는 중요합니다 -webkit-background-clip
Firefox에서 새로운 CSS 기능을 테스트 할 필요가 없도록
• 접두사를 생략하는 웹 개발자라면, 서두르고 고객이 그렇게해야한다고 가정합니다. 재시험이 필요합니다. Firefox 46 또는 47의 사이트. 이 버전의 Firefox는 4 월 또는 5 월에 출시되므로 미리 계획 할 시간이 있습니다. -webkit-device-pixel-ratio 이러한 변경 사항이 Firefox 46/47에 도착하기 전에 웹 사이트를 테스트하려면 밤에
환경 설정을 통해 Firefox의 현재 상태에 액세스 할 수 있습니다. 최신 야간 버전이 설치된 경우 기본적으로
• 로 설정해야합니다. 모든

   접두사 변경이 Firefox Nightly에 나타난 것은 아니지만 이곳에서 사이트의 현재 모양을 테스트 할 수 있습니다. 더 철저한 테스트를 위해 Firefox Nightly를 사용하기 위해 3 월까지 기다리는 것이 좋습니다. <code>-webkit-animation</code>
  더 시급하게, Microsoft Edge는 이러한 방식으로 

접두사를 해석하고 표시했습니다. 즉, 웹 사이트에 포함 된 WebKit 특정 스타일이 이미 예상하지 않은 브라우저에 이미 표시되었을 수 있습니다. 그렇게하지 않은 경우 Windows 10의 Microsoft Edge를 방문 하여이 사이트를 테스트하십시오!
• -webkit-border* 제조업체 Prefix가 사라지고

가 사라지고 있습니다 운 좋게도, 브라우저 팀이 더 나은 솔루션을 찾을 때 공급 업체 접두사가 사라지는 것처럼 보입니다. Chrome/Blink 팀은 접근 방식을 조정했습니다

"앞으로도, 우리는 더 이상 벤더 접두사를 사용하여 기본 기능을 활성화하지 않고 대신 기능이 활성화 될 때까지 기본값이 준비 될 때까지 실험적 웹 플랫폼 기능의 깃발 뒤에 (refixed) 기능을 @-webkit-keyframes의 플래그에 남겨 두십시오. ”—— Chrome/Blink Team

Firefox 팀은 비슷한 접근 방식으로 나아가고 있습니다 :

"자체적으로, Mozilla 내에서의 현재 추세는 충분히 안정적이면 접두사없이 릴리스 또는 게시 전지를 끄거나 공급 업체 접두사를 피하는 것입니다. 적어도 일반적인 전략에 따라 예외는 예외가 필요할 수 있습니다. .” - Mozilla의 Boris

Microsoft Edge는 접두사에 대한 지원을 완전히 제거하는 것을 목표로합니다.

"Microsoft는 또한 Edge의 공급 업체 접두사를 제거하고 있습니다. 이는 개발자가 특수 HTML5 또는 CSS 기능을 활용하려면 특정 Edge 접두사를 사용할 필요가 없음을 의미합니다. 웹 표준에.”—— mashable

접두사를 통한 더 이상 우아한 다운 그레이드

제조업체의 접두사에서 벗어나는이 움직임은 한 가지 측면을 의미합니다. 제조업체의 접두사를 통한 우아한 다운 그레이드는 분명히 가능하지 않습니다.

공급 업체 접두사를 사용하여 특정 브라우저를 찾는 것은 (예 : Chrome의 특정 컨텐츠)는 공급 업체 접두사의 의도가 아닙니다. 접두사 속성에 의존하는 기능을 사용하고 있으며 접두사를 사용하여 다른 브라우저의 디자인을 우아하게 낮추면 더 이상 작동하지 않습니다.

결론

<.> 시간이 바뀌고 있습니다. WebKit의 지배력은 실수로 네트워크 분할과 비 호환성으로 이어졌으며 다른 브라우저는 접두사를 구현하여 페이스를 유지하기 위해 호환성을 향상 시키려고 노력하고 있습니다. 공급 업체 접두사가 단계적으로 폐지 되면서이 문제가 사라져야하지만 개발자는 접두사를 사용한다고해서 예상치 못한 결과를 생성하지 않는지 확인해야합니다. 유용한 링크

이러한 변경 사항에 대한 Mozilla 의도 문서 Bugzilla 에서이 문제에 대한 Mozilla의 버그 추적 최신 버전의 Microsoft Edge는 WebKit Api

를 지원합니다 -webkit- 접두사를 온라인 생활의 표준에 소개하는 문서 Firefox WebKit 호환성에 대한 레지스터 보고서가 변경 -o-

CSS의 제조업체 접두사에 대한 자주 질문 CSS의 공급 업체 접두사 란 무엇이며 왜이를 사용합니까? 공급 업체 접두사는 브라우저 제조업체가 공식 CSS 사양의 일부가되기 전에 새로운 CSS 기능을 추가 할 수있는 방법입니다. 이러한 새로운 기능이 다른 브라우저의 기존 기능을 방해하지 않도록하는 데 사용됩니다. 이를 통해 개발자는 새로운 기능을 실험하고 CSS 사양 프로세스에 대한 피드백을 제공 할 수 있습니다.

공급 업체 접두사가 현대 웹 개발에서 여전히 필요합니까?

공급 업체 접두사의 필요성은 항상 웹 개발자들 사이에서 논쟁의 주제였습니다. 그들은 한때 크로스 브라우저 호환성을 보장하는 데 결정적인 것이었지만 Modern Web은 다른 브라우저간에 CSS 기능의 상당한 표준화를 보았습니다. 따라서 공급 업체 접두사에 대한 수요는 크게 줄어들지 만 경우에 따라 여전히 실험 기능에 사용됩니다. -webkit- 일반적인 공급 업체 접두사는 무엇입니까?

일부 공통 공급 업체 접두사에는

(Chrome, Safari, Newer Opera Version), (Old, Pre-Webkit Opera 버전) 및 (Internet Explorer 및 Microsoft 가장자리).

CSS 코드에서 공급 업체 접두사를 사용하는 방법은 무엇입니까? -webkit- 공급 업체 접두사를 사용하려면 스타일 시트의 CSS 속성 앞에 추가하십시오. 예를 들어, Firefox 벤더 접두사와 함께 -moz- 속성을 ​​사용하려면 를 쓸 수 있습니다. -o- 제조업체 접두사 사용의 단점은 무엇입니까? -ms- 공급 업체 접두사 사용의 주요 단점은 CSS 코드를 더 복잡하고 유지하기가 더 어려워지는 것입니다. 각 브라우저에는 자체 공급 업체 접두사가 있으므로 단일 CSS 속성에 대해 여러 줄의 코드를 작성해야 할 수도 있습니다. 또한 공급 업체 접두사는 공식 CSS 사양의 일부가 아니기 때문에 코드 검증 문제를 유발할 수 있습니다.

제조업체의 접두사 문제를 피하는 방법은 무엇입니까?

공급 업체 접두사 문제를 피하는 한 가지 방법은 SASS 이하와 같은 CSS 전 처리기를 사용하는 것입니다. 이는 자동으로 코드에 공급 업체 접두사를 추가합니다. 또 다른 옵션은 AutoPrefixer와 같은 후 처리기를 사용하는 것입니다. AutoPrefixer는 지원하려는 브라우저를 기반으로 공급 업체 접두사를 추가 할 수 있습니다.

제조업체 접두사를 사용하는 대안이 있습니까?

예, 공급 업체 접두사 사용에 대한 대안이 있습니다. 대안은 ModernIZR과 같은 기능 감지 라이브러리를 사용하여 특정 CSS 기능을 테스트하고 지원하지 않는 브라우저에 대한 폴백 솔루션을 제공 할 수 있습니다. 또 다른 대안은 CSS 그리드 또는 Flexbox를 사용하는 것인데, 현재는 널리 지원되며 공급 업체 접두사가 필요하지 않습니다. border-radius CSS에서 제조업체의 접두사의 미래는 무엇입니까? -moz-border-radius: 10px; CSS에서 제조업체의 접두사의 미래는 불확실합니다. 어떤 경우에는 여전히 사용 중이지만 추세는 공급 업체 접두사보다는 기능적 탐지의 표준화 및 사용으로 이동하는 것입니다. 그러나 그들은 가까운 미래에 CSS 환경의 일부로 남아있을 가능성이 높습니다.

공급 업체 접두사는 웹 사이트 성능에 어떤 영향을 미칩니 까?

 공급 업체 접두사는 CSS 코드의 크기를 증가시키기 때문에 웹 사이트 성능에 영향을 줄 수 있습니다. 그러나 특히 CSS 압축기를 사용하여 코드를 압축하는 경우 영향은 일반적으로 적습니다. 

제조업체 접두사의 최신 개발을 따라 잡는 방법은 무엇입니까?

웹 개발의 빠르게 변화하는 특성으로 인해 공급 업체 접두사의 최신 개발을 유지하는 것은 어려울 수 있습니다. 그러나 CSS 관련 블로그, 포럼 및 소셜 미디어 계정을 따르는 것이 도움이 될 수 있습니다. 또한 CSS Working Group의 웹 사이트 및 Mozilla Developer Network는 최신 정보를 최신 상태로 유지하기위한 훌륭한 리소스입니다.

위 내용은 CSS에서 공급 업체 접두사를 다시 생각할 때가되었습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!