플랫폼 뉴스 : 둥근 윤곽선, GPU Accelerated SVG 애니메이션, CSS 변수가 해결되는 방법

이번 주 뉴스에서 Firefox는 둥글게 된 윤곽선을 얻고 SVG 애니메이션은 이제 Chrome에서 GPU로 셀러됐으며 CSS에는 물리적 장치가없고 New York Times Crossword가 액세스 할 수 있으며 CSS 변수는 값이 상속되기 전에 해결됩니다.

뉴스에 뛰어 들자!

둥근 개요가 Firefox에 제공됩니다

2000 년대 중반 국경-라디우스 속성을 통해 둥근 경계를 만들 수있는 이래로 국경 곡선을 따르는 아이디어가 존재했습니다. 10 년 전에 Mozilla, Webkit 및 Chromium에게 제안되었으며 2015 년부터 CSS UI 사양의 일부였습니다.

개요의 일부는 직사각형 일 필요는 없습니다. 개요가 국경 가장자리를 따르는 한, 국경-라디우스 곡선을 따라야합니다 .

2021 년에 오늘까지 빠르게 진행되며 윤곽선은 여전히 ​​모든 브라우저에서 예외없이 직사각형입니다.

그러나 이것은 마침내 변화하기 시작했습니다. 몇 주 안에 Firefox는 테두리 모양을 자동으로 따르는 둥근 개요가있는 첫 번째 브라우저가됩니다. 이것은 버튼에 대한 Firefox의 기본 초점 개요에도 적용됩니다.

이 버그의 우선 순위를 정하고 나중에 둥근 개요를 더 빨리 크롬에 가져 오려면 Chromium Issue #81556 (필수 로그인)을 Star star see a sign in a 필수입니다.

SVG 애니메이션은 이제 Chrome에서 GPU로 셀러 팅되었습니다

최근까지 CSS를 통해 SVG 요소를 애니메이션하는 것은 크롬 기반 브라우저에서 모든 프레임 (일반적으로 60 회)에서 리피트를 트리거합니다. 이러한 지속적인 페인팅은 애니메이션의 부드러움과 페이지 자체의 성능에 부정적인 영향을 줄 수 있습니다.

Chrome의 최신 버전은 SVG 애니메이션에 대한 하드웨어 가속을 활성화 하여이 성능 문제를 제거했습니다. 이는 SVG 애니메이션이 GPU에 오프로드되어 더 이상 기본 스레드에서 실행되지 않음을 의미합니다.

GPU 가속으로의 전환으로 인해 SVG 애니메이션이 Chromium 기반 브라우저 (Firefox 도이 작업도 수행)에서 더 성능을 발휘하게 만들었습니다. 이는 웹에 좋은 소식입니다.

더 많은 스크린 리더 액세스 가능하고 점진적으로 향상된 SVG 애니메이션 및 적은 캔버스를위한 Hooray.

CSS에는 실제 물리적 단위가 없을 수 없습니다

CSS는 IN (인치) 및 CM (센티미터)을 포함하여 6 개의 물리적 단위를 정의합니다. 모든 물리적 단위는 정식 단위 인 픽셀 단위와 고정 된 비율입니다. 예를 들어, 1in은 항상 정확히 96px입니다. 대부분의 최신 화면 에서이 길이는 실제 인치 인치에 해당하지 않습니다.

CSS Working Group의 FAQ 페이지는 이제 CSS에 실제 물리적 단위가없는 이유에 대한 질문에 대답합니다. 요컨대, 브라우저는 항상 디스플레이의 정확한 크기와 해상도를 결정할 수는 없습니다 (프로젝터 생각). 정확한 실제 유닛이 필요한 웹 사이트의 경우, 실무 그룹은 부호 당 교정을 권장합니다.

CSS 거리 (예 : 10cm)의 두 줄 사이의 거리를 측정하고 얻는 값을 입력하도록 사용자에게 요청하는 교정 페이지가 있습니다. 이를 사용하여 해당 화면에 필요한 스케일링 계수를 찾으십시오 (CSS 길이를 사용자 제공 길이로 나눈).

그런 다음이 스케일링 계수를 사용자 정의 속성으로 설정하고 CSS에서 정확한 길이를 계산하는 데 사용될 수 있습니다.

 html {
  -unit-scale : 1.428;
}

.상자 {
  / * 5 실제 센티미터 */
  너비 : calc (5cm * var (-단위 규모, 1));
}

Times Crossword는 스크린 리더 사용자가 액세스 할 수 있습니다

NYT Open 팀은 최근 몇 년 동안 더 많은 액세스를 가능하게 한 New York Times 웹 사이트의 개선 사항에 대해 썼습니다. 이 웹 사이트는 Semantic HTML (

, 등), 중요한 구성 요소 (예 : 로그인 및 등록)에 대한 대비가 증가하고 사이트의 Paywall에 적응하는 건너 뛰기 링크를 사용합니다.

또한 게임 팀은 키보드 및 스크린 리더 사용자에게 Daily Crossword 퍼즐에 액세스 할 수 있도록했습니다. 크로스 워드는 SVG

계정없이 미니 크로스 워드를 재생할 수 있습니다. 키보드로 퍼즐을 풀어보십시오.

CSS 변수는 값이 상속되기 전에 해결됩니다

Yuan Chuan은 최근 CSS 변수 (var () 함수)가 값이 상속되기 전후에 해결되었는지 확실하지 않았기 때문에 최근에 제대로 대답하지 않은 작은 CSS 퀴즈를 공유했습니다. 다음 예에서 이것이 어떻게 작동하는지 설명하려고 노력할 것입니다.

 html {
  -text-color : var (-메인 컬러, 검은 색);
}

바닥 글 {
  -메인 콜로 : 브라운;
}

p {
  색상 : var (-Text-Color);
}

질문 : 바닥 글의 단락의 색이 검은 색 또는 갈색입니까? 두 가지 가능성이 있습니다. (a) 두 가지 사용자 지정 속성의 선언 된 값은 단락에 상속 된 다음, 색상 속성은 브라운으로 해결되거나 (b) -text-color 속성은 요소에 직접 검은 색으로 해결 된 다음이 값은 단락에 상속되어 색 속성에 할당됩니다.

정답은 옵션 B (색상은 검은 색)입니다. CSS 변수는 값이 상속되기 전에 해결됩니다. 이 경우 -text-color는 요소에 -main-color가 존재하지 않기 때문에 검은 색으로 떨어집니다. 이 규칙은 CSS 변수 모듈에 지정됩니다.

사용자 정의 속성은 값이 상속되기 전에 발생하는 계산 된 값 시간에 값의 var () 함수를 해결한다는 점에 유의해야합니다.

위 내용은 플랫폼 뉴스 : 둥근 윤곽선, GPU Accelerated SVG 애니메이션, CSS 변수가 해결되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!