Многие утверждают, что CSS — это не язык программирования. Согласен — это жестче. Мастерство CSS требует навыков дизайна, решительности, изобретательности, опыта, а также программирования (особенно при использовании препроцессоров, таких как Sass).
CSS предлагает браузеру макеты и стили. Браузер может интерпретировать эти предложения по своему усмотрению, и даже в этом случае пользователь или устройство могут игнорировать или переопределять любые свойства. Создание высокопроизводительного кода, который хорошо работает на всех устройствах и разрешениях экрана, — это задача, которую лишь немногие пытаются или успешно решают. Тем не менее, награды могут быть волнующими.
Начиная с самого простого, следующие предложения по проектам помогут вам на пути к мастерству в CSS с помощью книг, доступных на SitePoint Premium.
1. Сделайте сайт удобным для печати
Посетите сайт, над которым вы работаете, и попытайтесь распечатать (или просмотреть перед печатью) страницу. Вы довольны результатами?
К счастью, CSS для печати можно разработать за несколько часов. Как правило, это вопрос сброса стилей (черное на белом), удаления ненужных разделов (меню, основных изображений, форм, виджетов социальных сетей и т. д.), линеаризации макета и снижения требований к бумаге и чернилам.
Погрузитесь в Инструменты разработчика на основе браузера (из CSS Master) и Секреты Browser DevTool, чтобы узнать, как проверять и изменять стили после переключения на рендеринг печати.
Применение CSS условно описывает, как определить @mediaправила запросов, включая printтаблицы стилей.
Обратитесь к Руководству по стратегии для пользовательских свойств CSS (от New Frontiers In Web Design), чтобы определить, могут ли переменные CSS помочь с печатью свойств. Также подумайте о специальных возможностях (из CSS Animation 101), чтобы отключить анимацию или распечатать ее в лучшем виде.
Наконец, статья «Как создать удобные для печати страницы с помощью CSS «(от «Инструменты и навыки CSS») содержит полное руководство по оптимизации печати с советами по экономии чернил и бумаги.
2. Примените современные темы CSS к существующему сайту
Единая цветовая гамма — это скучно! Все ожидают, что в их ОС и приложениях будет темный режим, так почему бы не добавить его на свой сайт?
До недавнего времени для переключателей тем обычно требовался дополнительный набор стилей с элементами управления переключением на основе JavaScript. Однако современные браузеры упрощают жизнь с помощью пользовательских свойств (переменных) CSS и правила.
Strategies for Theming (от New Frontiers In Web Design) предоставляет ряд идей и соображений при разработке новой темы.
Условное применение CSS (от CSS Master) описывает, как определять @mediaправила запросов, включая файлы
Наконец, «Современный CSS: добавление темной темы CSS» (от Modern CSS) содержит полное руководство по включению темной темы.
3. Переработайте макет формы
Изучите форму на своем
Форма регистрации (от Form Design Patterns) описывает лучшие способы дизайна, стиля и кодирования формы с использованием HTML5.
CSS Grid позволяет избавиться от ненужной разметки и создать пуленепробиваемые адаптивные макеты, не прибегая к
Готовые макеты сетки CSS (от New Frontiers In Web Design)
Создание макетов с помощью CSS Grid (из Master CSS) и
CSS Grid Layout (от Jump Start Responsive Web Design)
Наконец, Make Forms Great with CSS Grid (от CSS Grid Layout) содержит полное руководство, в котором представлен макет формы на основе сетки с запасными вариантами float для старых браузеров.
4. Сделайте свой сайт быстрее
В начале 2020 года средняя
Потратьте несколько часов на изучение существующего сайта, чтобы определить, можно ли заменить или оптимизировать изображения, шрифты и эффекты JavaScript с помощью более эффективного CSS. Ваш
Инструменты тестирования (от Jump Start Web Performance) и Отладка для отклика пользовательского интерфейса (от CSS Master) объясняют, как использовать инструменты DevTools современного браузера для оценки производительности и определения целей оптимизации.
«Загрузка активов в Интернете «(от New Frontiers In Web Design) описывает, как использовать такие методы, как критическая загрузка CSS и прогрессивная загрузка CSS, чтобы обеспечить эффективную загрузку таблиц стилей. 20 советов по оптимизации производительности CSS (от Modern CSS) содержит подборку практических советов.
Наконец, Jump Start Web Performance содержит десятки быстрых, более интенсивных и меняющих жизнь предложений по развитию, чтобы ваш сайт оставался быстрым для всех.
5. Запустите новый проект или компонент CSS
Приведенные выше предложения по проектам можно использовать для улучшения существующего сайта, но при запуске нового проекта с нуля ограничений нет. Варианты для рассмотрения:
Создайте
Создайте интерактивное портфолио. Графический список всех ваших сайтов с дополнительной информацией при нажатии на элемент. Макет сетки идеален, но если вы действительно хотите бросить вызов, попробуйте макет каменной кладки. (CSS Grid пока не может реализовать это, но подумайте, как этого можно добиться, используя столбцы CSS или вертикально упорядоченные макеты Grid.)
Закодируйте графический дизайн. Возможно, выберите привлекательную идею из Dribbble или подобного дизайнерского сообщества и закодируйте HTML5 и CSS3. Бонусные баллы за его создание без фреймворка или JavaScript!
Создавайте изображения только с помощью CSS. Создайте набор полезных значков на основе псевдоэлементов и форм CSS или создайте изображение с использованием градиентов и теней.
Поэкспериментируйте с анимацией SVG и CSS. Попробуйте создать привлекательные логотипы, диаграммы, индикаторы выполнения, счетчики активности и многое другое.
