Poprawnie działająca strona bez JS'a

pytanie zadane 26 maja 2018 w JavaScript przez michh123 Bywalec (2,790 p.)

Witam,

Kilka razy w tygodniu w miarę możliwości staram się przeglądać i uważnie czytać WebKrytyka. Jest mnóstwo kwestii, których nie rozumiem, bo jestem początkujący, ale przeglądając ten post już w pierwszym wypunktowaniu czytamy o pozytywnym zaskoczeniu Comandeer'a w kwestii działania opisywanej przez Niego strony bez JavaScript. I tu zrodziły mi się dwa pytania, pewnie banalne, ale wolę mieć pewność :)

Jak mniemam chodzi tu o JS'a użytego do różnego typu animacji na stronie. Czyli tworząc stronę powinniśmy zadbać o to, żeby elementy były poprawnie obsługiwane nawet bez tych animacji? Np. slider. Jeżeli użytkownik wyłączy JS to kliknięcie na strzałkę przewijającą slajd powinno i tak przełączyć następny slajd tylko bez animacji?
A co jeśli stosujemy JS'a nie do animacji, tylko robimy jakąś aplikację webową, która działa poprawnie tylko na JS? Czy wtedy powinniśmy ostrzec użytkownika podając mu komunikat w stylu "Strona działa poprawnie tylko z włączonym JavaScript", czy zabezpieczyć się w jakiś inny sposób przed jego wyłączeniem?

Uprzejmie proszę o odpowiedź na nurtujące mnie pytania,
Pozdrawiam!

2 odpowiedzi

odpowiedź 26 maja 2018 przez Comandeer Guru (600,810 p.)
wybrane 26 maja 2018 przez michh123

Najlepsza

Nie chodzi tylko o animacje, ale także o JS służący do dostarczania funkcji strony. W wielu przypadkach funkcje JS-owe i tak są jedynie ładnym interfejsem dla REST API, stąd warto rozważyć zbudowanie całości przy pomocy filozofii Progressive Enhancement.

Są usługi, które powinny dostarczać swoją podstawową funkcjonalność nawet wtedy, gdy JS u użytkownika nie działa. Osobiście nazywam je "usługami krytycznymi" i zaliczam do nich np. klienta e-maila. Są jednak aplikacje, które bez JS nie mają sensu (edytor grafiki czy video). Wówczas faktycznie, wypada poinformować o tym usera. Smashing Magazine ładnie podsumowuje radzenie sobie z niedziałającym JS-em.

odpowiedź 26 maja 2018 przez rafal.budzis Szeryf (85,260 p.)

Animacje tworzone za pomocą JSa to zło w czystej postaci. Jeśli są na zasadzie zmieniania stylu CSS a jakiejś pętli. CSS pozwala na stworzenie animacji w zaawansowanej formie. (animation, transition). Animacje w CSS w przeciwieństwie do JSowych są w stanie wy renderować się z pominięciem jakiejś klatki na słabszych urządzeniach oraz mają wsparcie sprzętowe i są w stanie prerenderować klatki które zostaną dopiero za chwile pokazane. Jeśli chcemy i tak tworzyć animacje w JS powinny być one renderowane do znacznika <canvas>.

P.S. Nie czytałem jeszcze podanego webkrytyka. Może jeszcze uzupełnię wpis ale wydaje mi się ze własnie o to chodzi ;)

komentarz 26 maja 2018 przez michh123 Bywalec (2,790 p.)

Czyli animacje tworzymy w CSS, ale obsługę kliknięć itd. wykonujemy w JS?
W sensie: mamy ten nieszczęsny slider, ostylowaliśmy już animacje i teraz w JS tworzymy skrypt, który z pomocą addEventListener() (bo atrybut onclick w HTML jest takim samym złem jak animacje w JS :D), który "wywoła" napisane przez nas w CSS animacje?

komentarz 26 maja 2018 przez Comandeer Guru (600,810 p.)

Animacje w JS przy użyciu Web Animation API lub requestAnimationFrame działają na silniku CSS, więc również mogą optymalizować pod GPU i pomijam klatki w miarę potrzeby. I wcale nie trzeba renderować do canvas – zwłaszcza jeśli musimy animować wektorową grafikę.

komentarz 26 maja 2018 przez michh123 Bywalec (2,790 p.)

Ale jeżeli użyję API, o których wspomniałeś, a użytkownik wyłączy JS to i tak nie będą one działały?

komentarz 26 maja 2018 przez rafal.budzis Szeryf (85,260 p.)

Doczytałem wpis i wydaje mi się ze commanderowi chodziło tylko o to ze początkowy ich stan czyli :

.desktop .whatwedo-item i, .desktop .whatwedo-item .animc, .desktop .contactData, .desktop .contactForm {
    opacity: 0;
}

Jest ustawiany w CSS przez co gdy coś się posypie w JSach lub ktos wyłączy obsługę JS nie widzimy nic. A wystarczy usunąć tą linijkę z CSSa i dopisać te opacity po stronie JSa i jesteśmy "bezpieczni". Dodatkowo żadna wyszukiwarka nie uzna ze ukrywamy treść na stronie.

@Comandeer nie bawiłem sie Web Animation API zawsze czymś zaskoczysz :D Dzięki ;)

1	komentarz 26 maja 2018 przez Comandeer Guru (600,810 p.) Ale jeżeli użyję API, o których wspomniałeś, a użytkownik wyłączy JS to i tak nie będą one działały? Tak, ale animacje raczej nie powinny być niezbędne do używania strony, więc nie jest to jakiś mega problem.

komentarz 26 maja 2018 przez michh123 Bywalec (2,790 p.)

Tak, ale animacje raczej nie powinny być niezbędne do używania strony, więc nie jest to jakiś mega problem.

To oczywiste zwłaszcza jeśli ktoś uważnie śledzi Twoją działalność sieciową i blogi :) Ale chodzi mi bardziej o elementy typu show more/show less. Da się w CSS ostylować animację, ale i tak w JS trzeba obsłużyć kliknięcie na button "show more", aby zobaczyć cały tekst. A wiadomo, że treść jest najważniejsza, więc użytkownik, który wyłączy JS nie zobaczy reszty treści (bo bez JS kliknięcie nie zostanie obsłużone - nie załaduje się reszta ukrytej treści i to jest najgorsze). Jak się przed tym zabezpieczyć?

1	komentarz 26 maja 2018 przez Comandeer Guru (600,810 p.) Domyślnie pokazywać całą treść, a gdy JS będzie dostępny, to ją ukryć. Może się przydać technika .no-js.

komentarz 26 maja 2018 przez michh123 Bywalec (2,790 p.)

Czyli według tego artykułu domyślną klasą jest .no-js i dla tej klasy tworzymy arkusze, które zapewnią pełny content użytkownikowi, który ma wyłączony JS. Ale w nagłówku HTML dodajemy jako jedyny skrypt, który wykryje czy użytkownik ma włączony JS, jeśli tak - zamieni klasę .no-js na .js, w której arkuszach będą style w pełni funkcjonalne?

komentarz 26 maja 2018 przez Comandeer Guru (600,810 p.)

Nie do końca. Założenie jest takie, że arkusz jest pisany przede wszystkim dla JS, z dodatkowymi stylami poprzedzonymi .no-js dla tych elementów, które muszą wyglądać inaczej, gdy JS nie działa. Z tego też powodu w przypadku kontenerów "Czytaj więcej" wypada np. usunąć overflow.