Moduł kolorów CSS poziom 4 prawdopodobnie będzie obsługiwał 4 i 8 cyfr szesnastkową notację RGBA!
Trzy tygodnie temu (18 grudnia 2014 r.) Szkic edytora CSS Color Module poziomu 4 został przesłany do grupy roboczej CSS W3C. Chociaż w stanie, który jest bardzo podatny na zmiany, obecna wersja dokumentu sugeruje, że w nieco niedalekiej przyszłości CSS będzie obsługiwał zarówno 4, jak i 8-cyfrowy szesnastkowy zapis RGBA.
Uwaga: w poniższym cytacie wycięto niepotrzebne fragmenty, a źródło mogło być mocno zmodyfikowane do czasu, gdy to czytasz (jak wspomniano powyżej, jest to szkic redaktora, a nie sfinalizowany dokument).
Jeśli coś się bardzo zmieniło, zostaw komentarz, aby poinformować mnie, żebym mógł zaktualizować tę odpowiedź!
§ 4.2 Notacje szesnastkowe RGB: #RRGGBB
Składnia a <hex-color>
to <hash-token>
token, którego wartość składa się z 3, 4, 6 lub 8 cyfr szesnastkowych . Innymi słowy, kolor szesnastkowy jest zapisany jako znak krzyżyka „#”, po którym następuje pewna liczba cyfr 0-9
lub liter a-f
(wielkość liter nie ma znaczenia - #00ff00
jest identyczna #00FF00
).
8 cyfr
Pierwsze 6 cyfr jest interpretowane identycznie jak zapis 6-cyfrowy. Ostatnia para cyfr, interpretowana jako liczba szesnastkowa, określa kanał alfa koloru, gdzie 00
reprezentuje całkowicie przezroczysty kolor i ff
reprezentuje całkowicie nieprzezroczysty kolor.
Przykład 3
Innymi słowy, #0000ffcc
reprezentuje ten sam kolor co rgba(0, 0, 100%, 80%)
(lekko przezroczysty niebieski).
4 cyfry
Jest to krótszy wariant 8-cyfrowej notacji, „rozwinięty” w taki sam sposób, jak notacja 3-cyfrowa. Pierwsza cyfra, interpretowana jako liczba szesnastkowa, określa czerwony kanał koloru, gdzie 0
reprezentuje wartość minimalną i f
maksimum. Następne trzy cyfry oznaczają odpowiednio zielony, niebieski i kanał alfa.
Co to oznacza dla przyszłości kolorów CSS?
Oznacza to, że zakładając, że nie zostanie to całkowicie usunięte z dokumentu poziomu 4, wkrótce będziemy mogli zdefiniować nasze kolory RGBA (lub kolory HSLA, jeśli jesteś jednym z nich ) w formacie szesnastkowym w przeglądarkach obsługujących kolor Składnia modułu poziomu 4.
Przykład
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
Kiedy będę mógł użyć tego w moich produktach skierowanych do klientów?
Wszystkie dowcipy na bok: to dopiero początek 2015 roku, więc nie będą one jeszcze obsługiwane w żadnej przeglądarce przez dłuższy czas - nawet jeśli twój produkt jest zaprojektowany tylko do pracy z najnowszymi przeglądarkami, prawdopodobnie będziesz nie zobaczymy tego w akcji w przeglądarce produkcyjnej w najbliższym czasie.
Zobacz bieżącą obsługę przeglądarki dla notacji kolorów #RRGGBBAA
Jednak powiedziawszy, sposób działania CSS oznacza, że możemy zacząć korzystać z nich już dziś! Jeśli naprawdę chcesz zacząć z nich korzystać teraz, o ile dodasz awarię, wszelkie nieobsługiwane przeglądarki po prostu zignorują nowe właściwości, dopóki nie zostaną uznane za ważne:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}
<figure>Hello, world!</figure>
Tak długo, jak przeglądasz tę odpowiedź w przeglądarce, która obsługuje CSS background
i color
właściwości, <figure>
element wyniku powyższego fragmentu będzie wyglądał bardzo podobnie do tego:
Korzystając z najnowszej wersji Chrome na Windows (v39.0.2171), aby sprawdzić nasz <figure>
element, zobaczymy:
Sześciocyfrowe cofanie szesnastkowe jest zastępowane przez rgba()
wartości, a nasze 8-cyfrowe wartości szesnastkowe są ignorowane, ponieważ obecnie są analizowane przez parser CSS Chrome. Gdy tylko nasza przeglądarka obsługuje te 8-cyfrowe wartości, zastąpią one rgba()
te.
AKTUALIZACJA 2018-07-04: Firefox, Chrome i Safari obsługują teraz tę notację, Edge wciąż brakuje, ale prawdopodobnie nastąpi ( https://caniuse.com/#feat=css-rrggbbaa ).
rgb(0xff,\x80,#44)
zadziwiająco reprezentacja Octal wydają Jorku trochęrgb(0100, 0200,0300)
jest#4080C0