Element blink jest przestarzały i nowoczesne przeglądarki go nie migają. Zbuduj dostępne miganie w CSS z przyciskiem pauzy, limitem cykli i obsługą ustawienia ograniczonego ruchu.
Element blink jest przestarzały: standard HTML uznaje go za niezgodny i każe zamiast niego używać CSS, a obecne przeglądarki pokazują jego tekst jako zwykły, nieruchomy tekst. Aby dziś coś migało, napisz animację CSS z keyframes, zatrzymaj ją po kilku cyklach lub daj ludziom przycisk pauzy i wyłącz ją przy prefers-reduced-motion.
Stary kod blink i czego używać teraz
Znacznik blink to kawałek historii internetu, którego ludzie wciąż szukają, zwykle wtedy, gdy chcą, żeby migała kropka statusu, kursor lub plakietka promocji. Kreator poniżej tworzy ten efekt w nowoczesny sposób i trzyma go w granicach zasad dostępności, więc ruch jest krótki, da się go zatrzymać i szanuje ustawienia odwiedzającego.
Żadna obecna przeglądarka nie sprawia, że miga. Standard HTML traktuje blink jako przestarzały, niezgodny element, więc jego zawartość renderuje się jako zwykły tekst inline. Walidatory zgłaszają go jako błąd.
Wartość blink właściwości text-decoration-line jest wycofywana, a specyfikacja pozwala przeglądarkom w ogóle nie migać tekstem. Niezawodnym zamiennikiem jest animacja z keyframes.
WCAG 2.2.2 Pauza, zatrzymanie, ukrycie to reguła poziomu A: miganie, które zaczyna się automatycznie, trwa dłużej niż pięć sekund i występuje obok innych treści, musi mieć sposób na pauzę, zatrzymanie lub ukrycie. Osobno 2.3.1 ogranicza błyski do trzech w ciągu jednej sekundy.
Animuj cienką ramkę lub znak pionowej kreski przez steps(1), aby przełączał się między widocznym a ukrytym, z częstotliwością około jednego cyklu na sekundę. Kursor w demo pisania jest dekoracyjny, więc nadaj mu aria-hidden="true".
Owiń nadpisanie w @media (prefers-reduced-motion: reduce) i ustaw animation: none na migającym elemencie. Ta funkcja media jest szeroko obsługiwana i odzwierciedla ustawienie ruchu w systemie operacyjnym odwiedzającego.
Trzy jednosekundowe cykle kończą się na długo przed upływem pięciu sekund, więc przycisk pauzy nie jest potrzebny. Edytuj kod, aby przeładować ramkę.
steps(1, end) przełącza natychmiast zamiast przenikać. Kursor jest dekoracyjny, więc jest ukryty przed czytnikami ekranu.
Przeglądarki rysują zawartość przestarzałego elementu blink jako zwykły tekst. Nic nie miga.
Jeśli miganie musi trwać dłużej niż pięć sekund, daj mu prawdziwy przycisk, który je zatrzymuje.
aria-pressed informuje technologie asystujące, czy animacja jest obecnie wstrzymana.
Nowość
Wiosenne menu już jest
Jeden cykl: {n} ms
Łagodne przenikanie
Twarde włącz i wyłącz
Cykle
Bez końca
Wyłącz przy ograniczonym ruchu
Pauza
Wznów
Odtwórz ponownie
Łączny czas działania: {n} s
Działa do wstrzymania
Poniżej pięciu sekund, więc przycisk pauzy nie jest wymagany.
Ponad pięć sekund: zostaw obok widoczny przycisk pauzy (WCAG 2.2.2).
Kopiuj CSS
Zacznij za darmo · Bez karty kredytowej