Новейшие CSS значения-свойства для фронтенда – одной строкой!

Сегодня тема CSS: небольшой, но, возможно, полезный материал для тех админов, которые занимается созданием сайтов – вёрсткой веб-страниц, либо веб-приложений и прочим…

Знания языка CSS во многом определяют наши успехи в веб работе, потому как css, это дизайн – внешний вид сайта – а внешний вид, это одёжка, по которой, как известно, встречают.

По личному опыту и вопросам в комментариях знаю, что новички считают css легким и не очень важным языком, – однако, это не совсем так, или совсем не так.

Как и любому иному языку css следует уделять время, главное, как говорится, быть в курсе течения и развития языка, чтобы знать многие и полезные новшества, которые заметно сэкономят наше время и, что важно, обусловят оптимальную работу кода сайта!

 

 

 

 

 

новые CSS свойства для фронтенда – сокращённый код

 

 

 

 

Многие разработчики, при css верстке, сталкиваются с проблемой, которая отнимает уйму времени. А именно центрирование элемента(ов) сайта на той или иной странице.

 

То есть размещение элементов точно по центру.

 

Достигая требуемого результата, приходилось писать многие строки кода, стараясь “обмануть” браузер и указать ему те команды, которые заставят элемент отображаться в той точке, на которой требуется.

 

 

 

Если часто слетает авторизация в WordPress.

 

 

 

центрирование элементов – значения grid и flex

 

 

 

В данном случае используем свойство: display: и некоторые значения…

 

 

display: grid – сообщаем браузеру правила, чтобы элементы в div классе контейнера размещались внутри виртуальной сетки.

Что примечательно, внутри обозначенной сетки возможно задавать дополнительные правила css обработки. Всё значительно упрощает современную CSS-разработку.

 

 

display: flex – “резиновая вёрстка” всё содержимое контейнера гибко формируется под размеры по ширине или высоте.

 

 

 

центрирование

 

 

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

 

Теперь же в арсенале разработчиков есть удобная, скажем так, команда – place-items: center.

Задаётся родительскому элементу (внутри которого следует обозначить css центрирование):

 

 

 

.cont {

display: grid;

place-items: center;

}

 

 

Как видите, в селекторе используется display: grid; то значение – свойство, о котором говорилось выше.

 

 

 

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

 

 

HTML:

 

<div class="cont" >
<div class="child">Привет,  мир!</div>
</div>

 

 

 

селекторы css: (для примера, я добавил некоторые дополнительные свойства-значения css)

 

 

.cont {
display: grid; /*описано выше*/
place-items: center; /*центрирование*/
background: lightblue;
width: 500px;
height: 500px;
resize: both;
overflow: auto;
}

.child {
padding: 0.5rem;
border-radius: 10px;
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}

 

 

 

Преимущества краткости кода по отношению центрирования – расположения элемента:

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

 

 

 

 

 

 

css: подвижные карточки, элементы

 

 

 

 

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

 

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

 

Поработаем свойством flex: 0 1 <width>

 

 

Зададим ширину карточки:

 

.box {

flex: 0 1 150px; /* ширина карточки */

margin: 5px;

}

 

 

Отработает этот селектор следующим образом:

 

а) если контейнер, в котором расположены карточки, растянется широко – карточки внутри него не растягиваются по его ширине, но остаются заданной ширины 0 1 <width>.

 

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

 

например: 2 сверху, и одна снизу:

 

 

 

 

 

 

На маленьком расширении карточки выстроятся в одну вертикальную колонку соответственно.

 

 

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

 

flex: 1 1 <width>

 

 

 

HTML:

 

<div class="cont">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

 

 

CSS:

 

.cont {
display: flex; /*устанавим свойство flex, чтобы элементы сами подстраивались под нужную ширину: разрешение элементам контейнера растягиватся*/
flex-wrap: wrap; /*выравниваем содержимое контейнера по центру*/
justify-content: center;
}

.child {
/*меняем и смотрим как изменится результат*/
/* flex: 1 1 200px; */
flex: 0 0 200px;
margin: 5px;
/*внешний дизайн карточек*/
border: 1px solid red;
background: lightpink;
font-size: 2rem;
text-align: center;
}

 

 

адаптивный сайдбар – вёрстка css

 

 

 

 

Сделаем так, чтобы боковая панель (к примеру, сайдбар) на сайте вела себя следующим образом:

 

а) расширялась в зависимости от размера окна браузера;

 

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

 

 

Например, оптимальная минимальная ширина боковой панели 200 пикселей, если ширина больше, элементы сайдбар адаптируются под ширину – как только ширина достигает 200px сайдбар и его элементы перестает сжиматься..

 

 

Чтобы достичь требуемого результата, поработаем со свойством minmax(); (min – минимум; max – максимум) – передадим (или зададим) минимальную и максимальную ширину для панели.

 

Браузер воспримет данные команды так:

если места мало – будет отрабатывать свойства css для минимального значения, а если места достаточно, то для максимального…

 

 

Это приблизительный пример решения.

 

 

.cont { /* div класс контейнера сайдбара*/

display: grid;

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

}

 

 

Свойство grid-template-columns – блокики-сетка сайдбара. Параметрами задается число, скажем так, блоков: сайдбар и основная. В нашем примере два параметра:

 

minmax() – обработка минимальной и максимальной ширины сайдбара.

 

1fr – значение задаёт браузеру команду отдать остальное пространство второму блоку (например, контентной части).

 

 

 

 

 

 

шаблон css макета сайта: шапка, контент, подвал

 

 

 

Классический вид структурного дизайна сайта:

 

а) шапка сайта.

б) контент…

с) подвал

 

 

 

 

 

 

Раграничим данную структуру таким свойством значением css:

 

grid-template-rows: auto 1fr auto;

 

в этой строке мы зададим значения сразу для трёх требуемых элементов (блоков) сайта.

 

 

а) первый блок займёт в окне браузера столько места по высоте, сколько мы укажем в значении CSS;

 

б) подвальный блок сделает то же самое, т.е. будет ограничен по высоте и пр. css самого блока;

 

с) блок части контента (в соответствии значений CSS) займёт между ними оставшееся место.

 

Важно! если содержимое контента не помещается в отведенный по параметрам блок – в этом случае реорганизуется полоса прокрутки…

 

 

 

.cont {

display: grid;

grid-template-rows: auto 1fr auto;

}

 

 

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

 

 

 

примерный CSS для body:

 

body {
font-family: system-ui, sans-serif;
display: grid; /* высота равна высоте окна браузера */
height: 100vh;
grid-template-rows: auto 1fr auto; /* три горизонтальных блока сверху вниз */
}

 

 

 

как сделать в css классическую раскладку блоков и элементов сайта

 

 

 

 

Ещё один пример по свойству grid-template

 

 

С помощью grid-template работаем комбо:

 

пишем комплексную разметку CSS сетки (страницы) сайта. То есть не только, как описывалось в примере выше “сверху вниз», но и одновременно разметим (свойство grid-template именно позволяет это сделать) основную часть сайта, а также, к примеру, правый и левый сайдбары.

 

 

Пример: у сайдов фиксированная ширина, размер меняется только у элементов блока с основным содержимым:

 

 

 

 

 

 

Пример css для комбо – полной разметки сайта:

 

 

.cont {
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, размер формируется из правил css блока.

 

Параметр 1fr , как говорилось выше, обозначает обстоятельства того, что содержимое блока занимает всё оставшееся место среди других блоков.

 

Значения (цифровые) в нашем варианте от 1/2 до 1/4 задают правила того, что блок занимает ширину от первой до второй так называемой линии или от первой до четвёртой.

 

 

 

 

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

 

 

 

 

На этом закругляюсь. Если что не ясно, пишите в комментариях…