Jak zrobić, aby tekst-shadow i box-shadow używały koloru tekstu we wszystkich przeglądarkach?

Question

Próbuję stworzyć styl dla pudełka z cieniem w kolorze tego samego koloru co jego tekst. Ponieważ mam kilka pól, z których każdy ma inny kolor tekstu, chciałbym uniknąć powtarzania tego samego koloru w każdym zestawie reguł dla każdego pudełka.

Teraz, Tła i granic państwa modułów, na box-shadow (który stosuje się również do text-shadow):

Gdzie

<shadow> = inset? && [ <length>{2,4} && <color>? ] 

Składniki każdej <shadow> są interpretowane następująco:

• ...

• Kolor jest kolorem cienia. Jeśli kolor jest nieobecny, używany kolor pochodzi z właściwości "kolor".

Oznacza to, że jeśli nie zostanie określony kolor cienia na danym elemencie, wtedy kolor cienia, który jest używany należy podjąć od koloru tekstu, który jest wyliczana dla tego elementu. Jest to podobne do zachowania związanego z obramowaniem bez wyraźnego koloru, które datuje się z powrotem do CSS1 i pozostaje niezmienione w CSS2.

Jednak zdaję sobie sprawę, że nie zawsze tak było w przypadku cieni - wcześniej (dopiero w 2011 roku!) Wybrany kolor pozostawiono przeglądarce do wyboru w module tekstowym i B & B . I rzeczywiście, testowanie w przeszłości, pamiętam, pokazało, że niektóre przeglądarki wybrały black, a inne wybrały transparent (lub całkowicie zignorowały styl cienia). Mogło to nawet różnić się między text-shadow i box-shadow. Oczywiście jest to zrozumiałe, ponieważ jak wspomniano, każdy kolor wybrany przez przeglądarkę byłby w porządku w tym czasie.

Ale teraz, gdy definicja została jednoznacznie sformułowana, a najnowsze wersje wszystkich przeglądarek również odzwierciedlają tę zmianę, czy jest coś, co mogę zrobić, aby starsze wersje poszły w ich ślady? Wiem, że mogę określić kolor wiele razy - raz dla tekstu i raz dla każdego cienia - ale tak jak powiedziałem, chciałbym tego uniknąć, jeśli to możliwe.

---

_{pamiętać, że w połowie 2012 WD, który jest ostatni w tym piśmie, wcześniejsze stwierdzenie w tej samej sekcji zaprzecza jeden cytowany tu jednak oświadczenie cytowane tutaj jest kanoniczna jeden; patrz this mailing list thread i ED, gdzie zostało to naprawione.}

Answer 1

Zachowanie opisane w CSS1 i CSS2 został rozszerzony w Colour poziomie 3 z currentColor keyword value, co w zasadzie oznacza „wartość wyliczona color dla tego elementu” i może być stosowany wszędzie wartość koloru jest akceptowana. Jak można się spodziewać, został on ponownie przypisany do wartości propdef border-color jako wartości początkowej, jak widać w module B & B, here.

Ponieważ prawie każda przeglądarka, która obsługuje box-shadow i text-shadow obsługuje również currentColor, powinieneś być w stanie po prostu określić, że jako kolor cienia:

text-shadow: 0 0 0.5em currentColor; 
box-shadow: 0 0 0.5em currentColor; 

To wyraźnie instruuje przeglądarkę, aby użyć tego samego koloru jako tekst , a nie to, co zostało zaprogramowane do używania w inny sposób, w pewien sposób zachowanie w różnych przeglądarkach. Interactive fiddle.

Niestety, dla niektórych bardzo uporczywych przeglądarek, takich jak niektóre wersje niektórych przeglądarkach WebKit, problem nie leży w tym, że nie wolno używać currentColor, ale fakt, że nie wdrożyć currentColor z tych właściwości poprawnie . Oznacza to, że nawet jeśli spróbujesz jawnie ustawić wartość koloru, nadal nie będzie działać, ponieważ to właśnie robią - po prostu nie robią tego poprawnie.

Konkretnie, Safari jest znana nie mają wsparcia dla currentColor cokolwiek aż do wersji 4, ale ze względów nie mogę pojąć, Safari 5.x nie stosują powyższe deklaracje prawidłowo, mimo że w stanie zastosować coś background-color: currentColor dobrze. Wydaje mi się, że zostało to naprawione w Safari 6.x i nowszych wersjach, ale od 6.xi później stosuje się deklaracje bez komponentu koloru poprawnie tak czy inaczej, nie potrzebują tego obejścia.

Przechodząc currentColor wyraźnie robi obejść dziwny błąd w Firefoksie, która uniemożliwia jej animowanie do iz text-shadow lub box-shadow wartości bez składowej koloru - w interaktywnym skrzypce połączonego powyżej, w przypadku zmiany albo regułę div:not(:hover) lub temu div:hover Reguła usunięcia currentColor z deklaracji shadow, że cień nie będzie animowany w Firefoksie.

Jeśli naprawdę potrzebujesz obsługiwać stare wersje przeglądarek WebKit, nie będziesz miał innego wyboru, niż kodowanie na sztywno żądanego koloru. Ale biorąc pod uwagę, jak często i szybko te przeglądarki aktualizują się tak czy inaczej, prawdopodobnie lepiej jest martwić się o stare wersje IE. Należy jednak zauważyć, że IE9 nie ma problemu z obsługą box-shadow bez komponentu koloru, a także dla IE10 z text-shadow, więc IE nie wymaga tego obejścia. Shock and awe.