5 горячих новых функций CSS и как их использовать

  .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. Добавить чат-бокс

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

  

 

 

 
 Сообщение 1 
 
 
 Сообщение 2 
 
 
 Сообщение 3 
 
 
 Сообщение 4 
 
 
 Сообщение 5 
 
 
 Сообщение 6 
 
 
 Сообщение 7 
 
 
 Сообщение 8 
 
 
 Сообщение 9 
 
 
 Сообщение 10 
 
 
 
 
  

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.

  .messages {
 ...
 max-height: 25px;
переход: максимальная высота 500 мс; }  

Следующая страница: Продолжить изучение новых функций CSS на этапах 11-20