LETUNOFF DOCS

Tips. Frontend

Автокапитализация

В мобильных Chrome и Safari текстовые инпуты автоматически капитализируются.
Это нормально… пока автокапитализация не срабатывает там, где её не ждут, создавая лишнее трение и ухудшая UX
Фикс: добавь autocapitalize="off" для таких полей. Атрибут определяет, будут ли автоматически меняться буквы на заглавные при наборе или редактировании текста.

Разделительные линии между option

Можно добавлять элементы <hr> между элементами <option> внутри <select> для создания визуального разделения. Эта функция доступна в последних версиях всех основных браузеров, но может не работать в старых. Если нужна определенная группировка, с именами групп, используйте <optgroup>.

Анимированные иконки

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

Проверка правописания

Атрибут spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте. Атрибут применяется к тегам input или textarea, а также к элементам, которым задан атрибут contenteditable.

Можно с помощью псевдоэлемента ::spelling-error стилизовать неправильно написанный текстовый сегмент.

::spelling-error {
  background-color: yellow;
}

Атрибут poster

Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится. Если атрибут poster не указан, браузер отобразит первый кадр видео.

Атрибут command

Позволяет вызывать методы DOM-элементов. Он уже работает в Chrome, Edge, Firefox и скоро появится в Safari. Вот так открывать/закрывать модалки всего двумя строками HTML.

<button
	commandfor="modal"
	command="showModal">
	Открыть модалку
</button>
 
<dialog id="modal">
	Содержимое модалки
	<button
		commandfor="modal"
		command="close">
		Закрыть
	</button>
</dialog>

Мы можем использовать элемент <search> для обёртывания полей и контента, связанных с поиском/фильтрацией. Элемент <search> воспринимается браузером как «поисковая» область в API доступности, что помогает пользователям вспомогательных технологий (например, экранных читалок) легко находить поисковые зоны на веб-странице.

<search>
  <form action="/search">
    <label>
      Поиск продукта:
      <input type="search" name="productName" />
    </label>
    <button>Поиск</button>
  </form>
</search>

Если на веб-странице есть несколько поисковых зон, им следует задавать доступные названия с помощью атрибутов aria-labelledby / aria-label, чтобы различать их.

Кастомные списки (select)

Библиотека Slim Select делает создание красивых, настраиваемых dropdown-меню с кучей фич и вариаций максимально простым. Поддерживается поиск, мультивыбор и другое.

Цветовые палитры

Огромная библиотека классных цветовых палитр для твоих проектов. Всё чётко отсортировано, можно искать по трендам и категориям.

Бенто-сетки

Нужен источник вдохновения для бенто-сеток? Этот сайт– настоящая находка: сотни примеров реальных Bento UI, использующихся на топовых сайтах.

Цифровые инпуты

Не используй input type="number" для важных числовых полей – типа почтового индекса, номера карты и т.п.

  • На десктопе появляется ненужный спиннер.
  • Значение может случайно измениться при прокрутке мыши или нажатии вверх/вниз.

Вместо этого используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах – лучше UX.
✅ Добавляет валидацию на цифры.

<label>
Почтовый индекс
	<input
		inputmode="numeric"
		pattern="[0-9]*">
</label>

SVG-шейпы

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

Обратные ссылки