8 хороших практик CSS

CSS

CSS вычисляет выбранный элемент тега

Это обычное требование социальной платформы.Например, на платформе Nuggets, чтобы позволить пользователям выбирать интересующие теги, JS обычно используется для обработки количества выбранных тегов. дать сегодняcssВерсия:

<p>请选择你感兴趣的标签:</p>
<input type="checkbox" id="topic1"><label for="topic1" class="topic">Vue</label>
...
<p>您已选择<span class="topic-counter"></span>个标签。</p>

Первое местоcheckboxСкрытый:

[type="checkbox"]{
    position: absolute;
    clip: rect(0 0 0 0);
}

затем настроитьlabelстиль, затем установитеCSSкалькулятор.

// 在body中创建或者重置计算器
body {
    counter-reset: topicCounter;
}
// 当checkbox在选中状态时递增变量
:checked + .topic {
    counter-increment: topicCounter;
}
//使用counter（）函数将计算器的值添加到元素中。
.topic-counter::before {
    color: red;
    content: counter(topicCounter);
}

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

Переполнение многострочного текста исключено

Исключение переполнения текста является очень распространенным бизнес-требованием, однако большинство из них имеют дело с отдельными строками текста:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

эти 3CSSПредложение означает:

  • Устанавливает, если длина текста превышает указанную ширину, скрывает содержимое, превышающее ширину.
  • Установите текст, который будет отображаться на одной строке без переноса.
  • При настройке переполнения текста используйте многоточие для представления обрезанного текста.

Так что же делать с многострочным текстом? ВотCSSВерсия:

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

надCSSПредложение означает:

  • Установите для элемента упруго масштабируемую блочную модель.
  • Устанавливает количество строк отображаемого текста.
  • Установите расположение дочерних элементов элемента телескопической коробки (вышеуказанные три должны использоваться вместе)
  • При настройке переполнения текста используйте многоточие для представления обрезанного текста.

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

Однако недостатки этого метода также очевидны, и он подходит только дляWebKitБраузер ядра.

Увеличить приоритет селектора CSS

При нормальном развитии будет много шансов столкнуться с необходимостью увеличенияCSSСценарии для приоритета селектора. Как добиться этого будет лучше, например, нужно доработать следующееCSSПриоритет селектора:

.bar { background: #DDD; }

Я считаю, что многие люди предпочтут увеличить метод вложенности:

.foo .bar { background: #DDD; }

Или добавьте селектор тегов:

div.bar{ background: #DDD; }

Это не лучшие методы, поскольку вышеупомянутые методы увеличит муфту и уменьшают ремонтопригодность. Если последующее имя родительского узла изменяется или заменяется другой меткой, это повлияет на эффект стиля.

лучший способ

  • Повторить сам селектор
.bar.bar { background: #DDD; }
  • С помощью существующих селекторов атрибутов
.bar[class] { background: #DDD; }
#bar[id] { background: #DDD; }

Это увеличивает приоритет без увеличения связи.

Коробчатая модель глобальной настройки

box-sizingЗначение по умолчаниюcontent-box, что означает, что указанные ширина и высота будут устанавливать только размер блока содержимого. Если установлен отступ или граница, ширина и высота элемента будут больше, чем указанные ширина и высота. Самый глупый способ - уменьшитьwidthилиheight, что не является идеальным решением, т. к. пробуется путем изменения значения, и часто бывает сложно объяснить, почему генерируется это значение.

настраиватьbox-sizingзначениеborder-box,такheightа такжеwidthСвойство будет установлено равным сумме размера содержимого, заполнения и границы, что решает указанную выше проблему.

.main{
    box-sizing: border-box
}

такmainэлементы лучше, как и ожидалось, но то же самое происходит и с другими элементами. Так что установите его как глобальный

*, 
::before,
::after{
    box-sizing: box;
}

Это установит все элементы и псевдоэлементы на страницеborder-box.

Но все еще есть некоторые проблемы.Многие предприятия теперь используют стилизованные сторонние компоненты, которые могут нарушить макет некоторых из этих компонентов, особенно когда сторонние компоненты разрабатываются.cssПроцесс не учитывает, что пользователь будет изменять блочную модель.

Использование наследования может решить вышеуказанные проблемы:

:root{
    box-sizing: border-box;
}

*, 
::before,
::after{
    box-sizing: inherit;
}

Коробчатые модели обычно не передаются по наследству, а используютinheritКлючевое слово обеспечивает наследование. Контейнер верхнего уровня для сторонних компонентов можно проверить, при необходимости восстановить его доcontent-box. Таким образом, внутренние элементы компонента будут наследовать блочную модель:

.third-component{
    box-sizing: content-box;
}

наведите раскрывающийся список псевдокласса и задержки реализации

Реализуйте кнопку наведения мыши для отображения взаимодействия с раскрывающимся меню:

<button class='btn'>菜单</button>
<ul class='panel'>
  <li class='panel-item'>苹果</li>
  <li class='panel-item'>葡萄</li>
  <li class='panel-item'>香蕉</li>
  <li class='panel-item'>橙子</li>
</ul>

Цель состоит в том, чтобы отобразить раскрывающееся меню, когда мышь находится над кнопкой.cssКод прост:

.btn:hover + .panel, .panel:hover{
  visibility: visible
}
.panel{
  visibility: hidden;
  width: 100px;
  height: 200px;
  background: #DDD;
}
.panel-item{
  width: 100%;
  height: 50px;
  list-style: none;
  line-height: 50px;
}

Однако у приведенной выше реализации есть небольшой недостаток: если между кнопкой и меню есть зазор, раскрывающийся список будет закрыт до того, как мышь наведется на раскрывающийся список. с помощьюtransitionДобавление эффекта задержки может решить эту проблему.

просто нужно.panelДобавьте следующие свойства:

.panel{
	transition: visibility .2s;
}

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

Определите размер шрифта, используя единицы измерения окна просмотра

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

@media (min-width: 800px) {
    :root{
        font-size: 0.875em;
    }
}
@media (min-width: 1200px) {
    :root{
        font-size: 1em;
    }
}

Отзывчивый переопределяет размер шрифта всей страницы в соответствии с установкой разных размеров шрифта для корневого элемента страницы.emа такжеrem. Но это жестко закодировано и реагирует только на установленный размер экрана.

Мы знаем единицы просмотраvmа такжеvhЭто относительно экрана.Если единица просмотра используется для установки размера шрифта, это более практично, чем установка ширины.

font-size: 2vw;

Что происходит, когда установлено указанное выше свойство? Когда ширина экрана1440pxразмер шрифта28.8px. в1920pxэкране размер шрифта становится38.4px. Преимущество этого в том, что элементы могут плавно переходить между этими двумя размерами, без резких изменений в определенной точке останова.

Но есть еще некоторые проблемы, общие1920pxэкран,38.4pxслишком велик. На мобильных телефонах, таких какiPhone6вплоть до7.5px, это было бы слишком мало.

использоватьCSSизcalc комбинация функцийemа такжеvwДве единицы сделают свое дело:

:root{
    font-size: calc(0.5em + 1vw);
}

0.5emГарантированный минимальный размер шрифта,1vwЭто гарантирует, что шрифт масштабируется вместе с областью просмотра. Гарантированный базовый размер шрифта отiPhone6внутренний11.75pxпереход к1200pxэкран20px.

взаимодействие-заполнитель

Конкретный эффект: когда поле ввода находится в сфокусированном состоянии, содержимое заполнителя поля ввода анимированно перемещается в левый верхний угол в качестве заголовка. с помощью:placeholder-shownПсевдоклассы могут просто использоватьCSSдобиться этого эффекта.

<div class="input-box">
   <input class="input-control input-outline" placeholder="账号">
   <label class="input-label">账号</label>
</div>

Во-первых, пусть браузер по умолчаниюplaceholderЭффект не виден

.input-control:placeholder-shown::placeholder {
    color: transparent;
}

Во-вторых, используйте.input-labelЭлемент заменяет заполнитель для саундтрека браузера

.input-box{
  position: relative;
}
.input-label {
  position: absolute;
  left: 16px; top: 14px;
  pointer-events: none;
}

Наконец, когда поле ввода сфокусировано, а заполнитель не отображается<label>Элемент перемещается, эффект заключается в сжатии и перемещении вверх

.input-control:not(:placeholder-shown) ~ .input-label,
.input-control:focus ~ .input-label {
  color: #2486ff;
  transform: scale(0.75) translate(-2px, -32px);
}

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

Смешивание элементов с помощью режима смешивания

использоватьmix-blend-modeАтрибуты не только для смешивания изображений, но и для смешивания текста и границ элемента с фоновым изображением контейнера.

Цель состоит в том, чтобы добавить подпись к изображению:

<div class='blend'>
  <h1>熊出没</h1>
</div>

Добавьте стили к h1, и конечным результатом будет красный простой фоновый баннер с ярко-серыми верхними и нижними широкими рамками. Затем примените режим наложения Blend, и весь элемент будет рассматриваться как слой, смешанный с фоновым изображением в контейнере ниже.

.blend{
  background-image: url('image');
  background-size: cover;
  background-position: center;
}
.blend > h1{
  mix-blend-mode: hard-light;
  background-color: #c33;
  color: #808080;
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}

Эффект следующий:Эффект слияния очень интересный, текст выглядит прозрачным, как будто красное знамя обрезано. использовать здесьhard-lightРежим наложения и средне-серый цвет текста. Режимы наложения контраста лучше работают при использовании очень светлых или очень темных цветов.

конец

Если вы считаете это полезным, пожалуйста, поставьте лайк и поддержите.

Расширенное чтение

Модульное тестирование VUE — начните тестовое путешествие
Модульное тестирование ВУЭ - продвинутая дорога
модульный тест vue — конечная точка

Больше статей, пожалуйста, переместитеГитхаб арендодателя, Если вам это нравится, пожалуйста, нажмите звездочку, это также поощрение автора.

Категории