Назад

February 10, 2025

πŸ•΅οΈβ€β™‚οΈ Π―ΠΊ ΠΏΡ€Π°Ρ†ΡŽΡ” :empty Ρƒ CSS: приховування, Π΄Π΅Π±Π°Π³ Ρ– ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ– кСйси

Π―ΠΊΡ‰ΠΎ ваш ΠΌΠ°ΠΊΠ΅Ρ‚ β€œΠ»Π°ΠΌΠ°Ρ”Ρ‚ΡŒΡΡβ€ Ρ– Π²ΠΈ Π½Π΅ Ρ€ΠΎΠ·ΡƒΠΌΡ–Ρ”Ρ‚Π΅ Ρ‡ΠΎΠΌΡƒ, ΠΌΠΎΠΆΠ»ΠΈΠ²ΠΎ, Π²ΠΈΠ½Π½Ρ– ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ– Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ. ВикористовуйтС псСвдоклас :empty, Ρ‰ΠΎΠ± Ρ—Ρ… ΠΏΡ€ΠΈΡ…ΠΎΠ²Π°Ρ‚ΠΈ Π°Π±ΠΎ Π·Π½Π°ΠΉΡ‚ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½Ρ– місця Π² Ρ€ΠΎΠ·ΠΌΡ–Ρ‚Ρ†Ρ–.

πŸ™ˆ ΠŸΡ€ΠΈΡ…ΠΎΠ²ΡƒΡ”ΠΌΠΎ ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ– Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ

p:empty {
  display: none;
}
  • Π¦Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΡ€ΠΈΡ…ΠΎΠ²Π°Ρ” <p>, які Π½Π΅ ΠΌΠ°ΡŽΡ‚ΡŒ Π΄ΠΎΡ‡Ρ–Ρ€Π½Ρ–Ρ… Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ–Π² Π°Π±ΠΎ тСкстових Π²ΡƒΠ·Π»Ρ–Π².
  • Π―ΠΊΡ‰ΠΎ ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„ ΠΌΡ–ΡΡ‚ΠΈΡ‚ΡŒ Ρ…ΠΎΡ‡Π° Π± ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠ±Ρ–Π», Π²Ρ–Π½ Π½Π΅ Π±ΡƒΠ΄Π΅ ΠΏΡ€ΠΈΡ…ΠΎΠ²Π°Π½ΠΈΠΉ.
  • Π¦Π΅ корисно для видалСння Π·Π°ΠΉΠ²ΠΈΡ… ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–Ρ… <p>, які ΠΌΠΎΠΆΡƒΡ‚ΡŒ з’явитися Ρ‡Π΅Ρ€Π΅Π· ΠΏΠΎΠΌΠΈΠ»ΠΊΠΈ Π² тСкстових Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ….

πŸ” Використання :empty для Π΄Π΅Π±Π°Π³Ρƒ

Π†Π½ΠΎΠ΄Ρ– ΠΏΡ€ΠΈ вСрстці Π²ΠΈΠ½ΠΈΠΊΠ°Ρ” питання: β€œΠ§ΠΎΠΌΡƒ Ρ†Π΅ΠΉ Π±Π»ΠΎΠΊ Π·Π°ΠΉΠΌΠ°Ρ” місцС, Ρ…ΠΎΡ‡Π° Π²Ρ–Π½ пустий?” Ми ΠΌΠΎΠΆΠ΅ΠΌΠΎ швидко Π·Π½Π°ΠΉΡ‚ΠΈ Ρ‚Π°ΠΊΡ– ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΈ, додавши ΠΊΠΎΠ½Ρ‚ΡƒΡ€ для всіх ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–Ρ… Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ–Π²:

*:empty {
  outline: 1px solid red;
}

πŸ”₯ Коли Ρ†Π΅ корисно?

  • ΠŸΡ€ΠΈ Ρ€ΠΎΠ±ΠΎΡ‚Ρ– Π· CSS Grid: :empty Π΄ΠΎΠΏΠΎΠΌΠ°Π³Π°Ρ” Π·Π½Π°ΠΉΡ‚ΠΈ ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ– Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ, які ΠΌΠΎΠΆΡƒΡ‚ΡŒ Π·Π°ΠΉΠΌΠ°Ρ‚ΠΈ Π·Π°ΠΉΠ²Ρ– ΠΊΠΎΠΌΡ–Ρ€ΠΊΠΈ.
  • Π’ flex-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°Ρ…: пусті Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ ΠΌΠΎΠΆΡƒΡ‚ΡŒ Π²ΠΏΠ»ΠΈΠ²Π°Ρ‚ΠΈ Π½Π° Ρ€ΠΎΠ·ΠΏΠΎΠ΄Ρ–Π» простору.
  • Π’ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²Π°Π½ΠΎΠΌΡƒ тСксті: ΠΏΡ€ΠΈΡ…ΠΎΠ²Π°Π½Ρ– Π°Π±Π·Π°Ρ†ΠΈ ΠΌΠΎΠΆΡƒΡ‚ΡŒ Π΄ΠΎΠ΄Π°Π²Π°Ρ‚ΠΈ Π·Π°ΠΉΠ²Ρ– відступи.

πŸ“Œ ΠŸΡ€ΠΈΠΊΠ»Π°Π΄ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΈ Π· CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-container div {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

.grid-container div:empty {
  outline: 2px dashed red;
}
<div class="grid-container">
  <div>1</div>
  <div></div> <!-- Π¦Π΅ ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΉ div, Π°Π»Π΅ Π²Ρ–Π½ всС ΠΎΠ΄Π½ΠΎ Π·Π°ΠΉΠΌΠ°Ρ” місцС -->
  <div>3</div>
</div>

Π£ Ρ†ΡŒΠΎΠΌΡƒ Π²ΠΈΠΏΠ°Π΄ΠΊΡƒ Π΄Ρ€ΡƒΠ³ΠΈΠΉ div Π±ΡƒΠ΄Π΅ Π²ΠΈΠ΄Ρ–Π»Π΅Π½ΠΈΠΉ Ρ‡Π΅Ρ€Π²ΠΎΠ½ΠΎΡŽ Ρ€Π°ΠΌΠΊΠΎΡŽ, Ρ‰ΠΎ Π΄ΠΎΠΏΠΎΠΌΠΎΠΆΠ΅ виявити ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.

❌ Π§ΠΎΠ³ΠΎ :empty Π½Π΅ ΠΏΡ€ΠΈΡ…ΠΎΠ²Π°Ρ”?

1 CSS-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ всС Ρ‰Π΅ Π²Π²Π°ΠΆΠ°Ρ”Ρ‚ΡŒΡΡ β€œΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΌβ€ Π―ΠΊΡ‰ΠΎ ΠΌΠΈ Π΄ΠΎΠ΄Π°Ρ”ΠΌΠΎ тСкст Ρ‡Π΅Ρ€Π΅Π· content: "", Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ всС ΠΎΠ΄Π½ΠΎ Π²Π²Π°ΠΆΠ°Ρ” Ρ‚Π°ΠΊΠΈΠΉ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΌ:

span:empty::before {
  content: "πŸš€";
  color: red;
}

Π¦Π΅ΠΉ span всС Ρ‰Π΅ :empty, Ρ…ΠΎΡ‡Π° Π² Π½ΡŒΠΎΠΌΡƒ Ρ” Π²ΠΈΠ΄ΠΈΠΌΠΈΠΉ тСкст.

2 &nbsp; (Π½Π΅Ρ€ΠΎΠ·Ρ€ΠΈΠ²Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ±Ρ–Π») Π²Π²Π°ΠΆΠ°Ρ”Ρ‚ΡŒΡΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠŸΡ€ΠΎΠ±Ρ–Π»ΠΈ (β€œ β€œ) Π°Π±ΠΎ &nbsp; Ρƒ <p> Ρ‡ΠΈ div Ρ€ΠΎΠ±Π»ΡΡ‚ΡŒ ΠΉΠΎΠ³ΠΎ Π½Π΅ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΌ:

<p>&nbsp;</p> <!-- Π¦Π΅ΠΉ Π°Π±Π·Π°Ρ† Π½Π΅ Π±ΡƒΠ΄Π΅ вваТатися ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΌ -->

πŸ“Œ Π Ρ–ΡˆΠ΅Π½Π½Ρ β€” використовувати :not(:empty) для ΠΏΠΎΡˆΡƒΠΊΡƒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ.

🎯 Використання :not(:empty)

МоТСмо Π·Ρ€ΠΎΠ±ΠΈΡ‚ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ»Π΅ΠΆΠ½Π΅ β€” Π²ΠΈΠ±Ρ€Π°Ρ‚ΠΈ Ρ‚Ρ–Π»ΡŒΠΊΠΈ Π·Π°ΠΏΠΎΠ²Π½Π΅Π½Ρ– Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ:

p:not(:empty) {
  background: lightgreen;
  padding: 5px;
}

πŸ”₯ Π”Π΅ корисно?

  • Π‘Ρ‚ΠΈΠ»Ρ–Π·ΡƒΠ²Π°Ρ‚ΠΈ Ρ‚Ρ–Π»ΡŒΠΊΠΈ Ρ‚Ρ– <p>, Π΄Π΅ Ρ” тСкст.
  • Π’ΠΈΠ·Π½Π°Ρ‡ΠΈΡ‚ΠΈ Π±Π»ΠΎΠΊΠΈ, які ΠΌΡ–ΡΡ‚ΡΡ‚ΡŒ корисний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
  • ΠŸΠΎΠΊΡ€Π°Ρ‰ΠΈΡ‚ΠΈ UX, ΠΏΠΎΠΊΠ°Π·ΡƒΡŽΡ‡ΠΈ ΡΡ‚ΠΈΠ»Ρ–Π·Π°Ρ†Ρ–ΡŽ Ρ‚Ρ–Π»ΡŒΠΊΠΈ Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΠΈΡ… Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Π°Ρ….

🏁 Висновок

  • :empty Π΄ΠΎΠΏΠΎΠΌΠ°Π³Π°Ρ” ΠΏΡ€ΠΈΡ…ΠΎΠ²ΡƒΠ²Π°Ρ‚ΠΈ Π·Π°ΠΉΠ²Ρ– ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ– Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΈ Ρ‚Π° ΠΎΡ‡ΠΈΡ‰Π°Ρ‚ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.
  • ВикористовуйтС ΠΉΠΎΠ³ΠΎ для Π΄Π΅Π±Π°Π³Ρƒ, Ρ‰ΠΎΠ± Π·Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ΠΏΠΎΠΌΡ–Ρ‚Π½Ρ– ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΈ Π· Ρ€ΠΎΠ·ΠΌΡ–Ρ‚ΠΊΠΎΡŽ.
  • Π—Π½Π°ΠΉΡ‚Π΅ обмСТСння: content: "" всС Ρ‰Π΅ Π²Π²Π°ΠΆΠ°Ρ”Ρ‚ΡŒΡΡ ΠΏΠΎΡ€ΠΎΠΆΠ½Ρ–ΠΌ, Π° &nbsp; β€” Π½Ρ–.
  • ΠšΠΎΠΌΠ±Ρ–Π½ΡƒΠΉΡ‚Π΅ :empty Ρ– :not(:empty), Ρ‰ΠΎΠ± ΠΊΠ΅Ρ€ΡƒΠ²Π°Ρ‚ΠΈ Π²Ρ–Π·ΡƒΠ°Π»ΡŒΠ½ΠΈΠΌ відобраТСнням Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ–Π².