Управление цепочкой прокрутки окна

Замечали такое, что когда открыто модальное окно, в котором туча текста и есть скролл, мы скроллим модальное окно, а когда доскроллим его до конца, то начинается скроллиться уже окно барузера?

Вот это называется "цепочка прокрутки", когда после окончания одного скролла, идет скролл внешнего элемента.

Победить это дело можно с помощью свойства overscroll-behavior.

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

Достаточно указать overscroll-behavior: contain; — скролл только в пределах текущего элемента.

Пример работы можно увидеть здесь, попробуйте удалить overscroll-behavior: contain; и как говорится, ощутите разницу)

Предпросмотр картинки перед загрузкой

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

Давайте, разберем здесь простой пример, как это можно реализовать.

<div class="upload-container">
  <label class="upload-label">Загрузите картинку любого формата (JPG, JPEG, PNG, GIF)</label>
  <div class="file-input-wrapper">
    <input type="file" id="imageInput" class="file-input" accept="image/*">
    <label for="imageInput" class="file-button">Обзор...</label>
    <span class="filename" id="filename">Файл не выбран</span>
  </div>
</div>

Плюс еще добавим предпросмотр и кнопки.

Без JS здесь обойтись не получится.

Нужно после выбора файла получить временную ссылку на изображение, используем URL.createObjectURL, потом отображаем ее в <img>.

Ну и оживим кнопку «Отменить», чтобы всё сбрасывалось: картинка скрывалась, поле очищалось.

Конечно, такое себе описание получилось)

Вот здесь готовый код, думаю все будет понятно после просмотра)

Убираем отступ под изображением

Микро лайфхак для новичков.

Когда мы вставляем изображение на страницу, то тег <img src="image.jpg"> по умолчанию является строчным элементом, а поэтому и получаем отступ снизу (для "хвостиков" букв, вроде gjpqy).

Чтобы пофиксить этот момент достаточно изображение сделать блочным элементом:

img {
  display: block;
}

Теперь отступ исчезнет. Мне кажется удобнее и логичнее, чем line-height: 0.

Можно даже добавить правило в базовый CSS-сброс:

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Это сделает работу с изображениями менее нервной)

Код, на всякий случай оставил здесь.

Когда сеньор взял фреймворк и быстро сдал в прод, а джуну показал, как всё написать с нуля)

Использование :empty как заглушки для изображений

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

Но есть и еще один интересный способ — использование псевдокласса :empty.

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

.image-container:empty::before {
  content: "No Image Available";
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
  font-size: 1.2rem;
  color: #888;
  background-color: #ddd;
  text-align: center;
}

Таким образом заглушки создаются чистым CSS, никаких внешних зависимостей, нет задержек на загрузку изображений-заглушек.

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

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

Делаем элемент с margin, который не вылезает за границы родителя

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

Логично задать width: 100% и margin: 20px, но элемент вылезает за границы.

Простой подход не работает, потому что margin добавляется к ширине, а не вычитается из неё:
■ Ширина элемента = 100% от родителя.
■ Плюс margin 20px слева и справа.
■ Итого: 100% + 40px = переполнение.

Рабочее решение: calc()

.child {
  width: calc(100% - 40px); /* вычитаем margin'ы */
  margin: 20px;
}

Принцип простой: вычитаем размер всех margin'ов из 100%.

Такие задачи встречаются не особо часто, но все же может пригодиться)

Код можно посмотреть здесь.

Фильтр фона с помощью CSS

Давайте сегодня разберем свойство backdrop-filter, оно добавляет эффекты к области за элементом.

Причем, сам элемент остаётся нетронутым, а фон под ним меняется. Например, можно сделать эффект матового стекла.

Работает это свойство просто:

.element {
  background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */
  backdrop-filter: blur(5px); /* Размытие фона */
}

Свойство backdrop-filter похоже на filter, но меняет не сам элемент, а его фон.

Основные фильтры:
■ blur(px) — размытие фона.
■ brightness(%) — яркость.
■ contrast(%) — контрастность.
■ grayscale(%) — переводит фон в оттенки серого.
■ opacity(%) — прозрачность фона.
■ sepia(%) — придаёт фону тёплый, коричневатый оттенок.
■ hue-rotate(deg) — изменяет оттенок фона.
■ invert(%) — инвертирует цвета.

Наглядно посмотреть на работу можно здесь.

Если вас кто-то спросит, что такое div с классом wrapper)

Стилизация кнопки выбора файла

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

Но теперь в современных браузерах появилась поддержка псевдоэлемента ::file-selector-button, который дает возможность стилизовать эту кнопку)

Разметка:

<input type="file" class="styled-file-input" />

Стилизация:

.styled-file-input::file-selector-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

Согласитесь, стало удобнее)

Поддержку браузерами можно глянуть здесь.

Ну, а сам код из примера ждёт вас тут.

Надеюсь, вы ответите именно так, после прочтения этого поста)

Наш канал вырос до 3000 подписчиков, вашу активность, вопросы и поддержку я ценю больше всего — это то, что делает наш канал таким уютным и живым!

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

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

Но не переживайте, рекламы будет немного, максимум пару постов в неделю)

Без спама и мусора, только по нашей теме.

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

Если есть вопросы, критика или предложения — всегда готов обсудить)

Скрываем текст на кнопках при нехватке места

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

Выходом может быть скрытие текста кнопки и отображение только ее иконки, чтобы было понятно, что это вообще за кнопка)

Следить за моментом, когда нужно скрывать текст, удобно с помощью контейнерных запросов (container queries).

Просто указываем при каком размере контейнера скрыть текст и все:

.card {
  container-type: inline-size; /* Превращаем элемент в контейнер для адаптивных стилей */
}

@container (max-width: 320px) {
  .btn-text {
    display: none; /* Скрываем текст */
  }
}

Container queries следят за размером карточки и скрывают текст, когда места мало.

Кнопки всегда выглядят аккуратно, не ломаются и не переносят текст.

Затестить код можно здесь.

Основные способы добавить иконку в input

Иногда требуется отображать в input иконку поиска и т.п., собрал здесь 3 основных способа сделать это)

1) Background-image

.bg-icon {
  background-image: url('...');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px;
}

Самый простой способ, всего одно CSS-правило, но не самый гибкий.

2) Псевдоэлемент ::before

.wrapper::before {
  content: "";
  background-image: url('...');
  position: absolute;
}

Тоже простой способ, но поскольку к input не может иметь псевдоэлементы, то требуется обёртка.

3) Отдельный SVG

<div class="input-wrapper">
  <input type="text">
  <svg class="icon">...</svg>
</div>

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

В общем можно подобрать нужный способ по ситуации)

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

Автоотступ для выравнивания элементов

При верстке часто возникает задача — разместить несколько элементов в строку, а один из них вытолкнуть, чтобы он не зависел от остальных.

Например: логотип, меню и кнопка входа справа.

Flexbox с этим делом справляется на ура)

Разберем на примере:

<div class="header">
  <div class="logo header-block">лого</div>
  <div class="menu header-block">меню</div>
  <div class="login header-block">вход</div>
</div>

Контейнеру зададим display: flex, а чтобы блок <div class="login header-block">вход</div> отлетел вправо, добавим ему margin-left: auto.

.header {
  display: flex;
}

.header-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login {
  margin-left: auto;
  width: 100px;
}

Браузер заполнит всё свободное пространство слева от элемента, тем самым выталкивая его вправо.

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

Шпаргалка по Emmet

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

Конечно, все его сокращения запомнить трудно, поэтому вот вам официальная шпаргалка — https://docs.emmet.io/cheat-sheet/
Освежите в памяти или может быть, найдете то, что раньше не замечали.

Там же есть ссылка pdf, если нужно распечатать)

Как владельцы макбуков в модной кофейне видят твой Lenovo)

Аккордеон на чистом HTML и CSS

Сделаем такой аккордеон, чтобы одновременно был открыт только один элемент. В этом нам поможет старый добрый <details>, но с улучшением)

Будем использовать атрибут name, который превращает <details> в группу элементов.

И еще добавим атрибут open у первого элемента, чтобы сделать его раскрытым по умолчанию.

Получаем такой код:

<div class="accordion">

  <details name="my-accordion" open>
    <summary>Первый пункт</summary>
    <div class="content">
      <p>Текст</p>
    </div>
  </details>

  <details name="my-accordion">
    <summary>Второй пункт</summary>
    <div class="content">
      <p>Текст</p>
    </div>
  </details>

</div>

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

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

Код из примера можно найти здесь.