company_banner

Малоизвестные CSS-свойства

Автор оригинала: Ahmad Shadeed
  • Перевод
Существует много CSS-свойств, о которых некоторые дизайнеры просто не знают. Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу. Некоторые из этих свойств могут помочь отказаться от использования JavaScript ради достижения некоего результата, некоторые позволяют экономить время за счёт написания меньших объёмов CSS-кода. Я, занимаясь фронтенд-разработкой, постоянно натыкаюсь на подобные свойства. Однажды я подумал о том, чтобы взять и составить список CSS-свойств, интересных, но используемых редко. Так и родилась эта статья.

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



Использование свойства place-items с CSS Grid



Пример использования свойства place-items

Я узнал о данном приёме из этого твита. Свойство place-items позволяет центрировать элемент по горизонтали и по вертикали, обходясь при этом минимальным объёмом CSS-кода.

Вот HTML-разметка, которая использовалась при формировании страницы с предыдущего рисунка:

<div class="hero">
    <div class="hero-wrapper">
        <h2><font color="#3AC1EF">CSS is awesome</font></h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

Вот код стиля:

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

Прежде чем углубляться в детали, полагаю, стоит упомянуть о том, что свойство place-items представляет собой сокращение, используемое для настройки свойств justify-items и align-items. Если бы это свойство не использовалось, то вышеприведённый CSS-код выглядел бы так:

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать. Когда используется свойство place-items, оно применяется к каждой ячейке сетки. Это означает, что оно выравнивает по центру содержимое всех ячеек. То есть, с его помощью можно стилизовать всё, что размещено в ячейках сетки. Для того чтобы это продемонстрировать, давайте рассмотрим стилизацию сетки с несколькими ячейками:

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

Использование подобного стиля приведёт к результату, показанному на следующем рисунке.


Содержимое всех ячеек выровнено по центру

Использование старого доброго свойства margin с CSS Flexbox



Выравнивание элементов по центру при работе с Flexbox-макетом

Использование конструкции margin: auto во Flexbox-макетах позволяет очень легко выравнивать элементы по центру, по горизонтали и вертикали.

Вот разметка:

<div class="parent">
    <div class="child"></div>
</div>

Вот стиль:

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}

.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

Стилизация маркеров списка



Стилизованные маркеры списка

Для начала позвольте мне признаться в том, что я не знал о том, что маленькие кружочки, находящиеся рядом с каждым элементом маркированного списка, называются «маркерами». Прежде чем я узнал о существовании псевдоэлемента ::marker, я настраивал эти «кружочки», сбрасывая стиль списка и пользуясь псевдоэлементами ::before или ::after. Но это совершенно непрактично и неправильно. Я имею в виду следующее:

ul {
    list-style: none;
    padding: 0;
}

li {
    color: #222;
}

li::before {
    content: "•";
    color: #ccc;
    margin-right: 0.5em;
}

Как видите, тут цвет элемента <li> задан как #222, а цвет псевдоэлемента ::before — это #ccc. Если было бы нужно, чтобы у <li> и ::before был бы один и тот же цвет, тогда, так как маркер наследует цвет <li>, в псевдоэлементе необходимости бы не было.

А вот как та же самая задача решается с помощью ::marker:

li {
    color: #222;
}

li::marker {
    color: #ccc;
}

Как по мне, так этот подход гораздо проще и удобнее чем тот, где применялся псевдоэлемент ::before.

Псевдоэлемент ::marker поддерживается в Firefox 68+ и в Safari 11.1+. А в Chrome и в Edge 80+ для включения его поддержки нужно активировать соответствующий флаг.

Свойство text-align


По мере роста популярности CSS Grid и CSS Flexbox некоторые разработчики, которые только начали использовать CSS, часто, для центровки и выравнивания контента, используют современные механизмы, а не старое свойство text-align. Но это свойство всё ещё совершенно работоспособно.

Использование text-align: center позволяет быстро и удобно выравнивать материалы страниц. Рассмотрим пример.


Выравнивание содержимого верхней части страницы

Содержимое раздела нужно выровнять по центру. Что использовать для создания макета этого раздела? Flexbox или Grid? На самом деле, эту задачу легко можно решить, всего лишь воспользовавшись свойством text-align.

А как у этого свойства с браузерной поддержкой? Предлагаю вам выяснить это самостоятельно.

Значение inline-flex свойства display



Использование значения inline-flex свойства display

Вам когда-нибудь нужно было вывести несколько значков во Flexbox-контейнере, который является строчным (inline) элементом, сделав так, чтобы каждый из этих значков был бы Flexbox-элементом? Для решения этой задачи и предназначено значение inline-flex свойства display.

Вот разметка, описывающая набор элементов:

<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>

Вот код стилизации этих элементов:

.badge {
    display: inline-flex; /* здесь творятся чудеса */
    justify-content: center;
    align-items: center;
}

В следующий раз, когда вам понадобится строчный элемент с функционалом Flexbox-макета, не забудьте воспользоваться inline-flex. Это очень удобно.

Свойство column-rule



Применение свойства column-rule

Вёрстка текста с применением колонок — это особый метод создания макетов страниц. При его использовании элементы распределяются по колонкам. Обычно этот приём используется для выравнивания текстов, размещаемых в элементах <p>. Но у многоколоночной вёрстки есть одна возможность, которой пользуются гораздо реже, чем стоило бы. Речь идёт о возможности добавления разделителей колонок. Я узнал об этом из данной статьи.

p {
    columns: 3;
    column-rule: solid 2px #222;
}

Имя свойства, column-rule, как кажется, не вполне точно отражает его предназначение. Логичнее было бы назвать его, например, «border-right». Это свойство очень хорошо поддерживается всеми актуальными браузерами (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).

Свойство object-fit



Применение свойства object-fit

CSS-свойство object-fit — это прямо-таки «волшебная палочка» веб-дизайнера. Когда я о нём узнал, я, используя его, стал работать по-новому, что серьёзно облегчило мне жизнь. Например, недавно я работал над разделом одного сайта, в котором выводился набор логотипов. Подобные разделы иногда довольно сложно создавать из-за того, что логотипы имеют разные размеры. Некоторые из них вытянуты по горизонтали, некоторые — по вертикали.

Используя свойство object-fit: contain я смог управлять свойствами width и height логотипов, что позволило мне размещать логотипы в областях с заранее заданной шириной и высотой.

Вот разметка:

<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- другие логотипы --> </li>
</ul>

Вот стиль:

img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

Задавая свойства width и height элемента <img>, мы можем управлять той областью, в которой будет размещён логотип. Это очень удобно. А ещё лучше то, что мы можем поместить вышеприведённый код в директиву @supports, что позволит избежать растягивания изображений в браузерах, не поддерживающих object-fit.

@supports (object-fit: contain) {
  img {
    object-fit: contain;
    height: 75px;
  }
}

Знаете ли вы о каких-нибудь интересных, но малоизвестных CSS-свойствах?

RUVDS.com
VDS/VPS-хостинг. Скидка 10% по коду HABR

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

    +15
    А text-align то за что?)
      +2
      Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать.

      Ребят, я ещё даже статью до конца не дочитал, но это прям из Гоголя:


      • позвольте мне позволить вам...
      • нет, позвольте вам этого не позволить
        0
        Согласен. Не литературный перевод.
        Вообще тут на Хабре с переводами плохо дело. Люди часто переводят дословно из-за чего стилистика речи выглядит странно (даже при корректном переводе). Русский айтишник, разговаривая с коллегой, никогда бы не выражался так как «разговаривают» переводчики Хабра.
        В данном случае, чтобы фраза
        Возможно, вас интересуют подробности о работе этого свойства. Позвольте мне о них рассказать.
        звучала по-русски, то можно было бы написать просто:
        «Работает это так...»
        или
        «Если вам интересно как это работает, то...»
        Это не дословный перевод, но смысл не меняет. А воспринимается проще.

        В общем, переводы на Хабре видно за версту даже не глядя на бейджик «Перевод».
          0
          Где ещё, как не в айти, услышишь, что Гоголь не литературен?
            0
            Речь шла о переводе, а не о том, что он напоминает :)
        +6

        Не дочитал, но поставил минус. Количество воды в разы превышает количество полезной информации.

          +5
          li::marker {
              color: #ccc;
          }

          А толку, если это работает только в трех браузерах по умолчанию?)
            0
            Аж на 10-18% устройств будет «магия»!
              +2
              Я вообще всегда удивляюсь, когда с упоением рассказывают про какие-то CSS-штуки, которые не поддерживаются где-то, даже если это, например, один только IE. Серьезно, кто-то где-то разрабатывает проекты, сознательно используя такие фичи? Можно, конечно, заморочиться с graceful degradation, но для большинства из таких «малоизвестных» фич намного проще потратить пусть в два раза больше строк, но наваять решение, которое будет работать везде и одинаково.
                +6
                Если только IE, то можно и жертвовать. Тем более такой незначительной вещью, как маркеры списков — дизайн не развалится, если этот маркер потеряет свое оформление.
                  0
                  Это вроде бы звучит логично, но везде, где я работал, за это бы прилетело по шапке от QA, потому что поддержка IE заявлена, а макеты есть макеты. И такой подход мне всё-таки ближе.
                  +2
                  Сегодня не поддерживаются, а через два года начнут. Лучше заранее узнать и просто следить, не привезли ли поддержку, чем всё время городить костыли, потому что вовремя не узнал, что можно делать иначе.
                  Представляю, как бы я продолжал делать скруглённые уголки картинками, если бы не узнал про border-radius.
                  0
                  Вообще не понимаю смысл существование данного псевдоэлемента, когда можно просто сделать:

                  ul {
                      color: #ccc;
                  }
                  li {
                      color: #000;
                  }
                    0

                    А в каких браузерах оно покрасит маркер серым?

                      0
                      Во всех, по крайней мере я за свои 10 лет работы, не встречал браузера который бы не красил маркер, хотя если честно редко когда вообще что то подобное нужно.

                      P.S. свойство «color» меняет цвет всех фронтовых элементов, а это — текст / border / outline / shadow (text / box) / декарационные элементы / маркеры
                        0

                        Ну вот именно поэтому это свойство от li и покрасит маркеры черным. В чем тогда вообще смысл задавать стиль для ul? :)

                  0
                  Написал пару замечаний, но, видимо, глюки с кэшированием были, поправилось.
                    +2
                    Не понимаю, как может существовать текст об трюках в CSS, без указания совместимости и применимости по браузерам. Как бы это же первая вещь, о которой думаешь, когда пишешь любой CSS и уж тем более, когда берешь какое-то «новое» свойство.
                      0
                      Не понимаю, как может существовать текст об трюках в CSS, без указания совместимости и применимости по браузерам.

                      https://caniuse.com вам на что? Тем более если это первая вещь о которой думаешь ?


                      За object-fit спасибо, всегда делал через background-size (со своими заморочками) и думал что по другому никак.
                      Но использовать все равно пока не буду (для картинок по крайней мере) пока IE окончательно не вымрет )

                        +1
                        caniuse.com вам на что? Тем более если это первая вещь о которой думаешь ?

                        Я смотрю обычно в других источниках, но не в этом суть. Суть в том, что, если ты готовишь материал по трюкам css, хорошо бы указывать на ограничения применения или с гордостью сообщить, что этот трюк будет работать на всех живых и полуживых браузерах. А без этого в статье дыра и если автор возьмет и дополнит статью данной информацией, все ему скажут большое спасибо. А также будет сразу понятно, насколько этот трюк полезен в условиях жизни читателя этой статьи.
                          0
                          Я смотрю обычно в других источниках, но не в этом суть.

                          Ну и зря, в этом то и суть )
                          Ваши источники размазаны по интернету в подобных статьях?
                          Если я скажу что будет работать ВЕЗДЕ, вы конечно на слово поверите? )


                          Не раз находил несоответствия поддержки в статье и в caniuse. Хотя и caniuse может ошибаться, но не сильно — например стрелочные функции js (arrow functions) в iOS Safari появились в 10.1, а не в 10 (столкнулся на своем опыте). Но все равно он более авторитетный и точный, чем условный "составитель статей для лайков" )


                          что этот трюк будет работать на всех живых и полуживых браузерах

                          Что реально так трудно проверить интересующий трюк в caniuse ?


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

                          А если он возьмет данные с потолка?
                          Ну скажут спасибо и будут гордо думать что "поддерживается ВЕЗДЕ" )


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


                          PS. Ах да, это вообще перевод )

                      0
                      Мало известные и редко используемые они потому, что даром никому не нужны.
                      Или — знают, но забывают использовать эти свойства там, где они способны принести большую пользу.

                      Просто в большинстве случаев они как раз несут вред а не пользу, область их применения стремится к 0.

                      Но обо всём по порядку.

                      Использование свойства place-items с CSS Grid

                      Оно редко используется просто потому, что должно выполнится пара условий, чтобы было целесообразно использовать такой подход, а именно:
                      1. Стиль для .hero уже должен использовать сетку, причем, очевидно, это должен быть список одинаковых элементов, а не единичный блок
                      2. Дизайн должен «обязать» использовать обертку ".hero-wrapper", например сложным фоном и отступами, хотя, если честно, мне сложно такое сходу представить

                      В противном случае (как оно обычно и бывает) всё решается банальным:
                        .hero{
                      	display: flex;
                              flex-direction: column;
                      	align-items: center;
                      	justify-content: center;
                      	text-align: center;
                        }
                      

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

                      Обратите, кстати, внимание на text-align: center, который по вашему мнению редко используется, но о нем ниже.

                      И .hero-wrapper вообще не нужен. Я считаю, лучше написать больше стилей, но при этом сделать разметку более компактной и читаемой. Такое чувство, что народ забыл слово семантика.

                      А вот использование тега font — ИМХО, это просто чудовищный моветон. Если уж вас не смущает плодить лишние теги, то может хоть это смутит. В своих проектах я не использовал его лет… не знаю… 12, больше? Он, конечно, может встретиться в каких-нибудь «визивигах», но я, если честно, уже сомневаюсь. В целом — мрак.

                      Использование старого доброго свойства margin с CSS Flexbox

                      На мой взгляд, это не просто не редкое или мало известное свойство, это вообще, как говорится, мастхэв! Причем не только margin: auto, но и, например, (что намного чаще используется) margin-right: auto; и margin-left: auto; или margin-top: auto; и margin-bottom: auto; — это позволяет «отодвинуть» блок влево/ вправо (вверх / вниз) от соседних блоков во флексе или поставить равномерно м/у ними. Эдакий float новой волны в эпоху flex-box.

                      Стилизация маркеров списка

                      Псевдоэлемент ::marker поддерживается в Firefox 68+ и в Safari 11.1+. А в Chrome и в Edge 80+ для включения его поддержки нужно активировать соответствующий флаг.

                      Ну т.е. он малоизвестен и не используется просто потому, что нафиг никому не нужен. Поддержка узким сегментом браузеров как бы сама наложила вето на использование этого правила для стилизации «кружочков», кружочков Карл! А если я для списка укажу следующее правило:

                      ul{
                      	list-style-type: square;
                      }
                      

                      Вы это тоже кружочками назовете? Хотя, судя по «кружочкам» вам, может быть неизвестно что такое list-style-type в частности, и list-style в целом. Хотя вот уж действительно малоизвестные свойства list-style-position и, сейчас внимание, боюсь вас шокировать, list-style-image — которое позволяет указать картинку в качестве маркера. Но, к сожалению, они тоже даром никому не нужны и давно почили в бозе.

                      Свойство text-align

                      Я прям даже не знаю… ну, т.е. это свойство полезно в таком количестве мест, что даже закрадываются сомнения — а не шутка ли это автора? Хотя бы стили для пользовательского контента, не? Картинки внутри блока, не? Тот же заголовок по-центру, как у вас — самый очевидный способ это text-align. Возможно вы не знаете, но у него есть еще значение justify, а еще в некоторых случаях приходится использовать text-align: start; ну это уже из области rtl.

                      Значение inline-flex свойства display

                      Просто зачастую обычного flex с головой хватает для решения задачи. Например, если мы опять вернемся к вопросу о семантике, то ваш пример я бы реализовал так:
                      <ul class="badges">
                      	<li class="badge"><svg></svg></li>
                      	<li class="badge"><svg></svg></li>
                      	<li class="badge"><svg></svg></li>
                      	<li class="badge"><svg></svg></li>	
                      </ul>
                      


                      .badges{
                      	display: flex;
                      	flex-wrap: wrap;
                      }
                      
                      .badges .badge{
                      	display: flex;
                              justify-content: center;
                              align-items: center;
                      }
                      

                      И да, для .badges в этом случае возможна необходимость использования inline-flex, если он находится в строке с другими элементами, например.

                      Свойство object-fit

                      Тут ситуация пожалуй еще хуже чем с text-align, поскольку object-fit настолько простой и мощный инструмент, особенно в связке с object-position, что альтернатива в лице background таковой не является. Особенно, с точки зрения пресловутой семантики, которой я уже всех утомил. Нет ни одного современного проекта где бы я не использовал object-fit, причем по наблюдениям гораздо чаще используется cover, нежели contain, но это дело случая и предпочтений дизайнера.

                      Извините, но статья пуста(
                        0
                        И какие преимущества у object-fit? Ну кроме семантики? Что не покрывает бекграунд?
                          0
                          Семантика и сама по себе важная штука, однако из нее вытекают, возможно, не очевидные последствия. Например, для людей, с ограниченными возможностями, которые используют программы чтения с экрана, изображения в фоне будут не доступны, отсутствует возможность использовать атрибут alt. Точно также при печати страницы фоновые картинки чаще всего игнорируются. Кроме того, может пострадать оптимизация загрузки — если картинка прописана в стилях, то и загружаться она будет после того как браузер ее там найдет. Бывает и такое, что изображения важны для поисковой выдачи, с фоновыми картинками непременно возникнет проблема у роботов. Кроме того, при адаптации страницы под разные разрешения, может возникнуть необходимость избавиться от соблюдения пропорций, в этом случае контейнеру картинки можно не задавать размеров ( допустим height: auto;, ну или padding обнулить, смотря какой метод был использован), а картинка будет видна вся, при любых пропорциях (width: 100%; height: auto; например), а как быть с фоном? Еще можно вспомнить srcset, который не использовать для фоновых картинок, что бывает довольно важно, а поддержка image-set пока, на мой взгляд, еще недостаточна. Да и мало ли чего еще можно вспомнить?
                          Конечно, если изображения носят чисто декоративный характер, background, возможно, решит задачу, но зачем, если существует специальный инструмент?
                            0
                            , с ограниченными возможностями

                            скажем честно, для РФ, для любой коммерции — это не аргумент ни разу. Для вики, а тем более гос. сервисом — обязанность. Я бы даже запретил вес страниц больше 100кб для гос. сектора. Однако? все равно спорно — никаким альтом картинку не опишешь слепому, а «фотография объекта» толку не даст. Да и пихают сейчас картинки ради приятности глазу а то «текста многа сухавата все»

                            Печать… да под нее надо пилить все отдельно. Блоки прятать, менюшки, стили переписывать, делать контрастные. Картинками там не отделаешься, тем более галочка есть «печатать фоновые рисунки»
                            Поисковая выдача — кому как, для выдачи сейчас rss -ку генерят новостные сайты, поисковики не парсят сайты для показа карточек давно для таких быстрообновляемых ресурсов.

                            Соблюдение отсутсвие пропорций… это бывает нужно иногда, когда фон абстрактный. Но и с бекграундом тоже можно background-size: 100% 100%

                            srcset штука хорошая. background-image: image-set() призван помочь, но пока еще слишком свеж caniuse.com/?search=image-set()

                            но зачем, если существует специальный инструмент?

                            Лишние ноды не всегда приятны. Не всегда хочется переусложнить карточки. Вроде пишешь css так и хочется в ней оставаться, не городить новых нод. Например, статусы «хит продаж» или «новинка» хочется описать просто модифицирующим стилем, а не добавлять новые ноды с необходимыми изображениями. Вот ::before ::after пара штук есть, в тот раз пронесло)) На третий статус уже надо все переделывать.

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

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