Перевод статьи 5 New CSS Techniques to Master in 2020
Веб-дизайнеры очарованы развивающимися возможностями CSS. Если использовать его с умом, то CSS может решать практически любые задачи в проекте, делая код более чистым, структурированным и интуитивно понятным для других разработчиков.
Так какие методы и инструменты сегодня популярны? Познакомьтесь с рядом из них и попробуйте с их помощью сделать ваш следующий проект лучше.
1.Сделайте таблицы CSS гриды адаптивными
Если всё остальное в верстке проекта является адаптивным, убедитесь, что гриды — не исключение. Есть несколько способов создать гибкую сетку, которая всегда визуализирует так, как вы хотите, независимо от размера устройства — используйте CSS Grid :)
Самое приятное, что адаптивная CSS — сетка работает со столбцами равных или неравных размеров. Вы можете использовать различные брейкпоинты, высоты и места размещения элементов. (Это очень крутая технология с большим функционалом, которая дает вам возможность делать верстку более кастомизируемой)
Начните с единицы фракции (fr), гибкой единицы, которая делит пропуски в соответствии с вашими правилами. Каждое объявление fr- это столбец; затем вы можете добавить пробелы, и у вас получится сетка.
https://codepen.io/zellwk/pen/qoEYaL
Узнайте больше: Smashing Magazine имеет отличное руководство. Там есть множество примеров, которые помогут лучше понять и эффективнее использовать адаптивные гриды.
2. Используйте различные шрифты
Переменные шрифты довольно новая технология. Они представляют из себя один файл, который включает в себя все версии шрифта, которые понадобятся пользователю для просмотра вашего дизайна.
В новом логотипе для «Доктора Кто» на BBC, который выше, использует специально созданный переменный шрифт.
Чтобы использовать переменные шрифты, необходимо выбрать тот, который поддерживает эту функцию, а также браузер, поддерживающий font-variation-settings. (поддерживается большинством современных браузеров)
https://www.axis-praxis.org/demo/5/resize-textbox-gimlet
Узнайте больше: Axis-Praxis- это игровая площадка с переменными шрифтами. На ней вы можете играть, тестировать комбинации и даже находить шрифты для проектов.
3. Создавайте текстовые анимации
Кроме изменений при наведении курсора и слов, которые плавают или прокручиваются на странице, CSS может влиять на то, как пользователи читают и взаимодействуют с текстовыми элементами.
То есть то, что когда-то было только статическим элементом, может иметь динамическое отображение. И это довольно популярный подход для сайтов, которые не имеют большого количества других художественных элементов. Все они могут привлечь пользователей.
Узнайте больше: Animista- это инструмент, который находится в бета-версии , но позволяет вам экспериментировать с большим количеством различных стилей текстовой анимации.
https://codemyui.com/split-in-half-text-animation/
И даже больше: Code My UI имеет хорошую коллекцию готовых примеров для создания различных текстовых анимаций, например, как фрагмент разделенного текста, приведенный выше.
4. Реализуйте обработку процесса прокрутки
Есть много случаев, когда хотелось бы управлять скроллингом, чтобы пользователи видели определенную часть дизайна сразу.
CSS Scroll Snap — это хорошее решение. Вот как это описывает Google:
Функция CSS Scroll Snap позволяет веб-разработчикам создавать хорошо контролируемые возможности прокрутки, обозначая позиции привязки прокрутки. Разбитые на страницы статьи и графические карусели — два широко используемых примера.
Проще говоря, это означает, что вы можете управлять точками прокрутки, как по вертикали, так и по горизонтали (в основном это просто шаблон рабочего стола). Таким образом пользователи видят именно то, что вы хотите.
https://developers.google.com/web/updates/2018/07/css-scroll-snap
Узнайте больше: вы можете найти почти все, что вас может заинтересовать, от разработчиков Google, включая несколько фрагментов кода для быстрого старта.
5. Тестовая поддержка браузера с помощью CSS
CSS может даже помочь вам определить, поддерживают ли определенные браузеры новые функции CSS.
Правило Feature Queries @supports позволяет определить значение на основе возможностей браузера. Проблема в том, что это не работает ни для чего старше Internet Explorer 11, но в наши дни у этого браузера не так уж много пользователей.
Узнайте больше: вы можете изучить фрагменты кода и разобраться с синтаксисом, а также получить примеры из Mozilla.
CSS Grid ресурсы
CSS Grid Layout — сейчас это одна из самых обсуждаемых вещей, когда речь заходит о CSS. Если вы не в курсе, то самое время начать учиться.
«CSS Grid — это мощный инструмент, который позволяет создавать двухмерные макеты в сети», — так описывает его Jonathan Suh в своем руководстве по упакованным ресурсам.
Вот пять отличных ресурсов CSS Grid:
Заключение
Играть с CSS и изучать его новые фишки может быть очень весело — если это не заставляет вас рвать на себе волосы. Мы надеемся, что эти идеи дадут вам достаточно вдохновения. Удачи вам!
P.S. В HackerU на курсе по Full Stack-разработке вы изучите все фишки и лайфхаки для работы с CSS, которыми поделяться разработчики из успешных проектов и компаний топ-100. Записывайтесь на ознакомительный интенсив и начните свою карьеру в качестве веб-разработчика :)
