CSS Гудіні

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

Гудіні - це набір низькорівневих API, які надають доступ до СSS движка, даючи розробникам змогу розширити СSS підключаючись до процесу створення макету та застосування стилів в процесі роботи браузерного движка. Гудіні - набір API, які дають розробникам прямий доступ  CSS Object Model (CSSOM), дозволяючи розробникам писати код який браузер може розібрати як CSS, таким чином створюючи нові СSS властивості не чекаючи щоб вони були реалізовані в браузерах.

Переваги Гудіні

Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає Гудіні дозволяє швидше змінювати стилі  ніж при використанні JavaScript .style. Браузер розбирає CSSOM, включаючи макет, процеси відмальовування і компонування, перед застосування будьяких змін знайдених в скрипті. Крім того всі ці процеси повторюються для застосування змін з JavaScript. Гудіні не очікує на завершення першого циклу рендерингу, він включений в цей цикл, створюючи відмальовані зрозумілі стилі. Гудіні надає об'єктно-орієнтований API для роботи з  CSS значеннями в JavaScript.

Гудіні CSS Типізована OM є a CSS Об'єктвною моделю з типами і методами,  показуючи значення як JavaScript об'єкт, це робить Гудіні бульш інтуїтивним ніж  HTMLElement.style маніпуляції. Кожний елемент і таблиця стилів мають карту стилів, до якої можна доступитись через його значення  StylePropertyMap.

Особливістю СSS Гудіні є  Worklet. З ворклетами, ви можете створювати модульний CSS, це потребує однієї лінійки JavaScript для імпорту налаштовуваних компоненів: без пре-процесорів, пост-процесорів або JavaScript фреймворків.

<script> 
  CSS.paintWorklet.addModule('csscomponent.js'); 
</script>

Цей доданий модуль містить registerPaint() фунцкію, яка реєструє  повністю налаштовувані ворклетів.

 Функція CSS paint() включає в себе ім'я ворклета а також можливі додаткові параметри. Ворклет також має доступ до звичайних значеннь елемента, їх не потрібно передавати як параметри функції.

li {
	background-image: paint(myComponent, stroke, 10px);
    --hilights: blue;
    --lowlights: green;
}

Примітка: З великою силою приходить велика відповідальність! З Гудіні ви можете придумати свій власний макет, сітку, або реалізацію регіонів, але робити це не завжди найкраща ідея. Робоча група CSS робить багато роботи щоб упевнетись, що всі функції є продуктивними, розглядає всі можливі країні випадки і забезпечує безпеку, конфіденційність і доступність.  Коли ви почнете з СSS Гудіні, упевніться що ви дотримуєтесь цих стандартів і починайте з малого перш ніж перейти до більш амбітних проектів.

Гудіні API

Ніжче ви можете знайти посилання на основну довідку про API, які знаходяться під егідою Гудіні, а також посилання на туторіали.

CSS Парсер API
API використовуючи  CSS парсер, для парсингу CSS-подібних мов в слабо типізовані.

Для цього АPI ще не написано туторіалу чи довідки.
API CSS властивостей і значеннь
Визначає API для нових CSS властивостей. Властивості зареєстровані з цим API забезпечені синтаксисом синтаксичного аналізу, який визначає тип, поведінкою успадкування, і початкове значення.

CSS Properties and Values API reference
CSS Properties and Values API guide
CSS Typed OM
Перетворює CSSOM в значно типізований JavaScript перетворення може значно вплинути на продуктивність. CSS типізована ОМ виставляє CSS значення як JavaScript об'єкти та дозволяє ефективно керувати ним.

CSS Typed OM reference
CSS Typed OM guide
CSS Layout API 

Призначений для поліпшення розтяжності CSS, це API дозволяє розробникам створювати свої власні алгоритми компонування, такі як макет або лінії прив'язки. Це ще не доступно спочатку.

Для цього АPI ще не написано туторіалу чи довідки.

CSS Painting API

Призначений для поліпшення розтяжності CSS — дозволяє розробникам писати  JavaScript функції що доволяють рисувати прямо в задній фон, границі, або зміст елементу за допомогою CSS функції paint() .

CSS Painting API reference
CSS Painting API guide

Worklets 

API для запуску скриптів на різних етапах потоку рендерингу незалежно від головного JavaScript середовища. Worklets концептуально схожі на Web Workers, і застосовуються для розширення движка рендерину.


Worklets reference

Інші теми

Схожі теми, які можуть юути цікаві, так як вони можуть бути використані в поєднанні з API Гудіні цікавими способами.

Composite Scrolling and Animation