CSS для профи

Предисловие..................................................................................................................16

Введение.......................................................................................................................18
Благодарности...............................................................................................................20
Об этой книге................................................................................................................22
Для кого предназначена книга.................................................................................22
Структура издания...................................................................................................23
Условные обозначения и файлы примеров...............................................................24
Версии браузеров.....................................................................................................25
Об авторе.................................................................................................................25
Иллюстрация на обложке.........................................................................................26
Часть I. Обзор основных принципов
Глава 1. Каскадность, специфичность и наследование.................................................28
1.1. Каскадность.......................................................................................................29
1.1.1. Источник стилей...................................................................................33
1.1.2. Специфичность селекторов..................................................................36
1.1.3. Исходный порядок................................................................................41
1.1.4. Два правила.........................................................................................44
1.2. Наследование....................................................................................................45
1.3. Специальные значения......................................................................................48
1.3.1. Ключевое слово inherit.........................................................................48
1.3.2. Ключевое слово initial...........................................................................49
1.4. Сокращенная запись свойств.............................................................................50
1.4.1. Остерегайтесь сокращений, скрыто переопределяющих другие стили....51
1.4.2. Порядок записи сокращенных значений...............................................52
Итоги главы..............................................................................................................54
Глава 2. Работа с относительными единицами.............................................................55
2.1. Мощь относительных значений..........................................................................55
2.1.1. Борьба за pixel-perfect-дизайн...............................................................56
2.1.2. Конец эпохи pixel-perfect......................................................................56
2.2. Единицы em и rem.............................................................................................58
2.2.1. Единицы em для указания размера шрифта..........................................59
2.2.2. Указание размера шрифта в единицах rem ..........................................63
2.3. Перестаньте думать в пикселах.........................................................................65
2.3.1. Установка адекватного размера шрифта по умолчанию........................66
2.3.2. Делаем панель адаптивной..................................................................68
2.3.3. Изменение размера отдельного компонента.........................................69
2.4. Единицы измерения, относящиеся к размеру экрана устройства........................71
2.4.1. Единицы vw для указания размера шрифта..........................................74
2.4.2. Функция calc() для указания размера шрифта......................................74
2.5. Числа без единиц измерения и свойство line-height...........................................75
2.6. Пользовательские свойства (или CSS-переменные)............................................77
2.6.1. Динамическое изменение пользовательских свойств............................79
2.6.2. Изменение пользовательских свойств с помощью JavaScript.................82
2.6.3. Экспериментирование с пользовательскими свойствами.......................83
Итоги главы..............................................................................................................84
Глава 3. Знакомство с блочной моделью......................................................................85
3.1. Трудности с шириной элемента.........................................................................86
3.1.1. Избегаем волшебных чисел..................................................................89
3.1.2. Настройка блочной модели...................................................................90
3.1.3. Глобальное применение свойства box-sizing: border-box.......................91
3.1.4. Добавление зазора между колонками...................................................93
3.2. Проблемы высоты элементов.............................................................................94
3.2.1. Управление переполнением..................................................................95
3.2.2. Применение альтернатив к высотам, указанным в процентах...............96
3.2.3. Свойства min-height и max-height........................................................101
3.2.4. Центрирование контента по вертикали...............................................102
3.3. Отрицательные значения полей.......................................................................104
3.4. Схлопывание полей.........................................................................................105
3.4.1. Схлопывание между текстом..............................................................106
3.4.2. Схлопывание многочисленных полей..................................................106
3.4.3. Схлопывание вне контейнера.............................................................107
3.5. Расстояние между элементами в контейнере...................................................109
3.5.1. Учет изменения контента...................................................................111
3.5.2. Универсальное решение: селектор лоботомированной совы...............112
Итоги главы............................................................................................................116
Часть II. Разметка
Глава 4. Плавающие элементы...................................................................................118
4.1. Предназначение плавающих элементов...........................................................118
4.2. Схлопывание контейнера и clearfix..................................................................125
4.2.1. Что такое схлопывание контейнера....................................................125
4.2.2. Что такое clearfix................................................................................128
4.3. Неожиданный «захват» плавающего элемента................................................131
4.4. Медиаобъекты и блочный контекст форматирования.......................................134
4.4.1. Что такое блочный контекст форматирования....................................135
4.4.2. Использование блочного контекста форматирования для разметки медиаобъектов..136
4.5. CSS-сетки.........................................................................................................138
4.5.1. Принципы CSS-сетки...........................................................................139
4.5.2. Создание CSS-сетки............................................................................139
4.5.3. Добавление зазоров...........................................................................144
Итоги главы............................................................................................................148
Глава 5. Flexbox-верстка............................................................................................149
5.1. Принципы flexbox-верстки................................................................................150
5.1.1. Создание базовой flex-навигации........................................................153
5.1.2. Добавление отступов и промежутков..................................................156
5.2. Размеры flex-элементов...................................................................................157
5.2.1. Свойство flex-basis..............................................................................160
5.2.2. Свойство flex-grow..............................................................................160
5.2.3. Свойство flex-shrink............................................................................162
5.2.4. Практические примеры.......................................................................163
5.3. Направление flex-элементов............................................................................165
5.3.1. Изменение направления flex-элементов..............................................167
5.3.2. Стилевое форматирование формы авторизации.................................168
5.4. Выравнивание, промежутки и другие штрихи...................................................170
5.4.1. Свойства flex-контейнеров..................................................................174
5.4.2. Свойства flex-элементов.....................................................................175
5.4.3. Выравнивание flex-блоков..................................................................176
5.5. Пара вещей, о которых следует знать..............................................................178
5.5.1. Flex-баги.............................................................................................178
5.5.2. Полноформатная разметка.................................................................179
Итоги главы............................................................................................................179
Глава 6. CSS-сетки.....................................................................................................181
6.1. Веб-разметка уже здесь...................................................................................182
6.1.1. Создание базовой сетки......................................................................183
6.2. Анатомия сетки................................................................................................185
6.2.1. Нумерация линий сетки......................................................................191
6.2.2. Совместная работа с flex-блоками.......................................................192
6.3. Альтернативный синтаксис..............................................................................196
6.3.1. Присвоение имен линиям сетки..........................................................196
6.3.2. Присвоение имен областям сетки.......................................................198
6.4. Явная и неявная сетка.....................................................................................200
6.4.1. Внесем разнообразие..........................................................................204
6.4.2. Подгонка элементов для заполнения полосы сетки.............................207
6.5. Запросы функций.............................................................................................210
6.6. Выравнивание.................................................................................................213
Итоги главы............................................................................................................216
Глава 7. Контексты позиционирования и наложения..................................................217
7.1. Фиксированное позиционирование..................................................................218
7.1.1. Создание модального окна с фиксированным позиционированием.....218
7.1.2. Управление размером позиционированных элементов........................221
7.2. Абсолютное позиционирование........................................................................222
7.2.1. Абсолютное позиционирование кнопки Закрыть.................................222
7.2.2. Позиционирование псевдоэлементов..................................................223
7.3. Относительное позиционирование...................................................................225
7.3.1. Создание раскрывающегося меню......................................................226
7.3.2. Создание треугольника CSS................................................................229
7.4. Контексты наложения и z-индекса...................................................................231
7.4.1. Процесс рендеринга и порядок наложения.........................................232
7.4.2. Управление наложением с помощью свойства z-index.........................234
7.4.3. Контексты наложения.........................................................................235
7.5. Липкое позиционирование...............................................................................239
Итоги главы............................................................................................................242
Глава 8. Адаптивный дизайн......................................................................................243
8.1. Подход Mobile First...........................................................................................244
8.1.1. Создание мобильного меню................................................................252
8.1.2. Добавление метатега viewport............................................................257
8.2. Медиазапросы.................................................................................................258
8.2.1. Типы медиазапросов..........................................................................260
8.2.2. Добавление контрольных точек на страницу......................................262
8.2.3. Добавление адаптивных колонок........................................................266
8.3. Резиновые макеты...........................................................................................268
8.3.1. Добавление стилей для большой области просмотра..........................269
8.3.2. Работа с таблицами............................................................................272
8.4. Адаптивные изображения................................................................................273
8.4.1. Использование нескольких изображений для экранов разных
размеров............................................................................................274
8.4.2. Использование атрибута srcset для передачи нужного
изображения.......................................................................................275
Итоги главы............................................................................................................276
Часть III. Масштабируемый CSS-код
Глава 9. Модульный CSS............................................................................................278
9.1. Базовые стили: закладываем основы...............................................................279
9.2. Простой модуль...............................................................................................281
9.2.1. Вариации модуля................................................................................282
9.2.2. Модули с множеством элементов........................................................287
9.3. Составление крупных структур из модулей......................................................290
9.3.1. Разделение ответственности между модулями....................................290
9.3.2. Именование модулей..........................................................................295
9.4. Вспомогательные классы.................................................................................296
9.5. Методологии CSS.............................................................................................297
Итоги главы............................................................................................................299
Глава 10. Библиотеки компонентов............................................................................300
10.1. Введение в KSS..............................................................................................301
10.1.1. Установка KSS...................................................................................302
10.1.2. Написание KSS-документации...........................................................304
10.1.3. Документирование вариаций модуля................................................308
10.1.4. Создание начальной страницы..........................................................311
10.1.5. Документирование модулей, которым требуется JavaScript...............311
10.1.6. Упорядочение контента библиотеки компонентов
по разделам.....................................................................................314
10.2 Инновационный способ верстки CSS...............................................................316
10.2.1. Метод CSS First.................................................................................317
10.2.2. Библиотека компонентов в качестве API...........................................318
Итоги главы............................................................................................................324
Часть IV. Темы повышенной сложности
Глава 11. Фоны, тени и режимы смешивания.............................................................326
11.1. Градиенты.....................................................................................................327
11.1.1. Использование нескольких цветовых узлов......................................329
11.1.2. Использование радиального градиента.............................................332
11.2. Тени..............................................................................................................334
11.2.1. Создание объема с помощью градиентов и теней.............................335
11.2.2. Элементы с плоским дизайном..........................................................336
11.2.3. Создание кнопок с более современным дизайном.............................337
11.3. Режимы смешивания......................................................................................338
11.3.1. Изменение оттенка изображения......................................................341
11.3.2. Виды режимов смешивания..............................................................342
11.3.3. Добавление текстуры изображению..................................................343
11.3.4. Микширование режимов смешивания...............................................345
Итоги главы............................................................................................................347
Глава 12. Контраст, цвета и интервалы......................................................................348
12.1. Царство контраста.........................................................................................349
12.1.1. Создание шаблона............................................................................351
12.1.2. Реализация дизайна.........................................................................352
12.2. Цвета.............................................................................................................353
12.2.1. Разбираемся с нотациями цветов......................................................360
12.2.2. Добавление цветов в палитру...........................................................364
12.2.3. Применение контраста при выборе цвета текста..............................367
12.3. Интервалы.....................................................................................................368
12.3.1. Единицы em или пикселы?................................................................369
12.3.2. Вычисление высоты строки...............................................................371
12.3.3. Интервалы между строчными элементами........................................374
Итоги главы............................................................................................................377
Глава 13. Шрифтовое оформление............................................................................378
13.1. Веб-шрифты...................................................................................................380
13.2. Сервис Google Fonts.......................................................................................381
13.3. Как работает свойство @font-face..................................................................386
13.3.1. Форматы шрифтов и замена при необходимости...............................387
13.3.2. Варианты начертания в одной гарнитуре..........................................388
13.4. Управление интервалами в целях повышения читаемости.............................390
13.4.1. Интервалы основного текста сайта...................................................391
13.4.2. Заголовки, мелкие элементы и интервалы........................................392
13.5. Вспышки нестилизованного и невидимого текста...........................................397
13.5.1. Библиотека Font Face Observer..........................................................398
13.5.2. Откат к системным шрифтам............................................................400
13.5.3. И наконец, свойство font-display.......................................................402
Итоги главы............................................................................................................403
Глава 14. Переходы...................................................................................................404
14.1. Отсюда сюда..................................................................................................404
14.2. Функции времени...........................................................................................407
14.2.1. Изучение кривых Безье.....................................................................409
14.2.2. Шаги.................................................................................................412
14.3. Неанимируемые свойства...............................................................................413
14.3.1. Свойства, которые нельзя анимировать............................................416
14.3.2. Появление и исчезновение...............................................................417
14.4. Переход к автоматическому выравниванию высоты.......................................419
Итоги главы............................................................................................................421
Глава 15. Трансформации..........................................................................................422
15.1. Вращение, масштабирование, смещение и наклон.........................................422
15.1.1. Изменение точки трансформации.....................................................426
15.1.2. Применение нескольких трансформаций...........................................426
15.2. Анимированные трансформации....................................................................427
15.2.1. Масштабирование значков................................................................433
15.2.2. Создание «вылетающих» меток........................................................436
15.2.3. Поэтапные переходы........................................................................438
15.3. Производительность анимации......................................................................439
15.3.1. Рендеринг страницы.........................................................................440
15.4. Трехмерные (3D) трансформации..................................................................442
15.4.1. Контроль перспективы......................................................................443
15.4.2. Профессиональные приемы 3D-трансформации................................446
Итоги главы............................................................................................................449
Глава 16. Анимация...................................................................................................450
16.1. Ключевые кадры............................................................................................451
16.2. Анимация 3D-трансформаций........................................................................454
16.2.1. Создание макета без анимации.........................................................454
16.2.2. Добавление анимации в макет..........................................................459
16.3. Задержка запуска анимации и режим заполнения..........................................461
16.4. Передача смысла с помощью анимации.........................................................464
16.4.1. Реакция на действие пользователя...................................................464
16.4.2. Привлечение внимания пользователя...............................................468
16.5. Совет напоследок..........................................................................................471
Итоги главы............................................................................................................472
Приложения
Приложение A. Селекторы........................................................................................474
А.1. Базовые селекторы..........................................................................................474
А.2. Комбинаторы...................................................................................................474
A.3. Селекторы псевдоклассов................................................................................475
А.4. Селекторы псевдоэлементов............................................................................477
А.5. Селекторы атрибутов.......................................................................................478
Приложение Б. Препроцессоры................................................................................479
Б.1. Препроцессор Sass..........................................................................................480
Б.1.1. Установка препроцессора Sass...........................................................480
Б.1.2. Запуск препроцессора Sass.................................................................481
Б.1.3. Важные функции препроцессора Sass.................................................482
Б.2. PostCSS............................................................................................................491
Б.2.1. Использование инструмента Autoprefixer............................................491
Б.2.2. Применение cssnext............................................................................492
Б.2.3. Использование cssnano......................................................................492
Б.2.4. Использование PreCSS........................................................................493