플랫폼 뉴스 : 대비, Mathml, : is () 및 CSS 배경 초기 값을 선호합니다.

이번 주 웹 기술 뉴스 : prefers-contrast , Mathml, :is() 및 CSS 배경 초기 값

Safari Preview 버전은 prefers-contrast Media Query, MathML이 개선되었습니다. :is() 결함 허용 오류가 증가했으며 ADA 관련 소송이 많았으며 CSS 배경 속성의 일관되지 않은 초기 값은 예상치 못한 (그러나 흥미로운) 패턴으로 이어질 수 있습니다.

Safari Preview 버전은 prefers-contrast Media 쿼리를 지원합니다

2017 년에 prefers-reduced-motion 이후 2019 년에는 prefers-color-scheme 와 2020 년의 forced-colors 선호하는 네 번째 사용자 선호 미디어 기능이 점차 브라우저에 들어가고 있습니다. CSS는 prefers-contrast: more 미디어 쿼리가 Safari Preview에서 지원됩니다. 이 기능을 사용하면 웹 사이트가 더 높은 대비를 위해 사용자의 선호도에 응답 할 수 있습니다.

 .pricing-info {
  색상 : #86868b; / * 대비 3.5 : 1 */
}

@Media (프리터링 대응 : more) {
  .pricing-info {
    색상 : #535283; / * 대비 7 : 1 */
  }
}

수학은 인터넷의 일류 시민이됩니다

1990 년대 중반에서 LATE 중반에 공식화 된 최초의 사양 중 하나는 네트워크에 수학적 기호를 표시하는 데 사용되는 마크 업 언어 인 MathML입니다. Firefox와 Safari는 현재이 언어를 지원합니다. Chrome은 "인터넷의 보안, 성능 및 낮은 사용과 관련된 문제"로 인해 2013 년에 구현을 제거했습니다.

Chrome 또는 Edge를 사용하는 경우 Affice : Flags 페이지에서 실험적인 웹 플랫폼 기능을 활성화하여 데모를 볼 수 있습니다.

Work는 현재 MathML을 웹 플랫폼에 올바르게 통합하여 상호 운용 가능한 방식으로 모든 브라우저에 가져 오는 진행 중입니다. Igalia는 2019 년부터 Chromium 용 MathML 구현을 개발하고 있습니다. 새로운 MathML Core Level 1 사양은 MathML 3 (2014)의 기본 하위 집합이며 "브라우저 구현 최고"입니다. W3C가 승인되면 새로운 수학 실무 그룹은 MathML의 접근성 및 검색 가능성을 향상시키기 위해 노력할 것입니다.

수학 실무 그룹의 사명은 인터넷에 수학의 통합을 촉진하여 인터넷의 일류 시민이 될 수 있고, 잘 표시되고, 액세스하기 쉽고, 검색 할 수있는 것입니다.

CSS :is() 선택기 목록의 결함 허용 오류를 향상시킵니다

새로운 CSS :is() 및 :where() 의사 클래스는 이제 Chrome, Safari 및 Firefox에서 지원됩니다. 표준 사용 사례 (중복 감소 및 낮은 특이성 유지) 외에도 이러한 의사 클래스를 사용하여 선택기 목록을 "더 결함이 강한"상태로 만들 수 있습니다.

유산의 이유로, 선택기 목록의 일반적인 동작은 목록의 선택기가 구문 분석에 실패하면 전체 선택기 목록이 유효하지 않다는 것입니다. 이로 인해 새 선택기를 사용하고 기존 사용자 에이전트에서 제대로 작동하는 CSS를 작성하기가 어렵습니다.

다시 말해, "선택기의 어떤 부분이 유효하지 않으면 전체 선택기를 무효화 할 것입니다." 그러나 셀렉터 목록을 다음에 래핑하면 :is() 내용이 발생합니다. 결함이 발생합니다. 지원되지 않은 선택기는 단순히 무시되지만 나머지는 여전히 일치합니다.

불행히도, 의사 요소는 다음과 같이 작동하지 않습니다 :is() (미래에 변화가있을 수 있지만), 현재 두 공급 업체 접두사를 사용하여 유사 요소를 결함 내성 선택기 목록으로 변환하는 것은 불가능합니다.

 /* 지원되지 않는 선택기는 전체 목록을 무효화합니다*/
::-WebKit-Slider-runnable-Track, ::-Moz-Range-Track {
  배경 : 빨간색;
}

/* 의사 요소는 작동하지 않습니다 : is ()*/
: is (::- webkit-slider-runnable-track, ::-moz-range-track) {
  배경 : 빨간색;
}

/* 따라서 스타일은 불행히도 반복되어야합니다*/
::- WebKit-Slider-runnable-Track {
  배경 : 빨간색;
}
::-Moz-Range-Track {
  배경 : 빨간색;
}

Dell과 Kraft Heinz는 웹 사이트 접근성 문제로 고소되었습니다.

점점 더 많은 미국 기업들이 웹 사이트의 접근성 문제에 대한 소송에 직면하고 있습니다. 최근 기술 회사 인 Dell은 턱과 음성 화면 독자를 사용할 수없는 시각 장애인의 고소를당했습니다.

피고는 자신의 제품 및 서비스에 대한 정보를 효과적으로 전달하지 못했습니다. 스크린 리더 보조 장치는 디지털 플랫폼에서 중요한 콘텐츠에 액세스 할 수 없습니다. . … 디지털 플랫폼은 시각적 단서를 사용하여 컨텐츠 및 기타 정보를 전달합니다. 불행히도, 스크린 리더는 이러한 단서를 설명 할 수 없으며 자신이 나타내는 정보를 시각 장애인에게 전달할 수 없습니다.

올해 초 Kraft Heinz Foods는 웹 사이트 중 하나의 웹 컨텐츠에 대한 접근성 가이드 라인을 준수하지 않은 것에 대해 고소당했습니다. 불만은 웹 사이트가 언어 (Lang 속성)를 선언하지 않으며 이미지 링크 등에 대한 액세스 가능한 태그를 제공한다고 명시합니다.

미국에서는 ADA (Americans with Disabilities Act)가 웹 사이트에 적용됩니다. 즉, 소매 업체의 웹 사이트에 액세스 할 수없는 경우 사람들이 고소 할 수 있습니다. AX 제조업체 인 Deque Systems의 CEO에 따르면, 최근 사이버 ADA 소송의 증가는 특정 규정 준수 요구 사항을 제공 할 단일의 중요한 규정이 없기 때문일 수 있습니다.

background-clip 과 background-origin 초기 값이 다릅니다

기본적으로 CSS 배경은 요소의 테두리 ( background-clip: border-box ) 내에 그려지지만 요소의 충전 상자 ( background-origin: padding-box )에 비해 배치됩니다. 요소의 경계가 반투명하거나 점선/점선 인 경우이 불일치로 인해 예상치 못한 패턴이 발생할 수 있습니다.

 .상자 {
  /* 반투명 국경*/
  국경 : 20px 고체 RGBA (255, 255, 255, 0.25);

  /* 배경 구배*/
  배경 : conic-gradient (
    왼쪽 하단의 45deg에서
    Deeppink,
    Rebeccapurple
  );
}

초기 값이 다르기 때문에 위의 이미지의 배경 구배는 반투명 테두리 아래의 모든면에서 타일로 반복됩니다. 이 경우 테두리 프레임에 비해 배경 ( background-origin: border-box )을 배치하는 것이 더 합리적입니다.

위 내용은 플랫폼 뉴스 : 대비, Mathml, : is () 및 CSS 배경 초기 값을 선호합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!