Верстка css: Каскадность в CSS | Основы современной верстки

Каскадность в CSS | Основы современной верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

Что такое каскадность? Представьте себе каскад водопадов. В них вода перетекает из одного водопада в другой и так до тех пор, пока это все не уйдет в общий бассейн.

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

Возможно такое описание достаточно сложное, но давайте посмотрим на примере. Создадим параграф с двумя классами: text-bold и text-dark. Первый класс будет отвечать за жирное начертание текста, а второй за установку темного цвета шрифта. Также добавим селектор по тегу и укажем размер шрифта 24 пикселя.

<p>
  Какой-то очень интересный текст об интересной вещи. Очень интересно.
</p>

В CSS файле укажем следующие стили:

p {
  font-size: 24px;
}
.text-bold {
  font-weight: bold;
}
.text-dark {
  color: #333333;
}

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

text-bold и text-dark сложились и применились к нашему параграфу. Также текст имеет размер 24 пикселя, которые мы указали для селектора по тегу.

Итоговыми стилями для нашего параграфа будут:

 {
  color: #333333;
  font-weight: bold;
  font-size: 24px;
}

Это и есть каскадность стилей CSS. Хоть мы и использовали разные селекторы и классы для описания, но в конечном итоге они суммировались.

Приоритет селекторов

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

red и идентификатором blue. Установим соответствующие цвета для текста. Для всех же параграфов в тексте установим зеленый цвет.

p {
  color: green;
}
.red {
  color: red;
}
#blue {
  color: blue;
}

<p>Какого же цвета будет параграф?</p>

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

Как вы смогли заметить, текст параграфа будет синим. Но почему так? Может быть, дело в том, что синий цвет в CSS указан самым последним? В данном случае нет. Даже если мы переместим селектор по идентификатору в самый вверх, параграф все равно останется синим.

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

Условно можно расставить селекторы в следующем порядке по приоритету:

1. Селектор по идентификатору (#blue)
2. Селектор по классу (.red)
3. Селектор по тегу (p
   )

Где 1 — самый высокий приоритет, а 3 — самый низкий.

Разберем еще один пример:

p {
  color: blue;
  font-weight: bold;
}
.important {
  color: purple;
  font-style: italic;
}
#intro {
  color: green;
}

<p>Индейские племена Манахаттоу и Канарси.</p>

Этот текст будет наклонным, жирным и зеленым. И вот почему:

• Селектор по тегу p:
  • Добавит синий цвет
  • Добавит жирное начертание
• Селектор по классу . important:
  • Заменит синий цвет на пурпурный
  • Сделает текст курсивным
• Селектор по идентификатору #intro:
  • Заменит пурпурный цвет на зеленый

После всех таких преобразований итоговые стили для параграфа сложатся следующим образом:

 {
  color: green;
  font-weight: bold;
  font-style: italic;
}

---

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

---

Переопределение свойств

Возможно у вас возник вопрос, а что случится, если элемент будет иметь несколько классов, свойства которых противоречат друг другу? Здесь каскадность работает по принципу «Кто последний, тот и прав». Проще всего это так же посмотреть на примере:

.alert {
  color: gray;
}
.alert-error {
  color: red;
}

<p>Важное сообщение! Сообщение красного цвета</p>

Отталкиваясь от принципа каскадности, браузер вначале увидит селектор .alert и установит серый цвет текста. Далее ему встретится селектор .alert-error, который говорит установить красный цвет. И браузер просто перезапишет серый цвет на красный. Порядок классов в HTML в данном случае не играет никакой роли. Даже в таком случае

<p>Важное сообщение! Сообщение красного цвета</p>

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

.alert-error {
  color: red;
}
.alert {
  color: gray;
}

<p>Важное сообщение! Сообщение серого цвета</p>

Вес селекторов

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

Причем их месторасположение в CSS файле не имеет особого значения:

<textarea></textarea>

.form-input {
  height: 50px;
}
textarea {
  height: 200px;
}

Какой высоты будет элемент <textarea>? Правильный ответ — 50px, так как селектор по классу имеет больший приоритет, чем селектор по тегу. Но как же задать высоту в 200px и не вводить новые классы? Достаточно подставить к тегу еще и название класса:

.form-input {
  height: 50px;
}
textarea.form-input {
  height: 200px;
}

Теперь для элемента <textarea> будет установлена высота в 200px. Это произошло благодаря тому, что приоритеты «складываются» в рамках одного селектора. Для большего понимания таких сложений можно представить, что общий вес селектора определяется тремя цифрами, где:

1. Первая цифра показывает количество идентификаторов в селекторе
2. Вторая цифра показывает количество классов в селекторе
3. Третья цифра показывает количество тегов в селекторе

Может звучать сложно, но концепция простая.

Разберем прошлый пример:

<textarea></textarea>

.form-input {
  height: 50px;
}
textarea {
  height: 200px;
}

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea состоит из одного тега. Записываем единицу в третий разряд нашего числа: 001

Визуально понятно, что 010 > 001, поэтому свойства внутри такого правила имеют больший приоритет. Мы захотели это исправить и дополнили наш селектор:

.form-input {
  height: 50px;
}
textarea.form-input {
  height: 200px;
}

Теперь порядок сил во вселенной немного изменился:

• Селектор .form-input состоит из одного класса, поэтому в качестве второй цифры поставим единицу и получим: 010
• Селектор textarea.form-input состоит из одного класса и тега. Записываем единицу во второй и третий разряд нашего числа: 011

Получаем, что 010 < 011, а значит свойства внутри селектора textarea. form-input будут иметь больший приоритет.

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

---

Самостоятельная работа

Создайте файлы index.html и style.css на своем компьютере.

Внутри HTML расположите следующую запись:

<div>Какой-то текст</div>

и следующие CSS стили:

div {
  width: 500px;
  height: 500px;
  background: #333333;
}
#main {
  color: white;
  width: 750px;
}
.text-white {
  color: white;
}
.alert {
  height: 350px;
  color: gray;
}
div {
  background: blue;
}
.alert-warning {
  background: #000000;
  color: yellow;
}

Проанализируйте получившийся результат

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Потрясающая отзывчивая вёрстка с использованием CSS-областей

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

Поддержка

Области являются новой частью спецификации CSS, так что на данный момент они поддерживаются не везде, а в некоторых браузерах они находятся за флагом. Поддержка областей недавно была добавлена в iOS7 и Safari 7, также они поддерживаются Safari 6.1+. Команда Adobe составила список браузеров, поддерживающих разные новые возможности (включая области), и инструкции по их активации. Как бы то ни было, поддержка областей постоянно растёт. Полный список браузеров, которые поддерживают области и другие продвинутые возможности, можно увидеть на сайте Adobe на странице «Поддержка CSS-областей».

Введение в области

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

Чтобы использовать области, начните с создания потока с заданным названием: просто добавьте элементу с контентом свойство flow-into и присвойте ему название вашего потока в качестве значения. Затем для каждой области, которую вы хотите использовать в качестве контейнера для потока, укажите свойство flow-from с тем же названием потока в качестве значения. Содержимое первого элемента будет перетекать в остальные элементы-области. На данный момент браузеры требуют свойства с префиксом, но здесь мы используем версию без префикса:

#myContent {
    flow-into: myNamedFlow;
}
.myRegion {
    flow-from: myNamedFlow;
}

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

<div></div>
<div></div>
<div></div>
<div>…</div>

При использовании областей распределяемый контент не является дочерним по отношению к элементам-областям — мы всего лишь меняем место отображения контента. С точки зрения DOM всё остаётся в исходном состоянии, поэтому контент не наследует стили от области, в которую он помещён. Вместо этого в спецификации определён псевдоселектор ::region(), который позволяет стилизировать контент в элементах-областях. Нужно задать этот псевдоселектор в качестве селектора области, а затем передать селектор элемента в качестве аргумента, обозначая для каких элементов будет применяться стиль в пределах конкретной области:

.myRegion::region(p){
    /*стили для абзацев(p), которые распределяются между областями*/
}

Использование областей в отзывчивом дизайне

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

Области упрощают создание отзывчивого дизайна. Чтобы убедиться, что контент поместится в свой контейнер, нам больше не нужно полагаться на height: auto, прописанный для каждого элемента. Вместо этого мы можем разрешить контенту распределяться между несколькими элементами раскладки. Это означает, что контент не диктует какой должна быть вёрстка, а скорее подстраивается под задуманный дизайн. Для последней области можно использовать height: auto, чтобы быть уверенными что она расширится, чтобы вместить весь оставшийся контент. Использование этого приёма можно увидеть в примере с CodePen, размещённом ниже:

Области и события

Для управления вёрсткой и обеспечения корректного отображения контента можно использовать JavaScript-события для областей. В спецификации областей описаны события, которые можно использовать при определённых состояниях. Событие regionoversetchange запускается когда для какой-либо области меняется свойство regionOverset: это может случиться когда пользователь изменяет размеры страницы, растягивая элемент-контейнер таким образом, что контент больше не заполняет некоторые области. regionOverset может принимать значения fit, overset или empty. Значение empty указывает, что внутри области нет контента. Свойство regionOverset принимает значение overset когда последняя область в цепочке не может вместить весь оставшийся контент, при этом часть контента становится недоступна.

Значение fit указывает на то, что контент заполнил область должным образом: полностью (если это одна из областей в середине цепочки) или частично (если это последняя область в цепочке). Результат срабатывания этих событий зависит от дизайна, контента и других аспектов вёрстки. Их можно использовать чтобы динамически добавлять и удалять области, или чтобы применить класс, изменяющий расположение элементов. Ниже можно увидеть пример с CodePen.

Примечание: в некоторых реализациях вместо события regionoversetchange вызывается regionlayoutupdate согласно предыдущей версии спецификации.

Области и медиазапросы

Области задаются исключительно в CSS, что делает очень простым их использование в сочетании с медиазапросами. Кроме изменения размеров и позиционирования элементов, можно также определять какие элементы будут использоваться в качестве областей. Также можно присвоить для области display: none, и она будет полностью исключена из цепочки. Благодаря этой возможности отдельные области можно легко скрыть со страницы не беспокоясь о целостности контента. Этот приём также можно использовать для отображения абсолютно разных макетов без необходимости измененять контент.

Области и свойства разрывов

CSS-области позаимствовали свойства разрывов из спецификации по многоколоночной вёрстке (multi-column layout specification), их можно использовать для контроля разбивки контента по областям. Эти свойства можно применить для элементов в потоке, чтобы указать, что внутри них должен быть разрыв или же наоборот — чтобы его избежать. Использование значения region для break-before или break-after приведёт к принудительному разрыву перед или после соответствующего элемента. Значение avoid-region может быть использовано для break-before, break-after и break-inside чтобы избежать разрывов перед, после или внутри элемента.

Это может пригодиться если возникнет необходимость сгруппировать взаимосвязанные элементы и предотвратить разделение важных элементов. В демо ниже представлен поток изображений в правой колонке и поток длинного текста в левой. Если уменьшить ширину окна браузера, медиазапросы изменят разбивку страницы, перераспределяя изображения в более узкую одноколоночную структуру. Применение break-after: region для контейнеров с изображениями обеспечивает разрыв после каждого изображения в потоке.

Примечание: В некоторых реализациях используются не предусмотренные стандартами свойства разрывов с префиксом region; например, region-break-before или — с вендорным префиксом — -webkit-region-break-before.

Для областей с помощью медиазапросов применяется свойство break-after.

Области и единицы области просмотра

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

Однако можно использовать области для разбивки контента, сохраняя при этом переменный размер элементов при разных размерах экрана. Применение этого приёма можно увидеть в «Демо для слонов-сирот на National Geographic». На этой странице изображения и текст изменяются таким образом, чтобы сохранять высоту области просмотра. Области использованы для распределения потока контента по всем текстовым блокам, и они подстраиваются, когда пользователь уменьшает окно браузера.

Использование областей с относительными единицами. Обратите внимание как точно изображение заполняет окно. (Крупнее)

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

На вебсайте Kindle Cloud Reader можно увидеть похожий двухстраничный разворот, однако здесь для управления вёрсткой используется JavaScript. Реализация такой вёрстки с помощью JavaScript очень затратна с точки зрения усилий со стороны разработчиков, к тому же настолько неэкономичный подход к управлению DOM обычно ведёт к снижению производительности. Мы можем использовать области, чтобы сделать то же самое с помощью существующих возможностей браузера, тем самым повышая производительность сайта и уменьшая время на разработку.

Отладка

Для работы с областями будет полезно иметь инструменты для управления и отладки. В панели инструментов разработчика в Chrome можно включить инструменты отладки областей. Подробные инструкции по включению этих инструментов можно найти в статье Кристиана Кантрелла (Christian Cantrell) «Поддержка CSS-областей в Веб-инспекторе». С помощью этих инструментов вы сможете увидеть все именованные потоки в документе, найти контент и цепочку областей, привязанных к каждому проименованному потоку, и получить визуальные подсказки о том, помещается ли контент в область, основываясь на значении свойства regionOverset.

В Webkit Nightly также есть полезные визуальные подсказки: если открыть Веб-инспектор и просмотреть код для контейнера области, можно увидеть номер области и соединения между контейнерами областей, демонстрирующие поток контента.

В Webkit Nightly есть возможность просматривать код контейнеров областей, их порядок и цепочку областей

Материалы для дальнейшего чтения

Области открывают множество возможностей для разработки отзывчивого дизайна и дают уверенность, что контент будет отлично выглядеть на экранах любого размера. Один из отзывчивых сайтов, уникальная раскладка которого была создана с помощью областей — демо для компании по производству велосипедов от Adobe, созданная с использованием Edge Reflow. Подпишитесь на @adobeweb чтобы следить за последними новостями по областям и другим новинкам. Также рекомендуем просмотреть подборку от Adobe на CodePen, в которой продемонстрировано использование областей на практике; возможно, у вас возникнет желание скопировать код одного-двух примеров чтобы изучить различные варианты использования областей.

Больше информации по областям можно найти в блоге команды веб платформы от Adobe, в котором часто публикуются новости о спецификациях и их реализации. Полную информацию можно найти в Спецификации для CSS-областей, в которой описаны все вопросы, рассмотренные в этой статье, а также многие другие. Также дополнительную информацию можно найти в разделе «Области» на сайте Adobe.

Единицы CSS

❮ Предыдущая Далее ❯

---

Единицы CSS

CSS имеет несколько различных единиц измерения длины.

Многие свойства CSS принимают значения длины, например ширина , поля , отступ , размер шрифта и т. д.

Длина — это число, за которым следует единица длины, например 10px , 2em и т. д.

Пример

Установка различных значений длины, используя px (пиксели):

h2 {
  размер шрифта: 60 ​​пикселей;
}

p {
  размер шрифта: 25 пикселей;
высота строки: 50px;
}

Попробуйте сами »

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

Для некоторых свойств CSS допускается отрицательная длина.

Существует два типа единиц длины: абсолютные и относительные .

---

Абсолютные длины

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

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

Блок	Описание
см	сантиметра Попытайся
мм	миллиметра Попытайся
в	дюйма (1 дюйм = 96 пикселей = 2,54 см) Попытайся
пикселей *	пикселя (1 пиксель = 1/96 дюйма) Попытайся
пт	балла (1 балл = 1/72 от 1 дюйма) Попытайся
шт.	пика (1 шт = 12 пт) Попытайся

* Пиксели (px) относятся к устройству просмотра. Для устройств с низким разрешением 1 пиксель — это один пиксель (точка) устройства на дисплее. Для принтеров и высокого разрешения экраны 1px подразумевает несколько пикселей устройства.

---

Относительная длина

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

№

Блок	Описание
эм	Относительно размера шрифта элемента (2em означает удвоенный размер текущего шрифта)	Попробуйте
бывший	Относительно x-высоты текущего шрифта (используется редко)	Попробуйте
ч	Относительно ширины «0» (ноль)	Попробуйте
рем	Относительно размера шрифта корневого элемента	Попробуйте
ВВ	Относительно 1% ширины окна просмотра*	Попробуйте
вх	Относительно 1% высоты окна просмотра*	Попробуйте
об/мин	Относительно 1% меньшего размера области просмотра*	Попробуйте
вмакс	Относительно 1% большего размера окна просмотра*	Попробуйте
%	Относительно родительского элемента	Попробуйте

Совет: Единицы em и rem удобны для создания идеальных масштабируемая планировка!
* Viewport = размер окна браузера. Если окно просмотра 50см широкий, 1vw = 0,5см.

---

---

Поддержка браузера

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает единица длины.

Единица длины
em, ex, %, px, cm, mm, in, pt, pc	1,0	3,0	1,0	1,0	3,5
ч	27,0	9,0	1,0	7,0	20,0
рем	4,0	9,0	3,6	4.1	11,6
вх, вв	20,0	9,0	19,0	6,0	20,0
об/мин	20,0	12,0	19,0	6,0	20,0
вмакс	26,0	16,0	19,0	7,0	20,0

❮ Предыдущий Далее ❯

Современный CSS в Angular: макеты.

На этой неделе мы займемся макетами. | Эмма Тверски | Октябрь 2022 г. Дворец изящных искусств Сан-Франциско, автор @mgechev

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

На этой неделе мы займемся макетами .

Макет значительно продвинулся вперед с первых дней существования Angular. Основываясь на достижениях в собственных решениях для компоновки и прекращении поддержки IE11, команда Angular прекратит публикацию новых выпусков экспериментальной библиотеки @angular/flex-layout , начиная с v15.

@angular/flex-layout — это гибридная система компоновки JavaScript и CSS, которая остается в бета-версии в организации Angular с версии v5. За это время CSS претерпел значительные изменения, предлагая новые подходы к созданию производительных и масштабируемых макетов. В этом сообщении блога вы узнаете больше о рекомендуемых подходах к компоновке в Angular.

Двумя наиболее рекомендуемыми современными средствами компоновки CSS являются CSS Flexbox и CSS Grid.

CSS Flexbox

Flexbox — это метод одномерной компоновки, который позволяет размещать элементы в строках или столбцах. Элементы изгибаются (расширяются), чтобы заполнить дополнительное пространство, или сжимаются, чтобы поместиться в меньшие пространства.

Вы можете увидеть демонстрацию Flexbox в Angular здесь:

Flexbox в Angular

Мы рекомендуем CSS Tricks: A Complete Guide to Flexbox, чтобы начать изучение Flexbox.

В общем, Flexbox — хороший выбор для компонентов вашего приложения и небольших макетов. Макет CSS Grid предназначен для крупномасштабных макетов. Узнайте больше о компромиссах между Flexbox и CSS Grid.

CSS Grid

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

Вы можете увидеть демонстрацию CSS Grid в Angular здесь:

CSS Grid в Angular

Мы рекомендуем CSS Tricks: A Complete Guide to Grid, чтобы начать изучение Grid.

Основным принципом Angular является разделение задач. Отказываясь от flex-layout в пользу CSS, мы продолжаем направлять пользователей к более читабельному и удобному в сопровождении коду. Кроме того, 9Пакет компоновки 0010 @angular/cdk содержит легкие утилиты для создания адаптивных пользовательских интерфейсов. Эти параметры обеспечивают меньший размер полезной нагрузки и затраты времени выполнения, а также улучшают показатели производительности Lighthouse вашего сайта по сравнению с @angular/flex-layout .

С сегодняшнего дня мы будем следовать правилам устаревания Angular. Поскольку пакет @angular/flex-layout является бета-версией, Angular v15 опубликует последний выпуск @angular/flex-layout .

Пока @angular/flex-layout никогда не выходил из бета-версии, он получил более 300 тысяч загрузок в неделю. Для поддержки приложений, которые полагаются на этот пакет, мы продолжим публиковать исправления безопасности и несовместимости браузера в течение как минимум года в рамках долгосрочной поддержки (LTS) для пакета.

Выбор современной системы компоновки зависит от структуры вашего приложения. Узнайте больше о современных макетах в курсе Chrome Learn CSS.

Мы благодарим участника сообщества Angular и angular/flex-layout , соавтор Адам Плюмер, который поддерживал выпуск angular/flex-layout на протяжении многих лет. Подробнее читайте в книге Адама «Прощай, Flex Layout».

Адам вызвался написать руководства по миграции для самых популярных вариантов использования — мы хотели бы услышать, какие миграции angular/flex-layout вам нужны в этом выпуске GitHub.

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

CSS Flexbox

Flexbox больше всего похож на @angular/flex-layout , поскольку @angular/flex-layout был разработан, чтобы предоставить разработчикам эргономичный способ применения макетов Flexbox в шаблонах Angular. Следующий пример кода представляет собой карту общих свойств Flexbox и связанных свойств из @angular/flex-layout .

 дисплей: гибкий; 
 flex-direction: row // fxLayout 
 flex-wrap: wrap //fxLayout 
 box-sizing: border-box; 
 align-content: stretch, // fxLayoutAlign 
 align-items: stretch, // fxLayoutAlign 
 justify-content: flex-start, // fxLayoutAlign 

CSS Grid

Многие исследования CSS подчеркивают потенциал CSS Grid как будущее двухмерного макета. Из-за того, что современный CSS Grid новее, чем дизайн flex-layout, миграция с flex-layout на CSS Grid является более ручным процессом, позволяющим использовать преимущества связанных свойств.

Пакет компоновки @angular/cdk

Если вам нужны специальные утилиты макета в вашем коде TypeScript для работы с размером области просмотра, Angular также предоставляет пакет макета @angular/cdk.

Пакет компоновки @angular/cdk в основном предназначен для случаев, когда вам нужно создавать адаптивные взаимодействия с пользовательским интерфейсом в коде, а не обычно создавать макет приложения. Например, для больших окон просмотра вы хотите отображать всплывающее окно в виде раскрывающегося списка, прикрепленного к элементу-триггеру, но на маленьких окнах просмотра вы хотите отображать всплывающее окно в виде центрированного диалогового окна.

TailwindCSS

Tailwind CSS обеспечивает шаблонно-ориентированный подход к стилю, аналогичный @angular/flex-layout .

Tailwind CSS — это ориентированная на утилиты среда CSS, содержащая такие классы, как flex , pt-4 , text-center и rotate-90 , которые можно скомпоновать для создания любого дизайна прямо в вашей разметке. . Узнайте больше об Angular + Tailwind CSS.

Мы рекомендуем изучить все четыре современных варианта при планировании миграции.