CSS Houdini : 가장 인기있는 API에 대해 알아야 할 모든 것

CSS 후디니
(이미지 출처 : Future)

CSS Houdini는 세계적으로 유명한 Harry Houdini에서 이름을 따 왔습니다. 왜? Apple 및 Google과 같은 잘 알려진 조직 및 CSS Working Group의 개발자 그룹은 CSS의 마법을 이해하고 웹 사이트 렌더링을 더 잘 제어하기를 원했습니다. 그래서 그들은 CSS Houdini 태스크 포스를 구성했습니다.

CSS Houdini : 빠른 링크

- CSS Houdini가 필요한 이유
- CSS Houdini 지원
- Paint API는 무엇입니까?
- Typed OM의 기능은 무엇입니까?
- 속성 및 값 API
- 레이아웃 API로 성능 향상

그러나 CSS Houdini는 정확히 무엇입니까? 개발자에게 브라우저 내에서 스타일 지정 및 레이아웃 프로세스를 제어하여 CSS를 확장 할 수있는 기능을 제공하는 저수준 API 집합입니다. CSS 개체 모델 (자바 스크립트에서 CSS를 조작 할 수있는 API 집합)에 직접 액세스 할 수 있으며 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있습니다. JavaScript로.



Houdini는 현재 부분적으로 만 지원되므로 도입 초기 단계에 있습니다. 더 많은 지원을 기다리는 동안 (지원에 대해 이야기하면서 웹 호스팅 서비스는 당신에게 필요한 것을 제공하고 있습니다),이 컬렉션을 시도해보십시오. CSS 애니메이션 확실히 작동하는 기술.

아트 스타일을 얻는 방법

코딩 지식이 거의없는 사이트를 만들고 싶습니까? 당신은 웹 사이트 빌더 . 숨길 디자인이나 미디어 파일이 많으면 가장 신뢰할 수있는 클라우드 스토리지 주위에.

CSS Houdini가 필요한 이유

브라우저는 개발자로부터 멀리 떨어진 복잡한 스타일링 작업을 추상화하는 데 매우 능숙합니다. 말하지 않아도 텍스트 단락을 별도의 줄로 분할합니다. 몇 가지 속성을 사용하고 렌더링 엔진이 나머지를 처리하도록하여 요소의 크기를 조정하고 서로 옆에 자동으로 배치 할 수 있습니다. 페이지가 업데이트 될 때마다 브라우저는 '렌더링 파이프 라인'이라는 프로세스를 통해 HTML, CSS 및 자바 스크립트를 화면의 픽셀로 변환합니다.

첫째, 브라우저는 콘텐츠를 읽고 렌더 트리 , 이는 l 페이지에서 항목이 표시되어야하는 위치를 계산하는 데 사용됩니다. Ayout 단계. 거기에서 호출하는 단계에서 픽셀로 변환합니다. 페인트 등 . 모든 요소를 ​​칠하면 다음과 같은 프로세스에서 한 페이지에 함께 붙입니다. 합성 . 웹 사이트의 성능을 향상 시키려면 항상 중요한 렌더링 경로를 최적화하는 데 집중해야합니다.

브라우저가 기본적으로 지원하지 않는 사이트에 시각적 효과를 원하는 경우 대신 폴리 필을 사용하여 JavaScript 및 HTML을 추가해야합니다. 이로 인해 파이프 라인 시작 부분에서 반복적으로 변경되어 성능이 저하됩니다.

Houdini의 목표는 CSS를 열고 개발자가 파이프 라인을 따라 이러한 폴리 필을 추가로 적용하고 작업 속도를 높일 수 있도록하는 것입니다. 또한 이전에는 불가능했던 효과를 창출 할 수있는 새로운 기회를 열어줍니다. 모든 웹 사이트가 이러한 새로운 API를 직접 사용하는 것은 아니지만 프레임 워크와 라이브러리가 브라우저 불일치를 평준화 할 수있는 기회를 제공합니다.

CSS Houdini 지원

API는 지난 몇 년 동안 작업 해 왔으며 각 API는 Houdini 태스크 포스의 모든 구성원이 공동으로 개발했습니다. 모든 API는 엄격한 W3C 표준화 프로세스를 따릅니다.

충분한 합의에 도달하면 '작업 초안'으로 알려진 초기 초안 사양이 생성됩니다. 거기에서 '후보 추천'수준에 도달하기 전에 더 세분화됩니다.

후보 추천으로 표시된 사양은 구현 자 (이 경우 브라우저 공급 업체)로부터 피드백을 수집하기 시작할 수 있습니다. 이것이 우리가 더 넓은 브라우저 지원을보기 시작하는 곳입니다. 여기에서 '제안 된 권장 사항'과 'W3C 권장 사항'으로 이동하여 전체 브라우저 지원을 시작합니다.

현재 선구자는 후보 추천 수준에있는 Paint API입니다. Chromium 기반 브라우저 인 Chrome, Opera 및 Samsung Internet은 모두이를 지원하며 Firefox 및 Safari는 구현 작업을 수행합니다. Typed OM은 밀접한 관련이 있으며 결과적으로 동일한 브라우저가이를 지원합니다.

Chrome은 다른 API를 선도하고 있습니다. Layout API, 애니메이션 worklet 또는 Properties and Values ​​API를 사용하려면 'Experimental Web Platform features'플래그를 활성화 한 상태에서 Chrome Canary를 사용해야합니다. 아직 개발 중이며 언제든지 변경 될 수 있습니다.

CSS 후디니

확인 'Houdini는 아직 준비 됐나요?' Houdini의 현재 상태를 보려면 웹 사이트를 참조하십시오.(이미지 출처 : ishoudinireadyyet)

Paint API는 무엇입니까?

렌더링 파이프 라인의 두 번째 단계는 페인팅 단계입니다. 이 시점에서 브라우저는 표시 할 내용을 정확히 알고 있지만 어떻게 표시되는지는 모릅니다. 렌더링 엔진은 각 요소에 적용된 스타일을보고 그에 따라 지침을 조정합니다.

일부 스타일은 매우 간단하지만 다른 스타일은 모양을 결정하는 기능을 실행할 수 있습니다. 예를 들면 배경 다음과 같은 많은 기능을 수행 할 수 있습니다. url () 이미지의 경우 rgb () 색상 및 선형 그래디언트 () 그래디언트 효과를 위해.

#target {background: paint(my-effect);}

Paint API를 사용하면 거의 동일한 방식으로 작동하는 자체 페인팅 기능을 정의 할 수 있습니다. 모든 함수는 엔진이 사용되는 속성에 따라 사용할 수있는 이미지를 만듭니다.

class MyWorklet { paint(ctx, size, style) {} }


페인트 워크 릿 내부의 유일한 요구 사항은 페인트 방법. 여기에서는 요소를 다시 칠해야 할 때마다 브라우저가 따를 수있는 일련의 지침을 제공합니다. 메서드에 유용한 정보를 제공하는 몇 가지 인수로 호출됩니다.

첫 번째 주장은 우리가 그릴 수있는 공간을 제공하는 컨텍스트입니다. 그림을 그릴 때 사용되는 컨텍스트와 유사하게 작동합니다. 다음과 같은 지침을 사용하여 moveTofillRect CSS가 사용할 수있는 이미지 구축을 시작합니다.

인터넷에서 주목받는 방법

이 컨텍스트와 사용되는 컨텍스트 간에는 몇 가지 차이점이 있습니다. 집단. 예를 들어 보안 및 성능상의 이유로 사용할 수있는 이미지 데이터 또는 텍스트 방법이 없지만 나중에 사양 개정판에 나타날 수 있습니다.

두 번째 인수에는 작성해야하는 페인트 가능 영역의 크기가 포함됩니다. 일반적으로 패딩을 포함한 대상 요소의 너비와 높이입니다. 우리는이 정보를 사용하여 올바른 위치에서 상황을 파악하고 있는지 확인할 수 있습니다.

다른 스타일 속성 집합을 요청할 수도 있습니다. 예를 들어, 텍스트 색상을 보완하기 위해 배경 색상을 변경할 수 있습니다. 이것은 worklet 내의 getter를 통해 수행됩니다.

static get inputProperties() { return ['color', '--custom-property']; }


그만큼 inputProperties value는 worklet이 관심을 갖는 모든 속성의 배열입니다. 여기에는 추가 사용자 지정을 제공하는 사용자 지정 속성이 포함될 수 있습니다. 이러한 값은 속성 및 값 API에서 스타일 개체로 paint 메서드에 세 번째 인수로 전달됩니다.

CSS의 paint 함수에 제공된 인수에 액세스하는 데 사용할 수있는 네 번째 인수가 있습니다. 그래디언트에서 사용할 색상과 같은 정의 지점에서 구성 할 수 있습니다. 이것은 사양 프로세스를 통해 작동하고 있으며 아직 사용할 준비가되지 않았습니다.

registerPaint('my-effect', MyWorklet);


워크 릿을 CSS에서 선택하려면 브라우저에 등록해야합니다. 그만큼 registerPaint 메서드는 참조하는 데 사용하는 이름과 worklet 자체를 사용합니다.

wacom-cintiq 13hd 대화 형 펜 디스플레이
CSS.paintWorklet.addModule('my-worklet.js');

마지막으로 JavaScript를 CSS에 연결하려면 브라우저가 worklet을 다운로드해야합니다. 경로를 제공하면 브라우저가 나머지 프로세스를 처리합니다.

Typed OM의 기능은 무엇입니까?

CSSOM (CSS Object Model)은 오랫동안 JavaScript의 일부였습니다. 이를 통해 요소를 읽는 요소의 계산 된 스타일을 추출 할 수 있습니다. 스타일 재산 또는 사용하여 getComputedStyle . 전자는 해당 요소에 직접 적용된 스타일을 반환하고 후자는 상속 된 스타일을 포함한 모든 스타일을 포함합니다.

document.body.style.fontSize // “2rem” window.getComputedStyle(document.body).fontSize // “32px”

그들이 반환하는 값은 원래 제공된 것이 무엇이든 상관없이 항상 문자열입니다. 이로 인해 이러한 값을 조정하는 것은 숫자와 문자열 사이를 지속적으로 앞뒤로 변환해야하기 때문에 브라우저뿐만 아니라 버그가 많고 비효율적입니다.

document.body.fontSize += “1rem”; // “2rem1rem”, not “3rem”

Typed OM은 CSSOM과 유사하게 작동하지만 값에 대한 유형도 제공합니다. 두 가지 새로운 액세스 방법이 있습니다. attributeStyleMap 처럼 작동 스타일 속성, computedStyleMap 처럼 getComputedStyle .

document.body.attributeStyleMap.get('font-size') document.body.computedStyleMap().get('font-size')

둘 다 읽고 업데이트 할 준비가 된 별도의 속성으로 값과 단위를 포함하는 CSSUnitValue 객체를 반환합니다.

이러한 객체는 CSS와 마찬가지로 직접 생성하고 값을 계산하는 데 사용할 수 있습니다. calc () 기능은 않습니다.

Typed OM은 유형 변환 및 값 클램핑과 같은 훨씬 더 많은 기능을 제공합니다. Google의 ' 새로운 CSS 유형 개체 모델 작업 ' 그리고 공식 W3C 자세한 내용은 사양을 참조하십시오.

속성 및 값 API : 사용자 지정 속성에 유형 추가

CSS 사용자 정의 속성 — CSS 변수 — 한 곳에서 값을 정의하고 다른 곳에서 사용할 수 있습니다. 예를 들어, 페이지 아래에있는 요소가 사용할 수있는 테마 색상을 유지하는 사용자 지정 속성을 만들 수 있습니다.

사용자 지정 속성의 문제는 속성간에 애니메이션을 적용하려고 할 때 분명해집니다. 속성이 무엇이든 참조 할 수 있으므로 브라우저는이를 문자열로 처리합니다. 문자열 사이에 애니메이션을 적용하는 방법을 알 수 없기 때문에 결국 하나에서 다른 문자열로 점프합니다.

그만큼 속성 및 값 API 사용자 지정 속성에 유형을 제공하여 도움이됩니다. JavaScript를 사용하여 브라우저에 속성을 등록하면 나머지는 처리됩니다.

사진에 자신을 담는 앱
CSS.registerProperty({ name: '--main-color', initialValue: #ecf0f1, inherits: true, syntax: '' } );

그만큼 registerProperty method는 CSS 전역 개체의 새 속성입니다. 여기에서는 이름, 지정되지 않은 경우 초기 값 및 상위 요소에서 상속되는지 여부와 같은 속성에 대한 몇 가지 특성을 정의합니다.

중요한 속성은 통사론 , 속성의 유형을 설명합니다. CSS는 이미 숫자, 각도 및 URL을 포함한 다양한 유형의 데이터를 처리하는 방법을 알고 있습니다. 유형을 지정하면 브라우저 작업을 저장하고 값이 무엇인지 알 수 있습니다.

레이아웃 API로 성능 향상

모든 브라우저에는 콘텐츠를 배치하는 데 도움이되는 레이아웃 알고리즘이 있습니다. 기본적으로 모든 요소는 흐름 레이아웃에 있습니다. 영어와 같은 라틴어 스크립트에서 다음과 같이 설정된 모든 요소 인라인 인라인 방향으로 왼쪽에서 오른쪽으로 흐릅니다. 블록 블록 방향으로 위에서 아래로 흐릅니다.

잘 작동하지만 대부분의 웹 사이트를 동일하게 만듭니다. 사이트를 돋보이게하려면 다음과 같은 속성을 사용해야합니다. 위치 : 절대 오프셋을 수동으로 계산합니다. Pinterest와 같은 사이트는이 접근 방식을 사용하여 석조 스타일의 레이아웃을 만들지 만 더 큰 페이지에서 성능 문제를 일으킬 수 있습니다.

Layout API는이 로직을 worklet에 전달하여이 문제를 방지하는 것을 목표로합니다. 부모와 자식의 원하는 치수를 알고 있으며 렌더러에게 원하는 위치를 정확하게 지시 할 수 있습니다.

class MyLayout { static get inputProperties() { return [] } async layout(children, edges, constraints, styleMap) {}} registerLayout('my-layout', MyLayout);

각 worklet에는 형세 레이아웃을 다시 계산해야 할 때마다 실행됩니다. 또한 내부의 콘텐츠 레이아웃을 일시 중지하거나 언제든지 별도의 스레드로 이동할 수 있으므로 비동기식이어야합니다. 첫 번째 인수는 스타일이 적용된 자식 배열입니다.

두 번째는 요소의 테두리, 패딩 및 스크롤바 크기를 포함합니다. 가장자리 . 세 번째는 사용 가능한 나머지 공간을 정의합니다. 제약 . 마지막 인수는 요청되는 속성을 자세히 설명합니다. inputProperties Paint API와 유사합니다.

child.layoutNextFragment({ fixedInlineSize: 200 })

이 모든 정보는 다음과 같은 위치 지정 명령을 생성하는 데 사용됩니다. 파편 . 그만큼 layoutNextFragment 메소드는 원하는 인라인 및 블록 크기와 같은 자식에 대한 정보를 가져오고 렌더러가 나머지를 처리합니다. 결과는 브라우저가 그릴 준비가 된 조각 집합입니다.

body {display: layout(my-layout);}

CSS 측에서 레이아웃은 다른 것과 같이 정의됩니다. 레이아웃 함수는 worklet을 등록 할 때 제공된 이름을 사용합니다. 이 옵션은 모든 사람에게 열려 있지만 대부분의 경우 모든 사이트에 대해 레이아웃 워크 릿을 만들어야하는 경우는 거의 없습니다. Worklet은 기본 알고리즘에 대해 알지 못해도 사이트에 공유되고 포함될 수 있습니다. 이 API는 향후 레이아웃 시스템을 폴리 필하는 방법으로 사용될 가능성이 높습니다.

이 내용은 원래 넷 매거진에 실 렸습니다.