Олдскул: атрибут label для <optgroup>

В HTML есть вещи, которые знают все, но используют их редко. Одна из таких штук — это атрибут label для элемента <optgroup>.

Выпадающий список с кучей опций:

<select>
  <option disabled selected>--Выберите блюдо--</option>
  <option>Цезарь</option>
  <option>Весенние роллы</option>
  <option>Брускетта</option>
  <option>Гриль лосось</option>
  <option>Стейк из говядины</option>
  <option>Овощное ризотто</option>
</select>

Но можно сделать вот так:

<select>
  <option disabled selected>--Выберите блюдо--</option>
  <optgroup label="Закуски">
    <option>Цезарь</option>
    <option>Весенние роллы</option>
    <option>Брускетта</option>
  </optgroup>
  <optgroup label="Основные блюда">
    <option>Гриль лосось</option>
    <option>Стейк из говядины</option>
    <option>Овощное ризотто</option>
  </optgroup>
</select>

Так что в следующий раз, когда вы столкнётесь с большим <select>, вспомните про <optgroup> — и ваши пользователи скажут вам спасибо)

Код, как обычно тут.

Откопал в заметках кое-что интересное и решил поделиться с вами — https://webmasters.teamdev.com/. Подробный гайд по вёрстке и фронтенду: от азов HTML/CSS до архитектуры, доступности и даже программирования.

Полезная информация для всех — от новичков до ребят на опыте)

Что внутри?
— Основа основ: семантика, препроцессоры, SVG, мобильность.
— Путь верстальщика: как расти от "ученика" до "мастера".
— Полезности: работа с формами, шрифтами, фреймворками + софт-скиллы.

Но есть нюанс: материал давно не обновляли, так что некоторые темы (например, jQuery или старые подходы к фреймворкам) могут показаться ретро. Но база — вечна, а стиль подачи с юмором и гифками — огонь!

Сохраняйте в закладки, вдохновляйтесь и качайте скиллы)

Секрет продуктивного кодинга раскрыт..

Стилизация формы с помощью :user-invalid и :valid

Недавно мы рассматривали, как подсвечивать поля формы с некорректными данными. Вот в этом посте.

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

Для этого добавим:

.error-message {
  display: none;
  position: absolute;
  bottom: -20px;
  left: 0;
  font-size: 12px;
  color: #f44336;
}

input:valid {
  border-color: #4caf50;
}

input:user-invalid + .error-message {
  display: block;
}

Вот теперь вообще шикарно получилось. Как это работает можно посмотреть на странице с кодом — здесь.

Тени в png изображениях

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

Чтобы получать красивую тень, именно внутри png изображения, нужно использовать свойство filter с функцией drop-shadow();

Это можно сделать так:

<img src="image.png">

img {
  filter: drop-shadow(0.25rem 0.25rem 0.5rem #000000);
}

Ну, а пример с обоими вариантами box-shadow и filter: drop-shadow(); можно посмотреть здесь.

Видео-шпаргалка: CSS-позиционирование

Нашел видео по позиционированию в CSS, все очень красиво и наглядно показано, решил с вами поделиться, наслаждайтесь)

Код из видео:

.parent-element {
  position: relative; /* относительное позиционирование */
}

.child-element {
  position: absolut; /* абсолютное позиционирование */
  bottom: 0;
  right: 0;
}

.child-element {
  position: fixed; /* фиксированное позиционирование */
  top: 0;
  right: 0;
}

.child-element {
  position: sticky; /* «липкое» позиционирование */
  top: 0;
  right: 0;
}

Сохраняем в коллекцию)

Умный перенос слов в CSS

Давайте сегодня рассмотрим еще одно интересное CSS свойство — hyphens.

Оно определяет, как будут переноситься слова через дефис, если строка не помещается в родительский контейнер.

В отличие от свойств overflow-wrap и word-break, свойство hyphens переносит слова именно по слогам и ставит дефис.

Но нужно помнить, что для правильного переноса слов нужно, чтобы язык страницы был определен <html lang="ru">.

Реализация:

.text {
  hyphens: auto;
}

Сравнение блоков текста с использованием свойства hyphens и без можно глянуть здесь.

Единица ch для работы с текстом

Разберем еще одну интересную единицу измерения в CSS.

Это единица ch, она основана на ширине символа "0" в текущем шрифте. Позволяет эффективно управлять шириной текстовых блоков.

Реализация:

<p>Этот текст ограничен по ширине с помощью ch. Единица ch равна ширине символа "0", и 60ch — это примерно 60 символов в строке.</p>

p {
  max-width: 60ch;
  line-height: 1.5;
  font-family: Arial, sans-serif;
  margin: 0 auto;
  padding: 16px;
  background: #f0f0f0;
  border-radius: 8px;
}

Единицу ch можно использовать не только для max-width, но и для других свойств, например:
— width: 20ch — для фиксированной ширины поля ввода.
— text-indent: 2ch — для отступа первой строки.

Если шрифт моноширинный (например, font-family: "Courier New"), ch будет ещё точнее соответствовать количеству символов.

Пример кода, как всегда здесь.

Исправление бага на продакшене 😎

Отображение результатов формы через <output>

Предлагаю сегодня разобрать еще один интересный тег <output>.

Это удобный способ показать результаты формы в реальном времени.

Реализация простого калькулятора суммы:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" name="a"> +
  <input type="number" name="b"> =
  <output name="result"></output>
</form>

— Атрибут oninput — это событие, которое срабатывает каждый раз, когда юзер что-то вводит или меняет в любом поле внутри формы. В нашем случае — при изменении значений в <input>.
— parseInt(a.value) — преобразуем значения в числа
— result.value - суммируем числа
— <output name="result"> — выводим результат

Все просто и эффектно)

Пощупать код можно здесь. Там я еще добавил пример работы ползунка.

Красная строка в CSS

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

Выделил два основных способа реализации — классика, с помощью свойства text-indent и с помощью псевдоэлемента ::first-letter.

Вариант 1:

p {
  text-indent: 2em;
}

Вариант 2:

p::first-letter {
  margin-left: 2em;
  color: red; /* Сделаем еще первую букву красной */
}

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

Как использовать min() для адаптивности

Хотите писать меньше медиа-запросов? CSS функция min() к вашим услугам)

Она берёт меньшее значение из списка, что идеально для гибких размеров. Примеры использования:

1️⃣ Адаптивная ширина блока:

width: min(100%, 500px);

На узких экранах — 100%, на широких — до 500px.

2️⃣ Гибкие отступы:

padding: min(10vw, 50px);

Отступы растут с экраном (10vw), но не больше 50px.

3️⃣ Адаптивный шрифт:

font-size: min(8vw, 48px);

Заголовок масштабируется, но ограничен 48px — читаемо на любом устройстве.

Демонстрация работы здесь.

Список с точками-разделителями на чистом CSS

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

Разметка может быть такой:

<ul class="dotted-list">
  <li>
    <span class="number">101</span>
    <span class="dots"></span>
    <span class="text">Пожарная (МЧС)</span>
  </li>
</ul>

Реализация точек:

.dotted-list .dots {
  flex-grow: 1;
  border-bottom: 2px dotted #333;
  height: 1em;
  margin: 0 4px;
  transform: translateY(-1px);
}

Как это работает?

— Flex-контейнер display: flex позволяет легко расположить элементы в строку.
— flex-grow: 1 для элемента с точками заставляет его растягиваться на всё доступное пространство.
— border-bottom: dotted создаёт видимость точек-разделителей.
— transform: translateY тонко настраивает выравнивание точек.

Все довольно просто, но задача решается)

Посмотреть на код можно здесь.

Нестандартное подчёркивание текста на CSS

По умолчанию подчеркивание "разрывается" под определенными буквами (например, "g", "p", "y"). Но иногда по макету нужно сверстать так, чтобы этого разрыва не было.

Так вот, чтобы пофиксить разрыв, достаточно использовать свойство text-decoration-skip-ink: none;

Ну и вдобавок другие свойства для стилизации подчеркивания:

h1 {
  text-decoration: underline; /* Добавляем подчеркивание */
  text-decoration-color: #fac133; /* Задаем цвет линии */
  text-decoration-thickness: 10px; /* Устанавливаем толщину */
  text-decoration-skip-ink: none; /* Отключаем разрывы под буквами */
}

Посмотреть демку можно здесь.

Микро-лайфхак, про который возможно кто-то не знает, но теперь узнает)

Работает — не трогай!⁠⁠

Эффект матового стекла на CSS

Сегодня поговорим о том, как делать крутой эффект матового стекла (glassmorphism), чтоб было прям, как на маке)

Всё волшебство делает свойство backdrop-filter, которое добавляет фильтры к фону элемента.

Пример:

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);

А чтобы вы вообще не парились с подбором параметров, можете заюзать этот сервис: https://css.glass/

Я, кстати, оттуда и взял пример)

Видео-шпаргалка: адаптивная верстка на CSS Grid

Нашел наглядный видос по созданию адаптивных блоков на CSS Grid, без медиа-запросов.

Код из видео:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  width: 100%;
}

Еще одна видео-шпора в нашу коллекцию)

Плавающие лейблы для форм

Давайте сегодня разберем, как сделать плавающие лейблы для форм (floating labels).

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

HTML-структура:

<div class="input-group">
  <input type="text" class="input-field" id="name" placeholder=" ">
  <label for="name" class="input-label">Имя</label>
</div>

CSS:

Задаем относительное позиционирование элементов:

.input-group {
  position: relative; 
}

Задаем абсолютное позиционирование метки:

.input-label {
  position: absolute;
  left: 15px;
  top: 15px;
}

Перемещаем метку вверх при фокусе или заполнении поля:

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: -10px;
  left: 10px;
}

Демку кода с дополнительными стилями запилил сюда. Так что давайте теперь делать еще более дружелюбные формы)

Стилизация радио-кнопок в виде иконок

Хотите сделать радио-кнопки стильными, модными, молодежными?) Давайте сегодня разберем, как превратить их красивые иконки.

HTML:

<label class="icon-radio">
  <input type="radio" name="delivery" checked>
  <div class="icon-radio-content">
  🚚<span class="icon-radio-label">Курьер</span>
  </div>
</label>

CSS:

Скрываем стандартный input:

.icon-radio input {
  position: absolute;
  opacity: 0;
}

Стилизуем контейнер варианта:

.icon-radio-content {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s;
}

Выбранный вариант:

input:checked + .icon-radio-content {
  border-color: #4a6bff;
  background: #f5f7ff;
}

Эффекты при наведении:

.icon-radio:hover .icon-radio-content {
  border-color: #b3c1ff;
}

И всё, получаем крутой визуальный вид стандартных радио-кнопок)

Полный код можно посмотреть здесь.

Резиновые шрифты с clamp()

Для тех, устал от медиа-запросов для каждого чиха. Держите лайфхак с clamp().

Помните, как было раньше? Сначала пишешь размер шрифта для мобилок, потом для планшетов, потом для десктопов. А между ними — пара-тройка брейкпоинтов:

h1 {
  font-size: 1.5rem; /* для телефонов */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2rem; /* для планшетов */
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem; /* для десктопов */
  }
}

И так с каждым заголовком. Код растёт, а ты седеешь)

Функция clamp() решает эту проблему одной строкой:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Синтаксис тут максимально простой:

● Первое число — минимальный размер
● Второе — предпочтительный размер (обычно в vw)
● Третье — максимальный размер

Работает это так:

● На смартфоне размер будет 1.5rem (минимум)
● На большом экране будет 3rem (максимум)
● А между ними — плавное изменение без скачков на брейкпоинтах

clamp() экономит наше время и нервы)

Открываешь ссылку в инкогнито, Гугл такой — "он открыл ее в инкогнито, значит это самое интересное, так и запишем..."