Когда использовать псевдоселекторы CSS :empty и :blank

kogda ispolzovat psevdoselektory css empty i blank

Я совершил ужасную ошибку, когда написал о :empty и :blank недавно. я сказал это :empty не было полезным, и :blank гораздо полезнее, чем :empty.

vsw0KkV-ZfP8LtM29iCh0QOcEBaiV9Xy-F9C

Я ошибался!

:empty на самом деле достаточно хорошо. Нам даже не нужно :blank!

Быстрый ввод

Хорошо, во-первых, что есть :empty и что есть :blank?

:empty является псевдоселектором. Он позволяет выбирать пустые элементы.

/* This is CSS */
:empty { /* do something */}

Пустые элементы – это элементы, в которых нет ничего. Он даже не может иметь пробел.

<!-- This is html -->
<!-- Example of an empty element --><div></div>

Пустые элементы могут иметь комментарии, если заполняют весь элемент.

<!-- This is html -->
<!-- Empty elements can have comments --><div><!-- this is a comment --></div>

:blank является активированной формой :empty. Он позволяет выбирать элементы, в которых есть пробелы:

<!-- This is html -->
<!-- Matched with :blank but not with :empty --><div> </div>

Оба :empty и :blank полезны, если нужно:

  1. Стилизовать пустой элемент
  2. Создавайте пустые состояния

Пример

Скажем, у вас есть <div>. Вы только наполните this

с содержимым, когда возникает ошибка.

<!-- This is html -->
<!-- Without errors --><div class="error"></div>
<!-- With errors --><div class="error">Whoops! Something went wrong!</div>

Здесь вам нужно создать стиль .error разд. Если вы не используете :emptyВам нужно полагаться на класс или атрибут. Это чувствуется излишним.

<!-- This is html -->
<!-- With errors --><div class="error" data-state="error">Whoops! Something went wrong!</div>
/* This is CSS */
.error { display: none; background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}
.error[data-state="error"] { display: block;}

Но если вы используете :emptyВам не нужен дополнительный класс или атрибут. Вы можете напрямую стилизовать класс .error. Вам даже не нужно display: none;!

/* This is CSS */
.error { background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}
.error:empty { padding: 0;}

Вот пустая демонстрация кода, которую я сделал для вас, чтобы поиграть (попробуйте удалить файл padding: 0; от .error:emptyвы увидите красный фон?).

Скажем, вы желаете сделать перечень дел. Когда ваши пользователи впервые увидят список дел, они, вероятно, увидят ноль задач.

Что вы показываете, когда нет задач?

Это нулевое положение дел мы называем пустым состоянием.

Если вы хотите создать пустое состояние для своего списка дел, вы можете добавить дополнительное <div> после your

    . Когда вы это сделаете, вы можете использовать combinatiна :empty и + (соседние sibling) или ~ (дальнейший брат и сестра), чтобы стилизовать пустое состояние.

    <!-- This is html -->
    <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>
    /* This is CSS */
    .empty-state { display: none;}
    ul:empty + .empty-state { display: block;}

    Я научился пользоваться :empty сюда от Хейдона Пикеринга. Просмотрите статью Хейдона об инклюзивных компонентах, если вы хотите увидеть пример со списком задач на работе.

    Примечание: пустые состояния важны. Если вам нужна убедительность, просмотрите статью об Invision.

    Разбирая мои соображения

    :empty на практике часто достаточно. я чувствовал :empty недостаточно хорошо по двум причинам:

    1. Плохой опыт разработчика
    2. Мне нужно вручную обрезать пробелы с помощью JavaScript

    Первая причина верна, но это не так уж важно.

    Вторая причина недопустима. Я предполагал, что мне нужно обрезать пробелы, но мне это не нужно.

    Я проведу вас через них обоих.

    Возвратимся к примеру со списком дел. Скажем, мы создали список дел и имеем эту разметку.

    <!-- This is html -->
    <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

    Как бы вы проверить, если :empty работал?

    Ну, я бы каждую удалил <li> with cmd+x. Эта команда обрезает всю линию. Когда я все удалил three

  • я закончу с такой разметкой:

    <!-- This is html -->
    <ul></ul>

    Теперь вы знаете, что приведенный выше HTML не сработает :empty. :empty работает только тогда, когда в элементе нет пробелов.

    Мне пришлось удалить пробелы для :empty работать, что означает еще несколько нажатий клавиш. Это была работа, которую я надеялся, что мне не придется проходить.

    Но опять же это маленькая проблема для большой пользы.

    Я снова говорю. Вам не нужно обрезать пробелы вручную в JavaScript если вы используете :empty. Я сделал ошибочное предположение.

    Давайте рассмотрим пример, и вы поймете, что я имею в виду. Мы воспользуемся примером списка дел еще раз.

    Скажем, сейчас у нас есть этот HTML:

    <!-- This is html -->
    <ul> <li>Item 1</li></ul><div class="empty-state"></div>

    Чтобы пустое состояние работало, нам нужно удалить final <li> пункт froм

      . Если вы используете обычный JavaScript, вы можете do this with removeChild.

      // This is JavaScript
      const ul = document.querySelector('ul')const li = ul.children[0]
      ul.removeChild(li)

      Я в это верил (ложно). removeChild создаст этот HTML:

      <!-- This is html -->
      <ul></ul>

      Если он создаст этот HTML, мне придется обрезать все оставшиеся в списке пробелы (что является дополнительным JavaScript).

      // This is JavaScript
      const ul = document.querySelector('ul')const li = ul.children[0]
      ul.removeChild(li)
      if (ul.children.length === 0) { ul.innerHTML = ''}

      Как я уже сказал, я ошибся. Он не создал приведенный выше HTML. Вот что он создал:

      <!-- This is html -->
      <ul></ul>

      Это значит, что нам не нужен дополнительный JavaScript для обрезки пробелов!

      Отказ от ответственности: я проверил выход в Safari, Chrome и Firefox. Но я еще не проверил Edge. Я буду очень признателен, если вы поможете мне проверить это!

      Вот код для этого примера:

      Просмотрите демонстрацию Pen Empty из todolist, которую я сделал (@zellwk) на CodePen.

      :empty поддерживается всеми браузерами, и :blank имеет плохую поддержку браузера. Это дает вам много оснований для использования :empty закончено :blank сегодня!

      0uAx8kJC7pr98VvkEYqphhJ3BD00BfPuNuJ2

      Надеюсь, что браузер поддерживает :blank хотя однажды улучшится.

      Подведению

      :empty и :blank позволит вам стилизовать пустые элементы и легко создавать пустые состояния.

      :blank лучше чем :empty потому что это дает нам лучший опыт разработчика. Но мы не можем использовать :blank поскольку :blank не имеет достаточной поддержки браузера.

      :empty часто достаточно хорошо. Вы уже можете им воспользоваться. Используйте все, что вы хотите! ?

      Дайте :empty идите и дайте мне знать, что вы думаете!

      Спасибо, что прочли. Помогла ли вам эта статья однажды? Если вы сделали, надеюсь, вы поделитесь этим. Вы можете помочь кому-то. Спасибо!

      Первоначально эта статья была опубликована по адресу мой блог.

      Подпишитесь на мой информационный бюллетень, если вы хотите получить больше статей, которые помогут вам стать лучшим разработчиком интерфейса.

Добавить комментарий

Ваш адрес email не будет опубликован.