Одной строкой: новые CSS-команды для фронтендов

Совре­мен­ный CSS шаг­нул дале­ко впе­рёд по срав­не­нию с тем, что он умел в самом нача­ле. То, что рань­ше зани­ма­ло десят­ки строк кода, теперь мож­но сде­лать одной. 

Юна Кра­вец, раз­ра­бот­чик в Chrome, запи­са­ла видео, где она пока­зы­ва­ет 10 совре­мен­ных CSS-команд. Мы раз­бе­рём пять из них. Если вы зна­е­те англий­ский, то луч­ше посмот­ри­те ролик, а за при­ме­ра­ми при­хо­ди­те к нам.

👉 Это мате­ри­ал для тех, кто зани­ма­ет­ся вёрст­кой веб-страниц и веб-приложений, при­чём на сред­нем таком уровне. Если для вас тут поло­ви­на непо­нят­на, нач­ни­те с простого:

Что такое CSS

Сер­ви­сы гене­ра­ции CSS-кода

👉 Grid и Flex

Что­бы вся эта магия рабо­та­ла пра­виль­но, мы будем исполь­зо­вать её парал­лель­но с коман­да­ми display: grid; и display: flex

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

Display: flex — это зна­чит, что всё содер­жи­мое кон­тей­не­ра может гиб­ко менять свои раз­ме­ры по ширине или высо­те, под­стра­и­ва­ясь под содержимое.

Суперцентрирование

Самой боль­шой про­бле­мой в CSS все­гда было раз­ме­ще­ние эле­мен­тов точ­но по цен­тру. Для это­го при­хо­ди­лось писать что-то такое:

justify-self: center

justify-content: center

justify-items: center

align-self: center

align-content: center

align-items: center

line-height: 100%

text-align: center

margin: auto auto

vertical-align: middle

Но даже такой избы­точ­ный код ино­гда не давал нуж­ных резуль­та­тов, и эле­мен­ты всё рав­но рас­по­ла­га­лись не стро­го по цен­тру. Теперь всё это мож­но заме­нить одной коман­дой place-items: center. Её нуж­но ска­зать роди­тель­ско­му эле­мен­ту (то есть тому, внут­ри кото­ро­го всё долж­но центроваться):

.parent {

    display: grid;

    place-items: center;

  } 

Для при­ме­ра сде­ла­ем блок с изме­ня­е­мым содер­жи­мым, а внут­ри него по цен­тру поме­стим над­пись «При­вет, это Код!». Если мы изме­ним раз­мер глав­но­го бло­ка, то содер­жи­мое авто­ма­ти­че­ски подви­нет­ся в нуж­ное место и сно­ва ока­жет­ся в цен­тре блока.

See the Pen 
01. Centered AF
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Подвижные карточки

В интернет-магазинах часто мож­но встре­тить това­ры, оформ­лен­ные в виде кар­то­чек — 3 или 4 в ряд. Про­бле­ма в том, что если открыть эту стра­ни­цу на малень­ком экране, то кар­точ­ки рас­тя­нут­ся на всю шири­ну и постро­ят­ся одна под дру­гой, хотя сво­бод­но­го места хва­тит, напри­мер, на 2 карточки. 

Что­бы сде­лать так, что­бы кар­точ­ки все­гда зани­ма­ли столь­ко места, сколь­ко им нуж­но, но при этом не рас­тя­ги­ва­лись вширь на боль­ших экра­нах, исполь­зу­ют коман­ду flex: 0 1 <baseWidth>:

.box {

  flex: 0 1 150px; /* Задаём ширину карточки */

  margin: 5px;

}

Рабо­та­ет она так: если кон­тей­нер, в кото­ром лежат кар­точ­ки, рас­тя­ги­ва­ет­ся широ­ко, то кар­точ­ки не рас­тя­ги­ва­ют­ся вме­сте с ним, а оста­ют­ся нуж­ной шири­ны — baseWith. Когда мы умень­ша­ем раз­мер кон­тей­не­ра, то кар­точ­ки оста­ют­ся той же шири­ны, но рас­по­ла­га­ют­ся уже в несколь­ко строк друг под дру­гом. Если кон­тей­нер ста­нет совсем малень­ким, то кар­точ­ки выстро­ят­ся в одну вер­ти­каль­ную колонку.

Если нуж­но, что­бы кар­точ­ки по ширине рас­тя­ги­ва­лись на весь экран при любом раз­ме­ре дис­плея, исполь­зу­ют коман­ду flex: 1 1 <baseWidth>

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

Простой сайдбар

Ино­гда быва­ет нуж­но сде­лать боко­вую панель на сай­те, но так, чтобы:

  1. она рас­ши­ря­лась вме­сте с раз­ме­ром окна браузера;
  2. при умень­ше­нии раз­ме­ра окна панель тоже умень­ша­лась, пока не достиг­нет сво­е­го мини­маль­но допу­сти­мо­го значения.

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

Что­бы это реа­ли­зо­вать, исполь­зу­ем коман­ду minmax();, в кото­рую пере­да­дим мини­маль­ную и мак­си­маль­ную шири­ну нашей пане­ли. Эта коман­да сама пой­мёт, какую шири­ну нуж­но исполь­зо­вать: если места мало, то исполь­зу­ем мини­маль­ное зна­че­ние, а если места хва­та­ет — то максимальное.

 .parent {

    display: grid;

    grid-template-columns: minmax(150px, 25%) 1fr;

  }

Посмот­ри­те на основ­ную коман­ду grid-template-columns — она зада­ёт колон­ки в сет­ке. Сколь­ко пара­мет­ров, столь­ко и коло­нок. В нашем при­ме­ре два параметра:

  • minmax() — он отве­ча­ет за мини­маль­ную и мак­си­маль­ную шири­ну наше­го сайдба­ра слева
  • 1fr — это зна­чит, что всё осталь­ное про­стран­ство зай­мёт вто­рая колонка.

Если нам нуж­на боко­вая панель поши­ре — мож­но поста­вить 200 или 300 вме­сто 150.

See the Pen 
Про­стой сайдбар
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Шаблон «сверху вниз»

Мно­гие сай­ты устро­е­ны так: 

  • верх­нее меню или шап­ка сайта,
  • содер­жи­мое сайта,
  • ниж­нее меню или под­вал со слу­жеб­ной информацией.

Теперь всю эту струк­ту­ру мож­но запро­грам­ми­ро­вать все­го одной коман­дой grid-template-rows: auto 1fr auto . Она сде­ла­ет нам три гори­зон­таль­ных бло­ка по такой схеме:

  • пер­вый блок зай­мёт столь­ко места по высо­те, сколь­ко мы ука­жем в настрой­ках блока;
  • послед­ний блок сде­ла­ет то же самое и будет огра­ни­чен по высо­те пара­мет­ра­ми само­го блока;
  • а сред­ний блок меж­ду ними зай­мёт остав­ше­е­ся место. Если содер­жи­мое не поме­стит­ся в блок — появит­ся поло­са про­крут­ки сбоку.

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

Шапка сайта, содержимое и подвал

.parent {

    display: grid;

    grid-template-rows: auto 1fr auto;

  }

See the Pen 
Шаб­лон «свер­ху вниз»
by Миха­ил Поля­нин (@mihail-polqnin)
on CodePen.

Классическая раскладка сайта

С помо­щью коман­ды grid-template мож­но сде­лать ком­бо: не толь­ко сде­лать раз­мет­ку «свер­ху вниз», но и доба­вить в основ­ную часть пра­вый и левый сайдба­ры. У них тоже будет фик­си­ро­ван­ная шири­на, а раз­мер будет менять­ся толь­ко у бло­ка с основ­ным содержимым:

Классическая раскладка сайта

Дела­ет­ся это так:

.parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
  }
  
header {
    padding: 2rem;
    grid-column: 1 / 4;
  }

.left-side {
    grid-column: 1 / 2;
  }

main {
    grid-column: 2 / 3;
  }

.right-side {
    grid-column: 3 / 4;
  }

footer {
    grid-column: 1 / 4;
  }

Коман­да grid-template: auto 1fr auto / auto fr auto сна­ча­ла зада­ёт три стро­ки нуж­ной высо­ты, а потом три столб­ца нуж­ной шири­ны. Если пара­метр — auto, то раз­мер берёт­ся из настро­ек бло­ка, кото­рый зани­ма­ет эту стро­ку или стол­бец. Пара­метр 1fr гово­рит, что содер­жи­мое бло­ка зани­ма­ет всё остав­ше­е­ся после дру­гих бло­ков место.

Циф­ры 1/2 или 1/4 озна­ча­ют, что блок зани­ма­ет шири­ну от пер­вой до вто­рой линии или от пер­вой до чет­вёр­той. Линии появ­ля­ют­ся в тот момент, когда мы делим кон­тей­нер на три части:

Линии появляются в тот момент, когда мы делим контейнер на три части

Если напи­са­но grid-column: 2 / 3, то блок зани­ма­ет рас­сто­я­ние от линии 2 до линии 3, а если мы напи­шем grid-column: 1 / 4, то блок зай­мёт всю шири­ну, от 1-й до 4-й линии.

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

Что дальше

CSS раз­ви­ва­ет­ся и рас­тёт. В буду­щих ста­тьях раз­бе­рём коман­ды, свя­зан­ные с рези­но­вой вёрст­кой сай­та стан­дарт­ны­ми сред­ства­ми HTML.