Избегаем случайный выбор чекбокса

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

Возможно коряво расписал проблему, увидеть ее можно на видосе в шапке этого поста)

Давайте пофиксим ее, всё, что нужно для этого — свойство max-width: fit-content;

Задаем для label, который оборачивает чекбокс свойство max-width: fit-content и все, теперь теперь label не растянут на весь блок, а занимет ровно столько места, сколько нужно для его содержимого.

Теперь, если вы кликнете где-то в пустоте строки, чекбокс не изменится — он сработает только при клике на сам лейбл или чекбокс.

Демку кода можно посмотреть здесь.

Как прижать подвал сайта к низу экрана

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

Вот один из рабочих способов:
1️⃣ Оборачиваем всю страницу в блок, делаем его флекс-контейнером display: flex.
2️⃣ Внутрь кладём header, main и footer.
3️⃣ Родителю задаём flex-direction: column, чтобы блоки встали друг под другом, а не в ряд.
4️⃣ Добавляем min-height: 100vh, чтобы он занимал минимум всю высоту экрана (даже если контента мало).
5️⃣ Блоку main задаем flex: 1, чтобы он растягивался на всё свободное пространство.

И все. Футер теперь всегда прижат к низу, а main растягивается, сколько душе угодно. Если контента мало — футер внизу. Если контента много — main растянется, а футер останется там, где и должен быть. Ничего не ломается, всё работает, как швейцарские часы.

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

Видео-шпаргалка: CSS-свойство border-radius

На этот раз я принес вам видео по свойству border-radius, как всегда, все очень наглядно и красиво.

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

Синтаксис:

/* все углы элемента */
border-radius: 10px;

/* левый верхний + правый нижний | правый верхний + левый нижний */
border-radius: 10px 5%;

/* левый верхний | правый нижний + левый нижний | правый нижний */
border-radius: 2px 4px 2px;

/* левый верхний | правый верхний | правый нижний | левый нижний */
border-radius: 1px 0 3px 4px;

/* скругления по горизонтальной оси и по вертикальной (эллипс) */
border-radius: 10px / 20px;

Чтобы скруглить только один угол, используем свойства:

/* верхний левый угол */
border-top-left-radius: 10px;

/* верхний правый угол */
border-top-right-radius: 10px;

/* нижний левый угол */
border-bottom-left-radius: 10px;

/* нижний правый угол */
border-bottom-right-radius: 10px;

Простой способ показать/скрыть пароль — v2

В этом посте мы разбирали, как показать/скрыть пароль с помощью чекбокса.

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

Поэтому запиливаю еще одну версию, на этот раз модную, теперь жмем на глаз, вместо чекбокса)

По сути, все тоже самое, просто используем иконки из шрифта Font Awesome, плюс подредактировал верстку и JS.

Код можно увидеть здесь.

Проверять ошибки пользователя или нет?

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

Для этого можно использовать атрибут spellcheck, у него два значения:
1) true (включает режим проверки правописания)
2) false (отключает проверку)

По умолчанию стоит значение true, даже если вы не указываете этот атрибут.

Отключение проверки:

<textarea spellcheck="false"></textarea>

Го проверять)

Обучение программированию по роликам на Ютубе)

Стилизация форм без боли с accent-color

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

Это свойство accent-color, которое позволяет в одну строчку изменить цвет чекбоксов, радиокнопок, прогресс-баров и других элементов управления.

Реализация:

<form>
  <label><input type="checkbox"> Чекбокс</label>
  <label><input type="radio" name="option"> Радио</label>
  <progress value="70" max="100">70%</progress>
</form>

form {
  padding: 20px;
  background: #f5f5f5;
  accent-color: #e91e63; /* Один цвет для всех! */
}
progress {
  width: 200px;
}

Пощупать код можно здесь.

Расширяем фон элемента за пределы его контейнера

Сегодня подглядел одну интересную фишку, хочу поделиться с вами.

Допустим у вас есть контейнер, который вы отцентровали и вот в нем есть блок, который вы хотите выделить.

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

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

Достаточно всего одного свойства:

border-image: conic-gradient(pink 0 0) fill 0 //0 100vw;

Т.к. border-image не поддерживает сплошной цвет мы используем градиент и с помощью него получаем однотонную заливку, далее указываем, что мы увеличиваем область border-image с левой и правой стороны на 100% ширины области просмотра (100vw).

И все, получаем крутое выделение блока на всю ширину страницы.

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

Фронтенд — это не больно

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

Хочу показать её вам, вдруг кто не видел еще — https://bespoyasov.ru/front-not-pain/

Много текста и куча ссылок, которые помогут вам стать лучше как фронтенд-разработчик. Статья в основном нетехническая, но рассказывает о том, как можно сделать свою жизнь лучше, в какую сторону расти и о чём стоит задуматься.

Советую глянуть на досуге)

Формула расчета внутреннего border-radius

Вроде бы избитая тема, но давайте закрепим, чтобы наверняка)

Если у вас есть два элемента, один вложенный в другой и оба имеют границы, то делать у них одинаковые border-radius будет не очень красиво.

Для расчета правильного border-radius у внутреннего элемента есть простая формула:

innerRadius = outerRadius - distance или кратко R1 = R2 - D

Например, если внешний border-radius 24px и padding 16px, то внутренний border-radius = 24 - 16 = 8px

В коде можно заюзать даже такую формулу:

.outer {
  --outer-radius: 24px;
  --padding: 16px;
  --inner-radius: calc(var(--outer-radius) - var(--padding));
  padding: var(--padding);  
  border-radius: var(--outer-radius);
}

.inner {
  border-radius: var(--inner-radius);
}

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

P.S. как то маловато упоминаний border-radius в одном посте)

Как обрезать многострочный текст и в конце поставить многоточие?

Сегодня разберём небольшой лайфхак, как красиво обрезать многострочный текст и добавить в конце многоточие (...) — без JS, чисто на CSS.

Это идеально для карточек, превьюшек или любых блоков, где текст может "убежать" за границы.

Весь секрет в свойстве line-clamp: задаём количество строк, обрезаем лишнее и всё — многоточие на месте. Работает почти везде (даже в Safari 15+), так что юзать можно смело.

Вот как это выглядит на деле:

.text-block {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Как это работает:
● display: -webkit-box — превращает блок в гибкий контейнер для строк.
● -webkit-line-clamp: 3 — ограничивает текст тремя строками.
● text-overflow: ellipsis — добавляет многоточие в конце.

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

Беспощадный фронтенд 🫣

Прогресс-бар скролла на JavaScript

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

Чтобы в случае чего юзер понимал, долго ему еще скроллить/читать эту страницу или нет)

На JS, у меня получилось следующее:

function updateProgressBar() {
  const scrollTop = window.scrollY;
  // получаем текущую позицию прокрутки

  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  // вычисляем прокручиваемую высоту страницы

  const scrollPercentage = (scrollTop / docHeight) * 100;
  // переводим прокрутку в проценты

  const scrollContent = document.querySelector('.scroll-content');
  // находим элемент прогресс-бара

  scrollContent.style.width = scrollPercentage + '%';
  // устанавливаем ширину в процентах
}

window.addEventListener('scroll', updateProgressBar);

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

EM vs REM: кто круче и когда что использовать?

Давайте разберём два популярных CSS-юнита: em и rem. Оба помогают управлять размерами, но работают по-разному.

EM

➖Зависит от размера шрифта родительского элемента. Если у родителя font-size: 16px, то 1em = 16px.
➖Отлично подходит для масштабирования внутри компонентов. Например, если вы хотите, чтобы отступы и размеры кнопки зависели от её шрифта.
➖Может запутать, если вложенность элементов большая. Каждый em зависит от своего родителя, и в итоге можно получить неожиданные результаты.

REM

➖Зависит от размера шрифта корневого элемента (<html>). Если у корня font-size: 16px, то 1rem = 16px всегда и везде.
➖Размеры всегда рассчитываются от одного источника, что упрощает жизнь в больших проектах.
➖Менее гибкий для компонентов, где нужно локальное масштабирование.

Когда что использовать?

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

Меняем цвет у SVG-иконок: fill vs stroke

Давайте сегодня разберем два базовых способа изменения цвета в SVG-иконках: fill и stroke. Многие путаются в том, когда и что использовать, так что давайте разложим всё по полочкам)

fill — заливка
fill отвечает за заливку внутренней части SVG-элемента.

.icon {
  fill: #3498db; /* Синий цвет */
  transition: fill 0.3s ease;
}

.icon:hover {
  fill: #e74c3c; /* Красный при наведении */
}

stroke — контур
stroke контролирует обводку SVG-элемента.

.outline-icon {
  fill: none; /* Убираем заливку */
  stroke: #333; /* Цвет контура */
  stroke-width: 2; /* Толщина линии */
  transition: all 0.3s ease;
}

.outline-icon:hover {
  stroke: #2ecc71; /* Зеленый при наведении */
  stroke-width: 3; /* Увеличиваем толщину */
}

Когда что использовать?

Fill:
— Для заполненных иконок
— Для логотипов
— Когда нужно просто изменить цвет

Stroke:
— Для контурных иконок
— Для тонких линий
— Когда нужно менять толщину линий

Как обычно, посмотреть можно здесь.

Еще один способ добавления нулей к числам в упорядоченном списке

Ранее, вот здесь, мы рассматривали способ с использованием свойства list-style-type: decimal-leading-zero;

Но на глаза попался еще один интересный способ.

Реализация:

@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

li {
  list-style: zero-padded-example;
}

@counter-style zero-padded-example — определяем новый стиль нумерации с именем zero-padded-example.

system: extends decimal; — указываем, что новый стиль нумерации будет основан на существующем стиле decimal (десятичные числа: 1, 2, 3 и т.д.)

pad: 3 "0"; — задаем заполнение для чисел. В данном случае:
3 — это минимальное количество цифр, которые будут отображаться.
"0" — это символ, который будет использоваться для заполнения недостающих цифр.

На всякий случай сохранил код здесь, если захотите протестировать.

Тёмная тема за 5 минут с помощью CSS-переменных

Давайте сегодня разберем, как сделать тёмную тему для сайта буквально за 5 минут, используя CSS-переменные и немного JS.

Будем использовать переменные , чтобы хранить цвета для тем, а переключать будем через изменение атрибута data-theme у элемента <html>.

В :root — светлая тема, в [data-theme="dark"] — тёмная:

:root {
  --bg-color: #fff;
  --text-color: #333;
}
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #fff;
}

Применяем переменные:

body {
  background: var(--bg-color);
  color: var(--text-color);
}

Переключаем тему:

function toggleTheme() {
  const root = document.documentElement;
  if (root.getAttribute("data-theme") === "dark") {
    root.removeAttribute("data-theme");
  } else {
    root.setAttribute("data-theme", "dark");
  }
}

Посмотреть, как это работает в живую можно здесь.

Полезный навык)

Простой CSS-хак для разделителей между элементами

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

Всё, что нам нужно, это:
— border-right для создания линий.
— Псевдокласс :not(:last-child) для исключения последнего элемента.

Реализация:

<ul class="list">
  <li>Главная</li>
  <li>О нас</li>
  <li>Услуги</li>
  <li>Контакты</li>
</ul>

.list {
  display: flex;
  gap: 20px; /* Расстояние между элементами */
  list-style: none; /* Убираем маркеры списка */
  padding: 0; /* Сбрасываем отступы */
  font-family: sans-serif;
}

.list li:not(:last-child) {
  border-right: 1px solid #ccc; /* Вертикальная линия */
  padding-right: 20px; /* Отступ справа */
}

Всё красиво и лаконично получается)
Если понадобится, то код можно найти здесь.

Выравниваем иконку с текстом

Сегодня разберём простой и модный способ выравнивания иконки с текстом с помощью CSS. Это особенно полезно, если вы хотите, чтобы размер иконки автоматически подстраивался под размер текста. Всё это делается с помощью единицы измерения 1cap.

Используем:
— display: flex для контейнера.
— Единицу измерения 1cap, чтобы размер иконки соответствовал высоте заглавной буквы текста.
— Свойство aspect-ratio: 1, чтобы иконка оставалась квадратной.

Реализация:

<div class="icon-text">
  <img src="https://cdn1.ozone.ru/s3/multimedia-g/6381734008.jpg" class="icon">
  <span>Текст рядом с иконкой</span>
</div>

.icon-text {
  display: flex;
  align-items: center; /* Выравнивание по центру */
  gap: 1px;
  font-family: sans-serif;
  font-size: 30px;
  color: #333;
}

.icon {
  height: 1cap; /* Размер иконки равен высоте заглавной буквы */
  aspect-ratio: 1; 
}

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

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

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

Теперь есть псевдокласс :user-invalid — он применяется к полям, с которыми юзер взаимодействовал, а также активируется после попытки отправить форму.

И это очень круто!

Вот небольшой пример:

input:user-invalid {
  border-color: #f44336;
  box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
}

Если юзер вводит некорректные данные и покидает поле, то оно будет подсвечено.

Здесь отлично работает HTML5-валидация (например, required, type="email", minlength).

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