Czym Jest i Kiedy Warto Używać :empty w CSS?

25 lutego 2022Styling
2 min147 wyświetleń

⁠Czym jest :empty w CSS?

:empty to pseudoklasa, która pozwala stylować puste elementy.

Zadziała ona tylko wtedy, gdy wewnątrz elementu nie znajduje się żaden tekst, ani żaden inny element.

Przykładowo:

<!-- ✅ -->
<div>asd</div>

<!-- ✅ -->
<div><!-- Comment --></div>

<!-- ❌ -->
<div>Hello world</div>

<!-- ❌ -->
<div><p></p></div>

Jak widzisz :empty zadziała również, gdy wewnątrz elementu znajduje się sam komentarz.

Na podobnej zasadzie działa :blank, który również pozwala stylować puste elementy.

Jedyna różnica pomiędzy :blank, a :empty jest taka, że :blank akceptuje puste spacje wewnątrz elementu:

<!-- :empty ❌ -->
<div> </div>

<!-- :blank ✅ -->
<div> </div>

:blank jest dostępny tylko w przeglądarce Firefox pod nazwą :-moz-only-whitespace. Więcej szczegółów na jego temat znajdziesz tutaj.

Kiedy warto korzystać z :empty?

Empty state

Wyobraź sobie sytuację, gdzie mamy To-Do listę, w postaci <ul>, do którego przekazujemy <li> wraz z treścią zadania.

W momencie, gdy nie dodaliśmy jeszcze żadnego elementu do listy możemy w prosty sposób poinformować użytkownika o braku danych na przykład za pomocą grafiki:

img {
  display: none;
}

ul:empty + img {
  display: block;
}
<ul></ul>
<img src="" alt="Empty state image" />

Lub komunikatu:

p {
  display: none;
}

ul:empty + p {
  display: block;
}
<ul></ul>
<p>Dodaj swoje pierwsze zadanie do To-do listy!</p>

Gdy tylko dodamy do naszej listy element <li> komunikat zniknie ✨

Powyższy przykład możemy wykorzystać również przy <table> i podświetlać puste <td>. Pomysłów na wykorzystanie :empty jest sporo, dlatego warto jest mieć go z tyłu głowy.

Error handling

Kolejnym świetnym przykładem będzie walidacja formularza.

Często tworzymy element o klasie .error, do którego przekazywana jest wiadomość w momencie podania błędnych danych.

:empty przychodzi nam z pomocą i oszczędza zbędnych skryptów Javascript, ponieważ w prosty sposób możemy pokazać element, gdy znajduje się w nim treść:

<div class="error"></div>
.error {
  padding: 10px;
  color: #721c24;
  background-color: #f8d7da;
}

.error:empty {
⁠  display: none;
}

That's all! Świetne rozwiązanie, co nie? 💪🏻

Podsumowanie

:empty jest niestety mało popularny wśród Frontend Developerów. Za jego pomocą możemy oszczędzić sobie wiele czasu (i kodu!).

Mam nadzieję, że z czasem coraz więcel ludzi go pozna i się do niego przekona 🙏🏻

Przeczytaj także inne artykuły

Next Step w Web Developmencie - Czym Jest Next.js?

Next.js to najczęściej pobierany framework React.js. Jego największą zaletą jest Server Side Rendering, ale możemy go również wykorzystać jako Static Site Generator. Next.js postawiony jest na serwerze Node.js, dzięki czemu możemy w prosty sposób stworzyć aplikacje Fullstack. W 2022 roku wciąż utrzymuje się na pozycji lidera, więc nie trać czasu i zobacz, co potrafi!

7 stycznia 2022Next
4 min247 wyświetleń