CSS3 что нового?

CSS3 (Cascading Style Sheets Level 3) — это последняя версия языка стилей, которая принесла множество новых возможностей по сравнению с предыдущими версиями (CSS2 и CSS1). Основные отличия CSS3 включают:

1. Модульность

• CSS3 разделен на модули, каждый из которых развивается независимо. Это позволяет быстрее внедрять новые функции и улучшения.
• Примеры модулей: Selectors (селекторы), Box Model (блочная модель), Backgrounds and Borders (фоны и границы), Animations (анимации) и др.

2. Новые селекторы

• Появились более мощные и гибкие селекторы, такие как:
  • :nth-child(), :nth-of-type() — выбор элементов по их порядку.
  • :not() — исключение элементов.
  • :checked, :disabled — выбор элементов по состоянию.
  • Атрибутные селекторы, например, [attr^="value"] (начинается с) или [attr$="value"] (заканчивается на).

3. Границы и тени

• Возможность создавать скругленные угры с помощью border-radius.
• Тени для блоков (box-shadow) и текста (text-shadow).
• Градиенты для фона (linear-gradient, radial-gradient).

4. Анимации и переходы

• Анимации (@keyframes и animation) для создания сложных анимаций.
• Плавные переходы (transition) между состояниями элементов.

5. Медиа-запросы

• Поддержка адаптивного дизайна через медиа-запросы (@media), что позволяет изменять стили в зависимости от характеристик устройства (ширина экрана, ориентация и т.д.).

6. Многоколоночная верстка

• Свойства для создания многоколоночного текста (column-count, column-gap, column-rule).

7. Гибкие блоки (Flexbox)

• Модуль Flexbox, который упрощает создание гибких и адаптивных макетов.

8. Сетки (Grid Layout)

• Мощная система для создания сложных сеточных макетов с помощью display: grid.

9. Новые единицы измерения

• Относительные единицы, такие как vw, vh, vmin, vmax (проценты от ширины/высоты viewport).
• Единица rem (относительно корневого элемента).

10. Поддержка новых свойств для текста

• text-overflow: ellipsis — обрезка текста с многоточием.
• word-wrap: break-word — перенос длинных слов.
• @font-face — возможность подключать пользовательские шрифты.

11. Псевдоэлементы и псевдоклассы

• Новые псевдоэлементы, такие как ::before, ::after, ::first-letter, ::first-line.
• Псевдоклассы для работы с формами, например, :valid, :invalid, :required.

12. Поддержка прозрачности

• Свойство opacity для управления прозрачностью элементов.
• Возможность задавать прозрачность в цветах с помощью rgba и hsla.

13. Фоновые изображения

• Управление размером фонового изображения (background-size).
• Возможность задавать несколько фоновых изображений для одного элемента.

14. Трансформации

• 2D и 3D трансформации с помощью transform (вращение, масштабирование, наклон и т.д.).

15. Поддержка новых форматов

• Возможность использовать градиенты, SVG и другие современные форматы изображений.

16. Улучшенная производительность

• Оптимизация рендеринга и поддержка аппаратного ускорения для анимаций и трансформаций.

Итог

CSS3 значительно расширил возможности веб-дизайна, сделав его более гибким, интерактивным и адаптивным. Благодаря новым функциям, разработчики могут создавать сложные и красивые интерфейсы с меньшими усилиями.