CSS가 공급업체 접두사를 사용하지 않고 어떻게 브라우저 업그레이드를 요청할 수 있습니까?

CSS를 사용하여 접두사 없이 브라우저 업그레이드 요청

문제:

폭넓은 지원에도 불구하고 최신 브라우저의 Flexbox의 경우 일부 이전 브라우저에는 여전히 공급업체 접두사가 필요합니다. 따라서 개발자는 접두사를 사용하여 기존 브라우저에 맞춰야 할지, 아니면 사용자에게 더욱 간소화된 코드베이스를 위해 브라우저를 업그레이드하도록 요청할지 고민에 빠질 수 있습니다.

해결책:

이 문제를 해결하기 위해 CSS를 활용하여 오래된 브라우저를 대상으로 하고 별도의 업그레이드 메시지를 표시할 수 없습니다. 접두사.

1. 최신 브라우저에 대한 CSS 규칙:

   @supports (display: flex) {
      .browserupgrade {
         display: none;
      }
   }

   로그인 후 복사

   이 규칙은 Flexbox를 완벽하게 지원하는 브라우저에 대한 업그레이드 메시지를 숨깁니다. 주요 초점은 최신 브라우저입니다.

2. 원치 않는 특정 브라우저에 대한 CSS 규칙:

   /* IE 11 and Opera Mini 8 */
   _:-ms-fullscreen, :root .browserupgrade {
      display: none;
   }
   
   /* Opera Mini 8 */
   :-o-prefocus, .browserupgrade {
      display: none;
   }

   로그인 후 복사

   이 규정은 특히 IE 11 및 Opera Mini 8은 이러한 브라우저에서 업그레이드 메시지를 다음과 같이 숨깁니다. 글쎄요.

이러한 CSS 규칙을 결합하면 접두사를 사용하지 않고도 Flexbox를 완전히 지원하지 않는 나머지 이전 브라우저를 타겟팅할 수 있습니다.

3. HTML 통합:

   <div class="browserupgrade">
      <p>You are using an outdated browser. Please 
      <a href="http://browsehappy.com/">
         upgrade your browser</a>
      to improve your experience.</p>
   </div>

   로그인 후 복사

   이 HTML 요소는 대상 브라우저에 업그레이드 메시지가 표시됩니다.

추가 옵션:

CSS는 브라우저 업그레이드 요청에 대한 강력한 솔루션을 제공하지만 다음을 위한 추가 방법이 있습니다. 고려 사항:

• Modernizr: JavaScript 라이브러리 브라우저 기능을 감지합니다.
• PHP: 브라우저 세부 정보를 확인하고 사용자를 업그레이드 페이지로 리디렉션하는 서버측 스크립트.
• jQuery: JavaScript 브라우저 감지 및 업그레이드 메시지 기능 display.
• CSS.supports(): 특정 브라우저 기능을 기반으로 조건부 스타일을 허용하는 API입니다.
• browser-update.org: 자동 브라우저 업그레이드 감지 및 리디렉션을 제공하는 온라인 서비스입니다.

방법 선택은 개인에 따라 다릅니다. 프로젝트 요구 사항 및 기본 설정이 있지만 위에서 설명한 CSS 접근 방식은 간단하고 가벼운 솔루션을 제공합니다.

위 내용은 CSS가 공급업체 접두사를 사용하지 않고 어떻게 브라우저 업그레이드를 요청할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!