'[alt]' dla background-image, webpack opóźnienie(?), class - nazewnictwo

pytanie zadane 24 lipca 2017 w HTML i CSS przez Kamil Łydka Stary wyjadacz (13,600 p.)

1. Coraz większą uwagę zwraca się na poprawny atrybut '[alt]' dla obrazków na stronach. Co w przypadku, jeśli nasz obrazek jest tłem jakiegoś diva? I do tego np. pełni jakąś funkcję na naszej stronie? Według stackoverflow w takim przypadku taką funkcję wtedy pełni atrybut '[title]'. Jak to wygląda w przypadku czytników ekranowych, identycznie co '[alt]' u <img> ?

2. Zaznajamiam się coraz bardziej z webpackiem i mam trochę wątpliwości co do używania bundlerów. Załóżmy, że korzystam z paru modułów, między innymi css-loader. W takim przypadku moje wszystkie style css są spakowane do głównego pliku bundle.js. Taki bundle.js umieszczamy/lub jest umieszczany (zależy od konfiguracji) na końcu <body>. No i w tym momencie dochodzi do takiej sytuacji, że najpierw wczytuje się nam html, a dopiero potem css, który jest w tym pliku js. Czy to nie opóźnia trochę wczytania strony? W końcu css jest ładowany na końcu i html wczyta się bez styli. Co w przypadku większych projektów? Czy nasza strona przez tą sekundę nie jest rozwalona? Czy wygląda to podobnie w przypadku innych 'module bundler' (np. rollup)?

3. Spotkałem się wiele razy z opinią, żeby nie nazywać klas w css tak aby wskazywać do czego ta klasa służy. Co w przypadku, kiedy chcemy sobie stworzyć takiego 'mini' bootstrapa? Tam jednak nazwy klas wskazują bardzo często na to do czego dana klasa służy. Chodzi mi o sytuację, kiedy ktoś chce sobie potworzyć takie małe klasy np. right, left albo block.

2 odpowiedzi

odpowiedź 24 lipca 2017 przez Comandeer Guru (601,510 p.)
wybrane 24 lipca 2017 przez Kamil Łydka

Najlepsza

Jeśli obrazek pełni jakąś funkcję, wstawienie go jako tło jest błędem. W tym momencie zamiast title użyłbym techniki .visuallyhidden.
Bardzo prawdopodobne, że jest (tzw. FOUC). To można wyeliminować eksportując najważniejsze style do osobnego arkusza i dołączając ten arkusz tradycyjnie.
Jak se tworzysz framework, to raczej się nie da od tego uciec. Niemniej faktycznie, dobra praktyka jest taka, żeby klasy nie wiązały się z konkretną prezentacją.

komentarz 24 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)
edycja 24 lipca 2017 przez Kamil Łydka

1. No tak, ale np. robiłem kółko i krzyżyk (choć nie zadbałem tutaj o czytniki ekranowe), to i tak najbardziej rozsądnym pomysłem było wrzucanie kółka i krzyżyka w background-image. https://panlydka.github.io/tic-tac-toe-ES5/.visuallyhidden w jakim sensie? Wrzucamy w treść diva informację o tym co ten obrazek/tło robi i chowamy po prostu tą informację?

2. A co w przypadku małych stron? Opłaca się robić osobną klasę:

.right{
 text-align: right
}

jeśli użyjemy ją np. 5-10 razy? Czy nie ma to najmniejszego sensu i już lepiej skorzystać z jakiejś z zalet preprocesora css, np. zmiennej?

komentarz 24 lipca 2017 przez Comandeer Guru (601,510 p.)

Ale w sumie czemu nie normalny obrazek?
IMO nie opłaca się – zwłaszcza jak np. użyje się BEM.

komentarz 24 lipca 2017 przez Kamil Łydka Stary wyjadacz (13,600 p.)

Troszkę więcej roboty, niż po prostu pokazać jakiś div, który ma w sobie tło. No, ale warto zadbać o tą dostępność i następnym razem zrobię poprawnie.

Dziękuję za odpowiedzi.