[Перевод] Интересные CSS-находки в новом дизайне Facebook16.04.2020 13:18

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

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

Ну что же, если тень вызывает такие проблемы — не вижу ничего плохого в том, чтобы заменить её на соответствующее изображение.

Широкое использование CSS-переменных

Мне нравится то, что дизайнеры Facebook используют CSS-переменные. Судя по тому, что я видел, к элементу :root добавлено более 320 переменных. Эти переменные используются и в светлой, и в тёмной темах сайта.

Когда включена тёмная тема, к HTML-элементу добавляется класс __fb-dark-mode. Потом он переопределяет все переменные, объявленные в элементе :root:

:root {
    /* Переменные светлой темы */
    -fds-active-icon:  #3578E5;
    --fds-attachment-footer-background:  #F2F3F5;
    --fds-blue-05:  #ECF3FF;
    --fds-blue-30:  #AAC9FF;
    --fds-blue-40:  #77A7FF;
}

.__fb-dark-mode:root, .__fb-dark-mode {
    /* Переопределение переменных светлой темы */
    --fds-active-icon:  black;
    --fds-attachment-footer-background:  black;
    --fds-blue-05:  black;
    --fds-blue-30:  black;
    --fds-blue-40:  black;
}

Вот видео, в котором демонстрируется то, что происходит после переключения на тёмную тему. Советую смотреть его в полноэкранном режиме.

Использование CSS-свойства line-clamp для обрезки многострочного текста

В подписях используется обрезка многострочного текста

На боковой панели есть список ссылок — вроде тех, которые ведут к профилю пользователя, к самым последним материалам, к разделу Memories. Я заметил, что здесь используется обрезка многострочного текста:

.element {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

Это — встроенные стили, которые, кроме того, меняются в зависимости от браузера.

Код обрезки текста в Chrome и Firefox

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

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

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

.element:hover {
    background: #ccc;
}

Однако возникает такое ощущение, что на больших сайтах, вроде сайта Facebook, такой подход непрактичен. В процессе исследования сайта я обратил внимание на элемент, который выводится только при наведении на него указателя мыши (назовём его «hover-элемент»). В этом заключается его основная задача. Вот его стиль:

.hover-div {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
    inset: 4px 0px;
    background-color: var(--hover-overlay);
    transition-property: opacity;
    transition-timing-function: var(--fds-animation-fade-out);
    cursor: pointer;
}

Значение свойства opacity этого элемента меняется средствами JavaScript с 0 на 1. Я поэкспериментировал с ним и выяснил, что он используется для множества компонентов. Ниже приведён набор скриншотов, демонстрирующих использование этого элемента.

Использование hover-элемента

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

Использование свойства inset

Речь идёт о сокращённой записи значений свойства, подразумевающей воздействие на верхнюю, правую, нижнюю, и левую часть элемента. Пользоваться свойством inset можно так:

.element {
    inset: 4px 0;
    /* Это эквивалентно следующему: top: 4px, bottom: 4px, left: 0, right: 0 */
}

Свойство inset настраивается для вышеописанных hover-элементов, связанных с некоторыми другими элементами. Стиль встроен в HTML. Я заметил его применение к компоненту, показанному ниже.

Синим цветом выделены области, на которые воздействует свойство inset

Во время написания этого материала свойство inset поддерживает лишь Firefox 66+.

Атрибут dir=«auto» и логические CSS-свойства 

На многоязычных сайтах, вроде Facebook, иногда сложно спрогнозировать то, каким именно будет контент. Например, имя пользователя в некоем компоненте имеет атрибут dir=«auto». Это означает, что направление текста будет зависеть от языка. Скажем, при использовании английского языка текст будет выводиться слева направо, а при использовании арабского — справа налево.

Более того, надо отметить, что тут имеется встроенный стиль, который меняет направление текста (возникает такое ощущение, что атрибута dir=«auto» недостаточно). Вот как то выглядит:

محتوى بالعربية

Обратите внимание на то, что к элементу добавлен стиль text-align: start. Тут используется логическое CSS-свойство. Стиль, для LTR-макетов, будет выглядеть как text-align: right.

Если вас интересуют особенности RTL-стилизации — взгляните на этот мой материал.

Динамический фон, зависящий от главной фотографии

Фон, зависящий от главной фотографии

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

▍1. Получение доминантного цвета

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

Нахождение доминантного цвета

▍2. Добавление фона, использующего доминантный цвет

Фон, использующий найденный доминантный цвет

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

▍3. Добавление градиента поверх фона

Для добавления градиента поверх фона используется такой CSS-код:

.element {
    background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));
}

Добавление градиента (в дизайне используются светлые цвета)

В том случае, если в дизайне используются тёмные цвета, применяется обратный вариант градиента:

.element {
    background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));
}

Добавление градиента (в дизайне используются тёмные цвета)

Для нахождения доминантного цвета изображения можете воспользоваться этим инструментом.

Множественные тени

Тени

Мне понравился подход, используемый разработчиками Facebook при создании теней для различных элементов вроде выпадающих меню. Такая тень создаёт иллюзию объёма, гораздо более реалистичную, чем иллюзия, достижимая при использовании обычной тени.

Выпадающие меню

Вот CSS-код:

.element {
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

Тут у вас может возникнуть вопрос о том, зачем тут создаётся inset-тень белого цвета с прозрачностью в 50%? Дело в том, что это — тень для тёмного режима. Ниже показан увеличенный фрагмент интерфейса, в котором используется такая тень.

Увеличенный фрагмент интерфейса с inset-тенью

Мне нравится это разумное решение.

Пустые элементы для flexbox-сеток

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

Пустые элементы в сеточном макете

Вот CSS-код:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-items: space-between;
}

.item {
    width: 205px;
}

Выглядит всё это интересно, правда? Использование значения space-between при настройке размещения элементов — дело рискованное. Макет будет выглядеть неправильно в том случае, если, например, имеется всего три фотографии. Ниже показан пример такого макета.

Опасность использования space-between

Как команда Facebook справилась с этой проблемой? Очень просто: тут имеются четыре пустых элемента

@media (min-height: 700px) {
    .element {
        width: 584px;
    }
}

• О проекте
• Архив
• Реклама Партнёры Правовая информация Контакты Обратная связь
•