Самое большое различие между CSS2 и CSS3 состоит в том, что CSS3 был разделен на различные разделы, называемые модулями . Каждый из этих модулей проходит через W3C на разных этапах процесса рекомендации. Этот процесс значительно упростил принятие и реализацию различных компонентов CSS3 в браузере различными производителями.
Если вы сравните этот процесс с тем, что произошло с CSS2, где все было представлено в виде одного документа со всей информацией каскадных таблиц стилей , вы увидите преимущества разделения рекомендации на более мелкие отдельные части. Поскольку каждый из модулей разрабатывается индивидуально, разработчики пользуются гораздо более широким диапазоном поддержки браузером модулей CSS3.
Новые CSS3 селекторы
CSS3 предлагает несколько новых способов написания правил CSS с новыми селекторами CSS, а также с новым комбинатором и некоторыми новыми псевдоэлементами.
Есть три новых селектора атрибутов:
- Начало атрибута точно соответствует:
элемент [Foo = "бар"]
Элемент имеет атрибут с именем foo, который начинается с «bar», например
- Окончание атрибута соответствует точно :
элемент [Foo $ = "бар"]
Элемент имеет атрибут с именем foo, который заканчивается на «bar», например
- Атрибут содержит совпадение:
Элемент [Foo * = "бар"]
Элемент имеет атрибут с именем foo, который содержит строку «bar».
Введено 16 новых псевдоклассов:
- : корень
- Корневой элемент документа.
- : П-й ребенок (п)
- Используйте это для точного соответствия дочерних элементов или используйте переменные для получения чередующихся совпадений.
- : П-го последнего ребенка (п)
- Совпадение точных дочерних элементов, начиная с последнего.
- : П-го из-типа (п)
- Сопоставьте одноуровневые элементы с тем же именем перед ним в дереве документа.
- : П-й последний из-типа (п)
- Подбирайте одноуровневые элементы с тем же именем, считая снизу вверх.
- :последний ребенок
- Соответствует последнему дочернему элементу родителя.
- : Во-первых, из-типа
- Сопоставьте первый родственный элемент этого типа.
- : Последний из типа
- Соответствуйте последнему элементу этого типа.
- :только ребенок
- Сопоставьте элемент, который является единственным потомком своего родителя.
- : Только-оф-типа
- Сопоставьте элемент, который является единственным в своем типе.
- : пустой
- Сопоставьте элемент, который не имеет дочерних элементов (включая текстовые узлы).
- : цель
- Сопоставьте элемент, который является целью ссылающегося URI.
- : включен
- Соответствуйте элементу, когда он включен.
- :отключен
- Соответствуйте элементу, когда он отключен.
- : проверено
- Сопоставьте элемент, когда он отмечен (переключатель или флажок).
- : Нет (ы)
- Соответствует, когда элемент не соответствует простым селекторам .
Есть один новый комбинатор:
- elementA ~ elementB
- Соответствует, когда elementB следует где-то после elementA, не обязательно сразу
Новые свойства
CSS3 также представил несколько новых свойств CSS. Многие из этих свойств создают визуальные стили, которые, скорее всего, больше ассоциируются с графической программой, такой как Photoshop . Некоторые из них, такие как border-radius или box-shadow, появились с момента появления CSS3. Другие, такие как flexbox или даже CSS Grid, являются более новыми стилями, которые все еще часто считаются дополнениями CSS3.
В CSS3 блочная модель не изменилась. Но есть множество новых стилевых свойств, которые могут помочь вам стилизовать фон и границы ваших рамок.
Несколько фоновых изображений
Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений для наложения друг на друга в поле. Первое изображение — это слой, ближайший к пользователю, а следующие закрашены. Если есть цвет фона, он окрашивается под всеми слоями изображения.
Новые свойства стиля фона
В CSS3 также есть несколько новых фоновых свойств:
- фон-клип
- Это свойство определяет, как фоновое изображение должно быть обрезано. По умолчанию это поле рамки, но его можно изменить на поле дополнения или поле содержимого.
- фон-происхождения
- Это свойство определяет, следует ли помещать фон в поле отступов, поле границы или поле содержимого.
- фон-размер
- Это свойство указывает размер фонового изображения . Это позволяет растягивать меньшие изображения, чтобы соответствовать странице .
Изменения в существующих свойствах стиля фона
Есть также несколько изменений в существующих свойствах стиля фона:
- фон-повторить
- Для этого свойства есть два новых значения — пробел и раунд . Пространство размещает мозаичное изображение равномерно внутри рамки, не обрезаясь. Округление изменяет масштаб фонового изображения, чтобы оно помещалось в поле целое число раз.
- фон-вложение
- Добавлено новое значение «local», чтобы фон прокручивался с содержимым элемента, когда у этого элемента есть полоса прокрутки.
- задний план
- Свойство фонового сокращения добавляет свойства размера и источника.
CSS3 Border Properties
В CSS3 границами могут быть стили, к которым мы привыкли (сплошные, двойные, пунктирные и т. Д.) Или изображения. Кроме того, CSS3 поддерживает закругленные углы. Изображения границ интересны тем, что вы создаете изображение всех четырех границ, а затем сообщаете CSS, как применить это изображение к вашим границам.
Новые свойства стиля границы
В CSS3 появилось несколько новых свойств границ:
- граница радиуса
- border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
- Эти свойства позволяют создавать закругленные углы на ваших границах.
- границы изображения источника
- Указывает исходный файл изображения, который будет использоваться вместо уже определенных стилей границ.
- границы изображения среза
- Представляет смещения внутрь от краев изображения краев.
- границы изображения ширина
- Определяет значение ширины для вашего изображения границы.
- границы изображения боковик
- Определяет величину, на которую область изображения границы выходит за границы рамки.
- границы изображения растяжения
- Определяет, как стороны и средние части изображения границы должны быть выложены плиткой или масштабированы.
- границы изображения
- Сокращенное свойство для всех свойств изображения границы.
Дополнительные свойства CSS3, связанные с границами и фоном
Когда блок разбивается при разрыве страницы, столбца или строки (для встроенных элементов), свойство box-художественное оформление-разрыв определяет, как новые блоки переносятся с полями и отступами. Фоны делятся между несколькими разбитыми прямоугольниками, используя это свойство
Новое свойство box-shadow добавляет тени к элементам box.
С помощью CSS3 вы можете легко настроить веб-страницу с несколькими столбцами без таблиц или сложных структур тегов div . Вы просто сообщаете браузеру, сколько столбцов должно иметь элемент body и какова их ширина. Кроме того, вы можете добавить границы (правила) и цвета фона, которые охватывают высоту столбца, и ваш текст будет автоматически проходить через все столбцы.
Определить количество и ширину столбцов
Есть три новых свойства, которые позволяют вам определять количество и ширину ваших столбцов:
- ширина колонки
- Определяет ширину ваших столбцов. Затем браузер будет передавать текст, чтобы заполнить пространство столбцами этой ширины.
- колонка подсчета
- Определяет количество столбцов на странице. После этого браузер создаст столбцы, достаточно широкие, чтобы поместиться в пространство, но только указанное вами число.
- столбцы
- Сокращенное свойство, где вы можете определить ширину или число (или оба, но это редко имеет смысл).
CSS3 столбцы пробелы и правила
Пробелы и правила размещаются между столбцами в одном многоколоночном сценарии. Пробелы будут раздвигать столбцы, но правила не занимают места. Если правило столбца шире его пробела, оно будет перекрывать соседние столбцы. Есть пять новых свойств для правил столбцов и пробелов:
- Колонка зазор
- Определяет ширину промежутков между столбцами.
- колонного правило цвета
- Определяет цвет правила.
- колонного правило стиля
- Определяет стиль правила (сплошное, пунктирное, двойное и т. Д.).
- колонного правило ширины
- Определяет ширину правила.
- колонного правило
- Сокращенное свойство, определяющее все три свойства правила столбца одновременно.
CSS3 Разрывы столбцов, Охватывающие столбцы и Заполнение столбцов
Разрывы столбцов используют те же опции CSS2, которые используются для определения разрывов в выгружаемом контенте, но с тремя новыми свойствами: break-before , break-after и break-inside .
Как и в случае с таблицами, вы можете установить элементы для охвата столбцов с помощью свойства column-span. Это позволяет создавать заголовки, которые охватывают несколько столбцов, как газета.
Заполнение столбцов решает, сколько контента будет в каждом столбце. Сбалансированные столбцы пытаются поместить одинаковое количество содержимого в каждый столбец, в то время как auto просто передает содержимое до тех пор, пока столбец не заполнится, а затем переходит к следующему.
Дополнительные функции в CSS3, которые не включены в CSS2
В CSS3 есть множество дополнительных функций, которых не было в CSS2, включая:
- Модуль макета шаблона CSS и модуль позиционирования CSS3 Grid : Создание сеток с помощью CSS.
- Текстовый модуль CSS3 : выделяйте текст и даже создавайте тени с помощью CSS.
- Цветовой модуль CSS3 : теперь с непрозрачностью.
- Изменения в блочной модели : включая свойство marquee, которое действует как тег IE.
- Модуль пользовательского интерфейса CSS3 : дает вам новые курсоры, ответы на действия, обязательные поля и даже изменяет размер элементов.
- Медиа-запросы : Медиа-запросы обеспечивают большую гибкость при определении того, как следует использовать таблицу стилей. Например, вы можете определить таблицу стилей, которая предназначена только для портативных устройств с областью просмотра больше 20em.
- Модуль CSS3 Ruby : Обеспечивает поддержку языков, которые используют текстовый ruby для аннотирования документов.
- Модуль CSS3 Paged Media : для еще большей поддержки постраничных носителей (бумага, прозрачные пленки и т. Д.).
- Генерируемый контент : запуск верхних и нижних колонтитулов, сносок и другого контента, который генерируется программно, особенно для выгружаемых носителей.
- CSS3 Речевой модуль : Изменения в звуковом CSS.