Текст книги "Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки"

О рецензенте

* * *

Рас Уэкли (р. 1965) родился в Сиднее (Австралия), живет в Западном Чатсвуде, зеленом пригороде на севере Сиднея. Имеет диплом в изобразительном искусстве и графическом дизайне и работы по пользователеориентированному веб-дизайну, разметке и программированию, управлению проектами, опыту пользовательского взаимодействия, доступности и обучению. Он работает с Интернетом с 1995 года. У Раса двое маленьких детей, поэтому у него нет времени на хобби. Раньше у него было три собаки, но с тех пор как они умерли, он не завел ни одной. Любимый цвет Раса – черный. Важный урок, который он получил за время своей карьеры, – «Это тоже пройдет», что относится ко всему в жизни, включая бизнес. Его личное послание читателям: «Займись делом!»

Меняем стиль, переписываем код и преображаем сайт с помощью CSS3
Автор: Дэвид Стори, Ли Веру
Рецензент: Тэб Аткинс, мл.

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

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

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

Сайты не должны выглядеть одинаково во всех браузерах

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

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

Система нейтрализации ошибок

Использование изящной обработки ошибок таблицами CSS и каскадность – самый несложный способ обеспечить систему восстановления. Основная идея проста: в CSS, браузеры игнорируют то, чего они не понимают. Так, если они не понимают свойство или значение, они проигнорируют все описание. Если они не понимают селектор, они проигнорируют целое правило. Если они не понимают правило, начинающееся со знака @, они проигнорирую все внутри него.

Посмотрите на этот простой CSS-код:

a {

color: black;

color: super-cool-new-css-color;

super-cool-new-css-property: awesomesauce;

}

a: hawt-new-pseudoclass(awesomeness) {

color: hotpink;

}

В браузерах, которые поддерживают: hawt-new-pseudoclass, цвет ссылок, которые размечены им, будет hotpink. Во всех остальных случаях цвет определяется первым правилом. В таких случаях, если super-cool-new-css-color – поддерживаемый браузером цвет, то ссылки будут такого цвета. В противном случае они будут черными. А если поддерживается свойство super-cool-new-css-property, цвет будет применяться ко всем ссылкам; в противном случае он будет проигнорирован и не вызовет проблемы. Иногда (правда, редко), этот метод не помогает. Например, когда не поддерживаются новые приемы верстки, вам нужно задать полностью другой макет, используя множество свойств, которые не будут перезаписаны на новые. В таких случаях поможет определение поддержки фич.

Moderniz[35]35
  smashed.by/modernizr.


[Закрыть] от Фарука Атеса и Пола Айриша считается одной из наиболее используемых библиотеки поддержки фич. Она добавляет классы к корневым элементам, которые вы потом сможете использовать в своей CSS-ветке соответственно:

no-flexbox section {

/* разметка макета со старыми стилями */

}

flexbox section {

/* разметка с поддержкой новых клевых штук */

}

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

Как читать этот раздел

Многие свойства библиотеки CSS3, описанные в этом разделе все еще используются с префиксами браузеров. Как только свойство превращается в стандарт и широко поддерживается браузерами, префиксы могут быть «выброшены». Для того чтобы воспользоваться ими сегодня, вам нужно приписывать к началу свойcтва один или несколько префиксов, которые даны ниже:

[36]36
  ² В начале 2013 года анонсирован переход Оперы также на движок Webkit. – Примеч. науч. ред.


[Закрыть]

Есть другие и другие префиксы[37]37
  С полным перечнем префиксов можно ознакомиться по ссылке smashed.by/vndrprfx.


[Закрыть], но они обычно не стоят того, чтобы поднимать шум. По большому счету префиксы производителя раздражают, но они очень полезны когда результат в браузерах отличается друг от друга, и спасают нас от ужасных кусков CSS, которыми мы пользовались в прошлом[38]38
  Если у вас нет времени разбираться, какой префикс нужно использовать для каждого свойства, вы можете воспользоваться постпроцессором, например prefix-free (smashed.by/prfxfree), который позволяет вам писать CSS без префиксов и сам добавляет их через JavaScript.


[Закрыть].

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

Префиксы производителя часто необходимы. Присутствие в вашей таблице стилей всех префиксов -o-, -ms-, -moz-and-webkit – наихудший сценарий. Не всем свойствам они нужны. Вы можете посмотреть, какие префиксы еще нужны, в справочных таблицах по поддержке браузеров.

На ресурсах When Can I Use[39]39
  smashed.by/ciuse.


[Закрыть], HTML5 Please[40]40
  smashed.by/html5pl.


[Закрыть] или в документации Mozilla Developer Network[41]41
  smashed.by/mozdevnet.


[Закрыть]. Кроме того, если не указано иное, каждый сниппет в этом разделе полагается на следующую простую разметку HTML:

<html>

<head>

<meta charset=”utf-8” />

<title>Изучаем CSS3</title>

</head>

<body>

<section>

<h1>Изучаем CSS3</h1>

<p> Это образец контента. Не читайте его. Вы просто потратите время. Почему вы продолжаете читать? Мне что, нужно использовать Lorem Ipsum, чтобы остановить вас? Чтож, пожалуйста. Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incidi dunt ut labore et dolore magna aliqua. Читаете? Черт возьми, вы невыносимы. Я закончу, чтобы поберечь вас.</p>

</section>

</body>

</html>

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

Веб-типографика и техники работы с текстом

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

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

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

Новая единица rem (“root em”) – близкий родственник em, с теми же плюсами, только более легкая в использовании. Величина rem устанавливается по размеру шрифта в корневом элементе (это тег <html> для языка HTML). Поэтому 1 rem всегда одного размера, и неважно, где вы ее ставите в документе.

Чтобы rem, как и пиксели, было проще использовать, вы можете установить размер шрифта элемента <html> в 62,5 %, который будет пересчитан в 10 px, если только пользователь не настроил размер шрифта по умолчанию.

Теперь, когда вы задаете длину в rem, вы можете просто умножить на 10, чтобы получить величину в пикселях. Так как 10 пикселей может быть слишком мало для основного текста, вы можете настроить какой хотите размер rem в элементе <body>. Потом эту величину унаследуют все элементы. Например, если вы хотите, чтобы размер текста «тела» был 15 пикселей, можете сделать следующее:

html { font-size: 62.5 %; }

body { font-size: 1.5rem; /* 15px */ }

Один единственный недостаток величин rem – их поддерживают все основные браузеры, кроме Internet Explorer (IE) 8 и его ранних версий. Как альтернативу используйте каскадность стилей и установите размер в пикселях до настройки его в rem. Это может значительно увеличить вашу таблицу стилей. Поэтому вы можете использовать раздельную таблицу стилей с условными комментариями к IE 9 и его ранним версиям, если только вам не нужна поддержка iOS 3.2, Safari 4 и старых версий Opera.

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

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

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

Для начала мы должны настроить ритм страницы. Например, на следующей странице мы установили его в 2.3 rem или 23 пикселя. Он задается в элементе body с использованием свойства line-height. Мы также установили размер шрифта (font-size) в 1.5 rem, для того, чтобы все основные элементы типографики, кроме заголовков унаследовали его.

Удобно иметь под рукой визуальные направляющие, чтобы видеть, где вы слегка перескочили. Для этого мы создали изображение в формате SVG для показа линий с 23-пиксельными интервалами. Также мы использовали базовый сброс стилей для удаления отступов и полей, чтобы они не нарушали наш ритм:

html {

font-size: 62.5 %;

background: url(line.svg) no-repeat;}

/* reset */

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6,pre, p, th, td,

article, section, figure, img {

margin: 0;

padding: 0;

}

body {

font-size: 1.5rem;

line-height: 2.3rem;

}

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

Настройка параграфов была несложной, так как каждая строка текста имеет междустрочный интервал (line height) меньше, чем 23-пиксельный вертикальный ритм страницы. Но что нам делать с такими элементами, как заголовки, которым нужен размер шрифта больше, чем высота нашей строки или дополнительные отступы сверху и снизу? Мудрость здесь в том, чтобы создать комбинацию из верхнего и нижнего отступов, при этом нужно, чтобы междустрочный интервал был кратен нашему ритму:

h2 {

font-size: 2.6rem; КОД (CODE)

line-height: 4.6rem; /* две базовых величины */

margin: 2.3rem 0 0 0; /* величина ритма сверху и снизу */

}

h3 {

font-size: 2.1rem;

line-height: 2.3rem; /* базовыйритм */

margin: 2rem 0.3rem 0; /* 2 сверху + 0.3 снизу == базовый ритм

}

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

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

Если бы мы использовали величины em в этом примере, нам нужно было бы пересчитать высоту строки и отступы (margin), с учетом размера текста. С rem мы почти полностью можем игнорировать размер шрифта, только надо удостовериться, что высота строки достаточна, чтобы включить текст без нахлеста[42]42
  Примеры смотрите в smashed.by/fntexmpl.


[Закрыть].

Мы любим Helvetica и Georgia, но не пора ли этим почтенным шрифтам взять отпуск? Весь мир типографики открывается нам, а веб-шрифты ждут, когда мы испробуем всю прелесть их экзотики.

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

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

Как только вы выберете шрифт, нужно будет подготовить его в правильном формате и загрузить его через правило @font-face. Мы открыли лучший способ – использовать бесподобный сервис Font Squirrel[43]43
  smashed.by/fntsqr.


[Закрыть]. Он позволяет загружать шрифт, потом «выдает» его в нужных вам форматах, с правилом @font-face внутри. Все, что о вас требуется, это перенести шрифты на ваш сервер, скопировать код в вашу таблицу стилей, а потом обращаться к шрифту, когда захотите.

Для примера в этом разделе мы взяли шрифт Museo Sans 500 для текста в body и Museo 700 для заголовков. Их предоставил Jos Buivenga абсолютно бесплатно[44]44
  smashed.by/exjlb.


[Закрыть]. Давайте посмотрим на код CSS, созданный сервисом Font Squirrel для шрифта Museo 700:

@font-face {

font-family: ‘Museo-700’;

src: url(‘1F9920_0_0.eot’);

src: url(‘1F9920_0_0.eot?#iefix’) format(‘embedded-opentype’),

url(‘1F9920_0_0.woff’) format(‘woff’),

url(‘1F9920_0_0.ttf’) format(‘truetype’);

}

Свойство font-family дает имя шрифта, на которое вам нужно будет сослаться в остальной таблице стилей, а свойство src ссылается на сам шрифт. Браузер будет проверять каждый URL по очереди, пока не найдет поддерживаемый формат. Изначально свойство src должно поддерживать старые версии IE, в которых наблюдается баг при использовании стандартного правила. Если вы вставляете его в свою таблицу стилей, вы можете ссылаться на шрифт обычным способом:

h2 {

font-family: “Museo-700”, serif;

}

Все должно быть в порядке, но вам нужно быть в курсе дополнительных деталей. Шрифт имеет плотность 700, что уже говорит о его жирном начертании. Запомните, по умолчанию браузеры будут считать, что шрифты, которые вы определяете в @font-face, это шрифты без выделения, курсива и без всяких остальных шрифтовых прибамбасов. Если вам нужен элемент со свойством font-weight: bold, он будет искусственно сделан полужирным начертанием. Так как шрифт Museo используется для заголовков, он уже выделен полужирным начертанием. Если вы наслоите на него искусственное полужирное начертание, то получится грязное месиво. Чтобы этого не случилось, мы должны сообщить в правило @font-face, что шрифт уже полужирный, с помощью дескриптора font-weight:

@font-face {

font-family: ‘Museo-700’;

…

font-weight: bold;

}

Теперь современные браузеры будут знать, что это – полужирный шрифт и больше не станут пытаться сделать его полужирным сами. Добавляя правила @font-face с тем же свойством font-family, но с разными величинами для font-weight, font-style и font-stretch, вы можете объединять многочисленные шрифтовые файлы в одно имя шрифта. Тогда браузеры будут использовать правильный шрифт, когда нужно переключиться с полужирного начертания на курсивное.

Вы можете пользоваться одним из доступных онлайн шрифтовых сервисов, вместо того, чтобы поддерживать свой собственный. Наиболее популярны Google Web Fonts для бесплатных шрифтов и TypeKit – для тех, что предоставляются по подписке. Часто такие подписные сервисы – единственный законный путь получения доступа к известным коммерческим шрифтам.

Рисунок 4.1. Прекрасный ритмичный шрифт с использованием вертикального ритма и атрибута @font-face

Каждый сервис имеет свой собственный способ подключения шрифтов. В нашем случае мы использовали Google Web Fonts для основного заголовка страницы. Google представляет три способа: через тег link, через @import и через JavaScript. Мы остановились на использовании тега link и добавили его в шапку документа как:

<head>

<meta charset=”UTF-8” />

<title>Типографикаввек CSS3 </title>

<link href=’http://fonts.googleapis.com/

css?family=Abril+Fatface’

rel=’stylesheet’ type=’text/css’>

…

</head>

Потом в таблице стилей шрифт может указываться, как раньше, по имени “Abril Fatface”:

h1 {

font-family: “Abril Fatface”;

font-weight: normal;

…

}

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

Из-за того что мы не можем контролировать, настраивает ли правило @font-face шрифт как полужирный, нам приходится делать все наоборот и устанавливать нормальную насыщенность каждый раз при его использовании. Как видите, на выходе мы имеем прекрасный ритмичный шрифт, без намека на базовые гарнитуры:

Свойство font-stretch возможно имеет самое неудачное название в CSS.

Оно не расширяет шрифт искусственно, но взамен позволяет вам использовать растянутое и уплотненное начертание шрифта в гарнитуре. К примеру, если вы захотите использовать шрифт Helvetica Neue Condensed без свойства font-stretch, вам нужно будет подключить его как веб-шрифт (необходима лицензия) и обозначить его под другим именем в шрифтовом семействе. С font-stretch это делается проще:

h1 {

font-family: “Helvetica Neue”;

font-stretch: condensed;

}

Большинство шрифтов не имеют узкого или широкого начертания, так что при использовании другого шрифта, не Helvetica, вам, вероятно, придется подключать его как веб-шрифт. Свойство font-stretch имеет такие значения: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded и ultraexpanded. Браузер применит значения к ближайшему подходящему начертанию в семействе. В случае с Helvetica Neue ОС X все сжатые значения отображаются как Helvetica Neue Condensed до тех пор, пока вы не установите дополнительные шрифты.

Мы привыкли видеть текст в вебе выровненным по левому краю с рваным правым. При печати часто применяется выравнивание вместе с переносами, чтобы избежать «рек» в тексте (больших пробелов между словами и символами). Не так давно перенос был недоступен в Сети. Но сейчас все меняется. Свойство hyphens (перенос) доступно с префиксами в Safari (с версии 5.1) и Firefox, и в IE 10.

В примере ниже мы настроили выравнивание текста по всей ширине и автоматический перенос:

Рисунок 4.2. Пример параграфа с переносом (слева) и без переноса (справа)

p {

text-align: justify;

hyphens: auto;

…

}

Свойство auto указывает браузеру использовать словари переноса для разбивки слов в нужных местах, и вставлять переносы в конце строк. Каждому языку присущи свои словари переноса, поэтому поддержка этой функции будет варьироваться. Если вы вставляете свой собственный символ мягкого переноса (), это аннулирует автоматическое поведение браузера. Если вы хотите настроить перенос вручную, можете использовать ручной режим. Отключение переноса (по умолчанию) происходит через ключевое слово none.

Вот пример с переносом (слева) и без (справа). Обратите внимание на неровные интервалы между словами во второй и шестой строках текста без переносов.