Самый часто используемый элемент в вебе — это <div>. Тег div является основой для создания структуры веб-страницы и ее дизайна. Однако, почему <div> именно так называется?

Элемент <div> в HTML происходит от сокращения слова «division», что буквально переводится как «деление» или «разделение». И его название полностью соответствует его функции. Ведь <div> используется для разделения содержимого веб-страницы на логические блоки, облегчая таким образом их структурирование и оформление.

Основная задача <div> заключается в том, чтобы создавать контейнеры, в которые можно помещать другие элементы HTML. Это позволяет веб-разработчикам легко управлять размещением и стилизацией содержимого веб-страницы с помощью CSS.

Новая архитектура позволяет комбинировать варианты, которые действуют на другие селекторы, такие как group-*, peer-*, has-* и новый вариант not-*.

В предыдущих версиях варианты типа group-has-* были явно определены во фреймворке, но теперь group-* может компоноваться с существующим вариантом has-*, который может компоноваться с другими вариантами, такими как focus.

1 • 2 • 3

Основная цель новой версии Tailwind — сделать фреймворк более CSS-нативным и менее похожим на JS-библиотеку. Поэтому вместо того, чтобы задавать все настройки в файле конфигурации JS, вы теперь просто используете переменные CSS:

Кстати, создание CSS-переменных сделает возможным использование CSS-функции calc вместе с Tailwind-вариациями. Например, class=”p-[calc(var(--spacing-6)-1px)]”.

И теперь можно будет использовать значения темы в таких библиотеках как Framer Motion без resolveConfig().

В 4.0 разработчики хотят сделать конфигурацию Tailwind опциональной. Это значит, что Tailwind сможет работать без файла tailwind.config.js.

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

1 • 2 • 3

Цвета в вебе можно записывать по разному: с помощью HEX, RGB, HSL, OKLAB. Последний, кстати, может передавать куда гораздо больше оттенков, чем RGB. В RGB модели разные цвета представляются как комбинации красного, зеленого и синего света. Однако этот способ представления цвета не всегда соответствует тому, как люди воспринимают цвета в реальном мире. Например, в RGB одинаковый шаг изменения яркости не будет означать одинаковое восприятие изменения света для всех цветов.

Цветовая модель OKLAB стремится решить эти проблемы, учитывая особенности восприятия цвета человеческим глазом. Но сегодня не об этом. В вебе также можно назначить цвет фона или текста с помощью специальных ключевых слов. Например, написав background-color: yellow фон элемента станет жёлтым (#FFFF00). В ранних спецификациях W3C было определено всего 16 ключевых цветов. Но позже появилось ещё 130 новых. Среди них есть интересные и смешные названия. Хочу о них кратко рассказать.

— PapayaWhip (взбитая папайя): светло-кремовый оттенок с небольшим оттенком розового.

— Moccasin: светло-жёлтый оттенок, напоминающий цвет традиционных индейских мокасинов.

— Tomato: ярко-красный оттенок, напоминающий цвет спелого помидора.

— SaddleBrown (коричневое седло): тёмно-коричневый оттенок, подобный цвету кожи седла.

— Salmon (лосось): тёплый розовато-оранжевый оттенок.

— Gainsboro (город Гейнсборо в штате Мэн, США): светло-серый оттенок, который часто используется для создания нейтральных и сдержанных дизайнов.

Честно говоря, тяжело представить, чтобы в 2024 году стали бы использовать эти цвета за пределами тестовых проектов, особенно когда дизайнеры придумывают свои цветовые палитры. Мне, кстати, нравится стандартная цветовая тема в Tailwind. Она предельно понятная: там, где число 50 — самый светлый оттенок, где 950 — самый тёмный. Что думаете вы по этому поводу?