В этой статье мы рассмотрим пять новых свойств, поступающих в CSS, взглянем на то, что они делают и как их использовать для практического использования в ваших проектах. Мы собираемся создать макет веб-сайта для страницы, которая включает в себя ленту новостей и небольшую чат-панель в углу. Для получения дополнительных трюков CSS ознакомьтесь с нашей статьей, изучающей различные примеры анимации CSS.
Для этого урока вам понадобятся Chrome 65+ или Firefox 59+. Взгляните на сопроводительное репо GitHub для пошагового кода. Мы будем использовать следующие возможности для создания лучшего опыта и решения некоторых проблем.
Модуль отображения CSS (уровень 3)
Модуль условных правил CSS (уровень 3)
CSS Overscroll (19459006) Модуль выбора CSS (уровень 4) ]
Содержание статьи
- 1 01. Настройте HTML-файл для новостной ленты
- 2 02. Стиль newsfeed
- 3 03. Исправить ошибки макета
- 4 04. Исследуйте функциональные запросы
- 5 05. Используйте «не» для более чистого результата
- 6 06. Сделав еще один шаг вперед
- 7 07. Добавить чат-бокс
- 8 08. Стиль чата
- 9 09. Scroll chaining
- 10 10. Свернуть окно чата, когда он не используется
01. Настройте HTML-файл для новостной ленты
. Сначала нам нужно настроить несколько простых, повторяющихся разметки для нашей новостной ленты. Давайте создадим .container div с неупорядоченным списком внутри. Дайте
- класс .feed затем создайте 10 списков, каждый из которых содержит div с классом .card и текстовой картой 1, Card 2 и т. Д.
Наконец, создайте еще один список между 5 и 6 с классом .nested — это будет полезно позже — и добавьте
- внутри с тремя элементами списка, используя текст карты A, Card B и т. Д.
- Карточка 1
- Карточка 2
- Карточка 3
- Карточка 4
- Карточка 5
-
- Карточка A
- Карточка B
- Карточка C
- Карточка 6
- Карточка 7
- Карточка 8
- Карточка 9
- Карточка 10
02. Стиль newsfeed
Теперь нам нужно добавить несколько быстрых стилей, чтобы это стало больше напоминать новость. Сначала мы можем дать тонкий серый цвет фона. Затем дайте .container максимальную ширину 800 пикселей и используйте маркер : 0 auto; чтобы центрировать его.
Давайте также дадим .card на белом фоне, 10px отступов и полей и, наконец, min-height 300px — это должно дать нам достаточно, чтобы сделать страницу прокручиваются. Наконец, мы покроем некоторую магию Flexbox на .feed чтобы сделать предметы очень приятными, с двумя картами в строке.
.feed {
дисплей: flex;
flex-wrap: wrap;
}
.feed li {
flex: 1 0 50%;
}
03. Исправить ошибки макета
Если вы прокрутите список вниз, вы заметите, что наши карты во вложенном списке Card A-C вызывают некоторые проблемы с компоновкой. В идеале мы хотели бы, чтобы они вливались в остальные карты, но все они слипались в одном блоке. Причина этого заключается в том, что контейнер flex, созданный с помощью отображает: flex — только делает своих непосредственных детей (т. Е. Элементы списка) в гибкие элементы.
Теперь, как правило, единственный способ исправить это — изменить разметку, но давайте притворимся, что у вас нет такой роскоши. Возможно, разметка новостной ленты создается сторонним скриптом или устаревшим кодом, который вы только пытаетесь переделать. Итак, как мы можем это исправить?
Познакомьтесь с дисплеем: содержание . Этот маленький однострочный элемент, по сути, ведет себя так, как будто его нет. Вы по-прежнему видите потомков элемента, но сам элемент не влияет на макет.
Поскольку мы притворяемся, что мы не можем изменить разметку (только для этого шага), мы можем немного сообразить это и сделать .card элементы гибких элементов и почти полностью игнорировать разметку списка.
Сначала удалите существующий класс .feed li а затем используйте дисплей: содержимое для обоих
- и
- элементы:
.feed ul,
.feed li {
отображение: содержимое;
}
Теперь вы должны видеть, что карты текут по порядку, но мы потеряли размер. Исправьте это, добавив свойство flex к .card вместо:
.card {
flex: 1 0 40%;
}
Та-да! Наши карты теперь используют чудеса Flexbox, как если бы их структурная неупорядоченная разметка списка не существовала.
В качестве побочной заметки вам может быть интересно, почему значение flex-basis установлено на 40%. Это связано с тем, что класс .card имеет маржу, которая не включена в вычисление ширины, как вы ожидали бы при использовании поля размера : border-box . Чтобы обойти это, нам просто нужно установить flex-basis достаточно высоко, чтобы вызвать обертывание в нужную точку, и Flexbox автоматически заполнит оставшееся пространство.
04. Исследуйте функциональные запросы
Хотя отображение : содержимое делает именно то, что нам нужно, оно по-прежнему находится только в рабочем статусе проекта с W3C. И в Chrome поддержка появилась только в версии 65, выпущенной в марте 2018 года. Невероятно, что Firefox поддерживался с апреля 2015 года!
Если вы отключите стиль в DevTools, вы увидите, что наши изменения немного испортили с макетом, когда дисплей: содержимое не применяется. Так что мы можем сделать по этому поводу? Время для нашей следующей новой функции — функция запросов.
Они работают так же, как медиа-запросы, но они позволяют вам запрашивать браузер — используя только CSS, если поддерживается выражение свойства и значения. Если они есть, будут использоваться стили, содержащиеся внутри запроса. Теперь переместим наш дисплей: содержимое стилей в запрос функции.
@supports (display: contents) {
.feed ul,
.feed li {
отображение: содержимое;
}
.карта {
flex: 1 0 40%;
}
}
05. Используйте «не» для более чистого результата
Обычно в этом виде прогрессивного улучшения сценарий мы будем использовать запрос для добавления новых стилей, но он также должен был бы отключить некоторые из оригинальных стилей, необходимых для резервного копирования макет.
Однако вы можете решить, что, поскольку поддержка запросов функций довольно хороша (если вы игнорируете IE), вы действительно хотите использовать запрос функции а не . Он работает так же, как и следовало ожидать, поэтому мы можем повторно применить наше оригинальное свойство flex к элементам списка, когда отображение : содержимое не поддерживается:
@supports not (display: contents) {
.feed li {
flex: 1 0 50%;
}
}
В запросе не мы можем добавить некоторые стили, чтобы элементы .nested в основном повторно применяли то, что унаследовано, используя дисплей: содержание .
канал li.nested {
flex-basis: 100%;
}
.feed li.nested ul {
дисплей: flex;
flex-wrap: wrap;
}
06. Сделав еще один шаг вперед
Вы уже видите потенциал запросов функций, но действительно здорово, что вы можете комбинировать выражения, используя три доступных оператора: и или и не . Возможно, мы могли бы также проверить наличие дисплея: flex а затем добавить резервную версию с плавающей точкой.
Мы не собираемся делать это здесь, но если бы мы были, мы сначала изменили бы два таких запроса:
@supports (display: flex) и ( отображение: содержимое) {
...
}
@supports (display: flex) и (не (отображение: содержимое)) {
...
}
В качестве бонуса вы также можете проверить поддержку пользовательских свойств следующим образом:
@supports (--foo: green) {
...
}
07. Добавить чат-бокс
Теперь у нас есть красивая новостная лента на месте, давайте добавим небольшое окно чата, которое будет закреплено в правом нижнем углу экрана. Нам понадобится список сообщений и текстовое поле для ввода пользователем своего сообщения. Добавьте этот блок сразу после открытия тег:
08. Стиль чата
Время, чтобы быстро добавить стиль, чтобы он выглядел наполовину достойным.
.chat {
background: #fff;
граница: 10px solid # 000;
bottom: 0;
размер шрифта: 10 пикселей;
позиция: фиксированная;
право: 0;
ширина: 300 пикселей;
z-индекс: 10;
}
.Сообщения {
border-bottom: 5px solid # 000;
переполнение: авто;
padding: 10px;
max-height: 300px;
}
.message {
фон: # 000;
border-radius: 5px;
цвет: #fff;
margin: 0 20% 10px 0;
padding: 10px;
}
.messages li: last-child .message {
margin-bottom: 0;
}
.input {
border: none;
display: block;
padding: 10px;
ширина: 100%;
}
09. Scroll chaining
Надеюсь, теперь у вас будет небольшая чат-панель с прокручиваемым списком сообщений, сидящим поверх вашей ленты новостей. Отлично. Но заметили ли вы, что происходит, когда вы прокручиваете внутри вложенной области, и вы достигаете конца своего диапазона прокрутки? Попробуй. Прокрутите до конца сообщения, и вы увидите, что сама страница начнет прокрутку. Это называется цепочкой прокрутки.
Это не очень важно в нашем примере, но в некоторых случаях это может быть так. Нам пришлось обходить эту функцию до создания прокручиваемых областей внутри модалов или контекстных меню.
Грязное исправление заключается в том, чтобы установить на переполнение: hidden но есть красивое, блестящее новое свойство CSS, которое исправляет все это, и это простой однострочный. Поздороваться с чрезмерным поведением . Существует три возможных значения:
- auto — По умолчанию, которое позволяет связывать цепочку прокрутки
- содержит — Отключает цепочку прокрутки
- none — Отключает цепочку прокрутки и другие эффекты сверхсброса (например, резиновые ленты)
Мы можем использовать сокращенное поведение overscroll или мы можем нацелить специфическое направление с overscroll-behavior-x (или -y ). Давайте добавим его в наш .messages класс:
.messages {
...
overscroll-behavior-y: содержать;
...}
Теперь попробуйте прокрутку, и вы увидите, что она больше не влияет на прокрутку страницы, когда вы достигаете конца содержимого.
Это свойство также довольно удобно, если вы хотите реализовать функцию pull-to-refresh в вашей PWA, скажем, чтобы обновить ленту новостей. Некоторые браузеры, такие как Chrome для Android, автоматически добавляют свои собственные, и до сих пор не было простого способа отключить его, не используя JS для отмены событий с использованием непассивных обработчиков, влияющих на производительность.
Теперь вам просто нужно добавить overscroll-behavior: содержать к элементу, содержащему область просмотра, возможно или .
Стоит отметить что это свойство не является стандартом W3C, а скорее предложением группы сообщества веб-инкубаторов (WICG). На более позднем этапе рассматриваются популярные, стабильные и зрелые предложения WICG для перехода к рабочей группе W3C.
10. Свернуть окно чата, когда он не используется
В настоящий момент окно чата занимает довольно много места, которое, если мы не взаимодействуем с ним, немного отвлекает. К счастью, мы можем что-то сделать с небольшой магией CSS.
Но прежде всего нам нужно немного изменить существующие стили. По умолчанию мы хотим, чтобы окно чата было свернуто, поэтому нам нужно уменьшить значение max-height в классе .messages . Пока мы находимся, мы также можем добавить переход к свойству max-height :
.messages {
...
max-height: 25px;
переход: максимальная высота 500 мс; }
Следующая страница: Продолжить изучение новых функций CSS на этапах 11-20