Сниппеты: Вёрстка / UI

Как использовать autocomplete="one-time-code" для удобного ввода одноразовых кодов подтверждения: правильный HTML input, формат SMS, безопасность, совместимость и WebOTP API.

Простой способ сделать PNG-скриншот всей страницы сайта в Chrome или Edge через DevTools: без расширений, сервисов и сторонних программ.

Зачем добавлять rel="noopener", "noreferrer" и "nofollow" к ссылкам: защита от tabnabbing, контроль referrer и SEO-сигналы. Готовые варианты и автопроставление.

Анимированный градиент фона с помощью CSS. Эффект переливания цветов для современного веб-дизайна. Пример кода и советы.

Создайте современный Soft UI (Neumorphism) в CSS с помощью теней. Пример кода и советы по применению в интерфейсе.

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

Свойство aspect-ratio в CSS позволяет задать элементу фиксированные пропорции ширины и высоты

Проверьте, что каждый символ на сайте отображается подключённым шрифтом

Реагируем на сообщение: На этой странице используется нестандартное свойство «zoom». Попробуйте использовать calc() в соответствующих значениях свойств или использовать «transform» вместе с «transform-origin: 0 0»

Атрибуты async и defer позволяют оптимизировать загрузку и выполнение скриптов

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

Это свойство является сокращённой формой записи для свойств top, right, bottom и left

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

Это способ организации контента в несколько колонок, что улучшает читабельность и визуальное восприятие

Базовый пример CSS, который можно использовать для стилизации кнопки выбора файла

Эффекта включает в себя небольшие изменения цвета и скосы

Как закрыть сайт или отдельные URL от поисковой выдачи: различия robots.txt и noindex, X-Robots-Tag, авторизация и удаление проиндексированных страниц.

Telegram поддерживает несколько способов форматирования текста

Этот символ является неразрывным пробелом, который может превратиться в перенос строки при необходимости

Этот атрибут используется для установки предварительного соединения с определённым доменом

Используется для предварительного разрешения имён DNS для доменов, на которые будет производиться запрос в будущем

Используется для предварительной загрузки ресурсов, которые, как ожидается, будут использоваться в следующих навигационных запросах

Используется для предварительной загрузки ресурсов, таких как изображения, видео, стили и скрипты, которые будут использоваться на странице

modulepreload - это атрибут HTML, который указывает браузеру, что модуль JavaScript нужно загружать в фоновом режиме

Атрибут loading с значением lazy в HTML позволяет отложить загрузку изображений, которые находятся вне видимой области экрана

Если значение атрибута spellcheck не указано, то браузер будет использовать настройки по умолчанию

Атрибут translate используется для указания, должен ли браузер переводить текст на другой язык

Используется для указания URL, который получит уведомление при клике

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

Используйте свойство filter с параметрами blur и brightness