Bardziej inteligentne właściwości niestandardowe dzięki nowemu interfejsowi API firmy Houdini

Przejścia i ochrona danych w CSS

Sam Richard

Niestandardowe właściwości CSS (znane też jako CSS) zmienne, pozwalają na definiowanie własnych właściwości w arkuszach CSS i używanie ich wartości w całej CSS. Chociaż są dziś niezwykle przydatne, mają wady, są bardzo pracowite: mogą przybrać dowolną wartość, dlatego mogą zostać są zastąpione czymś nieoczekiwanym, zawsze dziedziczą swoje wartości z jego rodzica. Nie możesz go przenieść. Dzięki właściwościom CSS Houdini Wartości interfejsu API wartości 1, poziom 1, są teraz dostępne w Chrome 78, a problemy te zostały eliminowane, co sprawia, że CSS właściwości niestandardowych.

Czym jest Houdini?

Zanim przejdziemy do omawiania nowego interfejsu API, porozmawiajmy krótko o Hudini. Tag CSS-TAG Houdini Task Force, lepiej znana jako CSS Houdini lub po prostu Houdini, jest powołana do „rozwijać funkcje wyjaśniające «magię» stylu i układu w internecie”. Kolekcja specyfikacji Houdini zaprojektowany z myślą o wykorzystaniu mocy mechanizmu renderowania w przeglądarce, do dokładniejszego wglądu w nasze style i z możliwości rozszerzenia mechanizmu renderowania. Dzięki temu można wpisywać wartości CSS w języku JavaScript i stosować kod polyfill lub opracowywać nowy kod CSS bez trafień na skuteczność. Houdini ma potencjał, pobudza kreatywność w internecie.

Właściwości CSS i wartości interfejsu API – poziom 1

Poziom interfejsu CSS Właściwości i Wartości interfejsu API 1 (Houdini Props i Vals) pozwalają nam nadać strukturę naszym właściwościom niestandardowym. To jest bieżący w przypadku właściwości niestandardowych:

.thing {
  --my-color: green;
}

Właściwości niestandardowe nie mają typów, więc mogą zostać zastąpione kilka sposobów. Zastanów się na przykład, co się stanie, jeśli zdefiniujesz atrybut --my-color za pomocą adresu URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Ponieważ --my-color nie został wpisany poprawnie, nie wie, że URL jest nieprawidłowy color [kolor]. Gdy go użyjemy, przywracane są wartości domyślne (czarne dla color, przezroczyste dla background). W przypadku Houdini Props i Vals właściwości niestandardowe zostać zarejestrowana, dzięki czemu przeglądarka będzie wiedzieć, co powinna być.

Teraz właściwość niestandardowa --my-color jest zarejestrowana jako kolor. Dzięki temu jakie wartości są dozwolone i jak może je wpisywać usługi.

Składnia zarejestrowanej usługi

Rejestrowanie usługi wygląda tak:

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Obsługuje te opcje:

name: string

Nazwa właściwości niestandardowej.

syntax: string

Jak analizować właściwość niestandardową. Pełna lista możliwych wartości znajduje się w specyfikacji Wartości i jednostki CSS. Domyślna wartość to *.

inherits: boolean

Określa, czy dziedziczy wartość elementu nadrzędnego. Domyślna wartość to true.

initialValue: string

Początkowa wartość właściwości niestandardowej.

Bliższe spojrzenie na urządzenie syntax. Jest wiele prawidłowych opcje od cyfr, przez kolory, <custom-ident>. . Te składni można też modyfikować za pomocą następujących wartości:

• Dołączenie + oznacza, że akceptuje ona rozdzielaną spacjami listę wartości tej składni. Na przykład <length>+ byłaby rozdzielaną spacjami listą długości
• Dołączenie # oznacza, że można zaakceptować rozdzieloną przecinkami listę wartości tej składni. Na przykład <color># byłaby rozdzielaną przecinkami listą kolory
• Dodanie parametru | między składniami lub identyfikatorami oznacza, że dowolny z podanych są prawidłowe. Na przykład <color># | <url> | magic zezwala na jeden z tych elementów rozdzielaną przecinkami listę kolorów, adresu URL lub słowa magic.

Gotchas

Są 2 gości z Houdini Props i Vals. Po pierwsze, nie ma możliwości aktualizacji istniejącej zarejestrowanej usługi, a próba Ponowna rejestracja usługi spowoduje zgłoszenie błędu informujący o tym, że zdefiniowano jego definicję.

Po drugie, w przeciwieństwie do właściwości standardowych zarejestrowane właściwości nie są weryfikowane podczas jak się zmienia. Są one jedynie sprawdzane podczas obliczania. Oznacza to, że że nieprawidłowe wartości nie będą wyświetlane jako nieprawidłowe podczas sprawdzania , a także po dodaniu nieprawidłowej właściwości nie zostaną zmienione do właściwego źródła reklam, jeśli zostanie przypisana nieprawidłowej właściwości, jest domyślna.

Animowanie właściwości niestandardowych

Zarejestrowana właściwość niestandardowa zapewnia nie tylko sprawdzanie typu, ale też atrakcyjną dodatkową korzyść: możliwość jej animacji. Podstawowa przykładowa animacja wygląda tak:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

Gdy najedziesz kursorem na przycisk, przycisk zmieni kolor z czerwonego na zielony. Bez rejestrując właściwość, przechodzi z jednego koloru na drugi. bez rejestracji, przeglądarka nie wie, czego oczekiwać między jednym z nich wartości użytkowników i następnych wartości, przez co nie może zagwarantować możliwości ich przeniesienia. Ten przykład można jednak pójść o krok dalej, jeśli chodzi o animowanie gradientów CSS. ten kod CSS można zapisać z tą samą zarejestrowaną właściwością:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Spowoduje to animowanie naszej właściwości niestandardowej, która jest częścią komponentu linear-gradient, więc za pomocą animacji gradientu liniowego. Aby zobaczyć pełny kod, sprawdź błąd poniżej w akcji i eksperymentuj z nimi.

Podsumowanie

Houdini jest w drodze do przeglądarek, a wraz z nią i rozwijania CSS. Dzięki farbom Interfejs API został już wysłany a teraz „Niestandardowe rekwizyty” i „Wartość” to nasze kreatywne narzędzie, określać typ właściwości CSS i używać ich do tworzenia i animowania nowych, ciekawych funkcji projektu. Planujemy też inne zadania w problemie z Houdini , w ramach której możesz opinie i plany Houdinigo. Houdini jest po to, żeby rozwijać funkcje które wyjaśniają „magię” dotyczące stylu i układu w internecie, więc wyjdź z niego i wykorzystać te magiczne funkcje.

Zdjęcie: Maik Jonietz włączono Odloty