Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 331
Veröffentlichungsjahr: 2024
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчик С. Черников
Бен Фрэйн
Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд.. — СПб.: Питер, 2024.
ISBN 978-5-4461-1495-5
© ООО Издательство "Питер", 2024
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Об авторе
Бен Фрэйн (Ben Frain) занимается веб-дизайном и разработкой веб-приложений с 1996 года. Сейчас он UI-UX техлид в Bet365.
Был скромным, не получившим должного признания актером на телевидении и писал технические статьи. Учился театральному искусству в Салфордском университете. Написал четыре недооцененных (по его мнению) киносценария и до сих пор вынашивает, но уже с угасающим энтузиазмом, планы продать хотя бы один из них. В свободное время наслаждается простыми радостями жизни — играет в мини-футбол, пока позволяют здоровье и жена, и воспитывает двух сыновей.
О научных редакторах
Х. Педро Рибейро — бразильский фронтенд-разработчик, живет в центре Лондона. Несколько лет посвятил веб-разработке, фокусируясь на производительности и доступности веб-сайтов для улучшения пользовательского опыта.
Педро уже был научным редактором проектов издательства Packt, Mastering Responsive Web Design и Responsive Web Design Patterns.
Разработал Baseliner — бразуерное расширение, у которого больше 6000 пользователей в неделю.
• Блог — https://jpedroribeiro.com/
• Twitter — https://twitter.com/jpedroribeiro
• GitHub — https://github.com/jpedroribeiro
Кларисса Петерсон — UX-разработчик и стратег, посвятившая более пятнадцати лет созданию эффективных и интуитивно понятных интерфейсов. Начинала как фронтенд-разработчик, а затем много лет была «человеком-оркестром» в некоммерческих и правозащитных организациях Вашингтона. Сейчас преподает веб-дизайн: пишет статьи, выступает с лекциями и проводит уроки.
Кларисса написала книгу Learning Responsive Web Design: A Beginner's Guide (издательство O'Reilly). Cоставила онлайн-курсы для LinkedIn Learning и преподавала в Технологическом институте Южной Альберты (SAIT). Спикер международных конференций по веб-дизайну и технологиям.
Проявляя научный интерес к инклюзивности и доступной среде, сейчас работает над новым проектом на стыке гражданских прав и технологий.
Предисловие
Когда я писал первое издание в 2011–2012 годах, никто и подумать не мог, что в обозримом будущем отзывчивый (responsive) веб-дизайн фактически станет стандартом веб-дизайна. Поэтому популярность и полезность книги не уменьшаются даже спустя девять лет и два издания.
Бытует выражение, применимое к авторам технических книг: «Когда один учит другого, учатся оба». Именно это и произошло при работе над третьим изданием. Я узнал гораздо больше, чем мог себе представить. На работе я возвращаюсь к некоторым главам и разделам и вспоминаю, как делать ту или иную вещь, о которой уже забыл! Надеюсь, эта книга окажется такой же находкой и для вас.
Вспоминая первое издание, я поражаюсь, насколько продвинулись технологии. Если вы опытный игрок в веб-разработке, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. Очень удивлюсь, если вас нисколько не тронут возможности этих технологий. А ведь еще каких-то десять лет назад такое трудно было представить.
Но не буду вас задерживать. Спасибо, что решили прочитать эту книгу. Надеюсь, она вам понравится и вы многое из нее извлечете. И буду рад получить любой фидбек — и положительный, и отрицательный. Он во многом определяет содержание будущих изданий.
Для кого эта книга
Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик и ищете исчерпывающий обзор по современным HTML и CSS? А может, вы сейчас создаете веб-сайт и вам нужно глубокое понимание отзывчивого веб-дизайна? Эта книга для вас!
Все, что нужно для начала работы, — это современное представление об HTML и CSS. Знание JavaScript не требуется.
Структура
Глава 1 «Основы отзывчивого веб-дизайна» — это краткий обзор ключевых составляющих в создании программных продуктов, отвечающих требованиям отзывчивого веб-дизайна.
Глава 2 «Создание HTML-разметки» раскрывает все семантические элементы HTML5, семантику на уровне текста и соображения доступности, а также объясняет, как добавлять медиаэлементы (например, видео) на страницу.
Глава 3 «Медиазапросы — поддержка различных окон просмотра» охватывает все, что вам нужно знать о медиазапросах CSS: их возможностях, синтаксис и различные варианты использования.
Глава 4 «Fluid Layout, Flexbox и отзывчивые изображения» показывает, как создавать пропорциональный макет и отзывчивые изображения, а также подробно описывет Flexbox-макеты.
Глава 5 «CSS Grid» — глубокое погружение в систему двухмерного макета CSS Grid.
Глава 6 «CSS-селекторы, типографика, цветовые режимы и многое другое» охватывает бесконечные возможности CSS-селекторов, цветов HSLA и RGBA, веб-типографики, включая вариативные шрифты, единицы измерения области просмотра (вьюпорт единицы), и многое другое.
Глава 7 «Потрясающая эстетика с помощью CSS» охватывает CSS-фильтры, тени блоков, линейные и радиальные градиенты, многочисленные фоны и способы переноса фоновых изображений на устройства с высоким разрешением.
Глава 8 «SVG и независимость от разрешения» рассказывает обо всем, что нужно для использования SVG-графики внутри документов и в качестве фоновых изображений, а также о том, как взаимодействовать с ними с помощью JavaScript.
Глава 9 «Переходы, преобразование и анимация» приведет CSS в движение, по мере того как мы будем учиться создавать взаимодействия и анимацию с помощью CSS.
Глава 10 «Освоение форм с помощью HTML5 и CSS» объясняет, что веб-формы всегда были сложными, но теперь новейшие функции HTML5 и CSS сделали работу с ними проще, чем когда-либо прежде.
Глава 11 «Бонусные техники и советы» освещает основные моменты, которые необходимо учесть перед началом работы, а также включает несколько важных советов, которые помогут принять верное дизайн-решение.
Что нужно для работы с книгой
Вам понадобятся:
• Текстовый редактор: Sublime Text, Vim, Visual Studio Code и т.д.
• Современный браузер, например Firefox, Edge, Safari или Chrome.
• Понимание так себе шуток и неявных отсылок к фильмам.
Загрузка файлов с примерами кода
Вы можете загрузить файлы с примерами кода для этой книги с github.com. Нужный код лежит в репозитории: https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition. Там же будут отображаться все возможные изменения.
После загрузки файла убедитесь, что вы распаковали или извлекли папку, используя последнюю версию:
• WinRAR/7-Zip для Windows.
• Zipeg/iZip/UnRarX для Mac.
• 7-Zip/PeaZip для Linux.
Цветные изображения
Мы также предоставляем PDF-файл с цветными скриншотами и схемами, используемыми в книге. Их можно скачать здесь: https://static.packt-cdn.com/downloads/9781839211560_ColorImages.pdf.
Типографские соглашения
Код и примеры пользовательского ввода выделены моноширинным шрифтом.
Имена папок, файлов, расширения имен файлов, названия путей, URL-адреса и элементы интерфейса выделены шрифтом без засечек.
Листинги приводятся в следующем виде:
img {
max-width: 100%;
}
Новые понятия и важные слова выделены курсивным шрифтом.
В такой врезке приводится важная сопутствующая информация.
А в такой врезке содержатся советы и подсказки.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу: [email protected] (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
1. Основы отзывчивого веб-дизайна
Здесь мы рассмотрим все, что нужно знать для создания полностью отзывчивой веб-страницы.
Вы спросите, а зачем тогда остальные десять глав? Ответ на этот вопрос ниже в этой главе.
Когда в 2012 году вышло первое издание этой книги, отзывчивый веб-дизайн был новой и захватывающей возможностью настраивать вид страниц для появляющихся разнообразных устройств с доступом к интернету. В 2020 году отзывчивый веб-дизайн — это стандарт. Если вы создаете неотзывчивые веб-сайты или веб-приложения без уважительной причины, то, скорее всего, вы все делаете неправильно!
Возможно, вы читаете эту главу, потому что хотите понять, что делает веб-дизайн отзывчивым, и разобраться в возможностях HTML и CSS. Или вы уже создаете отзывчивые веб-сайты и хотите побольше узнать о функциях и методах, которые прошли мимо вас либо только появились.
В любом случае мы вам поможем. Если вы из второго лагеря, эта глава послужит вам шпаргалкой. А если из первого — воспринимайте эту главу как курс молодого бойца, чтобы в итоге мы все оказались на одной волне.
Вот что мы рассмотрим в этой главе:
• Обзор браузеров и устройств.
• Определение отзывчивого веб-дизайна.
• Настройка уровней поддержки браузера.
• Инструменты разработки и текстовые редакторы.
• Создание простой страницы с помощью HTML5 — наш первый отзывчивый пример.
• Метатег viewport.
• Отзывчивые изображения.
• Написание медиазапросов CSS3 для адаптации страниц.
• Недостатки из первого примера.
• Почему наше путешествие только началось.
Устраивайтесь поудобнее и поехали!
Браузеры и устройства
Менее десяти лет назад еще можно было создавать веб-сайты с фиксированной шириной. Считалось, что они подойдут более или менее всем пользователям. Фиксированная ширина страницы сайта (около 960 пикселей) была не слишком широкой для экранов ноутбуков, да и на мониторах с высоким разрешением практически не оставалось пустого места с любой стороны.
Но в 2007 году iPhone открыл первую по-настоящему удобную возможность просмотра веб-страниц на телефоне, навсегда изменив способы доступа к интернету и взаимодействия с веб-сайтами.
В первом издании этой книги, опубликованном в начале 2012 года, я упомянул о процентном соотношении общего использования браузера по типам устройств:
«За 12 месяцев с июля 2010 года по июль 2011 года глобальное использование мобильных браузеров выросло с 2,86 до 7,02 %».
Во втором издании книги я отметил:
«На момент написания этих строк в середине 2014 года та же статистическая система gs.statcounter.com свидетельствует, что этот показатель вырос до 29,48 % (для сравнения, показатель использования мобильной связи в Северной Америке составляет 24 %). Это растущая тенденция, которая не показывает каких-либо признаков спада».
Когда я пишу эти строки в сентябре 2019 года, согласно той же StatCounter, на мобильные устройства приходятся колоссальные 51,11 % от общего использования браузеров, на стационарные компьютеры — 45,18 %, а на планшеты — 3,71 %.
Количество людей, использующих устройства с меньшим экраном, постоянно растет, в то время как на другом конце шкалы 27- и 30-дюймовые дисплеи теперь тоже распространены (вместе с планшетами и консолями). Сейчас разница между самыми маленькими и самыми большими экранами для просмотра веб-страниц стала больше, чем когда-либо прежде.
К счастью, для такого постоянно расширяющегося ландшафта браузеров и устройств есть решение. Отзывчивый веб-дизайн, созданный с помощью HTML и CSS, позволяет веб-сайту «просто работать» на различных устройствах и экранах. Он помогает макету и возможностям веб-сайта реагировать на среду (размер экрана, тип ввода и возможности устройства/браузера).
До того как появился отзывчивый веб-дизайн, компании часто поддерживали отдельные сайты для мобильных устройств с собственными URL. Приходилось обнаруживать пользовательский агент на сервере хоста и перенаправлять его на соответствующий URL для стационарных либо мобильных устройств. Еще одно преимущество отзывчивого веб-сайта в том, что его можно реализовать без серверных или бэкэнд-решений.
Что такое отзывчивый дизайн
Понятие «отзывчивый веб-дизайн» было введено Итаном Маркоттом (Ethan Marcotte) в 2010 году. В своей новаторской статье на сайте A List Apart (http:// www.alistapart.com/articles/responsive-web-design/) он свел три существовавшие на тот момент технологии (макет flexible grid layout, подстраиваемые по размеру изображения и мультимедийные элементы, а также медиазапросы) в единый подход, который он назвал отзывчивым веб-дизайном1.
Коротко об отзывчивом веб-дизайне
Философию отзывчивого веб-дизайна можно выразить так: это представление веб-содержимого в наиболее удобном формате для окна просмотра и устройства, обращающегося за этим содержимым.
На заре развития реализация отзывчивого веб-дизайна начиналась с проектирования десктопного варианта страницы с фиксированным размером. Затем этот вариант дорабатывался для устройств с меньшими экранами. Но прогресс не стоял на месте. Стало понятно, что есть более правильный путь — все, от дизайна до управления контентом и разработки, получается лучше, если начинать с небольших экранов, а затем «постепенно улучшать» все это для больших мониторов и/или более функциональных устройств. Если вы не поняли термин «постепенное улучшение», не волнуйтесь. Мы поговорим о нем еще раз совсем скоро.
Но сначала я хочу рассмотреть несколько вопросов, касающихся браузерной поддержки, текстовых редакторов и инструментов.
Поддержка браузерами
Сейчас есть так много разных устройств с выходом в интернет, что необходимость единого технологического решения для большинства из них не приходится объяснять.
Распространение отзывчивого веб-дизайна сильно упрощает коммерческую реализацию веб-проектов. В наши дни у большинства людей уже сложилось какое-то представление об отзывчивом дизайне, даже если оно недалеко ушло от определения «веб-сайт, который хорошо выглядит и на телефонах, и на компьютерах».
Но при запуске проекта с отзывчивым дизайном почти всегда возникает вопрос поддержки со стороны браузеров. Сейчас браузеров и устройств так много, что вряд ли есть смысл реагировать на изменения каждого отдельно взятого браузера. Возможно, здесь играет роль фактор времени. Или денег. А может быть, и того и другого.
Как правило, чем старее браузер, тем больший объем работы и кода нужен для достижения того эстетического восприятия, которое пользователь получает при работе с современными браузерами.
Мы будем практиковать постепенное улучшение. По сути, мы начнем с разработки функционального и доступного веб-сайта для самых простых браузеров и дополним его для самых продвинутых. На практике веб-сайты, которые не могут работать в старом браузере или устройстве, создаются не так уж часто.
Если вы работаете над новым проектом и у вас нет данных о том, с чем работают пользователи, то можете хотя бы взять демографические характеристики целевой аудитории и на их основе сделать некоторые общие предположения об устройствах/браузерах.
Прежде чем рассматривать какой-либо веб-проект, лучше заранее решить, какие платформы вы будете поддерживать полноценно, а в каких готовы смириться с визуальными и функциональными аномалиями.
Например, если вам не повезет и 25 % посетителей вашего сайта будут пользоваться Internet Explorer 11, придется учесть, какие функции поддерживаются этим браузером, и подстраивать под них свои решения. То же правило работает, если большой процент ваших пользователей посещает сайт с устаревших платформ вроде Android 4.
Если вы еще этого не сделали, ознакомьтесь с сайтом http://caniuse.com. С его помощью легко проверить, есть ли у определенного браузера поддержка какой-либо функции.
Вообще, при запуске проекта я определяю перечень поддерживаемых браузеров такой грубой логикой: если стоимость разработки и поддержки браузера X больше, чем доход/выгода, приносимая пользователями этого браузера, то разрабатывать конкретные решения для браузера X не стоит.
Рис. 1.1. На сайте caniuse.com можно посмотреть, поддерживает ли браузер какую-либо функцию веб-платформы
Текстовые редакторы
Неважно, какой инструмент вы используете для написания кода. Если самый простой из текстовых редакторов позволяет эффективно писать код на HTML, CSS и JavaScript, вы вполне можете его использовать. Sublime Text, Vim, Emacs, Nova, Visual Studio Code или Notepad — в итоге это не имеет большого значения. Пользуйтесь тем, что вам нравится.
Инструменты для разработки софта
Нет незаменимых инструментов для создания отзывчивого веб-дизайна. Но знайте, что есть множество бесплатных вариантов, позволяющих автоматизировать или упростить создание веб-сайтов. Например, препроцессоры CSS, такие как Sass, помогают с организацией кода, переменными, манипуляциями с цветом и арифметическими операциями. Постпроцессоры CSS, такие как PostCSS, могут автоматизировать утомительную работу, например по выставлению префикса CSS-кода. Линтеры и инструменты проверки помогут убедиться в процессе, что коды HTML, JavaScript и CSS соответствуют стандартам: они выявляют множество опечаток, поиск и исправление вручную которых отнимает много времени. Совсем недавно средства форматирования кода изменили нашу повседневную работу. Например, Prettier автоматически форматируют код с отступом и интервалом при сохранении. Все эти инструменты необязательны, но могут в чем-то помочь.
Новые инструменты появляются все время. Поэтому какие бы актуальные и полезные средства ни упоминались в этой книге, имейте в виду, что где-то уже готовится к выходу что-то более интересное. Так что в своих примерах мы не можем полагаться на что-либо иное, кроме стандартов на основе HTML и CSS. Но вам все же стоит выбрать наиболее удобный для себя инструмент, чтобы писать качественный код как можно быстрее и эффективнее.
Первый пример отзывчивого дизайна
Помните, я обещал, что к концу главы вы узнаете все необходимое для создания полностью отзывчивой веб-страницы? Пока что я просто ходил вокруг да около. Что ж, хватит болтать. За работу.
листинги
Все листинги из этой книги можно загрузить по ссылке https://rwd.education/. Имейте в виду, что, загрузив примеры из главы 2, вы увидите их в том виде, в котором они приводятся в конце главы 1. В отличие от текста самой главы, в этих примерах кода нет промежуточных версий.
Базовый файл HTML
Начнем с простой структуры HTML5. Пока что не обращайте внимания на смысл каждой строки, особенно на содержимое <head> — в главе 2 мы подробно рассмотрим эту тему.
Предлагаю пока сконцентрироваться на элементах внутри <body>. Здесь есть несколько элементов div, изображение логотипа, один-два абзаца текста и список ингредиентов.
На скриншотах контента больше, но примеры кода сокращены. Я намеренно удалил абзацы текста, поскольку нас интересует лишь структура.
Но что действительно нужно знать: в тексте описывается рецепт приготовления сконов — вершины британских десертов.
И помните, если вам нужен весь файл HTML, его можно скачать с сайта https://rwd.education/:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>Our first responsive web page with HTML5 and CSS3</title>
<meta name="description" content="A basic responsive web page — an example from Chapter 1" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo"/></a>
<p class="Strap">Scones: the most resplendent of snacks</p>
</div>
<div class="IntroWrapper">
<p class="IntroText">Occasionally maligned and misunderstood; the scone is a quintessentially British classic.</p>
<div class="MoneyShot">
<p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
</div>
</div>
<p>Recipe and serving suggestions follow.</p>
<div class="Ingredients">
<h3 class="SubHeader">Ingredients</h3>
<ul></ul>
</div>
<div class="HowToMake">
<h3 class="SubHeader">Method</h3>
<ol class="MethodWrapper"></ol>
</div>
</body>
</html>
По умолчанию веб-страницы гибкие. Если я открою страницу из нашего примера в ее нынешнем виде без какой-либо отзывчивости и изменю размер окна браузера, текст подгонится как надо.
А как насчет других устройств? Опять же, без добавления на страницу какого-либо CSS-кода на iPhone XR текст отобразится так:
Рис. 1.2. Выглядит не очень красиво, но по умолчанию все веб-страницы гибкие
Как видите, страница отображается, но так, будто уменьшили экран ПК. Дело в том, что изначально iOS отображает веб-страницы шириной 980 px и сжимает их до размера области просмотра (viewport).
Раньше веб-сайты на iPhone выглядели так почти всегда. Но благодаря повсеместному распространению отзывчивого веб-дизайна теперь встретить такое отображение практически невозможно!
Чтобы адаптировать страницу для мобильных устройств, добавим в <head> этот фрагмент:
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
На самом деле метатег с именем viewport не считается стандартным способом указания браузеру, как отобразить страницу (хотя и является им де-факто). Несмотря на то что этот метатег ввела компания Apple, а не стандарты, он важен для отзывчивого веб-дизайна. Рассмотрим его в главе 3.
Пока что просто знайте, что в нашем примере метатег viewport задает четкое предписание — отобразить содержимое во всю ширину экрана устройства.
Легче, наверное, просто показать действие этой строки кода на устройствах:
Рис. 1.3. Мы изменили всего одну строку, а страница уже выглядит гораздо лучше
Отлично! Исправлена еще одна проблема: теперь текст отобразился более естественно. Идем дальше.
Укрощение изображений
Как говорится, лучше один раз увидеть, чем сто раз услышать. Разве можно писать о булочках, но так и не показать этой красоты? Я хочу разместить изображение булочки ближе к началу страницы в качестве своеобразной приманки для пользователей, чтобы им захотелось прочитать текст:
Рис. 1.4. Придется добавить пару строк CSS — без них не настроить нормальный размер изображения
Увы! Весьма привлекательное, но крупное изображение в 2000 пикселей шириной заставило страницу показать лишь часть картинки. Нужно все исправить.
Есть идеи? Что ж, можно, конечно, задать с помощью CSS фиксированную ширину изображения, но перед нами стоит задача другого рода: мы хотим, чтобы изображение масштабировалось под разные размеры экрана. Например, в CSS экран iPhone XR имеет размер 414 на 896 пикселей. Предположим, мы установим для этого изображения ширину 414 пикселей. Что произойдет, если пользователь повернет экран? Ширина области просмотра станет 896 пикселей. К счастью, всего одна строка CSS может сделать изображения отзывчивыми.
Теперь я собираюсь создать файл css/styles.css, ссылка на который уже есть в заголовке HTML-страницы.
Первым делом я добавлю в чистый файл css/styles.css следующий код. Хотя его можно было бы записать как одну строку, я разобью ее на три ради удобства чтения. Обычно я добавляю прочие исходные настройки, речь о которых пойдет в следующих главах, но для выполнения нашей задачи пока что хватит и этого:
img {
max-width: 100%;
}
Теперь после сохранения файла и обновления страницы мы увидим что-то более соответствующее ожиданиям.
Рис. 1.5. После добавления небольшого фрагмента CSS изображения больше не выходят за границы области просмотра
Область окна браузера, которая позволяет просматривать веб-страницу, называется областью просмотра (вьюпортом). В область просмотра не входят панели инструментов браузера, адресная строка и т.д. Далее мы будем использовать именно этот термин.
Правило, на котором основано свойство max-width, предполагает, что максимальная ширина изображений не должна превышать 100 % их размера. Если содержащий изображение элемент (такой, как body или находящийся внутри него div) меньше полной реальной ширины изображения, браузер отобразит максимально возможный размер этого изображения при таких ограничениях.
Пара слов о width и max-width для изображений
Чтобы сделать изображение подстраиваемым, можно также применить более востребованное свойство width, например width: 100%. Но в результате эффект будет совершенно другим: при использовании процентов картинка отобразится с заданной шириной, зависящей от ширины контейнера, при этом неважно, какая у нее реальная ширина. Так, наш логотип растянется, чтобы заполнить 100 % своего контейнера, потому что контейнер шире самого изображения логотипа.
Превосходно! Теперь все так, как мы и ожидали. Независимо от размера окна просмотра ничто теперь не выходит за его границы по горизонтали.
Примеры кода, представленные в этой книге, не включают стили префиксов браузеров. Раньше префиксы браузеров использовались для экспериментальных свойств CSS в различных браузерах, например webkit-backface-visibility.
Без префиксов в CSS часто не обойтись, если нужно обеспечить поддержку определенных свойств в старых браузерах. Теперь есть инструменты, которые автоматизируют простановку префиксов и, как вы могли догадаться, выполняют эту задачу быстрее и точнее, чем мы.
Я не буду добавлять эти префиксы в примеры кода, надеясь, что вы используете этот подход. Префиксы браузеров и инструменты автоматизации подробно описаны в главе 7.
Но если открыть страницу в более крупном окне просмотра, основные стили растягиваются. Взгляните, как отображается наш код при размере окна просмотра около 1400 пикселей.
Рис. 1.6. Определенно нужно изменить размер этого изображения для больших областей просмотра
О нет! Фактически страница начинает выглядеть растянутой уже при ширине примерно 800 пикселей. Самое время сейчас что-нибудь поправить. Может быть, изменить размер изображения и выровнять его по одной из сторон. Или изменить размеры части шрифтов и цвета фона элементов.
К счастью, все эти функциональные возможности мы без особого труда можем получить с помощью медиазапросов CSS.
Ввод медиазапросов
Как выяснилось, если ширина окна просмотра больше 800 пикселей, макет становится растянутым. Давайте воспользуемся медиазапросами CSS для подгона макета в зависимости от ширины экрана. Более подробно разберем медиазапросы в главе 3, а пока достаточно знать, что медиазапросы — это директивы CSS, которые позволяют привязывать CSS-правила к определенным условиям среды (в нашем случае это размер экрана).
Брейкпоинты
Прежде чем мы продолжим, стоит познакомиться с контрольными точками, или брейкпоинтами.
Это понятие используется веб-разработчиками для определения конкретной ширины или высоты области просмотра, при которой отзывчивый дизайн заметно меняется.
Когда медиазапросы только появились, проекты часто строились с определенными брейкпоинтами для обслуживания популярных устройств того времени. В то время это были iPhone (320 × 480 пикселей) и iPad (768 × 1024 пикселей).
Даже тогда такая практика была плохим решением, а сейчас тем более. Проблема в том, что такой подход подстраивает дизайн под конкретные размеры экрана. А нам нужен отзывчивый дизайн — такой, который не зависит от размера экрана и подстраивается под любое окно просмотра. Недостаточно того, что лучше всего смотрится только при определенных размерах.
Представьте, что я ваш отец. С благими намерениями я нахмурился и настойчиво заявляю: «Нет никаких конкретных брейкпоинтов — используй брейкпоинт, если он нужен для дизайна, а не для конкретного устройства!» Ладно, снимаю шапку с надписью «папа» и обещаю не шутить в присутствии ваших друзей.
Небольшой вывод из этого лирического отступления: лучшие результаты получаются тогда, когда вы руководствуетесь своим дизайном при принятии решения о вводе брейкпоинтов.
Но мы вовсе не хотим, чтобы наш простой пример разрастался. Поэтому сконцентрируемся на одном типе медиазапроса, связанном с минимальной шириной. Правила CSS внутри него применяются только если окно просмотра равно какой-нибудь конкретной ширине или превышает ее. Эту ширину можно задать с помощью различных единиц измерения, включая проценты, em, rem, пиксели и т.п. В CSS медиазапрос минимальной ширины записывается так:
@media screen and (min-width: 800px) {
/* стили */
}
Директива @media сообщает браузеру о начале медиазапроса, а компонент screen (объявлять его здесь, в принципе, не обязательно, но мы все же будем работать с ним в главе 3) сообщает, что правила должны применяться ко всем типам экранов. Ключевое слово and связывает воедино второй набор условий, который в нашем случае выражен как min-width: 800px. Благодаря им браузер понимает, что правила должны действовать для всех окон просмотра шириной не менее 800 пикселей.
Думаю, следующую фразу впервые написал Брайан Ригер (Bryan Rieger) (http:// www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu): «Отсутствие носителя для медиазапросов фактически является признаком первого медиазапроса». Он имел в виду, что вне медиазапроса прежде всего нужно записать начальные, или базовые, правила для большинства основных устройств, которые мы затем будем наращивать для новых устройств и больших экранов.
Именно это мы и делаем: сначала прописываем основные стили и вводим медиазапрос только тогда, когда хотим что-то добавить.
Такой подход помогает мыслить в рамках принципа «сначала маленькие экраны» и позволяет постепенно наслаивать детали, когда приходит время настраивать дизайн для больших экранов.
Адаптируем пример к большому экрану
Мы уже выяснили, что дизайн портится, когда ширина достигает 800 пикселей.
Поэтому внесем в простой пример кое-что новенькое: подстроим макет под разные окна просмотра.
Для начала сделаем так, чтобы наше главное изображение не разрасталось — закрепим его в правой части экрана. Тогда вводный текст можно поместить в левую часть.
Затем снизу по левому краю расположим основную часть текста — рецепт (наш «метод» приготовления булочек), а справа в маленькой врезке перечислим ингредиенты.
Проделать все это довольно просто: нужно лишь поместить соответствующие стили в медиазапрос. Вот как выглядит страница после того, как мы добавили в нее эти стили:
Рис. 1.7. С помощью нескольких правил в медиазапросе мы получаем макет для больших экранов
На маленьких экранах страница будет выглядеть так же, как и раньше, но, как только сайт откроют на экране шириной 800 пикселей или больше, страница подстроится под новый макет.
Можно было бы добавить еще улучшений для красоты, но они не помогут лучше понять отзывчивость, так что я их опустил. Если интересно взглянуть на код, который их содержит, скачайте код для этой главы на сайте http://rwd.education.
Вот добавленные стили разметки:
@media screen and (min-width: 800px) {
.IntroWrapper {
display: table;
table-layout: fixed;
width: 100%;
}
.MoneyShot,
.IntroText {
display: table-cell;
width: 50%;
vertical-align: middle;
text-align: center;
}
.IntroText {
padding: 0.5rem;
font-size: 2.5rem;
text-align: left;
}
.Ingredients {
font-size: 0.9rem;
float: right;
padding: 1rem;
margin: 0 0 0.5rem 1rem;
border-radius: 3px;
background-color: #ffffdf;
border: 2px solid #e8cfa9;
}
.Ingredients h3 {
margin: 0;
}
}
Неплохо, правда? С минимумом кода мы создали страницу, которая подстраивается под размер окна просмотра и выдает подходящий макет. А благодаря добавлению всего нескольких стилей мы получили еще более привлекательный вариант.
Вот как теперь выглядит наша простая отзывчивая страница на iPhone:
Рис. 1.8. Еще несколько стилей — и наша страница выглядит приятнее
А так она выглядит при ширине окна просмотра свыше 800 пикселей.
Рис. 1.9. Тот же HTML- и CSS-код, но другой макет для больших окон просмотра
Да, наш пример прост, но он описывает основную методологию создания отзывчивого веб-дизайна.
Повторим все самое важное из главы и базового примера:
• Используйте любой текстовый редактор, который вам нравится.
• Некоторые инструменты упрощают написание кода, но не стоит зацикливаться на их выборе.
• Отзывчивый дизайн стал возможен благодаря гибким макетам, отзывчивым изображениям и медиазапросам.
• В заголовке HTML-кода нужно прописывать метатег, чтобы браузер знал, как отображать страницу.
• Максимальная ширина изображения в CSS не должна превышать 100 % по умолчанию.
• Брейкпоинт — это просто ориентир, обычно равный ширине экрана, который используется в медиазапросе для изменения дизайна.
• Когда вы пишете CSS-код для отзывчивого дизайна, начните с базовых стилей, которые работают на любом устройстве. Отталкивайтесь от макетов для маленьких экранов, а затем используйте медиазапросы, чтобы адаптировать его для больших.
• Булочки со взбитыми сливками и джемом действительно вкусные.
Полную спецификацию медиазапросов CSS Media Queries (Level 3) можно найти по ссылке http://www.w3.org/TR/css3-mediaqueries/.
А рабочий вариант CSS Media Queries (Level 4) можно найти здесь: http://dev.w3.org/csswg/mediaqueries-4/.
Несовершенство нашего примера
В этой главе мы рассмотрели базовые составляющие простой отзывчивой веб-страницы с помощью HTML и CSS. Конечно, страница далека от идеальной, и я простил бы вас за эпитеты «недоразвитая», «ленивая» и «уродливая». Но не произносите это вслух: у меня ведь тоже есть чувства!
Этот базовый пример непохож на реальный проект и не отражает пределы наших возможностей.
А ведь еще нужно подумать о типографике, цветовых схемах, тенях и реакциях на наведение. Изучить семантическую разметку, вопросы доступности, анимацию, масштабируемую графику, формы и многое другое.
Ну вы поняли. А ведь мы едва поскребли по поверхности. Но не волнуйтесь. Для этого и нужна оставшаяся часть книги.
Итоги
Теперь вы знаете самое важное для создания полностью отзывчивой веб-страницы. Но как мы только что выяснили, совершенству нет предела.
В следующей главе речь пойдет о разметке HTML5. HTML — это каркас любой веб-страницы или приложения, фундамент, на котором можно построить что-либо значимое, воздух, которым дышит веб-сайт...
Ладно, у меня закончились аналогии. Скажу проще: HTML очень важен, так что приступим.
1В русскоязычных изданиях есть путаница в понятиях «отзывчивый» (responsive) и «адаптивный» (adaptive) дизайн. Можно сказать, что отзывчивый веб-дизайн является подмножеством адаптивного. Отзывчивый дизайн подстраивается под размер макета, в адаптивном используется несколько макетов для адаптации к разным размерам экрана. — Примеч. науч. ред.
