Ещё больше полезных CSS-команд

Про­дол­жа­ем раз­би­рать совре­мен­ный CSS вме­сте с Юной Кра­вец, раз­ра­бот­чи­ком в Chrome. В пер­вой части мы выяс­ни­ли, как мож­но быст­ро раз­би­вать стра­ни­цу на бло­ки и управ­лять их высо­той и шириной.

Если зна­е­те англий­ский на базо­вом уровне, посмот­ри­те пол­ный видеоролик:

Это довольно нетривиальный CSS3

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

Если это кажет­ся неподъ­ём­ным, нач­ни­те с простого:

Автоколонки

В интернет-магазинах самое важ­ное — это кар­точ­ки с това­ра­ми. Что­бы они все­гда зани­ма­ли опти­маль­ное коли­че­ство места и при этом не сжи­ма­лись до нечи­та­е­мо­го состо­я­ния, исполь­зу­ют коман­ду repeat();

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

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 

Это слож­но, давай­те разберём.

grid-template-columns гово­рит, что какие-то бло­ки, к кото­рым это будет при­ме­не­но, нуж­но выстро­ить по вер­ти­каль­ной сет­ке. Кар­точ­ки как раз мож­но пред­ста­вить как некие объ­ек­ты, кото­рые выстра­и­ва­ют­ся по этой сет­ке, зани­мая какую-то часть экра­на по ширине.

repeat гово­рит, что нуж­но повто­рять какие-то инструк­ции несколь­ко раз. Если бы мы ска­за­ли repeat(4,minmax(что-то там)), то это бы озна­ча­ло, что нуж­но сде­лать четы­ре колон­ки с какими-то пара­мет­ра­ми ширины. 

А мы ска­жем не 4, а auto-fit. Для бра­у­зе­ра это будет озна­чать «Запол­ни кра­си­вень­ко тем, что у тебя там будет, с учё­том их раз­ме­ров». А мож­но было бы ска­зать auto-fill, тогда бра­у­зер будет запол­нять кра­си­вень­ко, но как мож­но плот­нее, что­бы поболь­ше влезло.

Это крайне неоче­вид­но, но такой совре­мен­ный CSS.

Вот какой в ито­ге полу­чит­ся код. Читай­те ком­мен­та­рии, что­бы понять, что к чему:

// общие настройки страницы
body {
  font-family: system-ui, sans-serif;
//   подключаем сетку
  display: grid;
//   высота — на весь экран
  height: 100vh;
//   задаём расстояние между блоками
  grid-gap: 1rem;
//   формируем колонки, минимальная ширина каждой — 200 пикселей
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
Css-команды: автоколонки

See the Pen 
Авто­ко­лон­ки
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Ровные карточки

Про­дол­жа­ем тему карточек. 

Ино­гда быва­ет так, что в одной кар­точ­ке содер­жит­ся мно­го инфор­ма­ции, а в дру­гой — мало. Напри­мер, в одном слу­чае доста­точ­но фото­гра­фии и назва­ния, а в дру­гом нуж­но ещё подроб­ное опи­са­ние. Если зара­нее опре­де­лить высо­ту кар­точ­ки, то длин­ное опи­са­ние может не влезть или, наобо­рот, внут­ри кар­точ­ки будет слиш­ком мно­го пусто­ты (как в нашей жизни).

Что­бы кар­точ­ки выгля­де­ли оди­на­ко­во с раз­ным содер­жи­мым, исполь­зу­ют коман­ду justify-content: space-between;. Рабо­та­ет она так:

  1. Запол­ня­ем все карточки.
  2. Эта коман­да нахо­дит кар­точ­ку с мак­си­маль­ной высотой.
  3. Содер­жи­мое всех кар­то­чек авто­ма­ти­че­ски рас­тя­ги­ва­ет­ся, что­бы кар­точ­ки полу­чи­лись одно­го размера.

Полу­ча­ет­ся не ска­зать что пря­мо очень кра­си­во — в кон­тен­те появ­ля­ют­ся непред­ска­зу­е­мые дыры. Но вдруг вам такое подойдёт:

// настраиваем карточки
.card {
  display: flex;
//   делаем так, чтобы карточки растягивались ровно по колонкам
  flex-direction: column;
//   а вот главная команда — сделать так, чтобы всё содержимое карточки выровнялось одинаково с остальными карточками
  justify-content: space-between;
  background: lightpink;
  padding: 1rem;
}
Css-команды: ровные карточки

See the Pen 
Ров­ные кар­точ­ки
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Управляемый масштаб

Если вы хоти­те кон­тро­ли­ро­вать внеш­ний вид бло­ка при любом раз­ме­ре экра­на, вам может при­го­дить­ся коман­да clamp(). Она зада­ёт мини­маль­ный, обыч­ный и мак­си­маль­ный раз­мер и рабо­та­ет автоматически.

Напри­мер, мы хотим, что­бы наш блок зани­мал по ширине поло­ви­ну раз­ме­ра экра­на. При этом блок хоро­шо выгля­дит с шири­ной мини­мум 200 пик­се­лей, а мак­си­мум — 750 пик­се­лей. Что­бы учесть все эти пара­мет­ры, зада­дим шири­ну так: width: clamp(200px, 50%, 700px);

// настройки содержимого карточки
// задаём минимальную, обычную и максимальную ширину
.card {
  width: clamp(200px, 50%, 700px);
//   содержимое может растягиваться в пределах колонки
  display: flex;
  flex-direction: column;
  background: lightpink;
  padding: 1rem;
}

See the Pen 
Управ­ля­е­мый мас­штаб
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Дядя, откуда все эти команды?

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

Текст:
Миша Поля­нин

Редак­ту­ра:
Мак­сим Ильяхов

Кор­рек­тор:
Ира Михе­е­ва

Иллю­стра­тор:
Даня Бер­ков­ский

Вёрст­ка:
Маша Дро­но­ва

Соц­се­ти:
Олег Веш­кур­цев

Во имя:
кроссбра­у­зер­но­сти
Сложно? А веб-разработчику — несложно
Хоро­ший веб-разработчик щёл­ка­ет CSS-команды как ореш­ки. При­хо­ди­те и вы, если люби­те щёлкать.