company_banner

Трюки CSS, которые сделают из вас ниндзя верстки


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


    Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").


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


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


    Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.


    grid + place-items


    Здесь вы найдете полное визуальное руководство по Grid и Flexbox.


    Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.


    .parent {
      display: grid;
      place-items: center;
    }

    place-items является сокращением для justify-items и align-items.


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


    .parent {
      display: grid;
      grid-template-columns: 1fr 1fr;
      place-items: center
    }

    flex + margin


    Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto.


    .parent {
      display: flex;
    }
    
    .child {
      margin: auto;
    }

    Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:


    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    flex + gap


    Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):


    .parent {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
    }

    inline-flex


    Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть:



    columns


    Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.


    Свойство columns является сокращением для column-count и column-width.



    background-repeat


    Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:



    background-blend-mode


    Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.


    Возможные значения:


    • color
    • color-burn
    • color-dodge
    • darken
    • difference
    • exclusion
    • hard-light
    • hue
    • lighten
    • luminosity
    • multiply
    • overlay
    • saturation
    • screen
    • soft-light

    Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь.


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



    background-clip


    Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text:



    filter


    Свойство filter позволяет применять к элементам некоторые художественные эффекты.


    Возможные значения-функции:


    • url() — svg-фильтр
    • blur() — размытие
    • brightness() — яркость
    • contrast() — контрастность
    • drop-shadow() — об этой функции поговорим отдельно
    • grayscale() — обесцвечивание
    • hue-rotate() — оттенок
    • invert() — инверсия
    • opacity() — прозрачность
    • saturate() — насыщенность
    • sepia() — сепия

    Изменение цветовой темы (или схемы) сайта для ленивых:



    Здесь вы найдете пример использования filter для реализации фильтров Instagram.


    drop-shadow


    Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается.



    object-fit


    Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования.


    Значение scale-down, например, позволяет сохранять пропорции изображения независимо от размеров блока:



    Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.


    cursor


    Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer), мы имеем возможность определять собственные изображения и svg?



    scroll-behavior


    Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:



    text-overflow


    Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.


    p {
      text-overflow: ellipsis;
    }

    caret-color


    Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа.


    textarea {
      caret-color: #00b74a;
    }

    scroll-snap


    Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:



    Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS.


    supports


    Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.


    /* проверяем поддержку свойств `grid` и `image-rendering` */
    @supports (display: grid) {
      section {
        display: grid;
      }
    }
    
    @supports (image-rendering) {
      img {
        image-rendering: pixelated;
      }
    }

    var()


    Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.


    /* определяем пользовательскую переменную - основной цвет фона */
    :root {
      --primary-bg-color: #1266f1;
    }
    
    /* и используем ее */
    button {
      background-color: var(--primary-bg-color)
    }

    calc()


    Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений.


    Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом:


    .modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

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


    /* допустим, высота элемента составляет 100px, ширина - 200px */
    .modal {
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 100px);
    }

    attr()


    С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.


    Реализация всплывающей подсказки средствами CSS:



    :target


    Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript:



    ::marker


    Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker.



    ::selection


    Псевдоэлемент ::selection позволяет стилизовать выделение текста.


    p::selection {
      background-color: #262626;
      color: #fbfbfb;
    }

    Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:



    Благодарю за внимание и хорошего дня!




    Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.


    Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!


    Маклауд
    Облачные серверы на базе AMD EPYC

    Комментарии 7

      +1

      Пример с background-clip оч красивый, но не работает в FF, пока не попытаешься выделить текст мышкой.

        0
        Свойство text-overflow со значением ellipsis позволяет добавлять… в конец текста при его выходе за пределы контейнера.

        Стоит добавить, что text-overflow: ellipsis работает для однострочного текста в сочетании с overflow: hidden и white-space: nowrap и для многострочного — при использовании старого синтаксиса flexbox да ещё с префиксом -webkit и явным указанием количества строк:


        display: -webkit-box;
        -webkit-line-clamp: <число строк>;
        -webkit-box-orient: vertical; 
          +1
          Да, много полезных фич, но, к сожалению, поддержка самых крутых пока еще на низком уровне.
            +2

            Как-то всё в одну кучу. Если есть желание сделать обзор или мануал, лучше взять какой-то один аспект и его глубоко рассмотреть, например (первое что пришло в голову), способы адаптивного размещения текста с помощью колонок, text-overflow и прочих хитростей. Будет гораздо полезнее, и есть смысл такое добавлять в закладки. А сейчас… Я например не знала про ::marker, но я не стану ради этого сохранять ссылку статью, и точно также забуду.


            Сейчас статья — это случайный сборник "вчера я узнал".

              +2

              Жаль, что нет готовых ссылочек на Can I use :(

                0

                Пока свойство не поддерживается 90-99% клиентов, то не стоит их использовать. Некоторые же вроде filter очень тяжёлые и могут приводить к тормозам вплоть до зависания браузера.

                  0
                  Ниндзя может быт и станешь, вот только посетители такого сайта будут явно не в восторге.
                  Т.е. всегда стоит упоминать ОБЕ стороны всех этих рюшечек, красота vs загрузка процессора.
                  Классика жанра — filter плюс тени в нескольких комбинациях, гарантированное томрожение браузера на каком-нибудь айпаде чуть старше 2018 г.

                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                  Самое читаемое