Marquee dla TYPO3

Teksty przewijane i tickery nie potrzebują rozszerzenia, CSS rozwiązuje to w 20 liniach

Element marquee zna każdy z początków internetu: przewijający się tekst, który przesuwa się od prawej do lewej po stronie. Tag HTML <marquee> od lat jest deprecated, ale efekt pozostaje pożądany. News-tickery, banery informacyjne (“prace konserwacyjne w sobotę”) i zapowiedzi wydarzeń wykorzystują teksty przewijane jako mechanizm przyciągania uwagi. Rozszerzenie marquee dla TYPO3 nie jest opublikowane ani w TER, ani na Packagist, dlatego nie da się sprawdzić, co oferuje. Gosign zaleca zamiast tego czyste rozwiązanie CSS, które obywa się bez rozszerzenia, bez JavaScriptu i bez obowiązku aktualizacji.

Różnica jest zasadnicza: każde rozszerzenie to dodatkowa zależność, o którą trzeba zadbać przy każdej aktualizacji TYPO3. Alternatywa CSS to pojedyncza animacja CSS (20 linii) na zwykłym elemencie treści tekstowej. Wydajność, dostępność i nakład utrzymania jednoznacznie przemawiają za podejściem CSS.

Typowe scenariusze to informacje o przerwach technicznych, banery akcji i wyniki sportowe

Najczęstszym scenariuszem jest baner informacyjny na firmowej stronie. “Nasze biuro jest nieczynne od 24.12 do 02.01” lub “Zapisz się teraz: webinarium 15 marca”. Przewijający się tekst zwraca uwagę, nie będąc popupem. Redaktorzy zarządzają tekstem w backendzie TYPO3 i aktywują lub dezaktywują baner przez datę początkową i końcową.

Drugi scenariusz: News-ticker na portalach informacyjnych i stronach startowych intranetu. Ostatnie trzy do pięciu nagłówków przewija się jako ticker w górnej części strony. Każdy nagłówek jest linkiem do pełnego artykułu. Szybkość jest tak ustawiona, aby tekst pozostawał czytelny (zalecane: 30 do 50 pikseli na sekundę).

Trzeci scenariusz: wyniki sportowe na stronach klubów. W dniu meczowym ticker pokazuje aktualne wyniki wszystkich drużyn. Dane pochodzą z tabeli TYPO3 lub zewnętrznego feedu i są prezentowane jako przewijany tekst. Kombinacja tekstu przewijanego i automatycznej aktualizacji (przez AJAX co 60 sekund) czyni ticker kanałem informacyjnym w czasie rzeczywistym bez złożoności pełnego rozszerzenia liveticker.

Architektura techniczna alternatywy CSS obywa się bez elementu treści

Publicznej wersji rozszerzenia marquee nie ma ani w TER, ani na Packagist, więc nie da się sprawdzić jego budowy. Alternatywa CSS nie potrzebuje natomiast własnego elementu treści, szablonu Fluid ani JavaScriptu: szybkość, pauza przy najechaniu i nieskończone powtarzanie są zawarte w animacji CSS.

Alternatywa CSS działa tak: zwykły element treści tekstowej otrzymuje klasę CSS (np. “marquee”), a animacja CSS @keyframes scroll przesuwa tekst od prawej do lewej. Animacja jest nieskończona, zatrzymuje się przy najechaniu (przez :hover) i respektuje ustawienie prefers-reduced-motion systemu operacyjnego, co jest istotne dla dostępności. Cały kod:

.marquee { overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 20s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; } }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

Częste problemy to dostępność, widok mobilny i znaczenie SEO

Problem pierwszy: dostępność. Ruchome treści są problematyczne dla osób z ograniczeniami poznawczymi lub padaczką. WCAG 2.1 wymaga, aby animacje można było zatrzymać, wstrzymać lub ukryć. Rozwiązanie CSS zatrzymuje się przy najechaniu i automatycznie respektuje ustawienie prefers-reduced-motion; przycisku stop potrzebuje jednak również ono.

Problem drugi: widok mobilny. Na smartfonach dostępne miejsce na przewijany tekst jest minimalne. Ticker, który na pulpicie jest dobrze czytelny, na telefonie przelatuje tak szybko, że nikt nie zdąży przeczytać. Rozwiązanie: na urządzeniach mobilnych zastąpić ticker statycznym banerem, który pokazuje najważniejszy komunikat bez animacji.

Problem trzeci: znaczenie SEO. Przewijany tekst jest indeksowany przez wyszukiwarki, ale sygnały UX (krótki czas na tickerze, brak kliknięć) mogą negatywnie wpłynąć na jakość strony. Treści tickera powinny być zawsze dostępne także jako zwykłe treści strony, nie tylko w tickerze.

Czwarty problem: zgodność z dostępnością w instytucjach publicznych. Ustawa o dostępności cyfrowej i norma EN 301 549 wymagają, aby animacje można było zatrzymać. Marquee bez przycisku stop lub mechanizmu pauzy narusza WCAG 2.2.2 (Pause, Stop, Hide). Rozwiązanie CSS z prefers-reduced-motion i pauzą na :hover spełnia to wymaganie częściowo, dla pełnej zgodności potrzebny byłby wyraźny przycisk pauzy.

Rozszerzenie jest zbędne dla aktualnych wersji TYPO3

Publicznej wersji rozszerzenia marquee, która obsługiwałaby TYPO3 v12 lub v13, nie ma. Ponieważ alternatywa CSS jest wdrażana w 15 minut i nie generuje zależności od rozszerzenia, Gosign zaleca przy każdej migracji zmianę. Redaktor używa zwykłego elementu treści tekstowej ze specjalną klasą CSS, zdefiniowaną w Site-Package. Jest to bezobsługowe, wydajne i, po dodaniu przycisku pauzy, dostępne.

Dla projektów, które chcą rotować kilka komunikatów w tickerze, wystarcza rozszerzona animacja CSS przechodząca przez kilka bloków tekstowych po kolei. Alternatywnie minimalny JavaScript (poniżej 20 linii) może doładowywać teksty ze źródła JSON i sterować animacją. Oba rozwiązania są architektonicznie czystsze niż osobne rozszerzenie dla jednego efektu. W Gosign stosujemy podejście CSS we wszystkich projektach, które potrzebują tickera lub tekstu przewijanego.