주간 플랫폼 뉴스 : 포커스 링, 도넛 범위, 더 많은 EM 장치 및 글로벌 개인 정보 보호 제어

이번 주 웹 개발 뉴스는 다양한 플랫폼에서 중요한 업데이트를 다룹니다. 주요 하이라이트로는 Chrome의 포커스 링 처리, CSS의 향상된 기능 :not() 선택기, GPC (Global Privacy Control)의 주요 채택 및 EM 기반 미디어 쿼리에 대한 강력한 주장이 포함됩니다. 또한 양식 검증 스타일을 개선하기위한 CSS 솔루션을 탐색합니다.

크롬의 초점 링 동작이 변경됩니다

크롬, 에지 및 기타 크롬 기반 브라우저는 현재 버튼 클릭에 초점 링을 표시합니다. 이는 Safari 및 Firefox와 다릅니다. 키보드 내비게이션이 사용될 때만 초점 링 만 표시합니다. 개발자는 data-whatintent 사용하여 해결 방법을 사용하여 다음과 :focus-visible 작업을 수행했습니다. 그러나 Chrome 90은 사용자 에이전트 스타일 시트를 우선 순위로 변경하여 이러한 해결 방법을 제거하여 다음 해결 방법을 :focus-visible 할 수 있으므로 키보드 사용자를 위해 보존하면서 클릭에 초점 링을 억제합니다.

"도넛 범위"선택에 대한 CSS 활용 :not()

A:not(B *) 선택기 패턴을 사용하면 B 에서 내려온 모든 A 를 ​​선택할 수 있습니다. 이것을 AB:not(C *) 로 확장하면 "도넛 범위"를 생성하여 중첩 요소 내의 요소를 제외하고 특정 컨텍스트 내에서 정확한 요소를 선택할 수 있습니다. 예를 들어, article p:not(blockquote *) 내부 블록 큐어를 제외하고 기사 내의 모든 단락을 선택합니다.

글로벌 개인 정보 보호 제어는 견인력을 얻습니다

Sec-GPC: 1 헤더를 사용하여 법적으로 시행 가능한 개인 정보 보호 신호 인 GPC (Global Privacy Control), 데이터 공유 또는 판매에 대한 사용자 선호도. New York Times는 GPC를 완전히 지원 한 최초의 주요 출판사이며 Washington Post 및 Automattic Pledging 지원과 같은 다른 주요 출판사입니다. GPC 신호가 감지되면 호환 사이트는 관련 개인 정보 보호법이 적용되는 사용자 데이터 공유 (서비스 제공 업체 제외)를 중단합니다.

EM 기반 미디어 쿼리의 장점

픽셀 기반 글꼴 크기 ( font-size: 20px )를 사용하는 웹 사이트는 브라우저 수준의 글꼴 크기 조정에 응답하지 않습니다. em 및 rem Unit을 사용하면 사용자 기본 설정에 대한 응답이 가능합니다. 일관된 동작을 위해 미디어 쿼리는 em 장치 (예 : min-width: 80em )를 사용해야합니다. 이렇게하면 사용자가 기본 글꼴 크기를 조정하더라도 반응 형 레이아웃이 올바르게 적응하여 다중 열 레이아웃에서 지나치게 짧은 줄과 같은 문제를 방지합니다. PostCSS 플러그인은 미디어 쿼리에서 px 에서 em 으로 변환을 단순화합니다.

다음과 같은 양식 검증 스타일 향상 :user-invalid

표준 CSS :invalid 의사 클래스는 양식 검증에 한계가 있습니다. 필요한 필드에 대해 모든 키 스트로크와 즉시 페이지로드를 트리거하여 혼란스러운 사용자 경험을 유발할 수 있습니다. :user-invalid 의사 클래스는 다음과 같이 이미 지원됩니다. :-moz-ui-invalid 는 상당한 사용자 상호 작용 후에 만 ​​적용하여 이러한 문제를 해결합니다. 다른 브라우저에서 :user-invalid 표준화하기위한 노력이 진행 중입니다.

위 내용은 주간 플랫폼 뉴스 : 포커스 링, 도넛 범위, 더 많은 EM 장치 및 글로벌 개인 정보 보호 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!