Понимание CSS и современного Веба

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

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

Находиться в среде современного Веба – волнующее дело. Он постоянно растет, а за ним едва поспевают технологии.

Что такое CSS?

Каскадные таблицы стилей (CSS) – это простой язык, определяющий стили, которые можно применить к HTML. Там, где HTML описывает структуру веб-страницы, CSS описывает ее представление.
Международное сообщество под названием World Wide Web Consortium (W3C) создает и поддерживает спецификации CSS, в которых определяется и стандартизируется способ, которым вы должны писать язык CSS, и браузерные вендоры (те, кто делает веб-браузеры) должны обеспечивать его выполнение. Так как спецификация CSS с момента ее представления в 1996г. сильно подросла, то ее последняя версия, CSS3, была разбита на модули с тем, чтобы каждый из них определял часть CSS, облегчая поддержку всей спецификации.

Спецификации CSS можно найти на www.w3.org/Style/CSS/. Так как они написаны очень техническим языком и очень подробны, то могут сбить вас с толку. Я знаю, о чем говорю! Хотя время от времени к ним полезно обращаться, вам ни в коем случае не обязательно их читать. В книге «Принципы CSS3» принят гораздо более упрощенный и дружеский подход к пониманию CSS3.

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

CSS относится ко всем трем уровням спецификации: CSS Уровень 1 (CSS1), CSS Уровень 2 (CSS2) и CSS Уровень 3 (CSS3). Каждый уровень CSS выстроен на базе своего предшественника. Начало пути CSS2 было шатким и выявилось множество проблем, что привело к пересмотру этой спецификации и выпуску CSS2.1. Поэтому CSS3 содержит аспекты своего предшественника CSS2.1, а CSS2.1 – аспекты CSS2 и CSS1.
Хотя каждый CSS основан на предыдущем, рекомендуется не применять отдельные свойства предшествующего уровня там, где это существенно. Иными словами, при обращении к CSS3 вы на самом деле обращаетесь к любым свойствам, доступным во всех CSS, кроме нерекомендуемых.

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

Роль CSS

Основная цель CSS состоит в отделении структуры (HTML) от ее представления (CSS). На рисунке 1-1 показана веб-страница, состоящая из одного HTML, без CSS.

На рисунке 1-2 показана та же страница с примененным к ней CSS—видна огромная разница, от которой страница становится гораздо привлекательнее.

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

В отделении структуры от представления кроется множество преимуществ:

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

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

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

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

Сегодня при таком количеств переносных устройств в продаже определение тех, которые входят в категорию портативных, конечно, недостаточно описательно. Точно так же дисплеи десктопов тоже сильно варьируются по своим характеристикам.

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

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

Рабочий проект и процесс CSS

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

При внедрении возможностей модулей Working Draft или Last Call, их следует применять с вендорным префиксом; таким образом для предотвращения несовместимости обеспечивается использование экспериментальных свойств, если в будущем в модулях произойдут изменения.

В Главе 5 вы узнаете, что такое вендорные префиксы и как их применять. Дополнительно информацию о процессе CSS можно найти на www.w3.org/Style/2011/CSS-process#rectrack.

В общем и целом, CSS3 облегчает создание веб-страниц и делает этот процесс увлекательнее, чем когда-либо. Итак, если спецификация находится в статусе Working Draft, можно ли ее уже применять?
Конечно! Современные браузеры уже отлично поддерживают CSS3, и чем скорее вы начнете его применять, тем быстрее сможете обеспечить обратную реакцию и тем усовершенствовать CSS. W3C состоит не только из организаций-членов и постоянных сотрудников, но и из общественности. Применяя CSS3 сегодня, вы можете внести свой вклад в его будущее. Простое использование свойства CSS3 ставит на нем штамп «одобрено».

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

Современные браузеры

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

Итак, каким браузером следует пользоваться для создания своего вебсайта? Всеми! Конечно, прямо сейчас не нужно их все скачивать, но важно тестировать создаваемые вами вебсайты в широком диапазоне браузеров (и устройств).

Основные современные браузеры

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

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

В этой книге в качестве основного браузера я везде использую Chrome (и тестирую остальные браузеры в Главе 15). Для применения при создании веб-страницы советую избегать Microsoft Internet Explorer’а версий 7–9, потому что его возможности не настолько стабильны, как у прочих перечисленных, но можете при желании спокойно пользоваться Safari, Firefox’ом или Opera. Инструменты разработки, применяемые мной и к которым я делаю отсылки, похожи во всех браузерах, и я не пользуюсь теми свойствами, которых не существует в других браузерах.

Во время написания книги стал доступен для превью, но официально еще не выпущен Microsoft Internet Explorer 10.

Браузерные движки (движки разметки)

Полезно знать, какие движки поддерживают эти браузеры:

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

Статистика применения браузеров

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

В таблицах 1-1 и 1-2 представлена статистика применения браузеров, предоставленная www.netmarketshare.com в июле 2012г. (время написания данного текста).

Старые браузеры в современном Вебе

К сожалению, современная Сеть—со всеми ее замечательными новыми возможностями—тащит на себе лишний багаж в виде все еще применяемых сегодня старых веб-браузеров. Хотя W3C, браузерные вендоры и веб-индустрия работают над продвижением вперед, существует множество пользователей, которые либо не знают, либо не могут принять изменения. До того, как рассмотреть, какие из еще используемых браузеров можно счесть устаревшими, в Таблице 1-3 показано разбиение долей рынка по-отдельности.

Как и для меня, эта статистика может оказаться для вас неожиданной. У Internet Explorer’а 8 самая большая доля рынка, более 25%? На то есть несколько причин. Internet Explorer идет в пакете с Microsoft Windows, которая является самой используемой операционной системой. Многие заходят в Сеть посредством Internet Explorer’а, даже не зная, что существуют другие браузеры. Кроме того, они не обновляют свой браузер, потому что либо не знают, что такое возможно, либо используют слишком старую технику, и сделать этого нельзя. Следует обратить внимание, что Internet Explorer 9 доступен только пользователям Windows Vista и Windows 7. Многие пользователи все еще пользуются Windows XP, которая ограничена Internet Explorer’ом 8. Это объясняет, почему он стал веб-браузером номер один, несмотря на то, что Internet Explorer 9 находится на рынке с 2011г.

А сейчас сенсация: Internet Explorer 6, 7 и 8 – старые браузеры, несмотря на то, что занимают значительную долю рынка. Хотя каждый из них превосходит предыдущий, поддержка стандартизированного CSS у них плохая. Версии 6 и 7 выполняют CSS 2.1, но не особенно хорошо. У версии 8 хорошая поддержка CSS 2.1, но плохая — CSS3.

Однако и в конце этого тоннеля появился свет. Хотя у Internet Explorer’а 6 в соответствии с этой статистикой примерно 6% доля, многие из его пользователей находятся в Азии, поэтому если ваш вебсайт не предназначен для данной аудитории, то можете аннулировать эту статистику. Internet Explorer 6 – настолько старый браузер, и такой проблемный для будущего Сети, что даже Microsoft пытается с помощью сайта www.ie6countdown.com уведомить своих пользователей, что его можно обновить. На этом сайте также подтверждается, что Азия (в частности, Китай со своей 22,4% долей) вносит огромный вклад в 7% мировой статистики.

Помимо Internet Explorer’а версий 6, 7 и 8, единственным устаревшим браузером с долей более 1% является Mozilla Firefox 3.6. У него хорошая поддержка CSS2.1 и CSS3, и он ни в коем случае не проблемный браузер, но ко времени написания этого текста версии Firefox – уже двузначные, последняя – 14-я. Вы можете простительно счесть, что не нужно тогда тестироваться в версии 3.6 из-за того, что она такая несовременная, но я очень рекомендую это делать в Firefox 3.6 потому, что его доля рынка занимает более 1% (обычно браузер с долей менее 1% уже полагается лишним), и вам нужно это делать до окончания принципов CSS3.

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

Скажем, вы применили некие свойства CSS3, такие как закругленные углы и фоновые градиенты. Устаревший браузер их не понимает, следовательно, не может отобразить. Вместо этого он показывает просто квадратные углы и плотный фон, как видно на Рисунках 1-3 и 1-4.

Это явление известно как постепенная деградация. Браузер, не поддерживающий CSS3, просто откатывает свойство назад до того уровня, который в нем поддерживается. Его пользователь видит веб-страницу с красивыми стилями, и еще не факт, что в современном браузере она лучше, даже могут отражаться дополнительные тонкости. Ничего не испорчено, и ничто не влияет на способ взаимодействия пользователя со страницей.

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

Что касается Internet Explorer’а 6, вы может решить его полностью проигнорировать, просто потому, что он слишком старый и проблемный браузер, чтобы возиться с ним. Вместо траты энного количества времени на исправления, как описано в Главе 15, примените к Internet Explorer’у 6 основные принципы CSS, при которых содержимое веб-страницы будет идеально доступно, просто не будет слишком много стилей. Это сэкономит ваш труд (а если вы создаете веб-страницу для своего клиента, то и деньги), а пользователь сможет увидеть всю представленную на странице информацию потому, что, в конце концов, CSS – это просто ее представление.

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

Согласно принципам CSS3, когда свойство недоступно в устаревшем браузере, в Главе 15 советую вам научиться тестировать и рассматривать для них альтернативы.

Инструменты построения и назначения стилей современного Веба

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

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

Инструменты веб-разработки

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

Инструменты разработки дают вам возможность быстро просмотреть элементы HTML и примененный к ним CSS. Также внутри браузерных инструментов можно вносить быстрые изменения в CSS, что зачастую является более быстрым способом экспериментирования со стилями. На Рисунке 1-5 показаны инструменты разработки Google Chrome.

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

Открытие инструментов разработки в браузерах десктопов

До версии 10 к Firefox’у не прилагались встроенные инструменты веб-разработки. Я очень рекомендую дополнение под названием Firebug как при отсутствии инструментов до версии 10, так и вместо встроенных, доступных начиная с нее. У Firebug’а больше возможностей, чем у встроенных инструментов, и они более совместимы с предложенными в других браузерах.
Для установки Firebug’а щелкните в Firefox Tools ➜ Add-Ons, чтобы открыть администратор дополнений. Отыщите Firebug, затем щелкните кнопку установки. После его закачки для окончания установки нажмите «Перезапустить сейчас» (или вручную закройте и снова откройте Firefox).

Текстовые редакторы

Текстовый редактор – это инструмент, применяемый для написания CSS. В них также можно писать HTML, JavaScript и многие другие языки, составляющие Веб. Текстовые редакторы дают вам возможность только редактировать текст. Вы, возможно, ожидаете, что все они весьма схожи, но в действительности текстовые редакторы выпускаются со множеством разных свойств. Большинство – с теми, которые ускоряют написание вами CSS (и других веб-технологий). У некоторых имеются клиенты протоколов передачи данных (FTP) и редакторы «Что видишь, то и получаешь» (WYSIWYG).

Редактор WYSIWYG позволяет вам построить вебсайт, не имея никакого представления о коде. Хотя идея кажется классной, на самом деле это не так! При использовании таких инструментов—перетаскивания элементов в нужные вам места—редактор обязан сгенерировать за вас код. Редакторы такого типа редко идут в ногу с последними стандартами кодирования, и ни за что не смогут сделать его так же хорошо, как можете вы или я. Сгенерированный код почти всегда раздутый (получается больше кода, чем требуется) и не осуществляет на практике известных вам наилучших методик, что ведет к плохому впечатлению посетителей от вашего сайта. Если в вашем текстовом редакторе есть WYSIWYG (такой как в Adobe Dreamweaver), это хорошо; просто проигнорируйте его и вместо этого воспользуйтесь свойствами редактора текста.

Если у вас пока ничего нет, я рекомендую начать с применения базового текстового редактора. TextEdit (для пользователей Mac’а) или Notepad (для Windows) уже встроены в ваш компьютер и идеально приемлемы для использования. Помимо редактирования текста, у них нет других свойств, но для начала это все, что вам требуется.

Во всей книге «Принципы CSS3» я пользуюсь текстовым редактором для Mac’а под названием Espresso.

Резюме

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

Обладая необходимыми инструментами создания CSS и веб-страниц, со следующей главы «Принципов CSS3» вы начнете строить файлы проектов. Взяв страницу с Рисунка 1-1, вы превратите ее в станицу со стилями, приведенную на Рисунке 1-2.

Источник: //www.creativebloq.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)