Bardzo szybki CSS - invalid input shake

Nauczymy się tworzyć atrybut pattern dla elementów input, pisać animacje oraz poznamy pseudo-klasę invalid. Nauczymy się też przeszukiwać internet w celu odnajdywania nowych, dobrych rozwiązań dla naszego CSS.

Ten akurat fragment pochodzi z internetu, ze strony 30 seconds of code. Jako deweloper, powinniśmy umieć wyszukiwać takie strony i umieć z nich korzystać oraz regularnie je przeglądać w celu znalezienia nowych, ciekawych rozwiązań. To samo tyczy się kanałów na YouTube czy innych sieci społecznościowych.

Teraz przyjrzyjmy się, co autor stworzył:

<input type="text" placeholder="Letters only" pattern="[A-Za-z]*" />

Element <input> korzystający z atrybutu „pattern” gdzie przekazano wyrażenie regularne – dozwolone są wielkie i małe litery, nic więcej (wliczając spacje). Wpisanie złego znaku aktywuje pseudo-klasę :invalid:

input:invalid {
  box-shadow: 0 0 0.6rem #ff0000;
}

Spróbujmy teraz coś wpisać, co nie jest literą, a otrzymamy czerwony box-shadow, który utrzyma się do czasu usunięcia nieprawidłowego znaku. Teraz napiszmy naszą animację:

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

Słówko kluczowe @keyframes, nazwa, breakpointy (w procentach oznaczające procent ukończenia animacji), a w nich określone to, co ma się z elementem dziać (tutaj nim „trzęsiemy”).

Teraz wystarczy tylko użyć tej animacji z pseudo-klasą :invalid:

input:invalid {
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.6rem #ff0000;
}

Wadą tego rozwiązania jest fakt, że animacja (nie licząc box-shadow) działa tylko raz. To znaczy – możemy kilka razy z rzędu wprowadzać nieprawidłowy znak, ale wtedy trzęsie się 1 raz. Idealnie by było, aby box-shadow był obecny cały czas aż do usunięcia nieprawidłowego inputu, ale animacja wykonywała się za każdym razem, gdy wprowadzony zostanie nieprawidłowy znak, naprowadzając użytkownika na to, co robi źle.

Tego jednak bez JavaScript osiągnąć się raczej nie da. Tym niemniej – internet jest pełen takich treści, ja idei Szybkiego CSSa też nie wymyśliłem sam, jak się okazuje.

Powinniśmy umieć przeszukiwać sieć w poszukiwaniu takich szybkich, fajnych rozwiązań i regularnie to robić. Nawet jeżeli naszym głównym celem jest nauka programowania, nie zaniedbujmy CSSa. Z drugiej strony – nie potrzebujemy poświęcać na niego nie wiadomo jak dużo czasu.

Ćwiczmy mało, ale regularnie.

Strona autora: https://www.30secondsofcode.org/

Bardzo szybki CSS – invalid input shake