Как выбрать стиль в браузере

Обновлено: 06.07.2024

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

Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.

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

Текущая ситуация

Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.

Хотя Windows 7 ( 31,20% ) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.

Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .

Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .

Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.

Проанализируйте свою аудиторию

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

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

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.

Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, <header>, <nav>, <section>, <aside>, <footer>) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, [attribute*=value] , :checked , :nth-child(n) , :not(selector) , :last-child)) . И, наконец, адаптивная типографика часто задается с помощью единиц REM ( root em ).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

Медиа-запросы CSS3 : не поддерживается в IE6 , 7 и 8 ;
Семантические элементы HTML5 : не поддерживается в IE6 , 7 и 8 ;
Селекторы CSS3 : не поддерживается в IE6 . Только частично поддерживаются в IE7 и 8 ;
Единицы REM : не поддерживается в IE6 , 7 и 8 . Только частично поддерживаются в IE9 и 10 ;
Лимит количества правил CSS : IE9 и ниже поддерживают только 4095 CSS-селекторов . Правила после 4095-ого селектора не применяются.

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

Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение .

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

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

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

Какой подход выберете вы, зависит от личных предпочтений и условий проекта:

Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.

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

Чтобы как можно скорее обнаружить потенциальные проблемы кроссбраузерности JavaScript , нужно в процессе разработки тестировать сайт в различных браузерах и разрешениях. Существуют различные программные эмуляторы, которые могут нам помочь:

Normalize.css и CSS Autoprefixer

Обычно я начинаю новые проекты в CDN со сброса CSS с помощью Normalize.css , который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов , используемых по умолчанию, вплоть до Internet Explorer 8 . Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.

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

Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt .

В качестве примера рассмотрим следующий класс CSS :

С помощью CSS Autoprefixer он преобразуется в:

Условные комментарии

Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer , то можете использовать условные комментарии . Они поддерживаются в Internet Explorer 5-9 , они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения ( true или false ) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:

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

Полифиллы

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

Для использования указанных полифиллов, их нужно добавить из CDN или в виде файла в корректном формате внутри условных комментариев в разделе <head> (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript ):

Определение функций с помощью Modernizr

Библиотека Modernizr , написанная на JavaScript , поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3 . Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код .

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

Стоит отметить, что Modernizr не добавляет недостающие функции в браузер. Поэтому вам нужно будет предоставить код из резервного CSS или полифилла.

Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла :

Класс .no-js используется, чтобы проверить, включен ли JavaScript в браузере пользователя. Если он включен, Modernizr заменит .no-js классом .js . Функция тестирования Modernizr анализирует, поддерживается ли в браузере конкретная функция и генерирует ряд классов, которые добавляются в HTML-элемент . Google Chrome 47.0.2526.111 , например, будет возвращать следующие классы объектов.

В настоящее время Modernizr доступен в качестве глобального объекта, который можно вызвать в сочетании с названием функции, чтобы проверить существует ли она. Он возвращает логическое значение ( true или false ).

Рассмотрим два простых примера CSS и JavaScript .

Пример решения проблем CSS кроссбраузерности: проверка поддержки SVG и предоставление в качестве резервного варианта PNG

Пример JavaScript: определение border-radius и добавление соответствующих классов CSS

Округление углов рамки не поддерживается в IE8 и ниже. Мы можем создавать различные CSS-классы , которые применяются в зависимости от наличия функции border-radius :

Теперь можно использовать JavaScript , чтобы сохранить целевой идентификатор в качестве переменной, а затем через условие добавить классы CSS :

Заключение

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

Тщательно выбирая правильные полифиллы, добавляемые в условных комментариях, можно обойти отсутствие наиболее существенных функций HTML5 . Кроме этого возможность определения с помощью Modernizr является удобным способом предоставить резервные CSS и JavaScript для устаревших браузеров, в которых отсутствует поддержка современного функционала HTML5 и CSS3 .

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

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!

Приветствую вас, читатель моего блога!
Эта статья о том, как можно задать отдельные CSS стили для разных браузеров, используя CSS хаки. Я дам несколько примеров CSS хаков, и расскажу об их особенностях. А также покажу альтернативные способы решения проблемы задания отдельных CSS стилей для определённых браузеров.

Навигация по статье:

Что такое CSS хаки и для чего они нужны?

В предыдущей статье я писала о кроссбраузерной вёрстке. Проблема кроссбраузерности сайта очень актуальна на сегодняшний день, потому как сейчас существует множество различных браузеров и к большому сожалению не все они одинаково отображают определённые элементы и css свойства.

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

CSS хак – это определённый селектор или группа селекторов стили для которых работают в одних браузерах и игнорируются другими.

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

Например, если мы напишем:

То во всех браузерах для элемента с классом block применится сплошная красная рамка, толщиной в 2 пикселя.

Однако возможно, что в одном из этих браузеров (например Mozilla Firefox) эта рамка будет выглядеть более толстой, чем в остальных или из-за её добавления один из блоков соскочит на новую строку и т.д. при этом в остальных браузерах всё будет отображаться нормально.

Если мы пропишем данные правила следующим образом:

То во всех браузерах у элемента с классом block отобразится рамка толщиной в 2 пикселя, а в браузере Mozilla Firefox отобразится рамка в 1 пиксель и таким образом это решит проблему.

При этом нужно учитывать, что CSS хаки нельзя использовать при первой же возможности когда в одном их браузеров что то пойдёт не так! В первую очередь потому, что нет никаких гарантий что в следующих версиях данного браузера этот CSS хак будет работать.

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

CSS хаки для Internet Explorer

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

Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!

Если хотите, можете сами попробовать. Вот эти CSS хаки:

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

Для задания стилей только для браузера Internet Explorer лучше и надёжнее вместо CSS хаков использовать условные комментарии.

Код условных комментариев выглядит так:

Данный код рассчитан на все версии Internet Explorer

Если нам нужно чтобы стили применились только для определённой версии IE, то мы пишем:

Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.

CSS хак для Mozila Firefox

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

Вместо .block пишем класс или ID элемента, для которого нужно задать стиль.

CSS хак для GoogleChrome

Для того чтобы прописать CSS стили только для Chrome можно использовать следующий хак:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) <

CSS хаки для Opera

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

Для версии Opera 10 можно попробовать:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) <

Для более ранних версий есть следующие варианты:
Opera 9.2 и младше

Ещё вариант:

Есть ещё такой хак:

Но его видит так же Mozilla последних версий и Chrome, поэтому не советую его использовать!

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

На что обратить внимание при использовании CSS хаков.

CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.

Так что используйте их только в крайних случаях и с осторожностью.

В качестве альтернативного решения проблемы могу посоветовать использование скрипта для определения браузера и подключения соответствующего файла стилей.

Более подробно об этом я напишу в моей следующей статье.

Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения :)

Когда мы создаем дизайн в браузере?

Лучшие инструменты дизайна это те, которые создают наименьший барьер между создателем и созданиями (здесь хороший пример – карандаш). Дизайн в браузере добавляет необходимое количество халтуры в процесс.

В добавок к этому: Фактически Вы получаете удовольствие от процесса работы с пикселями на артборде. Многие веб-дизайнеры происходят из формальной среды графического дизайна. Неторопливость и тщательное рассмотрение у нас в крови. Причины почему мы проектируем в браузере сильно варьируются, а подход, который мы выбираем, сильно зависит от задачи, которую на нас возлагают. Другими словами, если ситуация требует дизайна в браузере, то почему бы и нет?

Как начинать дизайн в браузере?

Есть очень много различных способов, чтобы начать работу над проектом. В этой статье мы расскажем о способе philosophie , в котором, обычно проект начинается с владельца нового, профинансированного продукта. Многие лидеры в сфере дизайна, как например Ден Молл, подробно рассказывают о том, как легко и успешно произвести запуск проекта, поэтому сегодня мы не будем вдаваться в подробности этой темы. До начала проекта, скажем, что мы определили ряд пользователей и их основные требования к нашему продукту. Основная формулировка, определяющая что, как и зачем, формулировка гипотезы, что мы намереваемся решить, возможно даже элементарные наброски или список функций. На этом этапе мы получили неопределенное понимание того, для кого мы проектируем и что клиент хочет донести. Нам хотелось бы начать с доски настроек. Они изобразить фирменное выражение (слоган), не затрачивая на это большое количество времени и сил. Для этих целей подходят Pinterest , Dribbble – чтобы дизайнер не заготовил, здесь есть хорошие визуальные опции для клиента.

Далее, мы выбираем фреймворк, скелет, для которого быстро делаем разметку лейаута и прикладываем к UI. Для маркетинговых и коммерческих сайтов, мы предпочитаем Foundation , потому что опции расположены в коде. Они более понятны, на наш взгляд, и их легче корректировать, чем Bootstrap . Bootstrap – это функциональный фреймворк идеальный для админ-направленных приложений. Изначально, здесь меньше работы, но больше возможностей для работы с CSS. Затем, руководство по стилю. Начиная с руководства по стилю или серии “style tiles”, очень важно содержать элементы дизайна организованными и сжатыми в пределах системы дизайна. Мы не будем вдаваться в подробности, есть много статей на эту тему, лишь скажем, что руководство по стилю самый простой способ вносить конструктивные изменения по мере необходимости. А это главная причина того, почему мы выбираем дизайн в браузере. Мы привыкли строить руководство по стилю UI элементов вручную, но Вы можете использовать методологию KSS или даже Hologram для большей автоматизации работы.

Наконец, композиция. Мы всегда стараемся учитывать один момент: не терять из виду принципы разработки. Движение глаз, иерархия, контраст – очень просто потеряться в коде. Когда мы проектировали исключительно в Photoshop, мы думали о дизайне более концептуально и детально: мы могли больше экспериментировать с новыми методами призыва к действию, с новым лейаутом, с современной анимацией. В этом смысле, дизайн в браузере не дает думать вне коробки. Мы считаем, что проще всего начинать с открытого текста, затем html разметка, далее добавление лейаута фреймворка, добавление селекторов и потом стиль селекторов в CSS.

Использование инструментов браузера

Таким образом, Вы создали первоначальный вид своего сайта в браузере, и теперь пора сделать превью с клиентом. И тут происходят чудеса. Вместо типичного нескончаемого цикла вопрос-ответ, Вы можете заранее позаботиться обо всем, что может быть интересно клиенту на встрече. Вот как мы использовали инспектор в Chrome : Клиент хочет сделать изменение в тексте. Откройте инспектор и выберите «edit text». Сделайте скриншот изменения.

Мы решили добавить новую контент колонку в секции на странице. Откройте инспектор, “edit HTML”, скопируйте и вставьте колонку. Бум, новая колонка! Сделайте скриншот изменения.

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

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

Обратите внимание на то, что мы делаем скриншоты для того, чтобы сохранить код. Это вызвано тем, что использование инспектора не является способом произвести самый красивый, семантический код; это – просто обман, чтобы экспериментировать с проектным решением или получить одобрение от клиента. Использование скриншотов, однако, позволяет Вам сохранить изменение и позже выявить лучший способ объединить это с Вашей кодовой базой.

Работа в команде

Оговорка: philosophie использует Pivotal Tracker в качестве проекта управления инструментом на выбор, и обычно, Ruby on Rails в качестве «дежурного» стека. Дизайн в браузере позволяет Вам работать в команде. Первый спринт может включать в себя стили foundation или bootstrap. Это – просто дизайн MVP. Далее, второй спринт может не спеша работать над брендингом, пересматривать шрифты, улучшать иерархию и другие действия, которые Вы можете определить со своей командой. Вы даже можете работать, используя Photoshop, в то время как вносятся различные изменения. Что касается того, как мы объединяем истории дизайна в Pivotal Tracker, мы посчитали, что было бы эффективно создать пользовательские истории для задач фронтенда, отдельных от историй бэкенда. Таким образом, Вы можете позволить дизайн бежать впереди разработки или дать вначале инженеру создавать модели и контроллеры, пока Вы занимаетесь внешним стилем. Все взаимозаменяемо и гибко. Например: в то время как Вы как фронтенд dev можете создать и разработать статические страницы, такие как домашняя страница, форма обратной связи или текстовая страница, бэкенд dev производит формы логина. Затем фронт-ender может перейти на страницы логина и разработать их.

Как это работает «в реальности»?

Работая над последним своим проектом, мы поняли, что дизайн в браузере – это хороший способ сэкономить бюджет, но все же получить свежий и чистый вид работы. Вся работа проходит быстро, так как мы копировали лейауты и страницы, используя Bootstrap в качестве фреймворка и Sublime Text в качестве текстового редактора. Мы работали в составе команды разработчиков, как было упомянуто выше, и успешно разделяли между собой обязанности. В то время, как мы достигли половины пути в работе над проектом, клиент захотел изучить новые направления домашней страницы. Не желая ограничивать себя в плане дизайна, мы решили, что Photoshop станет лучшим способом в выполнении цикла домашней страницы. С этими новыми стилями, составленными в Photoshop и элементами UI, необходимо было изменить стили в одном месте, и весь сайт приспособился к новому дизайну домашней страницы.

Заключительные мысли

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

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

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

Это не так сложно, как вы думаете

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

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

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

Одно из главных преимуществ проектирования в браузере — возможность создания проекта, основываясь на реалистичных ожиданиях. Иногда проект, созданный в графическом редакторе оказывается сложно реализовать в верстке. Объяснить клиенту почему элементы утвержденного дизайна были в итоге изменены, часто довольно сложно.

У вас должен быть план

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

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

Перед началом проектирования удобно иметь готовой главную информацию: карту сайта, содержание, элементы «call to action» и архитектуру сайта. В таком случае у вас будет четкая стратегия создания дизайна, а все материалы будут собраны.

Начните с эскиза

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

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

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

Стили

Прежде чем мы сможем начать работу, нам нужно выбрать стиль, в котором будет выполнен дизайн. Мы должны определить цвета и шрифты, которые будем использовать с текстурами и паттернами. Вот где нам поможет сервис Style tiles.

Style tiles был создан Самантой Уоррен для удобства веб-дизайнеров. С его помощью клиенты могут увидеть раннюю и сильно упрощенную версию общего стиля, который можно использовать, чтобы начать проектирование. Вы можете создать несколько вариантов, чтобы определить к чему больше тяготеет клиент, а затем сузить варианты до одного. Это тоже очень важно для процесса утверждения и помогает исключить резко негативное отношение к финальному варианту дизайна.

Дизайн

Теперь мы готовы приступить к созданию дизайна. Если вы привыкли использовать Photoshop или Sketch, то большой разницы не почувствуете. Используя файл-прототип, мы начинаем добавлять контент в наш макет. На данном этапе мы уже точно знаем, что происходит в каждом контент-блоке и сетка уже определена, поэтому процесс не должен занять много времени.

Теперь время поработать над стилями. Укажите базовые стили для цвета, типографики, и макета. После того, как базовые стили прописаны, посмотрите на проект. Вы можете делать скриншоты, чтобы можно было посмотреть их позже.

Совершенствование

После того как вы закончите работу над базовыми стилями, сделайте заметки о том, что нужно усовершенствовать. На основе этих заметок, используя Photoshop или Sketch, добавьте текстуру или любой элемент, который даст нужный эффект. Photoshop и Sketch — отличные инструменты для быстрой работы над сложными элементами UI, поэтому создавайте в них, все что пришлось бы расписывать в коде больше одного раза.

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

Сохраняйте и используйте вновь шаблоны

Если бы вам пришлось проектировать в браузере с нуля каждый раз, то этот процесс мог бы показаться вечным. Но если вы начнете с универсального шаблона или основы, вам удастся избежать любых повторных действий. Для начала вы можете использовать отредактированную под ваши нужды версию Initializr (это генератор HTML5-шаблонов). Автор статьи использует такой шаблон с адаптивной сеткой, созданной на Sass. Использование универсальных шаблонов даст вам фору для прототипирования и дизайна.

Библиотека популярных шаблонов UI — тоже отличный способ быстро создать прототип, и это делает проектирование в браузере более эффективным. Автор статьи использует сервис Sublime Text для кода. И еще одна вещь, которая вам поможет — заготовленные фрагменты кода, которые вы можете создать самостоятельно. Это могут быть несколько вариаций навигации, списки, боковые панели и другие общие элементы, которые можно добавить в списки сниппетов и размещать одним простым действием. Вы также можете завести аккаунты на Codepen и JSFiddle, чтобы хранить шаблоны. Дэн Сидерхолм создал отличную тему WordPress для хранения шаблонов, которая называется Pears. Он использует посты, чтобы делиться кодом, который вы можете редактировать в реальном времени .

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

Каждому браузеру свой стиль

Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации CSS, между ними все еще имеются различия в подходах. Каждый браузер интерпретирует по своему усмотрению код HTML и стилей в особенности. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался. Большинство пользователей просто равнодушно относятся ко всяким стандартам и спецификациям, хотя бы потому, что и не подозревают об их существовании. Многие даже не знают, что такое HTML и пользуются браузером, который установлен в системе по умолчанию. Люди приходят на сайты за информацией и заинтересованы в том, чтобы получить ее быстро и без проблем. Если любимый браузер «криво» отображает сайт, то проще не разбираться в чем дело, а закрыть сайт и перейти на другой, благо их теперь много по любой теме.

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

Применение JavaScript

Проще всего определить нужный браузер с помощью JavaScript, после чего загрузить для него требуемый файл со стилями. Этот способ хорош еще тем, что позволяет узнать версию браузера, а не просто его название. Сам стилевой файл подключается через метод document.write , который в данном случае будет использоваться так:

где style.css представляет собой файл для конкретного браузера.

В общем случае определение браузера и ссылка на файл CSS для него происходит, как показано в примере 1.

DOM = document.getElementById;
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
Opera5 = window.opera && DOM;
Opera6 = Opera5 && window.print;
Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
IE = document.all && !Opera5;
Firefox = navigator.userAgent.indexOf("Firefox") >= 0;

if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>");

Не стоит считать, что придется писать отдельные стили для всех браузеров. Например, Netscape (версии 6 и старше), Mozilla и Firefox основаны на одном ядре под названием Gecko, поэтому работают c сайтами примерно одинаково. В какой-то мере по своему подходу близки браузеры Internet Explorer 6 и Opera 7, и в большинстве случаев они отображают результат в равной мере правильно. Получается, что обычно требуется создать всего два разных стиля, предназначенных для браузеров, принадлежавших к разным «лагерям».

Спецификация CSS говорит, что для управления стилем дочерних элементов используется символ > (знак «больше»). Запись H1 > I сообщает браузеру установить зеленый цвет для содержимого тега <I> только в том случае, если заголовок <H1> является для него прямым родителем.

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

Разница между этими видами селекторов следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 2).

Пример 2. Неправильное использование дочернего селектора

В примере показано добавление тега <DIV> , внутри которого размещается параграф <P> , а у него в свою очередь, тег <I> . В стиле прописано изменить цвет текста на красный у селектора <I> , но только в том случае, если он непосредственно находится внутри <DIV> . А в нашем случае тег <I> располагается внутри <P> , поэтому стиль применяться не будет. Чтобы он заработал, надо использовать один из следующих вариантов.

Контекстные селекторы не учитывают порядок вложенности элементов, поэтому запись DIV I в примере 2 будет действовать правильно, т.е. цвет текста станет красным.

Вернемся теперь к браузерам. Internet Explorer (IE) не понимает дочерние селекторы, но зато корректно работает с контекстными. Создавая код CSS, который одновременно содержит и те и другие селекторы, тем самым делаем разграничение стиля для браузера IE и всех остальных. Хотя контекстные селекторы понимаются всеми браузерами, последующая строка переназначает текущие установки стиля (пример 3).

Пример 3. Селекторы для разных браузеров

DIV > P color: red /* Для остальных браузеров */
>
</style>
</head>
<body>

В данном примере показано создание текста зеленого цвета для браузера IE и красного — для всех остальных.

В браузере Internet Explorer 5 замечена интересная особенность — он понимает конструкцию HTML > селектор , которую другие браузеры, в том числе его же старшие версии, игнорируют. Добавив в код стиля текст HTML > DIV получим текст, который находится внутри тега <DIV> , красного цвета. Но только в IE 5.

Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer. Таким образом, изменение стиля для разных браузеров показано в примере 4.

DIV P color: red /* Для остальных браузеров */
>
</style>
</head>
<body>

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

Любой текст в коде HTML можно закомментировать и при этом он никак не будет отображаться на веб-странице. Для этого его следует поместить между элементами  . Браузер Internet Explorer кроме того поддерживает специальный синтаксис, в задачу которого входит интерпретировать код, если перед нами Internet Explorer. Остальные браузеры при этом видят обычный комментарий и не отображают его.

Внутри квадратных скобок допустимо использовать следующие ключевые слова:
IE — любая версия браузера Internet Explorer;
IE 5 — Internet Explorer 5;
IE 5.5 — Internet Explorer 5.5;
IE 6 — Internet Explorer 6;
lt — номер версии браузера меньше указанной;
gt — номер версии больше указанной;
lte — номер версии меньше или равен указанной;
gte — номер версии браузера больше или равен указанной.

Поскольку указанные элементы можно писать только внутри контейнера <BODY> , то следует добавить тег <STYLE> , как показано в примере 5.

Пример 5. Добавление условных комментариев

В данном примере вначале создается стиль для всех браузеров, а затем, с помощью условных комментарием он переназначается только для браузера IE. Заканчиваются такие комментарии одинаково, путем добавления конструкции <![endif]--> .

Использование тега <COMMENT>

Следует отметить, что для других браузеров тоже существует вариант, когда им «подкладывают» стиль, отличный от стиля IEr. С этой целью применяется тег <COMMENT> , который добавляет комментарий. Хитрость в том, что этот тег понимается только браузером IE, соответственно, все, что находится внутри этого контейнера, в этом браузере не отображается. Остальные браузеры этот тег не понимают, поэтому просто его игнорируют, но при этом содержимое этого тега нормально обрабатывается. Получается, что вначале указываем стиль для браузера IE, а затем внутри тега <COMMENT> повторяем стиль уже для остальных браузеров (пример 6). Когда идет несколько одинаковых описаний стиля для одного и того же селектора, то применяется тот стиль, который располагается в коде ниже других.

Internet Explorer покажет белые буквы на зеленом фоне, а остальные браузеры — зеленые символы на сером фоне.

Примеры использования стиля для разных браузеров

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

Браузеры IE (Opera) и Netscape (в том числе Mozilla и Firefox) по-разному подходят к понятию ширины элемента. IE за ширину принимает значение стилевого атрибута width , а Netscape добавляет к ней значения полей и толщину границ. За счет этой особенности вид элементов может несколько различаться в браузерах. В примере 7 показано создание меню с фиксированной шириной 200 пикселов. Вид меню за незначительными исключениями будет отображаться браузерами правильно, но до тех пор, пока для селектора A не добавляется параметр width: 100% . Дело в том, что использование свойства display: block у ссылок устанавливает их на всю ширину меню (рис. 1), и теперь не обязательно наводить курсор мыши строго на текст. Но только не в браузере Internet Explorer, который в этом случае требует еще добавления ширины через атрибут width . Значение 100% приведет к тому, что в Netscape выделительная полоса начнет выходить за пределы границы, что выглядит довольно небрежно (рис. 2).

Рис. 1. Требуемое меню

Рис. 2. Меню при width: 100%

Есть два способа, чтобы добиться работы меню в браузерах идентично и без ошибок. Первый — установить ширину не 100%, а меньше, например, 97%. Хотя это не лучший вариант, проблему, тем не менее, он решает. И второй метод — добавить атрибут width только для браузера IE, заставив остальные браузеры его проигнорировать, как показано в примере 7.

Пример 7. Создание меню

В браузере Internet Explorer 6 существует следующая ошибка. При использовании нумерованного списка <OL> и значения inside параметра list-style-position , числа идущие с 10, начинают накладываться на текст списка (рис. 3).

Рис. 3. Ошибка в браузере Internet Explorer при использовании списков

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

Чтобы решить указанную проблему, недостаточно использовать отступы и увеличить расстояние от чисел до текста, любые отступы в этом случае браузером полностью игнорируются. Следует указать list-style-position: outside и сместить текст вправо. Вид списка в таком случае будет несколько различаться в разных браузерах, но, тем не менее, отображаться корректно (пример 8).

Пример 8. Исправление ошибок браузера Internet Explorer 6

<ol start="20">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ol>

В данном примере показана установка стиля для тега <OL> , а затем он переназначается для браузера Internet Explorer 6 с помощью условных комментариев

Читайте также: