CSS3¶

CSS3 — это третья версия каскадных таблиц стилей (Cascading Style Sheets), стандарта, используемого для описания внешнего вида и форматирования документов, написанных на языках разметки, преимущественно HTML и XHTML. В отличие от предыдущих версий, CSS3 не является монолитным стандартом, а представляет собой совокупность отдельных модулей, каждый из которых описывает определённый аспект визуального представления веб-страниц. Разработка CSS3 началась в 1998 году, однако активное внедрение и стандартизация модулей происходили в 2010-х годах.

¶История развития

¶Предпосылки создания

Первая версия CSS (CSS1) была опубликована Консорциумом Всемирной паутины (W3C) в 1996 году, а CSS2 — в 1998 году. По мере усложнения веб-дизайна и появления новых требований к визуальному оформлению (анимация, градиенты, адаптивность) стало очевидно, что монолитная спецификация CSS2.1 (опубликована в 2011 году) не успевает за развитием технологий. Разработка CSS3 была начата с целью разделить огромный объём новых возможностей на логические, независимые друг от друга модули, что ускорило бы процесс стандартизации и внедрения.

¶Процесс стандартизации

В отличие от CSS2, где все спецификации выпускались одним документом, CSS3 состоит из десятков модулей. Каждый модуль проходит несколько стадий: рабочий проект (Working Draft), рекомендуемый кандидат (Candidate Recommendation), предложенная рекомендация (Proposed Recommendation) и окончательная рекомендация (W3C Recommendation). На 2024 год многие модули CSS3 (например, «Flexbox», «Grid Layout», «Backgrounds and Borders») достигли статуса рекомендации, в то время как другие (например, «CSS Shapes») остаются на стадии рабочих проектов. Такая модульная структура позволила браузерам внедрять новые возможности постепенно, не дожидаясь завершения всей спецификации.

¶Хронология ключевых событий

• 1998 год — начало работы над CSS3.
• 2001 год — первая публикация модуля «CSS3 Selectors» (селекторы).
• 2009 год — появление черновика модуля «CSS3 Animations» (анимации).
• 2011 год — публикация модуля «CSS3 Backgrounds and Borders» (фоны и границы) как рекомендации.
• 2012 год — рекомендация модуля «CSS3 Flexible Box Layout» (Flexbox).
• 2017 год — рекомендация модуля «CSS Grid Layout» (сетки).
• 2020-е годы — активное развитие модулей «CSS Containment», «CSS Scroll Snap», «CSS Subgrid».

¶Модульная структура

CSS3 не имеет единой нумерации; вместо этого существует около 50 модулей, каждый из которых отвечает за определённую функциональность. Основные модули включают:

¶Селекторы и псевдоклассы

Модуль CSS3 Selectors расширил возможности выбора элементов. Появились:

• Селекторы атрибутов с проверкой подстрок: [attr^="value"] (начинается с), [attr$="value"] (заканчивается на), [attr*="value"] (содержит).
• Структурные псевдоклассы: :nth-child(), :nth-of-type(), :first-of-type, :last-child.
• Псевдоклассы состояния: :disabled, :checked, :valid, :invalid.
• Псевдоэлементы с двойным двоеточием: ::before, ::after, ::first-line, ::first-letter.

¶Фоны и границы

Модуль CSS3 Backgrounds and Borders (рекомендация 2011 года) ввёл:

• Множественные фоны: возможность задавать несколько фоновых изображений для одного элемента через запятую.
• Градиенты: линейные (linear-gradient()), радиальные (radial-gradient()), конические (conic-gradient()).
• Закруглённые углы: свойство border-radius (например, border-radius: 10px;).
• Изображения для границ: свойство border-image, позволяющее использовать изображение в качестве рамки.
• Тени блоков: свойство box-shadow с поддержкой множественных теней и параметров размытия.

¶Текст и шрифты

Модуль CSS3 Text и CSS3 Fonts (рекомендация 2013 года) добавили:

• Веб-шрифты: правило @font-face для подключения пользовательских шрифтов с сервера.
• Тени текста: свойство text-shadow.
• Перенос слов: свойство word-wrap (ныне overflow-wrap) и hyphens.
• Декоративные линии: свойство text-decoration с возможностью задания стиля, цвета и толщины (например, text-decoration: underline wavy red;).
• Выравнивание текста: свойство text-align-last для последней строки абзаца.

¶Многоколоночная вёрстка

Модуль CSS3 Multi-column Layout (рекомендация 2011 года) позволяет разбивать текст на несколько колонок без использования таблиц или JavaScript. Ключевые свойства:

• column-count — количество колонок.
• column-width — ширина колонок.
• column-gap — промежуток между колонками.
• column-rule — линия между колонками (аналог border).

¶Анимации и трансформации

Модули CSS3 Animations, CSS3 Transitions и CSS3 Transforms (рекомендации 2012–2013 годов) обеспечили возможность создания динамических эффектов без JavaScript:

• Трансформации (transform): поворот (rotate()), масштабирование (scale()), наклон (skew()), перемещение (translate()) в 2D и 3D.
• Переходы (transitions): плавное изменение свойств при наведении или изменении класса (например, transition: background-color 0.3s ease;).
• Ключевые кадры (keyframes): правило @keyframes для создания сложных последовательностей анимации.
• Анимационные свойства: animation-name, animation-duration, animation-iteration-count, animation-direction.

¶Адаптивный дизайн

Модуль CSS3 Media Queries (рекомендация 2012 года) позволяет применять стили в зависимости от характеристик устройства: ширины экрана, разрешения, ориентации, типа устройства. Пример: ``css @media (max-width: 768px) { body { font-size: 14px; } } `` Медиа-запросы стали основой адаптивного веб-дизайна (responsive web design).

¶Flexbox и Grid

Два ключевых модуля для построения макетов:

• Flexbox (CSS Flexible Box Layout, рекомендация 2012 года) — одномерная модель расположения элементов (в строку или в столбец) с возможностью автоматического распределения пространства. Основные свойства: display: flex, flex-direction, justify-content, align-items.
• Grid Layout (CSS Grid Layout, рекомендация 2017 года) — двумерная система сеток, позволяющая задавать строки и столбцы явно. Свойства: display: grid, grid-template-columns, grid-template-rows, grid-area.

¶Цвета и прозрачность

CSS3 ввёл новые способы задания цветов:

• RGBA: rgba(255, 0, 0, 0.5) — красный с полупрозрачностью.
• HSLA: hsla(120, 100%, 50%, 0.3) — зелёный с прозрачностью через тон, насыщенность и светлоту.
• Непрозрачность: свойство opacity (от 0 до 1).

¶Другие модули

• CSS3 Box Model — уточнение модели блока, включая свойство box-sizing (content-box / border-box).
• CSS3 UI — стилизация элементов форм (appearance, resize, outline).
• CSS3 Filter Effects — графические фильтры (blur(), grayscale(), sepia(), drop-shadow()).
• CSS3 Shapes — обтекание текстом произвольных фигур (например, круга или многоугольника).

¶Применение

¶Веб-дизайн

CSS3 является основным инструментом для оформления современных веб-сайтов. С его помощью реализуются:

• Адаптивные макеты (media queries, flexbox, grid).
• Визуальные эффекты (градиенты, тени, скругления).
• Анимации и микроинтеракции (переходы, ключевые кадры).
• Типографика (веб-шрифты, декоративные линии).

¶Разработка пользовательских интерфейсов

Веб-приложения (включая одностраничные приложения, SPA) активно используют CSS3 для создания сложных интерфейсов: модальные окна, выпадающие меню, карусели, прогресс-бары. CSS3 позволяет выполнять многие задачи, которые раньше требовали JavaScript (например, анимация появления элементов).

¶Кроссплатформенная разработка

Многие фреймворки (React Native, Flutter, Ionic) заимствуют концепции CSS3 для описания стилей. В веб-среде CSS3 поддерживается всеми основными браузерами (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge), что обеспечивает единообразное отображение на разных устройствах.

¶Критика и ограничения

Несмотря на широкое распространение, CSS3 имеет ряд недостатков:

• Фрагментация стандартов: разные модули находятся на разных стадиях стандартизации, что может приводить к неполной поддержке в старых браузерах.
• Отсутствие переменных (до появления модуля CSS Custom Properties в CSS4): для повторного использования значений приходилось применять препроцессоры (Sass, Less).
• Сложность анимации: сложные анимации (например, физически достоверные) требуют JavaScript или специализированных библиотек.
• Отсутствие вложенности: селекторы в CSS3 не поддерживают вложенность (в отличие от препроцессоров), что может делать код громоздким.

¶Будущее: CSS4 и дальнейшее развитие

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

• CSS Custom Properties (кастомные свойства, переменные).
• CSS Container Queries (запросы к контейнеру, а не к окну просмотра).
• CSS Nesting (вложенность селекторов).
• CSS Houdini (API для расширения CSS через JavaScript).

¶Источники

• Спецификации W3C по CSS3 (модули Selectors, Backgrounds and Borders, Flexible Box Layout, Grid Layout, Animations, Transitions, Transforms, Media Queries).
• «CSS: The Definitive Guide» — Eric A. Meyer, Estelle Weyl (O'Reilly Media, 2017).
• «Learning Web Design» — Jennifer Niederst Robbins (O'Reilly Media, 2018).
• Документация Mozilla Developer Network (MDN Web Docs) по CSS3.