Пять наиболее раздражающих аспектов CSS

Здравствуйте!

CSS кажется простым и понятным, пока вам не приходится делать что-то нестандартное. Вот еще один взгляд на проблемы CSS. Это перевод статьи «5 Most Annoying Things with CSS».

В 1996 основные браузеры поддерживали CSS лишь частично, и из-за этого веб-дизайнеры были вынуждены придумывать кучу хаков и обходных путей, чтобы их стили работали так, как они хотели. Фактически только с 1999 года каждый браузер наконец стал поддерживать CSS1 полностью. IE 5.0 для Макинтош, выпущенный в марте 2000 года, стал первым браузером, достигшим полной поддержки спецификации CSS1. CSS2 был выпущен в 1999 году, но дизайнеры не решались использовать его повсеместно из-за неполной поддержки стандарта браузерами.

CSS3 начали разрабатывать в 1998 году, и до 2009 года он был в разработке. Он содержал кучу долгожданных дополнений, вроде скругления углов, теней, градиентов, переходов и анимаций, а также новых возможностей разметки, вроде мультиколоночных макетов, flexbox или сеток.

К счастью, кроме усилий W3C по улучшению спецификации в соответствии с требованиями разработчиков, сообщество само разработало множество решений для улучшения и упрощения работы с CSS в сложной среде. SASS, Stylus, LESS ввели в обиход циклы, примеси и функции. Внедрение переменных CSS упростило написание сложных стилей, улучшило читаемость и упростило поддержку.

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

Даже сегодня, называя себя «fullstack разработчиком» или «front-end разработчиком», с опытом работы в год или восемь лет, вы все равно столкнетесь с ситуацией, когда CSS заставит вас попотеть.

Я перечислю некоторые крупные проблемы CSS:

CSS ориентирован на разметку, не на дизайн

Дизайнеры должны тратить больше времени на создание отличного дизайна и меньше времени на возню с разметкой и проблемами совместимости браузеров. Когда я говорю «ориентирован на разметку», я имею в виду, что каждый инструмент дизайна CSS заставляет лезть в исходный код, чтобы создавать хороший дизайн. Инструменты для дизайнеров должны быть ориентированы на дизайн. CSS плох, потому что он заставляет дизайнеров думать о том, как реализовать их дизайн технически, а не с позиций дизайна.

Браузерные войны

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

Советы:

• Всегда используйте Normalize.css. Он заставляет браузеры отрисовывать все элементы более предсказуемо и в соответствии с современными стандартами. Он точно затрагивает только элементы, которые нуждаются в нормализации.
• Вы можете использовать фреймворки типа Bootstrap, Bulma и Materialize. По большей части они хорошо совместимы с большинством браузеров.
• Используйте генераторы кода CSS3. Они помогают разработчикам писать кроссбраузерные участки кода для разных свойств CSS3. Они дают разработчикам широкие возможности кастомизации, включая border-radius, text-shadow, RGBa, box sizing. Один из сервисов — CSS3 Generator.
• Валидация: сервис валидации W3C валидирует разные версии XHTML и HTML, выводя кучу важных ошибок и сообщений, чтобы помочь разработчикам создавать отличные сайты. W3C Validator: http://validator.w3.org
• W3C Css Validator: http://jigsaw.w3.org/css-validator
• Тестирование: поскольку практически невозможно руками протестировать сайт во всех возможных браузерах и операционных системах, на помощь приходят инструменты кроссбраузерного тестирования! Вы можете использовать Browsershots, BrowserStack, Cross Browser Testing и подобные сервисы для тестирования.

Отзывчивый макет

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

Кроме ориентации, нам нужно также учесть тысячи разных размеров экрана. Многие пользователи не разворачивают браузер на весь экран, и это тоже вносит свою лепту.

Советы:

• Отдавайте приоритет важному контенту и скрывайте маловажные детали на малых экранах. Я считаю, что важнее всего показывать самое важное на небольших экранах. Иногда удалить часть контента на мобильных невозможно, тогда стоит предусмотреть возможность его скрытия.
• Используйте SVG. В отличие от традиционных изображений, вроде PNG или JPEG, SVG легко масштабируется без потери качества. Кроме того, часто они меньше размером, так что вы немного повысите скорость загрузки сайта.
• Когда дело доходит до взаимодействия с пользователем, фокусируйтесь на том, чтобы предоставлять достаточно большие контролы (поля вводы, кнопки, переключатели).
• Для смартфонов по возможности делайте кнопки не меньше 44px, как это рекомендуется в iOS Human Guidelines
• Протестируйте дизайн на минимум пяти пользователях, используя их привычные устройства.
• Используйте фреймворки типа Bootstrap. С ними создание пригодного для мобильных устройств сайта становится намного проще. Использование готовых классов из Bootstrap поможет вам определиться с сеткой и размещением контента.

Сделайте красный более синим

Многие клиенты приходят со странными требованиями, завышенными ожиданиями, желаемым функционалом, который никогда не обсуждается. В результате мы приходим к бесконечным правкам и бесчисленным итерациям. Клиенты меняют свои желания каждую секунду, особенно когда дело касается дизайна. Будучи вынужденными поддаваться каждой прихоти клиента, дизайнеры воспринимают это как плохое обращение или оскорбление. Вот почему популярны сайты вроде Clients From Hell.

Советы:

• Создание анимированных прототипов — хороший вариант показать ваши идеи. Используйте программы вроде Adobe XD, Sketch, InVision и так далее. Начинайте разработку только после согласования дизайна.
• Будет разумно с самого начала спланировать весь процесс разработки. Вероятнее всего, в процессе придется добавить время на разные неожиданности. Помните закон Мерфи: «Что может пойти не так — пойдет не так».
• Сохраняйте спокойствие. Не позволяйте эмоциям взять над собой верх. Просто помните, что клиент не заканчивал художественную школу, и может не понимать, что красный текст на зеленом фоне не улучшает читаемость. Объясняйте свои решения касательно визуальной иерархии, типографики и всего, что могут затронуть изменения.
• Помните, что сайт — для вашего клиента, а ваша цель — сделать клиента довольным сайтом. Лучшее, что вы можете сделать — дать свои рекомендации касательно изменений. Если вы не согласны, просто сделайте все, что можно, чтобы сайт выглядел максимально хорошо.

CSS недооценен

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

Я работала с несколькими изумительными бэкенд-инженерами, которые знали каждый паттерн ООП в книге, но намертво застревали с позиционированием и float, и считали отзывчивый CSS чем-то вроде черной магии. Так что я нахожу этот комикс очень точным.

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

Как я говорила в своей предыдущей статье «Troubleshooting CSS», работа с CSS и получение хороших результатов от работы с CSS — две большие разницы. С CSS легко начать, но мастерство потребует усилий. Это то, что требует минуту на знакомство и всю жизнь (с преувеличением) на мастерство.