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

О рецензенте

Рас Уэкли (р. 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] от Фарука Атеса и Пола Айриша считается одной из наиболее используемых библиотеки поддержки фич. Она добавляет классы к корневым элементам, которые вы потом сможете использовать в своей CSS-ветке соответственно:

no-flexbox section {

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

}

flexbox section {

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

}

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

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

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

[36]

Есть другие и другие префиксы[37], но они обычно не стоят того, чтобы поднимать шум. По большому счету префиксы производителя раздражают, но они очень полезны когда результат в браузерах отличается друг от друга, и спасают нас от ужасных кусков CSS, которыми мы пользовались в прошлом[38].

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

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

На ресурсах When Can I Use[39], HTML5 Please[40] или в документации Mozilla Developer Network[41]. Кроме того, если не указано иное, каждый сниппет в этом разделе полагается на следующую простую разметку 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, эксперимента с новыми шрифтами, контролем переноса слов, и как полностью улучшить ваш текст. Тем не менее самый важный элемент на странице – это все-таки текст, и он заслуживает особого внимания.

Представляем REM

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

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