5 любопытных трюков CSS

Перевод статьи «My 5 favorite CSS tricks I learned this year».

Этот год у меня был очень продуктивным, я создал несколько UI/UX приложений и сайтов. Работая над ними, я познакомился с некоторыми приемами работы, позволившими мне улучшить дизайн моих проектов.

1. Переменные в CSS

CSS-переменные полезны, когда вам нужно применять один и тот же стиль ко многим элементам. Например, вместо того чтобы добавлять сложное свойство box-shadow к каждому элементу, где нужна тень, можно инициализировать переменную и использовать ее при необходимости.

Мы инициализируем CSS-переменные при помощи :root и указываем нужное свойство:

:root {
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

А теперь мы можем использовать эту переменную в любом месте, где нужно применить такую тень:

.container {
   box-shadow: var(--shadow);
}

2. Медиа-запросы

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

@media only screen and (max-height: 800px) {
    .container {
        height: 95%;
    }
}

В этом примере для экранов в 800 (или меньше) пикселей будет изменена высота элемента сетки.

3. Функция calc

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

.container {
    width: calc(100%-300px);
}

Ширина нашего элемента будет составлять 100% ширины родительского контейнера минус 300 пикселей.

4. Выравнивание по вертикали

Есть много способов выровнять элемент по вертикали, но порой это бывает сложно, да и не всегда срабатывает из-за сложностей позиционирования или из-за родительского элемента. Но есть метод, срабатывающий всегда: абсолютное позиционирование в комплекте со следующими стилями:

.container {
    position:absolute;
    top: -50%;
    transform: translateY(50%);
    margin: auto;
}

Этот код выровняет элемент по вертикали относительно родительского контейнера.

5. Значение border-box свойства box-sizing

.container {
    box-sizing: border-box;
}

Свойство box-sizing: border-box относится к одним из самых полезных в CSS. Оно позволяет нам создавать поля элементов (padding), не затрагивая размеры этих элементов.

Если у нас есть контейнер с шириной 300 пикселей, высотой 300 пикселей и полями в 30 пикселей, CSS по умолчанию прибавляет 30 пикселей поля к ширине и высоте контейнера, что приводит ко многим проблемам, например с выравниванием. Но если мы прописываем свойство box-sizing: border-box, указанные ширина и высота будут уже включать в себя размеры полей и границ.

Свойство box-sizing можно применять, например, для создания полей ввода или текстовых блоков.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]