[CR] CSS (#5): Efekty hover, transition, transform

Question

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=BjlC18jZe1o

Paczka z odcinka: POBIERZ​

 

Answer 1

• Bez obaw można pominąć prefixy dla właściwości transform. Tym bardziej - jeśli trzeba je wpisywać ręcznie.
• Warto wspomnieć, że kolejność wartości w transform ma znaczenie
• 42:58 - div nie zmienia swoich rozmiarów.
• Mauzoleum Taj Mahal:

  <div class="overlayT">
      <a href="#"><img src="img/04.jpg" alt="Taj Mahal"></a>
      <a class="link" href="#"><span class="icon"><i class="icon-search"></i><p>zobacz album</p></span></a>
  </div>
  

  Przeznaczeniem obu linków jest zapewne otworzenie galerii. Linki mają różne treści, a na jednym z nich, fokus jest niewidoczny. Całość powinna być zamknięta w jednym linku.

• Z uwagi na dostępność, w tym przypadku: 

  <a class="link" href="#"><span class="icon"><i class="icon-search"></i><p>zobacz album</p></span></a>

  do ikony - dobrze jest dodać atrybut aria-hidden="true", aby czytniki ekranowe pomijały ten element (więcej o ikonach i dostępności pisał swego czasu Comandeer)

• Pokusiłbym się o zamknięcię .postcard w figure zamiast div, oraz zmianę p na figcaption.

• Zdecydowanie lepiej można opisać teksty alternatywne na zdjęciach. Przykładowo:
  
  Na zdjęciu widzimy "Rodzinę gepardów na trawiastej sawannie Parku Narodowego Serengeti", nie "Serengeti"

• Dobrą praktyką jest umieszczanie wartości pseudo-klasy hover, na pseudoklasie focus - wtedy animacje, widoczne są również z poziomu klawiatury (należy jednak pamiętać, aby wszystko co związane z hoverem, oprzeć na elemencie focusowalnym)

Cieszę się, że inicjatywa CR-ów trwa. Moim zdaniem powinien Pan regularnie wspominać o niej w swoich odcinkach.

---

Świetnej jakości materiał - teraz to aż przyjemnie dać łapkę w górę : )

Answer 2

Może to drobna rzecz, ale w 31:39 powielasz pewien mit na temat teorii Einsteina o którym wypowiada się chociażby profesor Krzysztof Meissner w tym filmie: wyjaśnienie nazwy teorii Einsteina.