[Внешний словарь] Этим функциям не нужен JS, можно сделать CSS

внешний интерфейс CSS

предисловие

Сегодня мы познакомим вас с некоторыми функциями, которые на первый взгляд могут показаться, что они должны быть реализованы в JavaScript, но на самом деле их можно реализовать с помощью CSS или даже проще.

Контент был опубликован вgitHubТеперь добро пожаловать в Star, больше статей на gitHub.

прямой вход

1. Сделайте заглавной первую букву каждого слова

На самом деле, впервые я увидел эту функцию, когда использовал JS для реализации этой функции, и я даже не думал, что CSS может выполнить эту функцию. Сразу же я написал метод:

function capitalizeFirst( str ) {
    let result = '';
    result = str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
    return result
}

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

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

.capitalizeFirst-css {
    text-transform: capitalize;
}

Это очень просто (код находится в репозитории блога выше, вы можете получить доступ к маршруту cssDo, все следующие случаи находятся под этим маршрутом):

Краткое введение в преобразование текста

Это свойство в CSS2 с параметрами заглавными буквами | прописными буквами | строчными буквами | нет.

Введение параметра:

  1. нет: по умолчанию. Определяет стандартный текст со строчными и прописными буквами.
  2. капитализировать: текст каждого слова, начинающегося с заглавной буквы.
  3. верхний регистр: определяет только буквы верхнего регистра.
  4. нижний регистр: не задавайте прописные буквы, только строчные буквы.

Из этого свойства мы можем узнать, что все требования к верхнему (нижнему) регистру могут быть легко реализованы.

2. Изюминка радио

Возможно, вы никак не отреагировали, когда увидели «выделку одного выбора», просто сделайте снимок, и вы сразу это узнаете:

Я не знаю, как вы справились с таким требованием по радиоподсветке, когда впервые увидели его. В первый раз я управлял им напрямую с помощью JS. Позже я обнаружил, что с этим требованием проще справиться с помощью CSS.

Основной код — это просто кусок кода CSS:

// 省略部分代码，详细代码看仓库
.input:checked + .colors {
  border-color: #e63838;
  color: #e63838;
}

<div class="single-check">
    <input class="input" type="radio" name="colors" value="1">
    <div class="colors">天空之境</div> 
</div>

Смотрите эффект:

Разница между двумя селекторами

~ 选择器: находит все одноуровневые элементы после элемента

+ 选择器: Найти родственный элемент сразу после элемента

расширять

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

3. Несколько столбцов и другие проблемы с высотой

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

Изначально я использовал JS, чтобы вычислить высоту и переназначить ее, но это приведет к мерцанию страницы. Итак, я нашел два решения CSS:

  1. Установите большой отступ для каждого столбца, а затем установите большое отрицательное поле.
  2. использоватьdisplay: table;

У первого есть явные недостатки:

  1. border-bottomне вижу
  2. Два закругленных угла под настройками тоже исчезли.

Так что я использовалdisplay: table;Можно сказать, что способ добиться одинаковой высоты очень удобен.

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

4. Проверка формы

Первое утверждение: здесь не используется JS, а используется HTML5.<input>Новое свойство - шаблон (регулярное выражение для проверки значения элемента управления).
Еще один момент: на самом деле я не использовал его в реальных проектах.

код показывает, как показано ниже:

input[type="text"]:invalid ~ input[type="submit"] {
    display: none
}

<div class="form-css">
    <input type="text" name="tel" placeholder="输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
    <input type="text" name="smscode" placeholder="输入验证码" pattern="\d{4}" required><br>
    <input type="submit" ></input>
</div>

Эффект выглядит следующим образом (пожалуйста, игнорируйте, если стиль некрасивый):

недопустимый псевдокласс и недействительный псевдокласс

  • действительный псевдокласс, соответствующие элементы, проверенные по шаблону
  • недопустимый псевдокласс, соответствует элементам, не прошедшим проверку шаблона

постскриптум

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

наконец

Вы можете подписаться на мой одноименный публичный аккаунт [Xiaosheng Fangqin], где я буду делиться качественными статьями, и мы вместе добьемся прогресса.

Если вы хотите присоединиться к [большой группе обмена интерфейсом], нажмите «Добавить групповой обмен», чтобы немедленно присоединиться.

Категории