Отзывчивый дизайн на HTML5 и CSS3 для любых устройств: Создавайте адаптивные веб-сайты, соответствующие требованиям завтрашнего дня, используя новейшие технологии HTML5 и CSS. 3 изд

Краткое оглавлениеОб автореО научных редакторахПредисловиеДля кого эта книгаСтруктураЧто нужно для работы с книгойЗагрузка файлов с примерами кодаЦветные изображенийТипографские соглашенияОт издательства1. Основы отзывчивого веб-дизайнаБраузеры и устройстваЧто такое отзывчивый дизайнКоротко об отзывчивом веб-дизайнеПоддержка браузерамиТекстовые редакторыИнструменты для разработки софтаПервый пример отзывчивого дизайнаБазовый файл HTMLУкрощение изображенийВвод медиазапросовНесовершенство нашего примераИтоги2. Создание HTML-разметкиПравильное начало работы с HTML‑страницамиЭлемент doctypeТег html и атрибут langКодировка символовДобрый HTML5Разумный подход к HTML-разметкеДа здравствует могущественный тег <a>Новые семантические элементы в HTML5Элемент mainЭлемент sectionЭлемент navЭлемент articleЭлемент asideЭлемент headerЭлемент footerАлгоритм схемы HTML5Замечания относительно элементов h1–h6Элемент <div >Элемент <p >Элемент <blockquote >Элементы <figure > и <figcaption >Элементы <details > и <summary >Элемент <address >Семантика HTML на уровне текстаЭлемент <span >Элемент <b >Элемент <strong >Элемент <em >Элемент <i >Устаревшие функции HTMLПрактическое применение HTML‑элементовИспользование WCAG и WAI-ARIA для повышения доступности веб‑приложенийWCAGWAI-ARIAМедиавозможности, встроенные в HTML5Добавление видео и аудио в разметку HTMLОтзывчивое HTML5-видео и iFramesИтогиУпражнение3. Медиазапросы — поддержка различных окон просмотраМетатег viewportЗачем нужны медиазапросыОсновная условная логика в CSSСинтаксис медиазапросаМедиазапросы в тегах linkМедиазапросы с использованием правила @importМедиазапросы в файле CSSИнверсия логики медиазапросовОбъединение медиазапросовРяд различных медиазапросовПовседневные медиазапросыЧто можно тестировать с помощью медиазапросовИспользование медиазапросов для изменения веб-дизайнаРасширенные рекомендации по медиазапросамОрганизация медиазапросовПрактические аспекты разделения медиазапросовВложение медиазапросов через встраиваниеЧто делать — объединять медиазапросы или же записывать их там, где они пригодятся?Спецификация Media Queries Level....4Медиа-функции взаимодействия со страницейМедиа-функция prefers-color-schemeИтоги4. Fluid Layout, Flexbox и отзывчивые изображенияПреобразование фиксированного пиксельного дизайна в пропорциональный резиновый макетЗачем нужен FlexboxПредставляем FlexboxТернистый путь FlexboxКому-то все еще нужны префиксыВозможность динамического измененияРазличные макеты Flexbox внутри разных медиазапросовСвойство inline-flexСвойства выравнивания, предоставляемые FlexboxПростой зафиксированный подвалИзменение порядка следования исходных элементовСвертка flex-элементовИтоги по FlexboxОтзывчивые изображенияПроблема, присущая отзывчивым изображениямПростое переключение разрешения с помощью srcsetБолее совершенный вариант переключения с помощью srcset и sizesУправление элементом pictureИтоги5. CSS GridЧто такое CSS Grid и какие проблемы она решаетБазовый синтаксис GridТерминология, специфичная для GridНастройка сеткиЯвное и неявное позиционирование элементовРазмещение и изменение размера элементов сеткиСвойство gapФункция repeat()Единица frРазмещение элементов в сеткеКлючевое слово spanКлючевое слово denseИменованные линии сеткиСвойство grid-template-areasПрименение ваших знаний на практикеКлючевые слова auto-fit и auto-fillФункция minmax()Сокращения в синтаксисеСокращение grid-templateСокращение gridИтоги6. CSS-селекторы, типографика, цветовые режимы и многое другоеСелекторы, единицы измерения и возможностиАнатомия правила CSSПсевдоэлементы и псевдоклассыСелекторы CSS Level 3 и как их использоватьСтруктурные псевдоклассыОтзывчивые меры длины, выражаемые в процентных отношениях применительно к окнам просмотра (vmax, vmin, vh, vw)Функция calc()Пользовательские свойства CSSИспользование @supports для создания альтернативных вариантовВеб-типографикаСистемные шрифтыCSS-правило @font-faceРеализация веб-шрифтов с помощью @font-faceОптимизация загрузки шрифтов с помощью @font-faceВариативные шрифтыФорматы цвета в CSS и альфа‑прозрачностьЦвет в формате RGBЦвет в формате HSLИтоги7. Потрясающая эстетика с помощью CSSСоздание теней для текста средствами CSSЕсли размытие не нужно, его значение можно опуститьСоздание теней для блоковТень внутри элементаСоздание нескольких тенейПонятие протяженностиГрадиентные фоныЗапись линейного градиентаРадиальные градиентные фоныУдобные ключевые слова «распространения» для задания размеров отзывчивых конструкцийПовторяющиеся градиентыПаттерны градиентных фоновИспользование нескольких фоновых изображенийРазмер фонаПозиционирование фонаКраткая запись настроек фонаФоновые изображения с высоким разрешениемCSS-фильтрыДоступные CSS-фильтрыОбъединение CSS-фильтровПредупреждения, касающиеся CSS‑производительностиCSS-свойство clip-pathСвойство clip-path с URL-адресомБазовые формы CSSАнимация с помощью свойства clip-pathИзображение в качестве маскиПример изображения-маскиСвойство mix-blend-modeИтоги8. SVG и независимость от разрешенияКраткая история SVGИзображение — считываемый веб‑документКорневой элемент SVGПространство именТеги title и descТег defsЭлемент gФигуры SVGSVG-путиСоздание SVG-графики с помощью популярных пакетов и сервисов редактирования изображенийСервисы SVG-значков экономят времяВставка SVG-графики в веб-страницыИспользование тега imgИспользование тега objectВставка SVG-графики в качестве фонового изображенияКраткое отступление о URI-идентификаторах данныхСоздание спрайтов изображенийНепосредственная вставка SVGПовторное использование графических объектов из символовВстраиваемая в код SVG-графика позволяет задавать разные цвета в разных контекстахИзменение цветов SVG-изображений с помощью пользовательских свойств CSSПовторное использование графических объектов из внешних источниковНа что влияет способ вставки SVG‑данных?Особенности браузеровДополнительные возможности и особенности технологии SVGSMIL-анимацияЗадание стилей SVG с помощью внешней таблицы стилейЗадание стилей SVG с помощью внутренних стилейАнимация SVG-графики с помощью CSSАнимация SVG-графики с помощью JavaScriptПростой пример анимации SVG-графики с помощью GreenSockОптимизация SVGИспользование SVG в качестве фильтровМедиазапросы внутри SVGСоветы по внедрениюИтогиДополнительные ресурсы9. Переходы, преобразование и анимацияЧто такое CSS-переходы, и как ими можно воспользоватьсяСвойства переходаКраткая форма записи перехода с помощью свойства transitionПереходы различных свойств за разные периоды времениФункции развития процесса перехода по времени2D-преобразования в CSSМасштабирование (scale)Перемещение (translate)Поворот (rotate)Наклон (skew)Матрица (matrix)Свойство transform-origin3D-преобразования в CSSСвойство transform3dИспользование преобразований при постепенном улучшении на примере функции translate3dЭффекты анимации с помощью CSSСвойство animation-fill-modeУпражнения и практикаИтоги10. Освоение форм с помощью HTML5 и CSSФормы HTML5Основные сведения о компонентах формы HTML5Атрибут placeholderСтилизация указателя ввода с помощью свойства caret-colorАтрибут requiredАтрибут autofocusАтрибут autocompleteАтрибут list и элемент datalistТипы вводимой информации, определяемые HTML5Тип emailТип numberТип urlТип telТип searchАтрибут patternТип colorТипы date и timeТип rangeСтилизация форм HTML5 с помощью CSSОбозначение полей, требующих обязательного заполненияСоздание эффекта заливки фонаИтоги11. Бонусные техники и советыРазбивка длинных URL-адресовОбрезка текстаСоздание панелей с горизонтальной прокруткойСоздание панелей с горизонтальной прокруткой с помощью GridМодуль CSS Scroll SnapСвойство scroll-snap-typeСвойство scroll-snap-alignСвойство scroll-paddingПлавная прокрутка с помощью свойства scroll‑behaviorПривязка брейкпоинтов CSS к JavaScriptОбкатка веб-дизайна в браузере на самых ранних стадияхТестирование на реальных устройствахИспользование принципа постепенного улучшенияОпределение матрицы браузерной поддержкиФункциональное, но не эстетическое единообразиеВыбор поддерживаемых браузеровСоздание нескольких уровней пользовательского восприятияОтказ от использования сред разработки CSS при создании конечного продуктаСкрытие, показ и загрузка содержимого для разных окон просмотраСредства контроля качества кодаПовышение производительностиИнструменты для оценки производительностиВ преддверии великих переменИтоги