Rem что это такое
Что такое px, em, rem в CSS
Многие люди путаются при работе с этими тремя единицами в CSS. Главной причиной этого является отсутствие понимания различий имеющихся между ними.
Для начала нужно усвоить базовое понимание этих единиц:
Что такое Px
Пиксели представляют собой неделимые объекты прямоугольной или круглой формы, размеры которых зависят от диагонали экрана устройства. Пиксель– это фиксированная единица, которая применяется к отдельным элементам там, где она определяется.
Эта строка кода CSS устанавливает размер шрифта в 10px и отступы размером в 10px со всех сторон.
Единица измерения rem зависит от размера шрифта, заданного в браузере по умолчанию, или размера шрифта, при именного к элементу html. Если базовый размер меняется, то значение rem также изменяется. Вы можете изменить размер шрифта, используемый по умолчанию, в настройках браузера.
Допустим, размер шрифта, используемый по умолчанию в браузере – 14px.
Этот код установит размер шрифта в 10px и отступы в 140px с каждой стороны. При этом базовым будет размер шрифта по умолчанию, заданный в браузере, который берётся за 1rem. То есть: 14px = 1rem, поэтому 10rem = 14px * 10 = 140px.
Путаница между em и rem
Вложенные элементы
Этот код установит размер шрифта родительского элемента в 10px, а шрифт дочернего элемента в 5px.Так как его размер зависит от значения font-size родительского элемента, которое принимается за 1em. То есть:10px = 1em, поэтому 0.5em = 10px / 2 = 5px.
Комбинированный пример
Предположим, что размер шрифта, используемый по умолчанию в браузере,составляет 14px. Как это отразится на всех трёх единицах измерения?
Ключевым для стилей дочернего элемента является свойство font-size, поскольку оно наследуетсяот родительского элемента.Для него размер шрифта задан в 10px, а в дочернем элементе он установлен в 0.5em. То есть, делится на два (как размер шрифта дочернего элемента).
Поля зависят от размера шрифта текущего элемента. За 1em принимается размер в 5px, (размер шрифта дочернего элемента).
Только отступы постоянны в обоих случаях. Они напрямую наследуются от корневого элемента html. Базовый размер шрифта в 14px неизменен, поэтому поля будут иметь размер 140px в обоих случаях.
Заключение
Чтобы преодолеть эту путаницу в единицах измерения, нужно знать, какие элементы зависят от настроек браузера, а какие основаны на размере экрана пользовательского устройства.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, дизлайки, отклики, подписки, лайки низкий вам поклон!
Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, подписки, лайки!
Когда в CSS использовать rem, em, px, или что-то другое
Использование только px (пикселей) для CSS-размеров шрифта, контейнеров, отступов, позиционирования и пр. — путь простой, но тупиковый.
Что такое rem?
Почему rem?
Относительные единицы предпочтительнее пикселей, потому что они учитывают предпочтения пользователя и настройки его браузера. Браузер позволяет пользователю изменить размер шрифта по умолчанию. Это значение применяется к размеру шрифта по умолчанию для корневого элемента. Поскольку rem вычисляется относительно размера основного шрифта, то размеры, указанные в rem будут пропорционально масштабироваться.
Есть ли у rem какие-либо недостатки?
Использование rem в медиа-запросах (@media), для минимальной или максимальной ширины, может быть проблематичным из-за того, что браузеры использует разные методы округления дробных чисел.
Но настоящий недостаток, это неинформативность дробных относительных значений и необходимость их пересчета, чтобы осознать размер в привычных пикселях. Например, при просмотре кода не очевидно, что min-width: 18.75rem это — 300px из макета. Немного поправить эту проблему можно, реализуя в препроцессоре функцию, которая будет выполнять вычисления и поможет прояснить, что происходит. В SCSS это может быть так:
Когда использовать px?
Чем реже — тем лучше. Пиксели следует использовать, когда размеры являются декоративными и/или не нуждаются в масштабировании относительно, предпочитаемого пользователем, размера шрифта. Отличный вариант использования px — границы (border). Чаще всего нет необходимости масштабировать их относительно размеров шрифта.
Как насчет %, fr, flex-grow?
Контейнерные элементы — это те, которые содержат контент. Это прямоугольники, которые содержат текст, изображения и другие элементы контейнера. Они обычно нуждаются в указании размеров и расположения. Размеры контейнерных элементов следует указывать с использованием относительных значений: проценты, fr (для CSS grid) или flex-grow (для flexbox). Это гарантирует, что элемент контейнера будет изменять свои размеры относительно размеров окна браузера.
Когда единицы измерения можно не указывать?
Из всего сказанного до сих пор, есть одно исключение: line-height (высота строки).
REM vs EM – Великий спор
Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em‘ы или rem‘ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.
Добро пожаловать в мир типографики и относительных единиц измерения =)
************
Одним из наиболее эффективных методов типографики в вебе является использование относительных единиц измерения rem и em.
Вопрос в том, что использовать? Уже долго длится спор между приверженцами rem’ов и em’ов, которые пытаются доказать, что нужно использовать именно «их» единицы.
В этой статье я возьму на себя смелость провести сравнение между rem и em. Вы узнаете что из себя представляют rem, а что em, и как их использовать для построения модульных компонентов.
Что такое EM?
em — в типографике относительная единица длины, равная размеру текущего шрифта
Это утверждение не имеет смысла в вебе, так как мы не используем размер точки (point-size). Но имеет смысл, если мы заменим размер точки на размер шрифта (font-size).
Это значит, что: 1em = 20px в том случае, когда у css-селектора прописано правило font-size: 20px;
Единица em может использоваться для того, чтобы задавать размеры шрифтов. По факту, использование относительных величин, например, em, для font-size, является хорошей практикой.
Какой на самом деле font-size у h1?
Нам придется взглянуть на родительский элемент, чтобы высчитать размер шрифта у этого h1. Допустим, что родительский элементом является html, и его font-size установлен в 16px.
Следуя этому, мы можем увидеть, что высчитанное значение h1 составляет 32px, или 2 * 16px.
На самом деле, плохая затея устанавливать font-size для html в пикселях (px), так как тем самым мы переопределяем установки браузера пользователя.
Заместо этого вы можете выбрать проценты в качестве значения font-size, или просто не задавайте его в html.
Заметка: font-size будет установлен в 100%, если вы сами его не задали.
Для большинства пользователей (и браузеров), размер шрифта в 100% будет по умолчанию выдавать 16px до тех пор, пока они его не поменяют в настройках своего браузера. Хотя редко кто подобным занимается.
Ладно, что дальше? Вернемся к em.
Em также используется, чтобы задать значения для других свойств, в дополнение к font-size. margin и padding являются двумя из тех свойств, которые измеряются в em’ах.
Вот где большинство людей путается со значениями em.
Рассмотрим следующий код. Каким будет значение margin-bottom для обоих элементов: h1 и p? (Предположим, что font-size у элемента html установлен в 100%)
Удивлены, что значение margin-bottom, установленное в 1em, разное в обоих случаях?
Это явление объясняется тем, что 1em равен размеру шрифта (font-size) своего элемента. Так как font-size у элемента h1 был установлен в 2em, то другие свойства у этого h1 (тот же margin-bottom) уже будут отталкиваться от нового значения font-size. То есть для них 1em будет равен уже 32px.
Людей сбивает с толку тот факт, что 1em может принимать различные значения в разных участках кода. Подобное может вас конкретно запутать, если вы только-только начали разбираться с em.
Вот такие вот эти em. Что ж, идем далее. Впереди нас ждут rem’ы.
Что такое REM?
Rem — это корневой em (Root Em). Он создан, чтобы облегчить вычислительные проблемы, с которыми многие иногда сталкиваются.
Это единица типографики, равная корневому (базовому) значению font-size. Это значит, что 1rem всегда будет равен значению font-size, которое было определено в html.
Рассмотрим тот же самый код, что и выше, только будем использовать уже rem’ы. Как теперь изменится значение margin-bottom?
Как видите, 1rem всегда будет принимать значение, равное 16px, и не имеет значения где вы примените его (до тех пор, пока не поменяете font-size у элемента html)
Существует зависимость. Это несложно понять.
Такие вот rem’ы. Не так сложно понять как они работают, зная как работают em’ы, согласны?
Теперь, приступим к самой вкусной части статьи. Итак, rem или em?
REM’ы или EM’ы?
Это очень спорный вопрос.
Некоторые разработчики полностью избегают использование rem, утверждая, что использование этих единиц измерения делают их компоненты менее модульными. Другие разработчики использут их для всего, предпочитая ту простоту, что они предоставляют.
Как ни странно, но я все-таки попался в ловушку, используя em’ы и rem’ы в своей работе на разных этапах разработки. Я был в восторге от того, как em’ы помогали мне в создании модульных компонентов, но я терпеть не мог всех тех сложностей, что они привносили в мой код. Мне также нравилось, как при помощи rem’ов все вычисления проходили гораздо проще, но меня бесили те хаки, которые приходилось писать, чтобы сделать мои компоненты модульными.
Оказывается, у em и rem существуют как сильные, так и слабые стороны. И их нужно использовать по-разному, в зависимоти от обстоятельств.
Как? У меня есть два простых правила:
Стало немного проще? Что ж, давайте рассмотрим написание простого компонента (пусть это будет заголовок), используя и em’ы и rem’ы, и вы сами увидите в действии эти два правила.
Используем только REM’ы для создания элемента заголовка
Скажем, у вас есть элемент заголовка h2, который выглядит вот так: 
Привет! Я — заголовок!
Стили заголовка должны быть подобны нижеуказанным, если вы указываете все в rem:
Далее, давайте создадим заголовок побольше, ведь на одной странице могут располагаться элементы разных размеров.
Когда мы будем это делать, давайте попробуем унаследовать настолько много стилей, насколько это возможно.
Разметка нашего второго заголовка будет выглядеть как-то так:
К сожалению, наш код не стал выглядеть лучше. Слишком мало свободного пространства между краями нашего элемента .header—large и самим текстом заголовка.
Не достаточно свободного пространства между краями и текстом нашего большого заголовка
Ну вот, теперь дышать стало посвободнее!
Что произойдет, если у нас будет больше заголовков различных размеров, или если заголовки должны будут меняться в размере? Вы уже понимаете, как указание значений свойств в rem’ах может вызывать дублирование и супер сложный код.
Как видите, em’ы могут быть невероятно полезны, если у вас имеются свойства, которые нужно масштабировать вместе с размером шрифта элемента. Отсюда и рождается первое правило.
Далее, давайте посмотрим, что будет происходить, если вы будете использовать только em’ы в вашем заголовке.
Используем только EM’ы для создания элемента заголовка
Код реализации заголовка на em’ах не многим отличается от кода на rem’ах, с которым уже познакомились. Все, что нам нужно — это заменить rem’ы на em’ы:
Крайне маловероятно, что ваш сайт будет содержать лишь один элемент заголовка и больше ничего. Нужно рассмотреть как он взаимодействует с другими элементами.
Как правило, эти элементы идут до или после заголовка, как тут:
Заголовки имеют разные связи с другими элементами
Разметка для этого блока будет такой:
Мы также добавим margin-right и margin-left для параграфов:
Ой-ёй, padding у первого заголовка не выровнен вместе с текстом параграфа
Вот теперь все выглядеит как надо!
Как и в предыдущем случае, мы можем упростить наш код, если согласимся использовать вкупе em’ы и rem’ы. В частности, для padding-left и padding-right мы будем использовать rem’ы, а для padding-top и padding-bottom — em’ы.
Как видите, em’ы могут быть невероятно полезны, если у вас имеются свойства, которые нужно масштабировать вместе с размером шрифта элемента. Однако, вы столкнетесь с проблемами, если вам понадобится менять значения свойств относительно корневого (изначального) значения font-size.
Стало более понятно, как работают вместе rem и em в одном компоненте, согласны?
Теперь, давайте поднимемся на ступеньку выше и посмотрим, как заголовок и параграф взаимодействуют с сеткой.
Компоненты на сетке
Прежде, чем мы продолжим, давайте объединим наш заголовок и параграфы в единый компонент:
Вот базовые стили для нашего компонента:
Пока все хорошо. Здесь мы видим все, с чем уже познакомились ранее.
Идем дальше. Этот компонент может быть где угодно на нашем сайте. Например:
Вероятные места, где может располагаться наш компонент
Заголовок нашего компонента должен становиться меньше по размеру (т.е., уменьшаться его font-size), если компонент будет находиться в узкой части сайта, например, в сайдбаре.
Элемент заголовка на сетке
Есть вариант как сделать это. Мы можем модифицировать класс нашего компонента. Разметка теперь примет вот такой вид:
Теперь касательно стилей компонента. Здесь действуют те же самые правила:
Как и в случае с элементом заголовка, вы можете определить, для каких свойств неободимо будет задать размеры в em’ах. Это нужно будет сделать для тех свойств, которые непосредственно взаимодействуют с остальными элементами страницы. Существует два пути, чтобы продумать, как лучше выстроить наш компонент:
Давайте рассмотрим оба случая, пройдем по каждому из путей, и вы поймете, что я имел в виду.
Путь первый. Свойства всех внутренних элементов масштабируются вместе со значением font-size компонента
Давайте начнем с примера, чтобы увидеть, как выглядит такой компонент:
Заметили, как font-size, margin и padding всех элементов внутри компонента изменяются в одно и то же время?
Если ваш компонент ведет себя таким же образом при изменении размеров, то вам нужно все размеры указывать в em’ах. То есть код становится таким:
Затем, чтобы изменения в размерах заработали, необходимо изменить свойство font-size у компонента.
Давайте теперь немного усложним наш пример.
Представьте, что у вас имеется сетка наподобие этой. Вертикальные и горизонтальные отступы на всех устройствах должны оставаться одинаковыми (с эстетической точки зрени это будет правильно).
Одинаковые отступы на сетке вида 1 + 2
Разметка для этой сетки такая:
Я установил промежутки между элементами сетки в 2em, с учетом, что базовый font-size равен 16px. Иными словами, высчитанная ширина каждого промежутка равна 32px.
Задача состоит в следующем: разделить маленькие компоненты A и B отступом в 32px. Для начала, мы можем попробовать установить margin-top компоненту B, равное 2em.
К сожалению, результат не радует. margin между маленькими компонентами A и B больше, чем ширина вертикального промежутка при видимой области (viewport) более 800px.
Пространство между маленькими блоками A и B не такое же, как пространство вертикального промежутка при viewport > 800px
Это происходит потому, что font-size компонента равен 1.5em (или 24px), когда видимая область становится более 800px. В тот момент, когда font-size становится 24px, высчитанное значение 2em становится 48px, которое отличается от 32px, которые мы и добивались получить.
Какое счастье, что мы можем решить эту проблему, просто заменив единицы измерения на rem. Ведь мы знаем, что ширина промежутков изменяется в зависимости от базового font-size.
Вертикальный отступ теперь равен горизонтальным!
Та-да! Проблема решена 🙂 Вот вам пример на Codepen, можете поиграться с кодом.
Заметка: Вам придется использовать Flexbox, чтобы построить такую сетку. Я не буду объяснять, как я ее выстроил, так как это выходит за рамки статьи. Советую почитать эту статью, если хотите узнать больше про Flexbox.
Да, кстати, не я придумал эту технику. Chris Coyier написал об этом год назад (он гений!).
В любом случае, готовы двигаться дальше? Если да, переходим ко второму случаю. Если нет, не стесняйтесь оставлять комментарии, и я постараюсь объяснить это вам каким-то иным способом.
Путь второй. Свойства лишь некоторых внутренних элементов масштабируются вместе со значением font-size компонента.
Первый случай несложно объснить. Недостатком, однако, является то, что вам придется придерживаться вашей модульной сетки (Прим. пер.: что это такое, можете почитать тут), вертикальным ритмам (Прим. пер.: что это такое, можете почитать тут) и вы должны быть уверены, что все компоненты имеют одинаковый размер в одно и то же время (особенно, когда вы делаете адаптивные сайты).
Иногда требуется изменить небольшой участок компонента, не изменяя размеров всего остального.
Например, вам нужно изменить font-size заголовков при большей видимой области (viewport).
Только заголовки меняются в размере, когда меняется видимая область
Давайте опишем стили данного примера, взяв за основу стили, которые мы описали выше:
Как только меняется font-size у заголовка, на границе видимой области в 1200px, мы можем безопасно использовать rem’ы в качестве единиц измерения каждого свойства (за исключением padding-top и padding-bottom у заголовка)
После этого вы можете изменить размер шрифта в заголовке на разных вюьпортах, просто добавив media в них:
Та-да! Заметили, что когда мы ресайзим окно браузера, меняется только font-size у заголовка? Вот так вот и нужно поступать во втором случае 🙂
Еще один момент
Так как рекомендуется использовать лишь несколько размеров типографики, я часто абстрагирую свойство font-size от компонента. Таким образом, я могу быть уверен, что моя типографика останется одинаковой во всех компонентах.
На этом все со вторым случаем. Вот вам пример на Codepen, можете поиграться с кодом.
Я уже предвижу ваш вопрос, поэтому сначала отвечу на него: Какой метод вы должны использовать?
Я скажу, что все зависит от дизайна.
Лично я гораздо чаще пользуюсь вторым, нежели первым, так как предпочитаю абстрагировать типографику в отдельный файл.
Подведем итоги
Что же использовать, rem или em? Я думаю, что данный вопрос не совсем корректен. И rem и em имеют свои сильные и слабые стороны, и их можно использовать вместе, — это поможет вам в написании простых, модульных компонентов!
Теперь касательно вас! Чью сторону вы примите в этом споре? Я бы с радостью почитал в комментариях ниже, что вы думаете по этому поводу:)
rem в CSS. Общие сведения и способы применения
Дата публикации: 2015-11-09
От автора: сегодня мы рассмотрим еще один тип единиц измерения rem в css. Данный тип отлично поддерживается браузерами и полифиллами в случае со старыми обозревателями.
Описание
Единицы измерения rem в CSS что это? Если вы любитель музыки, то должно быть сталкивались с группой «REM». Но в отличие от своих коллег «Rapid Eye Movement» наш rem расшифровывается, как «root em». Данный тип единиц измерения создан для гармонии и баланса с дизайном. Определение одной единицы rem на W3C:
Равная вычисленному значению свойства font-size для основного текста. Если свойство font-size установлено для основного текста, то rem единицы связываются с этим свойством.
Это значит, что 1rem равен размеру текста для тега html (в большинстве браузеров по умолчанию это 16px).
Rem против Em
Основная загвоздка с em в том, что они определяются по размеру текста конкретного элемента. Кроме того, они наследуются, что приводит к непредсказуемым последствиям. Рассмотрим следующий пример. Списки будут иметь шрифт 12px, а основной текст 16px:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Если наш список вложен в другой список, размер шрифта внутреннего будет составлять 75% от родителя, т.е. 9px. Можно исправить это так:
Это решает проблему, однако не стоит забывать о более глубоком наследовании. С rem все намного проще:
Так как все размеры шрифтов определяются по корневому тексту, нам не нужно следить за всевозможными случаями вложенности.
Размер текста в Rem
Jonathan Snook в своей статье Размер текста в Rem в мае 2011 г. был одним из первопроходцев в применении данных единиц измерения к шрифтам. Как и множество других CSS разработчиков, он столкнулся с проблемой с em единицами в сложных макетах.
В то время IE еще занимал большую долю рынка, и разработчики не могли масштабировать текст, так как он был в пикселях. И как мы уже видели выше, очень легко не уследить за всевозможными наследованиями и получить неожиданные результаты.
Основная проблема rem для шрифтов в том, что данные единицы довольно сложно применить. Ниже я составил краткий список основных размеров шрифтов в rem единицах, при условии, что по умолчанию стоит 16px:
Как видно, данные значение неудобны при вычислениях. По этой причине Snook использовали трюк под названием «62,5%». Это старый трюк, его уже применяли с em единицами:
Так как rem связаны с корневым текстом, то вариант от Snook выглядит так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Но стоит учесть и те браузеры, которые не поддерживают данные единицы измерения. Для них мы изменим наш код на такой:
С виду данное решение может показаться идеальным, однако есть разработчики, которые остерегают от бездумного использования данного подхода. Harry Roberts написал свою статью по поводу применения rem единиц. По его мнению, хоть правило 62,5% и облегчает вычисления, в итоге оно заставляет разработчиков переписывать абсолютно все размеры шрифтов на их сайте.
Третий способ подсказал Chris Coyier на сайте CSS-Tricks. Он использует все три типа единиц измерения. Корневой текст он оставляет в px, модули в rem, а элементы модулей в em. Данный подход облегчает манипулирование размерами основного текста. На основе корневого текста вычисляется размер модулей, а по размеру модулей вычисляется размер шрифта для текста в модулях. Louis Lazaris обсуждала этот последний способ в статье Мощь em единиц измерения в CSS. В примере ниже можно увидеть, как работает последний способ:
Как видно, панацеи не существует. Комбинация различных способов ограничивается только воображением разработчиков.
Rem и медиа запросы
Использование em или rem в медиа запросах сводится к понятию «оптимальная длинна строки», и как она влияет на пользователей. В 2014 году веб-сайт Smashing Magazine опубликовал статью с комплексным исследованием типографики под названием Размер имеет значение: оптимальная длинна строки и размер шрифта в адаптивном веб-дизайне. В статье много интересного, в том числе была вычислена оптимальная длина строки: от 45 до 75-85 символов (включая пробелы и знаки препинания). Идеальное значение строки – 65 символов.
При грубом округлении 1rem = 1 символ, можно манипулировать текстом в одной колонке для мобильных устройств:
Есть одна интересная деталь при использовании rem и em в медиа запросах: все они имеют одно значение 1rem = 1em = размер браузера по умолчанию. Объяснение можно найти в спецификации media query:
«Относительные единицы измерения в медиа запросах основаны на значении браузера по умолчанию. К примеру, в HTML em вычисляется по размеру шрифта font-size, который задан юзер агентом или настройками браузера, а не стилями страницы.»
Сперва создадим span, в нем будем писать ширину экрана: Document width: px.
Создадим два медиа запроса: один для rem, другой для em (Для простоты используем Sass):
Добавим чуть-чуть JQuery для отображения размера экрана, обновляем значение при изменении размера окна:
Сначала мы показали, что правило 62,5% не работает для шрифтов в медиа запросах. При изменении ширины окна браузера, мы видим, как первый медиа запрос перестает работать на 320px (20x16px), а второй начинает на 480px (30x16px). Размер шрифта не меняется, на объявленные нами в стилях при изменении размера окна. Единственный способ это изменить в настройках браузера.
По этой причине не имеет значения, используем мы em или rem в медиа запросах. В таких проектах, как Foundation v5 и Bootstrap v4 alpha в медиа запросах используются em единицы.
Использование rem для масштабирования документов
Третий способ применения rem единиц это создание масштабируемых документов. Используя rem единицы в значениях ширины, внешних и внутренних отступов, можно создать интерфейс, который будет увеличиваться и уменьшаться в зависимости от размера шрифта по умолчанию. Рассмотрим данный способ на паре примеров:
В первом пример мы изменяем размер шрифта по умолчанию с помощью медиа запросов. Как в предыдущей главе статьи. Основная цель добиться удобного размера на разных устройствах пользователя. Если padding и margin элемента выражены в rem, то весь элемент масштабируется под размер экрана устройства.
Во втором примере мы делаем то же самое но с помощью JS. В этом примере пользователю предоставлена возможность настройки размера интерфейса. Напишите метод для сбора данных о размерах экранов пользователей (хранить можно в БД, куки или на съемном носителе), и вы будете знать о предпочтениях ваших пользователей.
Заключение
Заканчиваем наш урок по rem в CSS. Нет нужды объяснять все преимущества данных единиц измерения: адаптивность, масштабируемость, удобство при чтении и большая гибкость. Однако rem не панацея. При правильном применении они могут решить множество проблем, которые раздражали разработчиков много лет. Каждый из нас может создать свой подход. Открывайте текстовые редакторы, экспериментируйте и делитесь результатами в комментариях.
Автор: Adrian Sandu
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3