Коротко: CSS2 — единая спецификация, CSS3 разбит на независимые модули: цвета, шрифты, анимации, трансформации, flexbox, grid, медиазапросы. CSS3 добавил переходы, тени, скругления, градиенты и адаптивную вёрстку, сохранив обратную совместимость.
Главное отличие
| Критерий | CSS2 | CSS3 |
|---|---|---|
| Структура | один документ | модули |
| Развитие | единая версия | по модулям отдельно |
| Анимация | почти нет | transition, animation |
| Раскладка | только потоки и float | flex, grid |
| Адаптивность | ограниченно | медиазапросы |
Что появилось в CSS3
CSS3 принёс то, без чего не обходится современная вёрстка: скругления углов, тени, градиенты, плавные переходы и полноценные системы раскладки.
.card {
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,.1);
background: linear-gradient(135deg, #003F8F, #992222);
transition: transform .3s;
}
.card:hover { transform: translateY(-4px); }Всё это — отдельные модули CSS3, которые браузеры поддерживают в разной степени, но в сумме давно стали стандартом.
Вкладки: ключевые нововведения
Гибкие коробки (flexbox) и сетка (grid) заменили старые хаки с float и таблицами. Раскладка стала предсказуемой и простой.
Тени, скругления, градиенты, прозрачность, трансформации и анимации. Раньше для этого нужны были картинки и скрипты.
@media (max-width: 768px) {
.grid { grid-template-columns: 1fr; }
}Медиазапросы позволяют менять стили под размер экрана — основа адаптивной вёрстки, которой не было в CSS2.
Практика: применить CSS3
- Замените устаревшие приёмы раскладки на flex или grid.
- Уберите картинки-тени и скругления в пользу CSS-свойств.
- Добавьте плавные переходы для интерактивных элементов.
- Настройте адаптивность через медиазапросы.
- Проверьте поддержку свойств в целевых браузерах.
- Убедитесь, что без новых свойств вёрстка не ломается.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Свойство не работает | старый браузер | проверить поддержку |
| Вёрстка «поехала» | смешаны старые и новые приёмы | перейти на flex/grid |
| Анимация дёргается | анимация свойств раскладки | анимировать transform |
| Адаптив не сработал | нет метатега viewport | добавить в head |
| Тень обрезается | overflow: hidden |
убрать ограничение |
Проверьте себя
Вопросы и ответы
Нет, учите современный CSS. Базовые свойства из CSS2 (отступы, шрифты, цвет) входят в него, а устаревшие приёмы вроде вёрстки таблицами знать не обязательно.
Спецификацию разбили на модули, и каждый развивается своим темпом. Поэтому говорят «CSS-цвета», «CSS-сетка» — по названию модуля, а не по номеру версии.
Обеспечить базовую работоспособность без новых свойств: если тень или скругление не поддерживаются, сайт всё равно должен оставаться читаемым и рабочим.
На сайте Can I use и в документации MDN. Перед использованием нового свойства проверьте, насколько широко оно поддерживается целевой аудиторией.
Итоги
- CSS3 — набор модулей, а не единый документ.
- Он добавил flex, grid, анимации, тени и градиенты.
- Медиазапросы сделали вёрстку адаптивной.
- CSS3 развивает CSS2, а не заменяет его.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.