주간 플랫폼 뉴스 : : NOT () 의사 클래스, 비디오 미디어 쿼리, 클립-포스 : Path () 지원

이번 주 Šime Vidas의 브라우저 업데이트는 중요한 CSS 향상, 접근성 문제 및 오랫동안 기다려온 CSS 기능을 다루고 있습니다.

이번 주 하이라이트에는 개선 된 것 :not() 의사 클래스, Chrome의 "Find On Page"기능의 부드러운 스크롤 문제 해결, Safari의 독특한 취급<video></video> 요소의 media 속성 및 clip-path 의 path() 함수 도착.

향상 :not() 의사 클래스는 선택기 기능을 확장합니다

향상된 :not() CSS 선택기 전력을 크게 향상시킵니다. 이제 복잡한 선택기와 목록을 수용하여보다 정확한 타겟팅을 가능하게합니다. 예를 들어, 선택할 수 있습니다<p> 요소 내에 요소가 <em>없습니다</em><code><article></article> :

 /* 모두를 선택하십시오<p> 요소 내에 요소가 없습니다<article> */
P : NOT (기사 *) {
}</article></p>

또 다른 예는 첫 번째 가시 목록 항목 :nth-child(1 of :not([hidden])) 선택하는 것과 관련이 of . 향상된 :not() 해결 방법을 제공합니다.

 / * 첫 번째가 아닌 목록 항목을 선택하십시오 */
: NOT ([HIDDEN]) : NOT (: NOT ([HIDDEN]) ~ : NOT ([HIDDEN])) {
}

HTTP 새로 고침 헤더 : 접근성 위험

HTTP Refresh 헤더 (및 동등한<meta> 태그)는 주기적으로 페이지를 자동으로 다시로드합니다. 널리 사용되지만 (크롬 페이지로드의 2.8%), 이는 접근성 문제가 발생합니다. 짧은 새로 고침 간격은 시각 장애가있는 사용자의 화면 리더 사용을 방해합니다. WCAG는 서버 측 리디렉션을 실현할 수없는 경우 클라이언트 측 리디렉션의 경우 0 값으로 만 사용할 수 있습니다.

Chrome의 "Find On Page"중에 부드러운 스크롤 비활성화

Chrome의 부드러운 스크롤은 일반적으로 유리하지만 일부 사용자의 "페이지 찾기"기능을 방해합니다. Christian Schaefer의 CSS 해결 방법은 검색 중에 특별히 매끄러운 스크롤을 비활성화합니다.

 @keyframes smoothscroll1 {from, to {scroll-behavior : smooth; }}
@keyframes smoothscroll2 {from, to {scroll-behavior : smooth; }}
html {애니메이션 : SmoothScroll1 1s; }
HTML : Focus-Within {animation-name : SmoothScroll2; 스크롤-행동 : 매끄러운; }

사파리의 지속적인 지원<video></video> media 속성

그만큼<video></video> 반응 형 비디오 소스를 허용하는 요소의 media 속성은 효율적인 소스 선택에 대한 우려로 인해 대부분의 브라우저에서 제거되었습니다. 그러나 Safari는 여전히 그것을지지합니다. Scott Jehl은 복직을 옹호하며<video></video> 요소 자체.

clip-path: path() 기능이 이제 널리 지원됩니다

Chrome의 최근 clip-path 에 대한 path() 함수 구현은 주요 브라우저에서 지원을 완료합니다. CSS 형태 모듈의 일부인이 기능은 다양한 요소 클리핑에 SVG 경로 문자열을 사용하여 거의 모든 모양을 허용합니다.

위 내용은 주간 플랫폼 뉴스 : : NOT () 의사 클래스, 비디오 미디어 쿼리, 클립-포스 : Path () 지원의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!