Что такое CSS3 и какие новые возможности он добавил?
Постоянно встречаю фразу «вёрстка на CSS3», но не очень понимаю, что именно изменилось по сравнению со старым CSS. Это новый язык или просто новая версия? Какие реально полезные вещи появились?
2 ответа
CSS3 — это не отдельный язык, а очередная редакция всё того же CSS. Главное отличие от CSS2 в том, что спецификацию разбили на независимые модули (Selectors, Backgrounds and Borders, Flexbox, Grid, Transitions и т. д.), и каждый развивается своим темпом. Поэтому «CSS3» — это скорее собирательное название для кучи возможностей, появившихся после 2010 года.
Самое полезное, что принёс CSS3:
- Скруглённые углы и тени без картинок:
.card {
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
- Градиенты прямо в CSS:
.banner {
background: linear-gradient(135deg, #6366f1, #ec4899);
}
- Переходы и анимации:
.btn {
transition: transform 0.2s ease;
}
.btn:hover {
transform: scale(1.05);
}
- Flexbox и Grid для раскладки без
float. - Медиазапросы (
@media) — основа адаптивной вёрстки. - Новые селекторы (
:nth-child,::before,[attr^=...]).
Итого: раньше для теней, скруглений и градиентов резали картинки в фотошопе, теперь это пара строк CSS.
Добавлю практический момент: в браузерах CSS3-свойства внедрялись постепенно и раньше требовали вендорных префиксов (-webkit-, -moz-). Сегодня в большинстве случаев они уже не нужны, но если поддерживаешь старьё — посматривай на caniuse.com, там видно по каждому свойству, где оно работает.
