Откажитесь от JavaScript, эти три трюка CSS вы должны использовать

внешний интерфейс CSS
Откажитесь от JavaScript, эти три трюка CSS вы должны использовать

В этой статье мы рассмотрим три отличных трюка с CSS, которые вы можете использовать вместо JavaScript в своих проектах.

  • :activeОтчеты о псевдоклассах и данных CSS
  • Очень практичный для использования в диапазоне УВЧ:emptyпсевдокласс
  • использовать это хорошо:only-childпсевдокласс

1. :активный псевдокласс и отчеты о данных CSS

Если вы хотите узнать кликабельность двух кнопок, разработчики CSS могут сделать это сами, не утруждая разработчиков JavaScript их похоронить:

.button-1:active::after {
    content: url(./pixel.gif?action=click&id=button1);
    display: none;
}
.button-2:active::after {
    content: url(./pixel.gif?action=click&id=button2);
    display: none;
}

В это время при нажатии кнопки соответствующие данные о поведении будут переданы на сервер. Этот вид отчетов нельзя остановить, даже если JavaScript отключен. Это удобно и быстро, и особенно подходит для A/B-тестирования.

2. Ультрапрактичное и сверхвысокочастотное использование: пустой псевдокласс

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

<div class="cs-empty"></div>

.cs-empty:empty{
    width: 120px;
    padding: 20px;
    border: 10px dashed;
}

В этот момент элемент div будет соответствовать:emptyПсевдокласс, показывающий пунктирную рамку, как показано ниже

2.1 Скрыть пустые элементы

Например, содержимое модуля является динамическим, это может быть список или кнопка.Эти контейнеры модулей часто содержат свойства CSS, влияющие на макет, такие как поля и свойства отступов. Конечно, когда в этих модулях есть контент, эффект отображения макета очень хороший, но как только контент в этих модулях будет пустым, на странице будет большой и очевидный пробел, и эффект не очень хороший. случай использования под:emptyУправление псевдоклассом было бы лучше:

.cs-module:empty {
    display: none;
}

Без дополнительной логической оценки JavaScript вы можете напрямую использовать CSS для достижения эффектов динамического стиля.Единственное, на что вам нужно обратить внимание, это то, что когда содержимое списка отсутствует, вы также должны удалить пробелы, иначе:emptyПсевдоклассы не будут совпадать.

2.2 Умные подсказки для отсутствующих полей

Например, следующий HTML

<dl>
    <dt>姓名：</dt>
    <dd>张三</dd>
    <dt>性别：</dt>
    <dd></dd>
    <dt>手机：</dt>
    <dd></dd>
    <dt>邮箱：</dt>
    <dd></dd>
</dl>

Некоторые информационные поля пользователя отсутствуют.В настоящее время разработчику следует использовать другие символы-заполнители, чтобы указать, что здесь нет содержимого, например, тире (-) или напрямую использовать текстовые подсказки. Но многолетний опыт разработки научил меня тому, что разработчикам очень легко забыть об особой обработке здесь, что в конечном итоге приводит к загромождению макета и трудной для понимания информации.

dt {
    float: left;
}

Но теперь нам не нужно беспокоиться о таких проблемах сотрудничества, мы можем справиться с этой ситуацией напрямую с помощью CSS, код очень прост:

dd:empty::before {
    content: '暂无';
    color: gray;
}

В настоящее время эффект макета после отсутствия поля выглядит следующим образом:

2.3 Данные пусты

Есть много подобных сценариев в реальной разработке. Например, примечания в таблице часто пусты, и это можно обработать так:

td:empty::before{
    content: '-';
    color: gray;
}

Кроме того, есть еще и типовой сценарий, который нужно использовать:emptyПсевдокласс, то есть данные динамической загрузки Ajax пусты. Когда новый пользователь вводит продукт, содержимое многих модулей становится недоступным. В прошлом нам нужно было выполнить оценку if в коде Javascript, и если значения не было, мы выдавали сообщение «нет результата» или «нет данных». Но теперь есть:emptyПсевдокласс, просто оставьте эту работу CSS. Например:

.cs-search-module:empty::before{
    content: '没有搜索结果'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

Другой пример:

.cs-article-module:empty::before{
    content: '您还没有发布任何文章'；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

Короче говоря, этот метод очень прост в использовании, он может сэкономить много времени на разработку, и в то же время, опыт лучше, а обслуживание более удобно, потому что одно и то же имя класса может использоваться для хранения оперативной информации о весь сайт соответствует:

.cs-article-module:empty::before{
    content: '暂无数据；
    display: block;
    line-height: 300px;
    text-align: center;
    color: gray;
}

3. Использование: единственный дочерний псевдокласс

:only-childЭто очень мощный псевдокласс, особенно при работе с динамическими данными, он может значительно сэкономить на написании логики JavaScript.

:only-childОзначает сопоставление элементов без каких-либо родственных элементов. Например, следующие элементы p могут соответствовать:only-childПсевдокласс, потому что до него или после него нет других родственных элементов:

<div class="cs-confirm">
    <!-- 可以匹配:only-child伪类 -->
    <p class="cs-confirm-p">确定删除该内容？</p>
</div>

Несмотря на то что.iconПосле элемента есть текст для удаления, но поскольку нет вложения меток, это анонимный текст, поэтому он не влияет.iconсовпадение элемента:only-childПсевдокласс.

особенно нужно использовать:only-childСцена псевдокласса-это динамическая сцена, то есть фиксированный небольшой модуль.В зависимости от использования сцены может быть подэлемент или несколько подэлементов.Количество элементов отличается, и метод компоновки также отличается.:only-childКогда сияют псевдоклассы. Например, загрузочный элемент (загрузочный модуль) может иметь только одно загрузочное изображение, либо только текст описания загрузки, либо загрузочное изображение и загрузочный текст могут появляться одновременно.:only-childПсевдоклассы очень полезны.

HTML выглядит следующим образом:

<!-- 1. 只有加载图片 -->
<div class="cs-loading">
    <img src="./loading.png" class="cs-loading-img">
</div>
<!-- 2. 只有加载文字 -->
<div class="cs-loading">
    <p class="cs-loading-p">正在加载中...</p>
</div>
<!-- 3. 加载图片和加载文字同时存在 -->
<div class="cs-loading">
    <img src="./loading.png" class="cs-loading-img">
    <p class="cs-loading-p">正在加载中...</p>
</div>

Нам не нужно указывать дополнительные имена классов на родительском элементе для управления стилями разных состояний, мы можем использовать его напрямую:only-childПсевдоклассы могут сделать макет хорошо во всех состояниях.

.cs-loading {
    height: 150px;
    position: relative;
    text-align: center;
    /* 与截图无关，截图示意用 */
    border: 1px dotted;
}
/* 图片和文字同时存在时在中间留点间距 */
.cs-loading-img {
    width: 32px; height: 32px;
    margin-top: 45px;
    vertical-align: bottom;
}
.cs-loading-p {
    margin: .5em 0 0;
    color: gray;
}
/* 只有图片的时候居中绝对定位 */
.cs-loading-img:only-child {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}
/* 只有文字的时候行号近似垂直居中 */
.cs-loading-p:only-child {
    margin: 0;
    line-height: 150px;
}

Эффект следующий

Эта статья была впервые опубликована в публичном аккаунте"Fullstack-разработчик фронтенда"ID: by-zhangbing-dev, прочитайте последние статьи в первый раз и отдайте приоритет публикации новых статей через два дня. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!

Категории