Новые функции CSS, которые меняют веб-дизайн

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

какой из двух возможных веб-сайтов вы сейчас разрабатываете? pic.twitter.com/ZD0uRGTqqm

— Джон Голд (@jongold) 2 февраля 2016 г.

Это предел того, чего могут достичь наши «творческие» умы? Эта мысль вызвала в моем сердце неконтролируемый приступ печали.

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

Сегодня ландшафт дизайна полностью изменился. У нас есть новые и мощные инструменты — CSS Grid, настраиваемые свойства CSS, формы CSS и writing-mode CSS, и это лишь некоторые из них, — которые мы можем использовать для реализации нашего творчества.

Как CSS Grid изменил все

Сетки необходимы для веб-дизайна; ты это уже знал. Но задавались ли вы вопросом, как вы спроектировали сетку, которую в основном используете?

Большинство из нас нет. Мы используем 12-колоночную сетку, ставшую стандартом в нашей отрасли.

• Но почему мы используем одну и ту же сетку?
• Почему сетки состоят из 12 столбцов?
• Почему наши сетки одинакового размера?

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

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

Чтобы упростить задачу, мы приняли сетки. Вначале такие фреймворки, как 960gs и 1440px, позволяли нам выбирать между сетками из 8, 9, 12 и даже 16 столбцов. Позже Bootstrap выиграл войну фреймворков. Поскольку Bootstrap допускал только 12 столбцов, а изменить это было мучением, мы в конце концов остановились на 12 столбцах в качестве стандарта.

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

Теперь, с появлением CSS Grid, сетки стали намного проще . Нам больше не нужно бояться математики сетки. Это стало настолько просто, что я бы сказал, что создать сетку проще с помощью CSS, чем в таком инструменте дизайна, как Sketch!

Почему?

Допустим, вы хотите создать сетку из 4 столбцов, размер каждого столбца — 100 пикселей. С помощью CSS Grid вы можете написать 100px четыре раза в объявлении grid-template-columns , и будет создана сетка из 4 столбцов.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

Если вам нужна сетка из 12 столбцов, вам просто нужно повторить 100px 12 раз.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Да, код не красивый, но мы не заботимся об оптимизации качества кода (пока) — мы все еще думаем о дизайне. CSS Grid позволяет любому — даже дизайнеру без навыков программирования — легко создавать сетки в Интернете.

Если вы хотите создать столбцы сетки с разной шириной, вам просто нужно указать желаемую ширину в объявлении grid-template-columns , и все готово.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Делаем сетки отзывчивыми

Ни одно обсуждение CSS Grid не будет полным без упоминания адаптивного аспекта. Есть несколько способов сделать CSS Grid адаптивным. Один из способов (вероятно, самый популярный) — использовать единицу измерения fr . Другой способ — изменить количество столбцов с помощью медиа-запросов.

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

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

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

Во-первых, давайте предположим, что общее пространство, доступное для сетки, составляет 1260px .

Прежде чем выделить ширину для каждого столбца, CSS Grid должен знать, сколько места доступно (или осталось). Здесь он вычитает объявления 1260px grip-gap . Поскольку каждый зазор составляет 20 20px , у нас остается 1200px для доступного пространства. (1260 - (20 * 3) = 1200) .

Затем он складывает множители fr . В этом случае у нас есть четыре кратных 1fr , поэтому браузеры делят 1200px на четыре. Таким образом, каждый столбец имеет 300px . Вот почему мы получаем четыре равных столбца.

Однако сетки, созданные с помощью модуля fr , не всегда равны !

Когда вы используете fr , вы должны знать, что каждая единица fr является частью доступного (или остаточного) пространства.

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

Например, сетка ниже имеет один большой столбец и три маленьких (но равных) столбца, хотя она создана с помощью grid-template-columns: 1fr 1fr 1fr 1fr .

После разделения 1200px на четыре и выделения 300px каждому из столбцов 1fr браузеры понимают, что первый элемент сетки содержит изображение 1000px . Поскольку 1000px больше, чем 300px , браузеры предпочитают вместо этого выделять 1000px для первого столбца.

Это означает, что нам нужно пересчитать оставшееся пространство.

Новое оставшееся пространство составляет 1260px - 1000px - 20px * 3 = 200px ; затем эти 200px делятся на три в соответствии с количеством оставшихся фракций. Каждая дробь равна 66px . Надеюсь, это объясняет, почему единицы fr не всегда создают столбцы одинаковой ширины.

Если вы хотите, чтобы модуль fr каждый раз создавал столбцы одинаковой ширины, вам нужно принудительно настроить его с помощью minmax(0, 1fr) . Для этого конкретного примера вы также захотите установить для свойства max-width изображения значение 100%.

Примечание . Рэйчел Эндрю написала потрясающую статью о том, как различные значения CSS (min-content, max-content, fr и т. д.) влияют на размер контента. Это стоит прочитать!

Сетки неравной ширины

Чтобы создать сетки с неравной шириной, вы просто меняете множитель fr. Ниже приведена сетка, соответствующая золотому сечению, где второй столбец в 1,618 раза больше первого столбца, а третий столбец в 1,618 раза больше второго столбца.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Изменение сетки в разных точках останова

Если вы хотите изменить сетку в разных точках останова, вы можете объявить новую сетку в медиа-запросе.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

Разве не легко создавать сетки с помощью CSS Grid? Раньше дизайнеры и разработчики убили бы за такую ​​возможность.

Сетки на основе высоты

Раньше было невозможно создавать сетки на основе высоты веб-сайта, потому что у нас не было способа определить высоту области просмотра. Теперь, с единицами области просмотра, CSS Calc и CSS Grid, мы можем даже создавать сетки на основе высоты области просмотра.

В приведенной ниже демонстрации я создал квадраты сетки на основе высоты браузера.

У Джен Симмонс есть отличное видео, в котором рассказывается о разработке четвертого преимущества — с помощью CSS Grid. Я настоятельно рекомендую вам посмотреть его.

Размещение элемента сетки

Позиционирование элементов сетки в прошлом было большой проблемой, потому что вам приходилось вычислять свойство margin-left .

Теперь с помощью CSS Grid вы можете размещать элементы сетки напрямую с помощью CSS без дополнительных вычислений.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Вы даже можете указать элементу сетки, сколько столбцов он должен занимать, с помощью ключевого слова span .

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

Вдохновение

CSS Grid позволяет вам так легко размещать вещи, что вы можете быстро создавать множество вариантов одного и того же веб-сайта. Одним из ярких примеров является личная домашняя страница Линн Фишер.

Если вы хотите узнать больше о возможностях CSS Grid, посетите лабораторию Джен Симмон, где она исследует, как создавать различные виды макетов с помощью CSS Grid и других инструментов.

Чтобы узнать больше о CSS Grid, ознакомьтесь со следующими ресурсами:

• Master CSS Grid, Рэйчел Эндрю и Джен Симмонс Видеоуроки
• Layout Land, Джен Симмонс Серия видеороликов о верстке
• Семинар по верстке CSS, Рэйчел Эндрю Курс по верстке CSS
• Learn CSS Grid, Джонатан Су Бесплатный курс по CSS Grid.
• Создатели сетки, Дэйв Геддес Интересный способ изучения CSS Grid

Проектирование с неправильными формами

Мы привыкли создавать прямоугольные макеты в Интернете, потому что блочная модель CSS — это прямоугольник. Помимо прямоугольников, мы также нашли способы создания простых форм, таких как треугольники и круги.

Сегодня нам не нужно останавливаться на достигнутом. Имея в нашем распоряжении формы CSS и clip-path , мы можем без особых усилий создавать неправильные формы.

Например, Айша Анггрэйни экспериментировала с макетом, вдохновленным комиксами, с помощью CSS Grid и clip path .

Хуэй Цзин объясняет, как использовать фигуры CSS таким образом, чтобы текст двигался по кривой Бейонсе.

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

CSS-фигуры и clip-path дают вам бесконечные возможности для создания пользовательских форм, уникальных для вашего дизайна. К сожалению, с точки зрения синтаксиса формы CSS и clip-path не так интуитивно понятны, как CSS Grid. К счастью, у нас есть такие инструменты, как Clippy и Firefox Shape Path Editor, которые помогают нам создавать нужные нам фигуры.

Переключение потока текста с помощью writing-mode CSS

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

Но некоторые языки не текут в этом направлении. Например, китайские слова можно читать сверху вниз и справа налево.

writing-mode CSS заставляет текст течь в направлении, характерном для каждого языка. Хуэй Цзин экспериментировал с китайской раскладкой, которая идет сверху вниз и справа налево на веб-сайте под названием Penang Hokkien. Подробнее о ее эксперименте можно прочитать в ее статье «Эпизод о доме».

Помимо статей, у Хуэй Цзин есть отличный доклад о типографике и writing-mode «Когда Восток встречается с Западом: веб-типографика и как она может вдохновлять современные макеты». Я настоятельно рекомендую вам посмотреть его.

Даже если вы не проектируете для таких языков, как китайский, это не значит, что вы не можете применить writing-mode CSS к английскому языку. Еще в 2016 году, когда я создал Devfest.asia, я напряг небольшой творческий мускул и решил повернуть текст с помощью writing-mode .

Лаборатория Джен Симмонс также содержит множество экспериментов с writing-mode . Очень рекомендую его тоже посмотреть.

Усилия и изобретательность имеют большое значение

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

Например, в Super Silly Hackathon Чион поворачивает весь веб-сайт на -15 градусов и заставляет вас выглядеть глупо при чтении веб-сайта.

Дарин Сеннефф сделал анимированный аватар для входа с некоторой тригонометрией и GSAP. Посмотрите, какая милая обезьяна и как она закрывает глаза, когда вы фокусируетесь на поле пароля. Подобно интерактивной форме входа в систему, здесь также есть очень удобный и интерактивный калькулятор, который помогает оценить сумму упущенной выгоды при использовании внешних сервисов, таких как JustEat!

Когда я создал продающую страницу для своего курса «Изучение JavaScript», я добавил элементы, благодаря которым изучающие JavaScript будут чувствовать себя как дома.

Подведение итогов

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

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