Как отцентровать контент в css
Перейти к содержимому

Как отцентровать контент в css

  • автор:

CSS-Grid: Как центрировать контент, не сжимая сам элемент? [Дубликат]

Используя CSS-Grid, я пытаюсь поместить мои объекты в центр ячейки сетки, не сводя их полностью к только содержанию. Это возможно? Я сделал простой пример для stackblitz. Вы можете видеть, что элементы там не заполняют всю ячейку сетки цветом фона. Каков правильный способ получить эту работу? Я могу удалить классы justify-items/align-items, но потом содержимое больше не центрируется. https://stackblitz.com/edit/angular-8bggtq?file=app/app.component.html Ячейки заполнены, но контент не в центре: Изображение 214921Ячейки не заполнены, но контент центрирован: Изображение 214925

.wrapper < display: grid; height: 100vh; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; justify-items: center; align-items: center; >.item < //justify-self: stretch; //align-self: stretch; >.one < background: red; >.two < background: pink; >.three < background: violet; >.four < background: yellow; >.five < background: brown; >.six < background: green; >html, body
 
1
 
2
 
3
 
4
 
5
 
6

codepleb 17 фев. 2018, в 12:38

Как отцентровать контент в css

Примеры позиционирования элементов внутри родительского блока, а также вложенных элементов, в зависимости от значения display:

display: inline
display: inline
display: block
display: block
display: flex
display: flex
display: inline-block
display: inline-block
display: inline-flex
display: inline-flex
display: inline-flex
display: inline-flex

Что делает свойство margin? Какие есть особенности у отрицательных значений? Что такое margin collapsing?

Margin — это отступ от границы текущего элемента до внутренней границы (border) его родительского элемента

Отрицательные margin-left/top сдвигают элемент влево-вверх. Остальные элементы это учитывают, в отличие от сдвига через position . Отрицательные margin-right/bottom заставляют другие элементы думать, что блок меньше по размеру справа-внизу, чем он на самом деле:

margin-left: -10px;margin-top: -70px;
margin-left: 30px;margin-bottom: -30px;

    Схлопывание не срабатывает:
  • для элементов, у которых на стороне схлопывания задано свойство padding (не распространяется на сестринские элементы).
  • для элементов, у которых на стороне схлопывания задана граница;
  • на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
  • на плавающих элементах (для них свойство float задано как left или right);
  • для строчных элементов;
  • для &lthtml&gt

Примеры схлопывания маржинов и результирующего позиционирования элементов относительно родительского блока и друг друга. Все блоки имеют отступы margin-top и margin-bottom 60px. Другие свойства указаны в таблицах для каждого рассматриваемого случая. Высота внутренних блоков 60px (равна маржину для более легкого визуального восприятия)

1

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: block display: block display: block
padding нет нет нет
border нет нет нет
Схлопывание маржинов Между родителем и первым дочерним — да, между дочерними — да

2

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: block display: block display: block
padding padding-top: 1px нет нет
border нет нет нет
Схлопывание маржинов Между родителем и первым дочерним — нет, между дочерними — да

3

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: block display: block display: block
padding нет нет нет
border border: 5px solid red; нет нет
Схлопывание маржинов Между родителем и первым дочерним — нет, между дочерними — да

4

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: flex; flex-direction: column block block
padding нет нет нет
border нет нет нет
Схлопывание маржинов Между родителем и первым дочерним — нет, между дочерними — нет

5

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: block display: block display: block
padding нет нет нет
border нет нет нет
float float: left нет нет
Схлопывание маржинов Между родителем и первым дочерним — нет, между дочерними — да

6

Свойство Родительский блок (черный) Первый вложенный блок (оранжевый) Второй вложенный блок (сиреневый)
display display: block display: inline-block display: inline-block
padding нет нет нет
border нет нет нет
Схлопывание маржинов Между родителем и первым дочерним — нет, между дочерними — не применимо

Что делает свойство vertical-align? Какие у него есть значения?

Свойство для выравнивания строчного или строчно-блочного элемента по вертикали

vertical-align: baseline vertical-align: middle

vertical-align: top vertical-align: text-top

vertical-align: bottom vertical-align: text-bottom

vertical-align: sub vertical-align: super

vertical-align baseline middle vertical-align

vertical-align top text-top super vertical-align

vertical-align bottom sub text-bottom

Помимо ключевых слов можно использовать числовые значения. Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз. Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline. Процент рассчитывается от line-height родительского элемента.

Что делает свойство float? Почему родитель элемента с float может схлопываться?

Это родитель элемента с float. Он схлопнулся

это блок ниже блока, содержащего картинку с float
Этот блок еще ниже

Это родитель элемента с float, и ему задано свойство display: flow-root

это блок ниже блока, содержащего картинку с float
Этот блок еще ниже

Это родитель элемента с float, и ему задано свойство overflow: hidden;

это блок ниже блока, содержащего картинку с float
Этот блок еще ниже

Что делает свойство position?

Свойство position задаёт способ позиционирования элемента в документе. Совместно со свойствами left, right, top, bottom элементу задаётся его местоположение на странице.

Какие элементы называют позиционированными?

Это элементы со значением свойства Position, отличным от Static

Относительно чего происходит позиционирование элементов при разных значениях свойства position?

  • Relative: элемент позиционируется так же, как и статичный, но его отображение может быть смещено относительно своего начального положения при помощи свойств left, right, top, bottom. Это смещение чисто визуальное и не затрагивает положение соседних элементов, кроме случая, когда элемент выходит за границы родителя, имеющего возможность прокрутки.
  • Absolute: элемент позиционируется относительно ближайшего позиционированного предка
  • Fixed: элемент позиционируется относительно окна браузера, за исключением случаев, если один из родителей имеет значения свойств transform, perspective или filter, отличные от none. В этом случае блок становится опорным, и позиционирование будет производиться уже относительно него, а не окна браузера
  • Sticky: элемент позиционируется в нормальном потоке так же, как и статичный, а затем смещается при помощи свойств left, right, top, bottom относительно ближайшего родителя, имеющего прокрутку.

Что делает свойство z-index?

Свойство z-index позволяет управлять порядком наложения элементов друг на друга.

Контекст наложения

Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.

Как влияет на расположение элементов с заданным значением z-index?

Родитель, задающий контекст наложения (position: relative;z-index: 0)
Позиционированный элемент, z-index: -1;
Элемент без контекста наложения с display: block
Позиционированный элемент, z-index: 0;
Позиционированный элемент, z-index: 1;
Элемент без контекста наложения с display: inline
Элемент без контекста наложения с opacity: 0.9
Элемент без контекста наложения с float: left

Какие свойства создают новый контекст наложения?

    Новый контекст наложения формируется если:
  • это корневой элемент (&lthtml&gt)
  • элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto
  • флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex
  • элементу задано свойство opacity со значением меньше 1
  • элементу задано свойство transform со значением не none
  • элементу задано свойство mix-blend-mode со значением не normal
  • элементу задано свойство filter со значением не none
  • элементу задано свойство will-change или аналогичный атрибут
  • элементу задано свойство isolation со значением isolate
  • элемент с position: fixed
  • элементу задано свойство -webkit-overflow-scrolling со значением touch

Flex контейнер
Контейнер с opacity
Контейнер с transform

Flex

Что такое flexbox?

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Существует ли инлайновый flexbox?

Да, display: inline-flex

Что такое flex-container и flex-items?

Флекс-контейнер: элемент, к которому применяется свойство display: flex или display: inline-display: flex. Вложенные в него элементы подчиняются правилам раскладки флексов.

Флекс-элемент: элемент, вложенный во флекс-контейнер.

Как выравнивать элементы с помощью flexbox?

При помощи свойств flex-контейнера и flex-элементов

Принципы работы flex-grow, flex-shrink. Каким образом рассчитывается занимаемое и свободное пространство при использовании этих свойств?

flex-grow — задает пропорцию, в которой элемент занимает свободное пространство в flex-контейнере по сравнению с другими элементами. Положительное целое или дробное число, устанавливающее коэффициент роста flex-элемента. Значение по умолчанию 0 (не расширяется).

flex-shrink — задает пропорцию, в которой элемент сжимается (уступает свою ширину) по сравнению с другими элементами в flex-контейнере. Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1(не сжимается)

Формула для расчета ширины, на которую уменьшается flex-элемент:

разница между шириной на сколько нужно flex-контейнера и общей * flex-shrink * ширина / ширина flex-контейнера = уменьшить ширину шириной flex-элементов элемента flex-элемента flex-элемента

Рамки

Внешние рамки (outline)

  • Нельзя задать разные стили внешней рамки для разных сторон блока
  • Не имеет свойства border-radius, т.е. если нужно скруглить углы, то это нужно сделать при помощи свойства border-radius (т.е. внутренней рамкой)
  • внешняя рамка может отступать от элемента (или размещаться внутри него)

Тени

Что делает свойство text-shadow

Свойство text-shadow даёт возможность добавить тень буквам в тексте.

    Каждая тень состоит из следующих значений:
    • Два или три значения размера с единицами измерения.
    • Если задано только два значения, то они интерпретируются как смещение по осям x и y.
    • Если задано и третье значение тоже, то оно отвечает за размытие тени.

    Что делает свойство box-shadow? Как им пользоваться?

      Каждая тень состоит из следующих значений:
      • Два, три или четыре значения размера с единицами измерения:
      • Если задано два значения, то они расшифровываются как смещение по оси x и по оси y.
      • Если задано третье значение, то оно интерпретируется как радиус размытия.
      • Если задано четвёртое значение, то оно отвечает за радиус распространения.

      Как сделать так, чтобы у одного элемента было несколько теней?

      Перечислить их через запятую в свойстве text-shadow или box-shadow

      Есть ли возможность задавать параметры теней отдельно (например, задать отдельно цвет или размер тени)?

      Фоны

      background-image задаёт элементу фоновую картинку или градиент. Синтаксис: background-image: url(«background.png») или background-image: linear-gradient(red, yellow, green);

      background-position управляет положением фоновой картинки внутри элемента. Синтаксис: background-position: 100% 100% или background-position: center bottom или background-position: 10px 150px. Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки, т.е. от свободного места. Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали. Значение по умолчанию — 0% 0% (левый верхний угол). Если указано только одно значение, то второе подставляется автоматически и равняется 50%. То есть значение 100% расположит картинку по центру правого края.

      background-size — позволяет изменять размер фонового изображения. Синтаксис: background-size: 100% 100%

        В качестве значения для свойства background-size можно задавать:
      • Точный размер в любых единицах измерения, доступных в вебе.
      • Проценты. Размер в процентах будет рассчитываться от размеров элемента.
      • Ключевое слово auto. Размер изображения остаётся неизменным. Кстати, это ключевое слово является значением по умолчанию.
      • Ключевое слово cover. Изображение масштабируется без изменения пропорций так, чтобы закрыть фон всего элемента. Короткая сторона изображения подстраивается под соответствующую сторону элемента. А длинная сторона закрывает длинную сторону элемента, а остальное, что не попало в поле видимости, обрезается.
      • Ключевое слово contain. Изображение масштабируется без изменения пропорций так, чтобы полностью поместиться в элемент.

      background-repeat — управляет тем, будет ли повторяться фоновое изображение. По умолчанию значение у этого свойства repeat. Значит фоновая картинка будет повторяться по вертикали и по горизонтали

      background-origin — определяет какие области блока будет занимать фоновая картинка: все области, включая рамку, внутренний отступ и контент или только контент. Не влияет на background-color

      background-clip — определяет, в каких областях будет находиться фоновая картинка и фоновый цвет блока.

      background-attachment — определяет будет ли фон прокручиваться вместе со страницей или будет зафиксирован на одном месте. Часто используется для создания так называемого эффекта параллакса

      background-color — для задания цвета фона элемента

        Шорткат, позволяющий задать все свойства фона разом. Объединяет в себе:
      • background-attachment
      • background-clip
      • background-color
      • background-image
      • background-position
      • background-repeat
      • background-size

      Градиенты

      Что делает функция linear-gradient? Как ей пользоваться?

      Используется для задания фона в виде линейного градиента. Градиент — это плавный переход между цветами. Линейный градиент описывает изменение цвета вдоль прямой линии. В отличие от фоновых изображений градиент не может иметь конкретных размеров и его фактический размер совпадает с размером элемента.

      Синтаксис: background-image: linear-gradient(угол_поворота_оси, цвет точка_останова точка_останова, цвет точка_останова точка_останова (сколько угодно цветов)) Угол поворота оси: если указан, тогда линия, вдоль которой строится градиент, повернётся на нужный угол. Единица измерения - deg или turn Точка останова: в начальной точке заканчивается плавный переход из предыдущего цвета. Конечная точка — это точка, с которой начинается плавный переход в следующий цвет.

      background-image: linear-gradient(45deg, yellow, purple, white, black);

      background-image: linear-gradient(yellow 10%, purple 30% 50%, green 50%, black);

      background-image: repeating-linear-gradient(rgb(238, 238, 117) 10%, rgb(235, 155, 235) 20%, rgb(238, 238, 117) 30%);

      Что делает функция radial-gradient? Как ей пользоваться?

      Используется для задания фона в виде радиального (кругового, эллиптического) градиента. Радиальный градиент — это переход, который начинается в точке и расходится от неё подобно кругам на воде. Радиальный градиент не обязательно должен быть круговым. Форма по умолчанию — это эллипс, который заполняет всю площадь элемента.

      Синтаксис: background-image: radial-gradient(размер положение_центра, форма, цвет, цвет, (сколько угодно цветов) ); Размер: closest-side — градиент имеет такую форму, что заканчивается у ближайшей к центру границы элемента; farthest-side — градиент заканчивается у дальней от центра границы элемента; closest-corner — форма градиента подбирается таким образом, чтобы его край проходил через ближайший к центру угол; farthest-corner — край градиента будет проходить через дальний от центра угол. Положение центра: at left at top at right at bottom at center at top left at 20% 50% at 130px 500px и т.д. Форма: circle, ellipse (по умолчанию). Размер и положение центра совместимы только с ellipse (они не работают, если одновременно указана форма градиента, т.е. работают только для значения формы по умолчанию)

      background-image: radial-gradient(circle, yellow, purple, white, black);

      background-image: radial-gradient(at 20% 40%, yellow, purple, white, black);

      background-image: radial-gradient(at top, yellow, purple, white, black);

      background-image: radial-gradient(closest-corner at 40% 20%, yellow, purple, white, black);

      background-image: repeating-radial-gradient(closest-side at 40% 20%, yellow, purple);

      Анимации

      Что такое @keyframes? Зачем нужно? Как им пользоваться?

      Первый этап создания CSS-анимации — это определение ключевых кадров. В ключевом кадре определяется вид той или иной сцены. Таких кадров может быть множество. Когда анимация воспроизводится, браузер двигается от одного ключевого кадра ко второму и прорисовывает промежуточные значения между ними. Яркий пример подобной прорисовки — анимация через transition, где вы предоставляете два ключевых кадра (начальный и конечный стили), а браузер берет на себя работу по просчету промежуточных фаз. Ключевые кадры позволяют создавать большее количество стилей, а не ограничиваться двумя.

      Для записи ключевых кадров используется специальное правило @keyframes. В каждом ключевом кадре необходимо разместить те свойства, которые должны применяться к элементу в заданный момент времени.

      Структура правила выглядит следующим образом:

       @keyframes animationName < from < /* Список CSS-свойств */ >to < /* Список CSS-свойств */ >>

      Сначала мы объявляем правило с помощью слова @keyframes, после чего указываем название анимации (имя может быть произвольным, но при этом желательно сделать его информативным). Следом, в фигурных скобках записываем ключевые кадры (минимум два). В нашем примере первый кадр начинается ключевым словом from, а второй — словом to. После этого ставятся фигурные скобки, в которых записываются необходимые CSS-свойства в привычном нам формате. Другими словами, каждый ключевой кадр имеет вид обычного стиля CSS, состоящего из набора свойств.

      Представим, что мы хотим создать примитивную двухкадровую анимацию, в которой один цвет фона (красный) меняется на другой (зеленый). Мы запишем правило в таком виде:

       @keyframes changeBackgroundColor < from < background-color: red; >to < background-color: green; >>

      Но это самый простой пример. Как мы уже говорили, можно создавать более двух ключевых кадров, что гораздо более интересно. Давайте модифицируем наш пример, добавив еще один ключевой кадр в середину анимации, чтобы фоновый цвет сначала менялся с красного на желтый, а затем с желтого на зеленый:

       @keyframes changeBackgroundColor < from < background-color: red; >50% < background-color: yellow; >to < background-color: green; >>

      Запись 50% означает, что фон станет желтым ровно в середине анимации. По такому принципу можно добавлять сколько угодно ключевых кадров — просто используйте необходимое число в процентах (30%, 60%, 75% и так далее). Позже, когда будет задана длительность анимации, станет понятно, сколько времени пройдет до появления желтого цвета. К примеру, если вы установите длительность в размере 6 секунд, то желтый цвет фона появится через 3 секунды после старта анимации.

      Разумеется, можно указывать в одном кадре несколько CSS-свойств. Например, чтобы сместить наш элемент вниз на 50 пикселей к середине анимации, и еще на 50 пикселей — к концу анимации, следует записать:

       @keyframes changeBackgroundColor < from < background-color: red; >50% < background-color: yellow; transform: translateY(50px); >to < background-color: green; transform: translateY(100px); >>

      Еще более интересно то, что можно создавать паузы в анимации, записывая один набор свойств для нескольких ключевых кадров сразу. Например, чтобы красный цвет сменился на желтый к 33% от длительности анимации, а переход от желтого к зеленому начался после 66%, запишите следующее:

       @keyframes changeBackgroundColor < from < background-color: red; >33%, 66% < background-color: yellow; transform: translateY(50px); >to < background-color: green; transform: translateY(100px); >>

      Таким образом мы создадим эффект паузы на временном отрезке с 33% до 66%.

      Ключевые слова from и to равнозначны процентным записям 0% и 100% соответственно. Вам не обязательно начинать анимацию с 0% и заканчивать на 100%. Ее можно запускать позже и завершать раньше, при этом добиваясь интересных эффектов.

      Можно ли задать несколько анимаций для элемента?

      Можно, через запятую:

      animation: circle-to-square 10s infinite alternate ease-out 1s, color-change 5s alternate linear infinite;

      Transition

      Трансформации

      Что делает свойство transform? Какие значения ему можно задавать?

      Свойство transform используем, когда нам нужно применить к элементу какие-либо трансформации: смещение, масштабирование, искажение, поворот. Нельзя трансформировать строчные и табличные элементы.

      transform: translateX(10px)
      transform: translateY(10px)
      transform: translate(10px, 10px)
      transform: scaleX(0.5)
      transform: scaleY(0.5)
      transform: scale(0.5, 0.5)
      transform: skewX(30deg)
      transform: skewY(30deg)
      transform: rotateX(30deg)
      transform: rotateY(30deg)
      transform: rotateZ(30deg)

      Можно ли задать несколько трансформаций для элемента?

      Можно, через пробел, без запятой: transform: rotateZ(30deg) translateX(50px);

      transform: rotateZ(30deg) translateX(50px)

      Изменяется ли положение координатной плоскости при трансформациях?

      Единицы измерения

      Как рассчитываются width и height заданные в процентах?

      Width: ширина в процентах рассчитывается от ширины родительского элемента. Если родительский элемент ограничен по ширине, к примеру, 450 пикселями, то у вложенного элемента ширина в 100% будет равна 450 пикселям. То есть 100% от родительского элемента. Если при этом у родителя будут также указаны внутренние отступы (padding), то 100% ширины для ребёнка будут равны 450px минус боковые отступы.

      Height: процент рассчитывается относительно высоты родительского блока. Если высота родительского блока не указана явно (то есть зависит от высоты содержимого) и этот элемент не является абсолютно позиционированным, значение вычисляется как auto. Для абсолютно позиционированных элементов процент вычисляется с учетом высоты области отступов padding содержащего блока.

      Как рассчитываются padding и margin заданные в процентах?

      % от ширины блока. Верхние и нижние поля тоже вычисляются относительно ширины элемента

      Как рассчитывается line-height заданный в процентах?

      это процент, умноженный на вычисленный размер шрифта элемента

      Как пользоваться vh, vw, vmin, vmax

      vh Размер указывается в процентах от высоты вьюпорта (viewport height). 100vh соответствует полной высоте вьюпорта. 1vh = 1% высоты вьюпорта. vw Размер в процентах от ширины вьюпорта (viewport width). 100vw соответствует полной ширине вьюпорта. 1vw = 1% ширины вьюпорта. vmin Размер в процентах от меньшей размерности вьюпорта. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты. vmax Размер в процентах от большей размерности вьюпорта. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

      Что делает свойство object-fit

      Свойство, которое позволяет управлять тем, как картинка &ltimg&gt или видео &ltvideo&gt будет подстраиваться под заданные размеры. По своему поведению очень похоже на свойство background-size для фоновых изображений. Работает только если картинке задан хотя бы один размер: ширина или высота. Иначе браузер не понимает в какую область нужно вписать картинку.

      fill — картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям. contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций. cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное. none — значение по умолчанию, картинка отображается без изменения пропорций или размеров. scale-down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом.

      Object-fit хорошо комбинируется с Object-position, которое, в свою очередь, без Object-fit не работает. Свойство Object-position спозиционирует изображение относительно размера, заданного в разметке. По применению и доступным значениям свойство похоже на background-position. Оно может принимать как значения в единицах измерения (пикселях, процентах и т. д.), так и с указанием расположения относительно границы элемента — bottom, top, center, left или right. Кроме того, как и в background-position, мы можем указать значения отдельно по вертикали и по горизонтали — первое значение обозначает ось x, второе — ось y. По умолчанию свойство позиционирует контент по центру элемента.

      Как стилизовать чекбокс?

      Можно курить —> Можно курить

       // HTML // все заворачиваем в label <label чекбокс, который будет скрыт <input type="checkbox"> // span, который выполняет роль стилизованного чекбокса <span подпись Можно курить </label> // CSS // скрываем чекбокс .checklist__cat-checkbox < position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; >// стилизуем span .checklist__cat-checkmark < border: 1px solid gray; width: 18px; height: 18px; border-radius: 5px; display: inline-block; background-color: white; box-sizing: border-box; >//стили для span при состоянии checked чекбокса .checklist__cat-checkbox:checked + .checklist__cat-checkmark, .checklist__cat-checkbox:checked:focus + .checklist__cat-checkmark

      Как прижать футер к низу страницы (назвать хотя бы два способа)?

      Способ 1: CSS Flexbox

      Оборачиваем всю страницу в блок, делаем его флекс-контейнером, внутрь вкладываем хэдер, мейн и футер. Родителю задаём flex-direction: column чтобы блоки встали друг под другом, а не в ряд, и min-height: 100vh, чтобы он занимал как минимум всю высоту экрана. Мейну задаём flex-grow: 1, и вуаля! Центральный блок страницы будет всегда растягиваться на всё доступное свободное пространство. Из-за этого футер всегда будет прижиматься к нижнему краю страницы. При этом, если контента в мейне будет больше чем на один экран, то он растянется и подстроится, ничего не сломается.

      Способ 2: Grid Layout

      Тег &ltbody&gt содержит три элемента: шапку, область контента и подвал. Стили требуются только для &ltbody&gt:

       body

      Т.е. &ltbody&gt устанавливаем минимальное отображение высотой в один экран, отображаем элементы внутри контейнера как сетку, задаём параметры ширины у элементов внутри контейнера. Всё, это весь основной код. Дополнительно сбрасываем стандартный маржин и устанавливаем box-sizing: border-box — это позволит избежать появления вертикального скролла, когда элементам заданы бордеры (хотя бы при этом высота содержимого помещается на экране и необходимости в вертикальном скролле нет) Посмотреть демо

      Как отцентровать элемент по горизонтали (назвать хотя бы три способа)?

      Способ 1

      • Родителя делаем флекс-контейнером.
      • Задаём ему выравнивание по основной оси по центру justify-content: center.

      Способ 2

      Ограничив ширину блочного элемента, можно очень просто выровнять его по центру экрана. Для этого пропишем внешний отступ (margin) со значениями 0 auto, где 0 отвечает за отступы сверху и снизу, а ключевое слово auto — за боковые отступы. Именно таким образом принято выравнивать контент сайта по центру окна браузера.

      Способ 3

      • внешнему блоку: text-align:center;
        • внутреннему блоку:
        • max-width: 100px;
        • display: inline-block (чтобы стало работать свойство text-align у родителя)

        Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis

        Как отцентровать элемент по вертикали (назвать хотя бы три способа)?

        Способ 1

        • Родителя делаем флекс-контейнером.
        • Задаём ему выравнивание по поперечной оси по центру align-items: center.

        Способ 2

          Этот способ работает, только если известна высота внутреннего блока, т.к. ему нужно задавать отрицательный верхний маржин, равный половине его высоты
        • родителю задать position: relative
          • внутреннему элементу:
          • position: absolute
          • top: 50%
          • margin-top: минус половина высоты внутреннего элемента

          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis saepe delectus totam rerum animi temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis saepe delectus totam rerum animi temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis saepe delectus totam rerum animi temporibus harum.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis

          Способ 3

            Этот способ работает, только если во внешнем блоке нет текста, т.к. ему нужно задать line-leight, равный его высоте. Соответственно, высота внешнего блока должна быть известна
          • внешнему блоку: height: 300px;line-height: 300px;
            • внутреннему блоку
            • line-height: 1.25 (вернуть стандартный line-height)
            • display: inline-block (чтобы стало работать свойство vertical-align)
            • vertical-align: middle(для вертикального выравнивания)

            Fuga, voluptatum dolores a tenetur, fugiat dignissimos ex, nihil libero sit assumenda debitis reiciendis nobis

            Что такое media-queries

            Директива, которая помогает применять разные стили для разных параметров экрана — ширины, высоты, ориентации и даже типа устройства.

            Чем отличаются responsive, adaptive, liquid

            Responsive: характеризуется наличием определенных макетов для различных разрешений. Внутри каждого макета дизайн является плавным и меняет ширину элементов относительно изменяющегося размера окна. Вы можете думать о Responsive как о серии макетов Liquid.

            Adaptive: характерно наличие определенных макетов для разных разрешений. В каждом макете изменение размера окна не приводит к изменению макета. Вы можете думать об Adaptive как о серии Static макетов.

            Liquid: характеризуется масштабированием ширины частей дизайна относительно окна. Он имеет тенденцию выходить из строя, когда окно намного меньше или намного больше, чем оно было изначально спроектировано.

            Static: это традиционный веб-сайт: один дизайн находится в центре страницы и требует горизонтальной прокрутки, если окно слишком маленькое для него. Сайты M dot являются традиционным ответом на это, предоставляя полностью отдельный сайт для более низкого разрешения — и всю работу по созданию отдельного сайта.

            Какие есть типы селекторов (по тегу, по классу и далее)?

            • по тегу: div
            • по классу: .class-name
            • по id: #id
            • универсальный: *
            • по атрибуту:
            • по точному совпадению со значением атрибута: [attr=value]
            • по точному совпадению со значением атрибута, если в значении атрибута есть пробелы или знаки, отличные от цифр и букв: [attr=»value»]
            • выбирает все элементы, значение атрибута attr это перечень слов, разделённых пробелом, и среди этих слов есть такое, чьё значение равно value (т.е. если значение атрибута состоит из нескольких слов, то можно искать по одному из них): [attr~=value]
            • выберет все элементы, значение атрибута attr которых либо в точности равно value, либо начинается с value, за которым следует символ дефиса -: [attr|=value]
            • выберет все элементы, значение атрибута attr которых начинается с value: [attr^=value]
            • выберет все элементы, значение атрибута attr которых оканчивается на value: [attr$=value]
            • выберет все элементы, атрибут attr которых содержит в себе значение: [attr*=value]
            • селектор с псевдоэлементом: .class-name::after
            • селектор с псевдоклассом: .class-name::checked
            • селектор с фильтром по месту среди соседей: .class-name:фильтр . Возможные фильтры:
            :first-child – первый потомок своего родителя. :last-child – последний потомок своего родителя. :only-child – единственный потомок своего родителя, соседних элементов нет. :nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1. :nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число. Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные. :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные. :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее. Есть аналогичные псевдоклассы, которые учитывают не всех соседей, а только с тем же тегом: :first-of-type :last-of-type :only-of-type :nth-of-type :nth-last-of-type Они имеют в точности тот же смысл, что и обычные :first-child, :last-child и так далее, но во время подсчёта игнорируют элементы с другими тегами, чем тот, к которому применяется фильтр.
              Комбинации селекторов
            • по тегу div и классу class-name: div.class-name
            • по двум классам на одном и том же DOM-элементе class-name-1 и class-name-2 (пишутся слитно): .class-name-1.class-name-2
            • по двум классам на элементе-родителе и элементе прямом потомке class-parent и class-child (пишутся через пробел): .class-parent>class-child
            • по двум классам на элементе-родителе и элементе потомке любого уровня class-parent и class-descendant (пишутся через пробел): .class-parent class-descendant
            • по двум классам — на элементе и элементе непосредственном соседе слева class-parent и class-neighbor (элемент справа от + должен следовать в HTML сразу за элементом слева от +): .class-parent+class-neighbor
            • по двум классам — на элементе и элементе любом соседе левее class-parent и class-neighbor (Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~. При этом оба селектора должны иметь одного родителя и находиться на одном уровне вложенности. В HTML правый селектор должен идти после левого селектора): .class-parent~class-neighbor

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

              Приоритет селекторов:
            • 1. Инлайновые стили
            • 2. Селекторы по идентификатору
            • 3. Селекторы по классу, селекторы по атрибуту и селекторы с псевдоклассами
            • 4. Селекторы по тегу, селекторы с псевдоэлементами
            • Комбинаторы +, >, ~, универсальный селектор * и псевдокласс not() веса не имеют

            Ключевое слово !important отменяет правила приоритета

              Отношения селекторов:
            • div p – элементы p, являющиеся потомками div
            • div > p – только непосредственные потомки
            • div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div
            • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть)

            Работа с input: подборка полезных решений на HTML и CSS

            В рамках работы над полями ввода (input) существуют не всегда очевидные и, как правило, редко используемые CSS-приёмы и HTML-атрибуты, позволяющие без использования JavaScript преобразовать внешний вид элементов формы и позаботиться об их юзабилити. Вниманию читателя представляется небольшая подборка таких «фишек» — как уже давно применяемых, так и относительно новых, ещё не поддерживаемых всеми браузерами.

            Не смотря на кажущуюся тривиальность, описываемые ниже решения далеко не всегда применяются в процессе создания различных форм ввода на сайте. Список включает в себя наиболее необычный по мнению автора CSS-код, решающий разрозненные задачи — от изменения цвета каретки до затенения символов в поле.

            Стиль выделения ошибок

            Стандартное уведомление об ошибках в словах, введенных в поле ввода, представляет собой волнистое подчеркивание. CSS4 позволит установить иной способ выделения орфографических и грамматических ошибок — посредством новых псевдоэлементов — ::spelling-error и ::grammar-error . На текущий момент изменить оформление ошибок невозможно, так как эти псевдоэлементы не поддерживаются браузерами, однако их появление — лишь вопрос времени.

            ::grammar-error < color: inherit; background-color: #c6fbcc; >::spelling-error

            Указанные селекторы будут ограничены следующим набор свойств: color , background-color , cursor , caret-color , outline , text-decoration , text-shadow и text-emphasis .

            Стиль выделения текста

            В отличие от предыдущих псевдоэлементов из CSS4 ::selection поддерживается большинством браузеров и представляет собой способ стилизации выделяемого пользователем содержимого как внутри отдельного поля ввода, так и во всём документе.

            input::-moz-selection < color: gold; background: red; >input::selection

            Для ::selection есть пара нюансов, относящихся не только к input :

            • Браузеры на движке Webkit добавляют прозрачность к цвету, указанному в свойствах color и background-color, в результате чего фактический цвет выделения не соответствует заданному в CSS, поэтому их значение следует преобразовывать в формат rgba() с альфа-каналом 0.996 (255/256). При этом манипуляции со свойством opacity не приносят никакого эффекта;
            • Firefox не применяет стиль для картинок, поэтому они всегда выделяются стандартной синей заливкой.

            С учетом особенностей Webkit цвета при выделении рекомендуется задавать следующим образом:

            input::-moz-selection < background-color: red; /* для Firefox допускается прямое указание цвета */ color: white; >input::selection < background-color: rgba(255,0,0,.996); /* для Webkit цвета следует преобразовать в rgb(a) */ color: rgba(255,255,255,.996); >

            Пользовательское изменение габаритов поля ввода настраивается благодаря свойству resize , применяемому также ко всем элементам со значением overflow отличным от visible. Вместе с его указанием для элемента рекомендуется также добавлять минимальную и максимальную ширину и высоту, чтобы избежать нежелательных смещений макета сайта:

            Добавление эллипсиса

            Когда ширина текстового содержимого обычного input type=»text» больше его фактической ширины, текст по умолчанию обрезается по правому краю и появляется возможность горизонтальной прокрутки. Чтобы сделать обрезку текста визуально привлекательнее через многоточие (эллипсис), следует применить text-overflow :

            input[type="text"]

            Удаление лишних элементов внутри полей в IE

            Начиная с версии 10 в Internet Explorer такие типы полей как text или password по умолчанию содержат внутри себя дополнительные элементы, вставляемые браузером для улучшения юзабилити, — иконку очистки поля (крестик) и отображения пароля (глаз). Они легко удаляются благодаря соответствующим псевдоэлементам:

            /* удаление иконки очистки поля в IE */ input[type="text"]::-ms-clear < display: none; >/* удаление иконки отображения пароля в IE */ input[type="password"]::-ms-reveal

            Удаление желтого фона при автозаполнении полей

            В Webkit после автозаполнения (как правило, форм с логином и паролем) поля приобретают желтый фон и черный цвет текста, которые добавляются непосредственно стилями браузера:

            input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill

            Переопределить данные правила невозможно, поэтому в качестве решения по удалению фона и указанию другого цвета текста предлагается сочетание свойств box-shadow и -webkit-text-fill-color :

            input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active

            Однако это решение не сработает, если у поля изначально задано фоновое изображение, градиент или полностью прозрачный фон и их необходимо сохранить. В подобной ситуации следует воспользоваться анимацией:

            input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active < -webkit-animation: autofill 0s forwards; >@-webkit-keyframes autofill < 100% < background: transparent; color: inherit; >>

            Удаление стрелки в поле с datalist

            При использовании атрибута list (подробнее рассмотрен ниже) в браузерах Webkit к input добавляется иконка в виде стрелки, указывающая на возможность выбора значений из выпадающего списка. За отображение иконки отвечает специальный псевдоэлемент, который может быть скрыт:

            input[list]::-webkit-calendar-picker-indicator

            Увеличение затенённых символов пароля

            Как известно, вводимые в input type=»password» данные затеняются другими символами (как правило, маской служит астериск или черный круг). В Webkit размер этих символов значительно меньше, чем в остальных браузерах. Для их увеличения рекомендуется использовать для поля с паролем шрифт более жирного начертания. Из безопасных шрифтов на эту роль хорошо подходит Verdana, а так как изменения необходимы только для Webkit, селектор можно обернуть в специфический @media :

            @media screen and (-webkit-min-device-pixel-ratio:0) < input[type="password"] < font-family: Verdana, Geneva, sans-serif; letter-spacing: -.75px; >>

            Затенение символов в поле ввода

            Если для поля, отличного от типа password, требуется создать маску, т. е. затенить вводимые символы, стоит прибегнуть к свойству text-security . Оно принимает значения circle , disc , none или square , но, к сожалению, на сегодняшний день доступно только для Webkit с соответствующим префиксом:

            input[type="tel"] < -webkit-text-security: circle; /* эмуляция input[type="password"] */ >

            Подобное затенение может понадобиться, например, для ввода номера телефона, пин-кода и прочих важных данных, которые пользователь предпочел бы скрыть от посторонних глаз.

            Существует кроссбраузерная альтернатива text-security, предполагающая замету шрифта в поле на другой шрифт, содержащий лишь три вышеназванных символа. Существенный недостаток решения в том, что оно не станет работать, если пользователь запретит подключение специфичных шрифтов с внешних ресурсов.

            Полезные HTML-атрибуты

            Среди множества атрибутов input следует подробнее остановиться на autofocus , inputmode , autocapitalize и list , основной целью которых служит улучшение юзабилити форм. Они не так популярны среди прочих, а их функции в отдельных случаях заменяются JS-кодом.

            Стоит так же отметить, что несмотря на все атрибуты и способы стилизации, возможности стандартного текстового поля сильно ограничены. Если требуется создать многофункциональную область ввода аналогичную тем, что используются в месседжерах и социальных сетях, например, input со вставкой emoji, следует прибегнуть к помощи HTML5-атрибута contenteditable.

            Автофокус на элементе формы

            Атрибут autofocus позволяет заранее сфокусироваться на элементе формы, что в определенных ситуациях является прекрасной альтернативой методу HTMLElement.focus() в JS:

            Предопределение формата вводимых в поле данных

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

            «Некоторые устройства, в частности с виртуальными клавиатурами, могут предоставлять пользователю несколько методов ввода. Например, при вводе номера кредитной карты пользователь захочет видеть только клавиши для цифр 0−9, тогда как при вводе имени предпочтительнее работать с полем, которое автоматически начинает каждое слово с заглавной буквы». Спецификация HTML

            Для этих целей существует атрибут inputmode , сигнализирующий браузеру о том, клавиатуру какого именно формата использовать при вводе данных. Несмотря на большую полезность, из всех браузеров его полноценно поддерживает (включая элементы с contenteditable ) только Google Chrome самых свежих версий, а Opera и Firefox — через флаги.

            Атрибут inputmode применяется на input с типами text , password , email или url и согласно спецификации содержит следующие возможные значения:

            • none — запрет на отображение клавиатуры;
            • text — текст, соответствующий языку пользователя;
            • tel — телефонный формат, содержащий цифры 0−9, знак решётки и астериска, — аналог input type=»tel» ;
            • url — формат URL, где присутствуют слеш, точка и элементы автозаполнения вроде «www.» или «.com», — аналог input type=»url» ;
            • email — формат для электронной почты с наличием символа «собака» и точки — аналог input type=»email» ;
            • numeric — только цифровая клавиатура — аналог input type=»number» ;
            • decimal — цифровая клавиатура, адаптированная для ввода дробных значений с точкой или запятой;
            • search — клавиатура, оптимизированная для поиска и, как правило, содержащая соответствующую иконку ввода.

            Кроме вышеперечисленных значений браузеры так же принимают:

            • verbatim — дословный ввод букв и цифр, при котором, как правило, не применяется автокоррекция введённых данных, что полезно для имён пользователей или паролей;
            • latin — латинский алфавит, как правило, с предикативным вводом, служащий для взаимодействия между пользователем и компьютером (например, поиск данных);
            • latin-name — latin, но для ввода имён;
            • latin-prose — latin, предназначенный для взаимодействия пользователя с другими пользователями и поэтому содержащий более широкий набор возможностей ввода (например, встроенные смайлы);
            • full-width-latin — latin-prose с добавлением дополнительных пользовательских языков;
            • kana и katakana — служат для ввода текста на японском языке;

            Для большей «пуленепробиваемости» атрибут inputmode рекомендуется применять вместе с соответствующим type , который должен отражать семантически верный тип данных, и, если необходимо, pattern , являющийся дополнительной подсказкой браузеру о том, какие данные следует считать верными:

            Перевод вводимых данных в верхний регистр букв

            Атрибут autocapitalize позволяет выполнять для виртуальной клавиатуры автоматический перевод данных поля в верхний регистр. Он применяется для textarea , а также для полей с типами text или search и может иметь следующие значения:

            • off или none — перевод в верхний регистр не осуществляется (по умолчанию);
            • characters — для символов (артикулы, различные коды);
            • words — для слов (имена, адреса, названия организаций);
            • sentences — для предложений (полезно для textarea , где контент должен представляться как абзац текста);

            Например, подобным образом может выглядеть область ввода для контента, который разработчик хочет видеть оформленным как абзац:

            Стоит отметить, что как и inputmode , этот атрибут не будет оказывать на данные никакого эффекта в desktop-версиях. Информации о поддержке мобильными браузерами autocapitalize крайне мало, однако по публикациям на официальных сайтах следует, что атрибут работает как минимум в Safari и Google Chrome.

            Добавление готовых вариантов для ввода

            Юзабилити полей можно улучшить, если предложить пользователю выбрать заданное значение из списка готовых через атрибут list и дополняющий его элемент datalist . Отличие от традиционного select заключается в том, что поле доступно для редактирования и ввода любых значений, а предлагаемые варианты — элементы option — показываются либо по желанию пользователя, либо во время ввода при условии частичного совпадения по первым (и далее) символам. Это отличное решение в тех случаях, когда вводимые данные можно предугадать засчёт ограниченного количества вариантов.

            Для добавления в поле доступных опций в его атрибуте codelist указывается идентификатор списка, которым, в свою очередь, должен обладать datalist :

            Viewport единицы в CSS

            # css# viewport единицы

            Стас Багрецов

            9 апреля 2020 г.

            В этой статье вы узнаете про единицы вьюпорта в CSS и варианты их применения.

            Viewport единицы уже существуют несколько лет и со временем я вижу рост их применения другими разработчиками. Их полезность заключается в том, что они дают нам возможность выставлять размеры гибким и динамическим образом, без прямого использования JavaScript. Также, для них легко сделать фоллбэк в случае отсутствия поддержки браузером.

            Интро

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

            Viewport единицы это vw , vh , vmin и vmax .

            Viewport ширина

            Единица vw представляет собой процентное измерение ширины корневого элемента. Один vw равен 1% ширины вьюпорта.

            Тут у нас есть элемент с таким CSS:

            .element  width: 50vw; >

            Когда ширина вьюпорта равна 500px , то 50vw будут высчитаны таким образом:

            width = 500*50% = 250px

            Viewport высота

            Единица vh представляет собой процентное измерение высоты корневого элемента. Один vh равен 1% высоты вьюпорта.

            У нас есть элемент с таким CSS:

            .element  height: 50vh; >

            Если высота вьюпорта равна 290px , то 70vh будет высчитано следующим образом:

            height = 290*70% = 202px

            Вот и всё! Теперь давайте взглянем на другие единицы.

            Vmin

            Эта единица является минимумом ширины или высоты вьюпорта. Если ширина вьюпорта больше его высоты, то значение единицы будет высчитано, основываясь на высоте.

            Давайте посмотрим на пример ниже.

            У нас есть мобильный телефон в лэндскейп режиме и у элемента на странице есть такая единица как vmin . В этом случае, значение будет высчитано по высоте вьюпорта, так как оно меньше ширины.

            .element  padding-top: 10vmin; padding-bottom: 10vmin; >

            Вот как она будет считаться:

            Как вы уже могли предположить, результат будет считаться таким образом:

            padding-top = (10% of height) = 10% * 164 = 16.4px padding-bottom = (10% of height) = 10% * 164 = 16.4px

            Vmax

            Это прямая противоположность vmin . Значение считается основываясь на максимальной ширине и высоте.

            Давайте посмотрим на пример:

            .element  padding-top: 10vmax; padding-bottom: 10vmax; >

            Результат бы был высчитан таким образом:

            padding-top = (10% of width) = 10% * 350 = 35px padding-bottom = (10% of width) = 10% * 350 = px

            Как viewport единицы отличаются от процентов?

            Они берут за основу корневой элемент страницы, в то время как проценты основаны на размере своего контейнера. Поэтому они и отличаются друг от друга и каждый имеет свойственные себе примеры использования.

            Примеры использования viewport единиц

            В следующих секциях мы посмотрим на некоторые примеры использования единиц viewport и на то, как их применять в ваших рабочих проектах.

            Размер шрифта

            Единицы вьюпорта идеальны для адаптивной типографики. Для примера, мы можем использовать следующий код для заголовка статьи:

            .title  font-size: 5vw; >

            Размер заголовка будет увеличиваться или уменьшаться в зависимости от ширины вьюпорта. Это как будто бы мы выдали размеру шрифта 5% ширины страницы. Однако, как бы не хотелось, а надо протестировать и смотрим, что получается.

            Обратите внимание, что шрифт стал очень мелким при мобильных размерах, это очень плохо в плане доступности и UX. Насколько я знаю, минимальный размер шрифта на мобильных устройствах не должен быть ниже 14px . А там у нас выходит уже ниже 10px .

            Чтобы решить эту проблему, нам надо дать заголовку минимальный размер шрифта, который не может быть меньше положенной нормы. И тут CSS calc() спешит на помощь!

            .title  font-size: calc(14px + 2vw); >

            У функции calc() будет основное значение и оно добавит к нему 2vw . Учитывая это, размер шрифта точно не будет слишком маленьким.

            Ещё стоит рассмотреть то, как себя будет вести размер шрифта на больших экранах, к примеру на 27” аймаках. Что будет? Ну вы уже наверное предположили. Размер шрифта бахнет аж в 95px , что само по себе уже кошмар. Чтобы предохраниться от этой ситуации мы можем использовать медиа запросы на определённых брейкпоинтах и менять размеры шрифтов.

            @media (min-width: 1800px)  .title  font-size: 40px; > >

            Сбрасывая font-size мы можем быть уверены в том, что размер шрифта не будет слишком большим. Тут возможно вам понадобится несколько медиа запросов, но это сугубо ваше личное дело когда и как их использовать в контексте проекта.

            Полноэкранные секции

            Иногда нам надо, чтобы секция забирала 100% высоты виюпорта. Это так называемые полноэкранные секции. Для их создания мы можем использовать вьюпорт единицу высоты.

            .section  height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; >

            Добавив height: 100vh , мы можем точно убедиться в том, высота секции будет в 100% высоту вьюпорта. Также, тут я добавил немного флексбокса, чтобы отцентровать контент вертикально и горизонтально.

            Прилипающий футер

            На больших экранах вы могли уже обратить внимание на то, что футер не прилипает к концу страницы. Ну и это нормально. Это даже не рассматривается как плохая практика. Однако, тут у нас есть пространство для улучшений. Давайте рассмотрим следующий кейс, в котором и происходит эта ошибка.

            Чтобы её решить, нам нужно отдать основному контенту высоту, равную разнице между высотой вьюпорта и суммой хедера и футера. Динамически это довольно хитрая операция, но с помощью единиц вьюпорта всё становится довольно быстро и понятно.

            Первое решение: calc и единицы вьюпорта

            Если высота хедера и футера фиксированны, то их можно совместить с помощью функции calc() :

            header, footer  height: 70px; > main  height: calc(100vh - 70px - 70px); >

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

            Второе решение: Flexbox и вьюпорт единицы (рекомендуемое)

            Добавляя 100vh как высоту для body элемента, мы можем использовать флексы для того, чтобы основной контент занимал всё оставшееся место.

            body  min-height: 100vh; display: flex flex-direction: column;  main  flex-grow: 1; >

            С учетом этого, наша проблема решена и у нас есть прилипающий футер вне зависимости от длины контента.

            Адаптивные элементы

            Занимаясь подготовкой материала я наткнулся на эту статью и она мне реально понравилась. Так что я возьму пример использования оттуда и объясню его своим способом.

            Предположим, что у нас есть портфолио для того, чтобы показать свои адаптивные работы и у нас имеется три типа устройства (мобильные, планшеты и ноутбук). В каждом устройстве есть по изображению. Суть в том, чтобы сделать этот контент 100% отзывчивым на CSS.

            Используя гриды и единицы вьюпорта, мы можем сделать это адаптивным и динамическим.

            "wrapper"> 
            "device laptop">
                          
            "device mobile">
                          
            "device tablet">

            Обратите внимание, что вьюпорт единицы используются в grid-* свойствах. Они также используются для border , border-radius и других свойств. Всё это приведет к флюидному дизайну.

            .wrapper  display: grid; grid-template-columns: repeat(20, 5vw); grid-auto-rows: 6vw; > .mobile  position: relative; z-index: 1; grid-column: 2 / span 3; grid-row: 3 / span 5; > .tablet  position: relative; z-index: 1; grid-column: 13 / span 7; grid-row: 4 / span 4; border-bottom: 1vw solid #a9B9dd; border-right: solid 3vw #a9B9dd; > .laptop  position: relative; grid-column: 3/span 13; grid-row: 2 / span 8; > .laptop:after  content:""; position:absolute; bottom: -3vw; left: -5.5vw; right: -5.5vw; height: 3vw; background-color: #a9B9dd; border-radius: 0 0 1vw 1vw; >

            Выходим за пределы контейнера

            Я обратил внимание на случай, который больше всего подходит для редакторских шаблонов. А именно когда дочерний элемент забирает 100% ширины вьюпорта, хотя его родитель ограничен в ней. Давайте рассмотрим пример ниже:

            Чтобы достигнуть такого же эффекта, мы можем использовать вьюпорт единицы и свойства позиционирования. Вот наш CSS:

            .break-out  width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; >

            Давайте разберем всё по полочкам и поймём как это работает.

            Добавляем width: 100vw

            Самый важный шаг, который даст изображению ширину равную 100% вьюпорта.

            Добавляем margin-left: -50vw

            Чтобы отцентровать изображение, нам понадобится выдать отрицательный маргин с половиной ширины вьюпорта.

            Добавляем left: 50%

            И наконец, мы отодвинем изображение в правую сторону со значением 50% от ширины его родителя.

            Вертикальный и горизонтальный спейсинг

            Ещё один интересный пример, а именно использование вьюпорт единиц для спейсинга между элементами. Его можно использовать с таким значениями как margin , top , bottom и grid-gap . Применяя его, спейсинг будет основываться на ширине вьюпорта и его высоте, что может быть крайне полезным для создания динамических шаблонов.

            Модалка

            В случае с модалками нам надо отталкивать их с самого верха вьюпорта. Зачастую я делал это с помощью свойства top и процентов с пикселями. Однако, с единицами вьюпорта, мы можем добавить спейсинг, который может меняться, основываясь на высоте самого вьюпорта.

            .modal-body  top: 20vh; >

            Посмотрите это видео, чтобы посмотреть на результат.

            Шапка

            Шапка это секция, которая показывает нам общую картину на странице или сайте. Часто там есть заголовок и описание, и среди этого всего есть фиксированная высота и падинги для верха и подвала страницы. Тут нам интересны падинги.

            Для примера, вот как выглядит CSS:

            .page-header  padding-top: 1rem; padding-bottom: 1rem; > @media (min-width: 800px)  .page-header  padding-top: 4rem; padding-bottom: 4rem; > >

            Вертикальный паддинг довольно мал на мобильных устройствах и он становится больше на больших вьюпортах. Как насчет использования единиц вьюпорта? Давайте посмотрим на это.

            .page-header  padding-top: 10vh; padding-bottom: 10vh; > .page-header h2  margin-bottom: 1.5vh; >

            Я использовал vh для паддинга в шапке и маргина под заголовком. Обратите внимание как меняется спейсинг!

            Сетка из нескольких элементов

            Ещё один пример динамического спейсинга можно применить в сетке из нескольких элементов. Тут может быть всё: статьи, секции контента, услуги и тп. В нашем примере мы посмотрим на то, как можно использовать вьюпорт единицы для сетки из статей.

            Используя их в grid-gap , мы можем получить желаемый результат. Обратите внимание, что я применял функцию calc() . Суть использования calc() в том, чтобы у нас уже был базис для вертикального и горизонтального промежутков.

            .wrapper  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: calc(14px + 1vh) calc(14px + 0.5vw); >

            Vmin и Vmax — примеры использования

            Изучая примеры использования для этих двух единиц, я не нашёл ничего, только этот пример из CSS-tricks.

            Этот пример показывает возможность работы с верхним и нижним паддингом в шапке элемента. Паддинг зачастую слишком сокращен, когда вьюпорт довольно мал. Используя vmin , мы можем иметь флюидные верхние и нижние паддинги, которые основываются на вьюпорте с маленькими размерами.

            .page-header  padding: 10vmin 1rem; >

            Вертикальные медиа запросы и единицы вьюпорта

            Несколько лет назад я написал статью о вертикальных медиа запросах.

            Сейчас я хочу пролить свет на эту тему, так как она имеет прямое отношение к статье, которую вы сейчас читаете.

            Секции на всю высоту экрана в Landscape режиме

            Используя вертикальные медиа запросы мы можем проверять находится ли девайс пользователя в лэндскэйп режиме. Если так, то тогда не будет смысла иметь секцию, занимающую всю высоту вьюпорта, применяя height: 100vh .

            Чтобы решить эту проблему, мы можем сделать следующее.

            @media (min-height: 400px)  .section  height: 100vh; > >

            Или мы можем использовать orientation в медиа запросах:

            @media (orientation: landscape)  .section  height: 100vh; > >

            Соотношение сторон

            Мы можем использовать vh для создания адаптивных элементов, которые поддерживают актуальное состояние соотношения сторон вне зависимости от размера вьюпорта. Давайте на это посмотрим.

            Нам нужно решить, какое соотношение сторон нам нужно. Для примера, 9/16.

            section  /* 9/16 * 100 */ height: 56.25vw; >

            Используем единицы вьюпорта для графических элементов

            Я не уверен правильно ли я назвал это, но надеюсь, что вы поймете суть следующих графических примеров.

            Довольно популярный подход с верхним бордером

            Вы знали, что верхний бордер один из самых используемых элементов на веб сайтах к сегодняшнему дню? В основном его цвет, это такой же как и основной цвет страницы.

            Давайте сделаем изначальным значением бордера 3px . Как конвертировать это фиксированное значение в вьюпорт единицу? Вот как можно это посчитать:

            vw = (Pixel Value / Viewport width) * 100

            Ширина вьюпорта используется для расчета отношения между пикселями и vw единицей.

            Для примера, вот как добавлен верхний бордер:

            .header  border-top: 4px solid #8f7ebc; >

            В моём случае ширина вьюпорта равна 1440.

            vw = (4 / 1440) * 100 = 0.277

            И вот такой CSS мы получим:

            .header  border-top: 0.277vw solid #8f7ebc; >

            Даже лучше, мы можем использовать основное значение в пикселях и единицу вьюпорта.

            .header  border-top: calc(2px + 0.138vw) solid $color-main; >

            Нумерация секций

            Для элементов секций с каунтером или иконкой, мы можем тоже применить единицы вьюпорта. Посмотрите на макет ниже:

            /** 1. Используем гибкое значение для flex, width и height свойств. 2. line-height используется для центровки текста вертикально. 3. Размер шрифта. 4. Расстояние между кругом и текстом **/ .point:before  flex: 0 0 calc(24px + 4vw); /* [1] */ width: calc(24px + 4vw); /* [1] */ height: calc(24px + 4vw); /* [1] */ line-height: calc(24px + 4vw); /* [2] */ font-size: calc(14px + 1vw); /* [3] */ margin-right: calc(10px + 0.5vw); /* [4] */ >

            Viewport Units Watcher

            Я сделал инструмент, которые помогает мне в проверке высчитанного значения элементов у единиц вьюпорта. Посмотрите ниже:

            Я добавил имя класса и свойство для каждого элемента и при смене размеров вьюпорта, значение будут динамически обновляться. Это куда лучше, чем использование DevTools и высчитывание каждого отдельного элемента.

            Проблема со скроллом на мобильных устройствах

            Есть распространенная проблема на мобильных устройствах, которая касается скролла, даже если используется 100vh . Проблема тут в том, что адресная строка находится во вьюхе. Луис Хобрегс написал статью об этом и показал простое и легкое её решение.

            .my-element  height: 100vh; height: calc(var(--vh, 1vh) * 100); >
            let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `$vh>px`);

            Использование 100vw как антипаттерн

            Применяя 100vw для того, чтобы выдать элементу полную ширину вьюпорта, всё у вас будет отлично работать на Mac OS, так как вертикальный скроллбар там спрятан по-дефолту. Как результат, ширина скроллбара добавлена полной ширине.

            Однако, пользователи Windows обратят внимание на то, что появился горизонтальный скроллинг. Почему? Потому что ширина скроллбара была добавлена ширине экрана. Скажем, что вы добавили такой CSS:

            .element  width: 100vw; >

            На Windows, высчитанная ширина .element будет равна 100vw + 8.5px , где 8.5px это ширина вертикального скроллбара.

            Насколько я знаю, то пока что нет конкретного решения этой проблемы без использования JavaScript, применение которого тут я не советую. Лучше избегать 100vw и использовать альтернативу. Для примера, мы можем применить CSS Grid, чтобы элемент вышел за пределы контейнера, посмотрите на решение в этой статье.

            Спасибо Крису Моргану и Килиану Валкхофу за то, что предупредили меня об этой проблеме.

            Доступность это важно

            Используя единицы вьюпорта довольно часто на вашем проекте, например для создание всего макета, доступность становится очень важной. Когда шаблон зумится ближе или отдаляется, элементы с единицами вьюпорат не будут увеличиваться или уменьшаться как вы ожидали. Это станет проблемой для пользователей, которые полагались на зум в браузере.

            По словам Сары Суейдан, использование единиц вьюпорта для размеров шрифтов это плохая практика в плане доступности. Лучше комбинировать их с фиксированными значениями, как описано ниже:

            .title  font-size: calc(16px + .3vw); >

            Даже лучше, мы можем использовать CSS единицы em и rem , вместо px . Таким образом у нас будет больше контроля при изменении размера шрифта.

            .title  font-size: calc(1rem + .3vw); >

            И это будет хорошо. Пожалуйста, убедитесь в том, что использование единиц вьюпорта подходит для того, что вы делаете и не забывайте хорошо тестировать.

            Полезные инструменты

            Я нашёл этот полезный конвертер из px в vw , который может помочь вам в вашем проекте.

            У вас есть какие-нибудь полезные инструменты? Дайте мне знать.

            Похожие публикации:
            1. Где находится php ini
            2. Как вставить фон css
            3. Какой размер сцепления на заз вида
            4. Сколько весит lada vesta седан

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *