Атрибут data-*
В HTML 4 крайне не хватало возможности создавать свои собственные атрибуты для хранения значений. Зачем это надо? Вот несколько задач, где это может потребоваться.
- Создание всплывающих подсказок без применения скриптов.
- Определение стиля элемента на основе значения атрибута.
- Получение и изменение значений через скрипты.
В HTML5 появился новый универсальный атрибут, который можно добавлять к любому тегу. Правила написания атрибута простые:
- всегда начинаем с data-;
- используем только латинские буквы, дефис (-), двоеточие (:) и подчёркивание (_).
CSS и JavaScript немного по разному обращаются к таким атрибутам, так что разберём примеры для них отдельно.
CSS
В CSS есть атрибуты тегов, при наличии какого-либо атрибута или заданного значения мы задаём необходимый стиль.
СодержимоеТеперь можем в стилях обратиться к этому элементу как div[data-fluid] и установить для него нужное оформление. В общем, это напоминает работу классов, поэтому не является какой-то уникальной или необходимой фичей. Так что полезнее задавать значения.
СодержимоеВ CSS после этого можем задавать разный стиль при различных значениях нашего атрибута data-columns.
div[data-columns=2] < width: 480px; >div[data-columns=3]
Опять же, это в какой-то мере является заменой классам, ничего ведь не мешает сделать классы с именами column-2, column-3 и добавлять их при необходимости.
Более изящной областью применения выступает включение функции attr() . Она получает значение заданного атрибута и вставляет его в стиль. Удобно это использовать для создания всплывающих подсказок. Текст пишем прямо внутри элемента, а вывод и оформление подсказки реализуем с помощью CSS.
Всплывающая подсказка meter < position: relative; >meter:hover::after Температура воды
В данном примере к элементу добавляется атрибут data-description содержащий необходимый текст для вывода. Само отображение происходит с помощью псевдоэлемента ::after и свойства content , значением которого как раз и выступает функция attr() .
JavaScript
Если в CSS мы обращаемся к имени атрибута напрямую, указывая его полностью, то в JavaScript это делается через метод dataset. Само имя атрибута преобразовывается в переменную по следующим правилам:
- data- отбрасывается;
- любой дефис идущий перед буквой отбрасывается, а буква за ним становится заглавной.
На практике это выглядит так.
data-description превращается в description.
data-full-description превращается fullDescription.
data-description-of-tag превращается descriptionOfTag.
Традиционный способ получить доступ к элементу и его атрибутам — задать идентификатор и обратиться к элементу через getElementById , как показано в примере ниже.
dataset Пользователь Вначале добавляем к элементу идентификатор с уникальным значением. Затем получаем доступ к элементу через getElementById . Теперь мы можем обращаться к любым атрибутам data через метод dataset , причём не только получать, но и устанавливать значения. Храниться они будут до перезагрузки страницы или до установки нового значения.
См. также
- Описание атрибута data на сайте webref.ru
- data-* в живом стандарте HTML5
Комбинации селекторов
Разные селекторы можно комбинировать между собой, что в итоге позволяет нам сократить код и нацелить стиль на выбранные элементы, основываясь на их положении относительно друг друга.
Группирование селекторов (А, B)
Группирование применяет один и тот же стиль сразу к нескольким селекторам. Это делается для удобства представления и сокращения кода CSS. В примере 1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 1. Стиль для каждого селектора
h1 < font-family: Arial, Helvetica, sans-serif; font-size: 1.6rem; color: #003; >h2 < font-family: Arial, Helvetica, sans-serif; font-size: 1.3rem; color: #333; >h3 < font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; color: #900; >p
Из данного примера видно, что стиль для элементов , , содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 2.
Пример 2. Сгруппированные селекторы
h1, h2, h3 < font-family: Arial, Helvetica, sans-serif; >h1 < font-size: 1.6rem; color: #003; >h2 < font-size: 1.3rem; color: #333; >h3
В данном примере единое для всех селекторов свойство font-family применяется сразу к нескольким селекторам, а отдельные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка, пункты которого разделяются между собой запятыми. В группу могут входить не только селекторы элементов, но также идентификаторы и классы.
h2, .block, .msg
Здесь свойство background применяется одновременно к элементу и к классам block и msg .
Дерево документа
Большинство комбинаций селекторов основано на их положении в дереве документа и относительно друг друга. Дерево документа — это схематичное изображение всех элементов, встречающихся в нашем коде HTML. Для иллюстрации возьмём произвольный документ, показанный в примере 3.
Пример 3. Код HTML
Дерево документа для этого HTML показано на рис. 1. Схема напоминает крону дерева из-за своей схожести с ветвями и листьями.
Рис. 1. Дерево документа
не считается элементом, поэтому его в расчёт не берём. Сама схема начинается с элемента , он называется «корневой элемент». Все элементы связаны друг с другом сверху вниз и между ними есть следующие связи.
-
, поскольку располагается внутри них. Родитель Непосредственный предок элемента, который располагается выше на один уровень в дереве документа. будет родителем для
- , для него родителем будет выступать
-
. Ребёнок (дочерний элемент) Непосредственный потомок элемента, который располагается ниже на один уровень в дереве документа. К примеру, дочерним для будет элемент
; для
-
дочерними элементами выступают
- , но не . У родителя может быть произвольное число дочерних элементов, но у дочернего элемента только единственный родитель. Братья (сиблинги) Элементы, расположенные на одной ветке и имеющие общего родителя, называются братскими или сиблинги, если пользоваться термином из генетики. Братскими являются элементы , и , а также
- . Элементы братскими не являются из-за того, что у них разные родители. Смежные Братские элементы, расположенные рядом друг с другом. Смежными будут элементы и , а также и , но никак не и , потому что они располагаются «через одного».
-
, но уже не для
Селекторы потомка (A B)
Эти селекторы также называются вложенными или контекстными. Такие селекторы состоят из базовых селекторов разделённых пробелом.
footer a
Пример 4. Цвет ссылок
Результат данного примера показан на рис. 2. Для изменения цвета ссылок вверху мы использовали селектор header a , а для ссылок внизу — footer a .
Рис. 2. Ссылки разного цвета
Селекторов не обязательно должно быть только два, можно комбинировать произвольное количество.
.tbl thead td
Дочерние селекторы (A > B)
Селекторы потомка выбирают всех заданных потомков указанного элемента, независимо от их уровня вложенности. Чтобы выбрать только дочерние элементы, между селекторами вставляется угловая скобка.
section > h2
Данная запись означает применить стиль к элементу , который является дочерним по отношению к . Для следующего фрагмента HTML красным цветом будет оформлен первый заголовок , поскольку только он непосредственно располагается внутри и выступает его дочерним элементом.
Заголовок 1
Заголовок 2
-
располагается внутри другого. Чтобы стилизовать пункты списка первого уровня, не затрагивая остальные, и требуются дочерние селекторы.
Пример 5. Дочерние селекторы
Результат данного примера показан на рис. 3.
Рис. 3. Изменение стиля дочерних элементов
Смежные селекторы (A + B)
Выбирает элемент B, который является смежным для элемента A, иными словами, идёт в коде сразу же после него. К примеру, следующая запись изменит цвет только первого абзаца после заголовка.
h2 + p
Смежные селекторы обычно применяются для стилизации полей формы или создания разных эффектов. В примере 6 текстовый абзац с классом hidden прячется с помощью свойства display со значением none . При наведении курсора мыши на абзац с классом more смежный с ним абзац с классом hidden становится виден. Подробнее об использовании :hover говорится в разделе про псевдоклассы.
Пример 6. Смежные элементы
Братские селекторы (A ~ B)
Выбирает все братские элементы B, которые идут в коде после элемента A. К примеру, следующая запись изменит цвет всех абзацев после заголовка.
h2 ~ p
В примере 7 при наведении курсора мыши на любую звёздочку, все остальные, которые располагаются правее неё, меняют цвет с серого на красный. Поскольку братские селекторы работают только для элементов справа, а не слева от указанного, то мы идём на хитрость и переворачиваем все звёздочки с помощью атрибута dir со значением rtl . Это меняет текст и расположение элементов справа налево.
Пример 7. Братские селекторы
Результат данного примера показан на рис. 4.
Рис. 4. Использование братского селектора
Комбинации селекторов позволяют выделить элемент, расположенный справа или внутри заданного элемента, но никак не родительский элемент или элемент, расположенный слева.
Обращение к элементу по id
Обычно в литературе для доступа к элементу рекомендуют использовать document.getElementById(«id_») . Например, изменить ширину элемента:
document.getElementById("scroller").width = "100px"; Но часто встречаю исходники, где к элементу обращаются по id непосредственно так:
scroller.width = "100px"; Насколько это правильно и допустимо?
Отслеживать
user262779
задан 26 дек 2017 в 14:45
1,978 15 15 серебряных знаков 25 25 бронзовых знаков
у вас получалось так обратиться к элементу?
26 дек 2017 в 14:47
да, как ни странно. Вполне
26 дек 2017 в 15:12
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
«Если элементу назначен специальный атрибут id, то можно получить его прямо по переменной с именем из значения id. Это поведение соответствует стандарту . Оно существует, в первую очередь, для совместимости, как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные переменные. Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при этом возможны конфликты. Более правильной и общепринятой практикой является доступ к элементу вызовом document.getElementById(«идентификатор»)»
«Язык JavaScript. Часть 2», Илья Кантор, 2015 г
Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?
CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без должного внимания он может выйти из-под контроля, как и любой другой код.
Как же Taiwind CSS помогает в управлении стилями?
Что такое Tailwind?
Tailwind CSS — это “utility-first” (“полезность прежде всего”) CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения.
Основная идея состоит в том, что при разработке проекта вам не нужно иметь дело с таблицами стилей и беспокоиться о том, как переопределить тот каскад из 10 селекторов, который вот уже 2 года преследует ваше приложение.
Чем Tailwind так хорош?
Taildwind предоставляет большое разнообразие CSS-классов, каждый из которых имеет собственную функцию. Вместо традиционного создания класса .btn путём добавления множества атрибутов в Tailwind можно просто применить классы bg-blue-500 py-2 px-4 rounded к кнопке или создать класс .btn и вместе с утилитарным классом применить его к селектору с помощью директивы @apply.
О преимуществах Tailwind можно рассказывать ещё очень долго, мы же в этом руководстве сосредоточимся на основах. Поехали!
Часть 1: Подключение Tailwind CSS к статичной HTML-странице
Начнём с подключения Tailwind CSS напрямую к статичной HTML-странице. Думаю, что, уделяя основное внимание Tailwind, а не приложению, мы сможем лучше понять, что именно происходит с фреймворком.
Шаг 1: Создание новой страницы
Просто создайте новый HTML-файл. Выбор контента для него остаётся за вами. Я использую для этого fillerama.io, чтобы контент выглядел повеселее.
Чтобы упростить себе задачу, можете воспользоваться моим файлом.
Шаг 2: Подключение Tailwind CSS через CDN
Чтобы получить полнофункциональную версию Tailwind, обычно рекомендуется подключение через npm. Мы же сейчас пока просто пытаемся понять, как он работает, поэтому давайте добавим ссылку на CDN в блок нашего документа.
Первое, что бросается в глаза после сохранения изменений и обновления страницы — все стили сбросились!
Это ожидаемо. У Tailwind есть предустановленные стили для обеспечения кроссбраузерности. Они состоят из популярного normalize.css и надстроек над ним.
Но нам ведь необходимо узнать, как использовать Tailwind вместе с нашими собственными стилями.
Шаг 3: Использование Tailwind CSS для добавления стилей на страницу
Теперь, когда Tailwind установлен, у нас появилась возможность использовать его огромную библиотеку утилитарных классов — с их помощью мы вновь стилизуем страницу.
-
,
). Мы можем сделать это, присвоив каждому элементу класс .my-5 :
Belligerent and numerous.
Наименование класса строится по шаблону, который вы увидите и в остальных утилитарных классах: в данном случае m означает margin, применяемый по оси y (y), со значением 5 (Tailwind использует rem — стало быть, значение равно 5rem).
Далее давайте сделаем так, чтобы заголовки выглядели, как подобает заголовкам. Начиная с h1 , добавим следующее:
Вот что здесь происходит:
- text-2xl : установка размера шрифта (font-size) на значение 2xl (в Tailwind 2xl будет равняться 1.5rem);
- font-bold : установка насыщенности шрифта (font-weight) на значение bold;
- mt-8 : подобно my-5 — установка margin top (t) на значение 8rem;
- mb-5 : установка margin bottom (b) на значение 5rem.
Давайте добавим те же классы, что мы применили к h1 , и к остальным заголовкам, но с уменьшением уровня заголовков будем уменьшать и размер шрифта:
- h2: text-xl ;
- h3: text-lg .
Вот что мы сделали:
- list-disc : задали list-style-stype значение disc (вид маркеров у пунктов списка);
- list-inside : установили положение маркеров относительно пунктов списка, задали list-style-position самого списка значение inside;
- my-5 : задали margin по оси y значение 5rem;
- pl-2 : задали padding left значение 2rem.
-
), заменив list-disc на list-decimal , чтобы в качестве маркеров были цифры, поскольку это нумерованный список.
Вот и всё — мы стилизовали списки.
И наконец настало время сделать наш контент более читабельным — установим ему максимальную ширину и отцентрируем. Для этого к тегу добавим следующее:
Примечание: Обычно эти классы не применяются напрямую к . Вместо этого можно обернуть весь контент в тег , но поскольку мы сейчас просто пытаемся понять, как работает фреймворк, то оставим всё, как есть. Если хотите, добавьте тег и примените классы уже к нему.
Итак, наша страница готова.
Шаг 4: Добавление кнопки и других компонентов
Добавим кнопку в наш статичный пример.
Особенность Tailwind в том, что в нём заведомо нет готовых классов для компонентов: предполагается, что разработчики, скорее всего, будут переопределять их под свои потребности. Это значит, что нам нужно создавать собственные компоненты с помощью утилитарных классов.
Для начала добавим новую кнопку. Вставьте фрагмент кода, показанный ниже, в любое место на странице. Я вставлю его после тега первого параграфа (
):
Вы можете заметить, что, как и другие элементы, кнопка не стилизована, однако если на неё кликнуть, она среагирует. Давайте зададим кнопке соответствующий внешний вид — добавим следующие классы:
Вот что здесь происходит:
- text-white : установка для цвета текста значения white;
- font-bold : установка насыщенности шрифта (font-weight) на значение bold;
- bg-purple-700 : установка значения purple с насыщенностью 700 для фонового цвета кнопки. 700 — величина по отношению к другим оттенкам цвета purple (можете ознакомиться с палитрами в официальной документации);
- hover:bg-purple-800 : установка значения purple с насыщенностью 800 для фонового цвета кнопки при наведении мыши. Tailwind предоставляет такие вспомогательные классы, которые позволяют с лёгкостью определять стили для интерактивных событий hover, focus и active;
- py-2 : установка padding по оси y на значение 2rem;
- px-4 : установка padding по оси x на значение 4rem;
- rounded : скругление углов элемента с помощью установки border-radius. Tailwind задаёт border-radius значение .25rem.
Теперь у нас есть кнопка.
Вы можете применять эту методологию к любому другому компоненту, который захотите создать. И, хотя всё это выполняется вручную, скоро мы выясним, как упростить этот процесс при разработке более динамичных проектов, например тех, что созданы на React.
Часть 2: Подключение Tailwind CSS к React-приложению
Для большей реалистичности подключим Tailwind CSS к приложению, созданному с помощью Create React App.
Для начала давайте рассмотрим этапы, которые вам нужно будет пройти, чтобы подключить Tailwind к вашему проекту с установкой Create React App. Затем мы воспользуемся контентом из последнего примера, чтобы воссоздать его уже на React.
Шаг 1: Создание нового React-приложения
Я не собираюсь слишком подробно останавливаться на этом шаге. Суть в том, что мы запустим новое React-приложение при помощи Create React App.
Перед тем как начать, можете ознакомиться с инструкциями в официальной документации React.
После запуска сервера разработки вы должны увидеть приложение.
Теперь мы можем перенести в него весь наш старый контент. Для этого скопируйте всё содержимое тега из статичного примера и вставьте в обёртку в новом проекте на React.
Заменим все атрибуты class=» из скопированного контента на className=» для соответствия атрибутам React.
И напоследок поменяем className App в обёртке на классы, которые мы использовали в из статичного примера.
Сохранив изменения и перезагрузив сервер, вы обнаружите, что страница выглядит хорошо. Но это впечатление обманчиво.
У React есть собственные базовые стили, и, хоть страница и выглядит нормально, мы всё ещё не используем на ней Tailwind. Так давайте же установим его!
Шаг 2: Подключение Tailwind CSS к React-приложению
Чтобы подключить Tailwind к приложению, нужно пройти несколько этапов. Убедитесь, что проходите их все — только так удастся создать нужную конфигурацию.
Для начала добавим зависимости:
yarn add tailwindcss postcss-cli autoprefixer
# or
npm install tailwindcss postcss-cli autoprefixer
Согласно документации Tailwind, нам нужно иметь возможность обрабатывать стили, чтобы они были должным образом добавлены в поток. Поэтому выше мы сделали следующее:
- tailwindcss: добавили основной пакет Tailwind;
- postcss-cli: Create React App уже использует postcss, но нам необходимо сконфигурировать Tailwind так, чтобы он стал частью сборки и обрабатывал стили самостоятельно;
- autoprefixer: в Tailwind нет вендорных префиксов, поэтому для решения этой задачи мы добавляем autoprefixer — он станет частью конфигурации postcss.
Также добавим две зависимости для разработки, чтобы облегчить себе работу с кодом:
yarn add concurrently chokidar-cli -D
# or
npm install concurrently chokidar-cli --save-dev
- concurrently: пакет, который позволяет проводить несколько команд одновременно, что полезно, ведь нам нужно прослушивать и стили, и React-приложение;
- chokidar-cli: с помощью этой зависимости можно прослушивать файлы и проводить команду при их изменениях — это позволит нам прослушивать CSS и при его изменении перезапускать сборку.
Теперь давайте зададим конфигурацию для postcss. Для этого создайте в корне проекта файл с именем postcss.config.js и скопируйте в него следующее:
// Содержание postcss.config.js
module.exports = plugins: [
require('tailwindcss'),
require('autoprefixer')
],
>;
Этот код добавит плагины Tailwindcss и Autoprefixer в конфигурацию postcss.
Нам необходимо сделать конфигурацию частью процессов прослушивания и сборки. В файле package.json добавьте следующие два определения к свойству scripts :
"build:css": "tailwind build src/App.css -o src/index.css",
"watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",
Также включите в скрипты start и build команды:
"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
"build": "npm run build:css && react-scripts build",
Конфигурация готова. Теперь давайте попробуем вернуть наши стили к тому состоянию, в каком мы оставили их в статичном примере.
Замените всё содержимое файла App.css на следующее:
@tailwind base;
@tailwind components;
@tailwind utilities;
Этот код импортирует базовые стили, компоненты и утилитарные классы Tailwind, чтобы он работал так, как от него и ожидается.
Также можно не импортировать App.css из App.js , поскольку теперь он напрямую внедряется в index.css . Уберите эту строку:
import './App.css';
Теперь самое время вернуться к серверу разработки. Если он уже запущен, перезапустите его, чтобы применились все изменения в конфигурации.
Страница должна выглядеть точно так же, как она выглядела в статичном примере.
Шаг 3: Создание нового класса для компонента кнопки с помощью Tailwind
Пусть у Tailwind и нет встроенных классов для компонентов, создать их очень просто.
Мы будем использовать кнопку, которую уже сделали в примере с созданием нового компонента. Мы напишем новый класс btn , а также дополняющий его модификатор цвета btn-purple .
Давайте откроем наш файл App.css , в котором мы и будем создавать новый класс. Добавим в него следующее:
.btn @apply font-bold py-2 px-4 rounded;
>
Если помните, в нашем HTML-файле мы уже добавляли эти классы к элементу . Tailwind позволяет нам добавить стили, которые превращают эти утилитарные классы в новый класс — в данном случае класс .btn .
Теперь добавим этот класс к нашей кнопке:
При открытии страницы видно, что кнопка выглядит точно так же. Но, если открыть элемент в инспекторе, можно увидеть новый класс .btn , сгенерированный из стилей.
Далее создадим модификатор цвета. Подобно тому, что мы делали до этого, применим правила:
.btn-purple @apply bg-purple-700 text-white;
>
.btn-purple:hover @apply bg-purple-800;
>
Таким образом мы добавляем нашему классу кнопки фоновый цвет и цвет текста. Также мы делаем фоновый цвет кнопки более тёмным при наведении мыши.
Необходимо добавить новый класс нашей кнопке в HTML и убрать ранее применённые:
Можно видеть, что внешне опять-таки ничего не изменилось, но у нас появился новый класс для кнопки.
Применение этих принципов для других компонентов
В этом пошаговом руководстве мы научились создавать новые классы с помощью директивы @apply в Tailwind. Она позволяет создавать классы для многократного использования в компонентах (например, в кнопках).
Мы можем применять такой подход к любому количеству компонентов в проекте. К примеру, если бы мы захотели, чтобы наши списки всегда выглядели так, как было задано, то мы могли бы создать класс .list-ul , который описывал бы ненумерованный список с применением утилит list-disc list-inside my-5 pl-2 из Tailwind.
- Параллельный режим React — взгляд в будущее
- Как скоро хуки вытеснят классы React?
- Как с помощью чистого CSS создать красивую анимацию загрузки для приложения