Самая большая разница между CSS2 и CSS3 заключается в том, что CSS3 был разделен на разные разделы, называемые модулями. Каждый из этих модулей проходит через W3C на разных этапах процесса рекомендации. Этот процесс значительно облегчил принятие и внедрение различных частей CSS3 в браузере разными производителями.
Если вы сравните этот процесс с тем, что произошло с CSS2, где все было представлено как единый документ со всей информацией о каскадных таблицах стилей в нем, вы начинаете видеть преимущества разложения рекомендации на более мелкие отдельные фигуры. Поскольку каждый из модулей обрабатывается индивидуально, мы имеем гораздо более широкий диапазон поддержки браузеров для модулей CSS3.
Как и в случае с любой новой и изменяющейся спецификацией, обязательно тщательно проверьте свои страницы CSS3 во множестве браузеров и операционных систем. Помните, что цель состоит не в том, чтобы создавать веб-страницы, которые выглядят одинаково в каждом браузере, но чтобы гарантировать, что любые стили, которые вы используете, в том числе стили CSS3, отлично смотрятся в браузерах, которые их поддерживают, и что они изящно отступают для старых браузеров, которые не делайте.
Новые селектора CSS3
CSS3 предлагает множество новых способов написания правил CSS с помощью новых селекторов CSS, а также нового комбинатора и некоторых новых псевдоэлементов.
Три новых селектора атрибутов:
- Атрибуты начинаются точно
элемент Foo = "бар" Элемент имеет атрибут foo, который начинается с «bar», например.
- Атрибуты заканчиваются точно так же
элемент Foo $ = "бар" Элемент имеет атрибут foo, который заканчивается «bar», например.
- Атрибут содержит совпадение
Элемент Foo * = "бар" Элемент имеет атрибут foo, который содержит строку «bar», например.
16 новых псевдоклассов:
- : корень
- Корневой элемент документа. В HTML это всегда.
- : П-й ребенок (п)
- Используйте это, чтобы соответствовать точным дочерним элементам или использовать переменные для получения чередующихся совпадений.
- : П-го последнего ребенка (п)
- Сопоставьте точные дочерние элементы, отсчитывающие от последнего.
- : П-го из-типа (п)
- Сопоставьте элементы-близнецы с тем же именем перед ним в дереве документов.
- : П-й последний из-типа (п)
- Сопоставьте элементы-близнецы с тем же именем, подсчитывающимся снизу.
- :последний ребенок
- Сопоставьте последний дочерний элемент родителя.
- : Во-первых, из-типа
- Совместите первый родственный элемент этого типа.
- : Последний из типа
- Сопоставьте последний элемент sibling этого типа.
- :только ребенок
- Сопоставьте элемент, который является единственным дочерним элементом его родителя.
- : Только-оф-типа
- Сопоставьте элемент, который является единственным в своем роде.
- : пусто
- Сопоставьте элемент, у которого нет детей (включая текстовые узлы).
- : цель
- Сопоставьте элемент, являющийся целью ссылочного URI.
- : включен
- Сопоставьте элемент, когда он включен.
- :отключен
- Сопоставьте элемент, когда он отключен.
- : проверено
- Совместите элемент, когда он установлен (переключатель или флажок).
- : Нет (ы)
- Сопоставьте, когда элемент не совпадает с простым селектором s.
Один новый комбинатор:
- элементA ~ элементB
- Матч, когда elementB следует где-то после элемента A, не обязательно сразу.
Новые объекты
CSS3 также представил ряд новых свойств CSS. Многие из этих свойств заключались в создании визуальных стилей, которые, скорее всего, ассоциируются с графической программой, такой как Photoshop. Некоторые из них, такие как border-radius или box-shadow, были со времен введения, если CSS3. Другие, такие как flexbox или даже CSS Grid, являются более новыми стилями, которые по-прежнему часто рассматриваются как дополнения CSS3.
В CSS3 модель коробки не изменилась. Но есть множество новых свойств стиля, которые могут помочь вам создать фон и границы ваших ящиков.
Множество фоновых магов
Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений, которые будут накладываться друг на друга друг над другом. Первое изображение - это слой, ближайший к пользователю, со следующими рисунками. Если есть цвет фона, он отображается ниже всех слоев изображения.
Свойства нового фона
В CSS3 также есть некоторые новые свойства фона.
- фон-клип
- Это свойство определяет, как фоновое изображение должно быть обрезано. По умолчанию используется поле рамки, но его можно изменить в поле заполнения или в поле содержимого.
- фон-происхождения
- Это свойство определяет, должны ли фон помещаться в поле заполнения, в поле рамки или в поле содержимого.
- фон-размер
- Это свойство позволяет указать размер фонового изображения. Это позволяет вам растягивать меньшие изображения для соответствия странице.
Изменения существующих свойств стиля фона
Есть также несколько изменений в существующих свойствах стиля фона:
- фон-повторить
- Для этого свойства есть два новых значения: пробел и круг. Пространство пробегает черепичное изображение равномерно внутри коробки, не будучи обрезанным. Раунд масштабирует фоновое изображение таким образом, что оно будет чередоваться целым числом раз в поле.
- фон-вложение
- Добавляется новое значение «local», чтобы фон прокручивался с содержимым элемента, когда этот элемент имеет полосу прокрутки.
- фон
- Стеновое свойство фона добавляет свойства размера и происхождения.
Свойства границы CSS3
В границах CSS3 могут быть стили, к которым мы привыкли (сплошные, двойные, пунктирные и т. Д.), Или они могут быть изображением. Кроме того, CSS3 позволяет создавать закругленные углы.Изображения границ интересны, потому что вы создаете изображение всех четырех границ, а затем указываете CSS, как применять это изображение к вашим границам.
Свойства нового пограничного стиля
В CSS3 есть некоторые новые свойства границ:
- граница радиуса
- границы верхнего правого радиуса, границы нижнего правого радиуса, Граница-нижний левый-радиус, границы левого верхнего радиуса
- Эти свойства позволяют создавать закругленные углы на ваших границах.
- границы изображения источника
- Задает исходный файл изображения, который будет использоваться вместо уже определенных стилей границ.
- границы изображения среза
- Представляет внутренние смещения от границ пограничного изображения
- границы изображения ширина
- Определяет значение ширины для вашего изображения границы.
- границы изображения боковик
- Указывает количество, которое область изображения границы выходит за пределы рамки.
- границы изображения растяжения
- Определяет, как стороны и средние части изображения границы должны быть выгравированы или масштабированы.
- границы изображения
- Сокращенное свойство для всех свойств изображения границы.
Дополнительные свойства CSS3, относящиеся к границам и фону
Когда ящик разбит при разрыве страницы, разрыв столбца для разрыва строки (для встроенных элементов) свойство box-decoration-break определяет, как новые поля обертываются рамкой и дополнением. Это свойство можно разделить между несколькими сломанными ящиками.
Также есть свойство box-shadow, которое можно использовать для добавления теней в элементы окна.
С помощью CSS3 теперь вы можете легко настроить веб-страницу с несколькими столбцами без таблиц или сложными структурами тегов div. Вы просто указываете браузеру, сколько столбцов должно иметь элемент тела и насколько они должны быть широкими. Кроме того, вы можете добавлять границы (правила), цвета фона, которые занимают высоту столбца, и ваш текст будет проходить через все столбцы автоматически.
Столбцы CSS3 - определение числа и ширины столбцов
Существует три новых свойства, которые позволяют определить количество и ширину столбцов:
- ширина колонки
- Определяет ширину столбцов. Затем браузер вытолкнет текст, чтобы заполнить пространство столбцами, которые широко используются.
- колонка подсчета
- Определяет количество столбцов на странице. Затем браузер будет создавать столбцы, достаточно широкие для размещения в пространстве, но только указанный вами номер.
- столбцы
- Сокращенное свойство, где вы можете определить ширину или число (или и то, и другое, но это редко имеет смысл).
Пробелы и правила столбцов CSS3
Пробелы и правила помещаются между столбцами в одном и том же многоколоночном сценарии. Пробелы будут раздвигать столбцы, но правила не занимают места. Если правило столбца шире, чем пробел, оно будет перекрывать соседние столбцы. существует пять новых свойств для правил столбцов и пробелов:
- Колонка зазор
- Определяет ширину разрывов между столбцами.
- колонного правило цвета
- Определяет цвет правила.
- колонного правило стиля
- Определяет стиль правила (сплошной, пунктирный, двойной и т. Д.).
- колонного правило ширины
- Определяет ширину правила.
- колонного правило
- Стеновое свойство, определяющее сразу все три свойства правила столбца.
Разметки столбцов CSS3, столбцы столбцов и заполняющие столбцы
Разрывы столбцов используют те же параметры CSS2, которые используются для определения перерывов в постраничном содержимом, но с тремя новыми свойствами: брейк-перед тем, брейк-после, а также брейк-внутри.
Как и в случае с таблицами, вы можете устанавливать элементы для охвата столбцов с помощью свойства span-span. Это позволяет создавать заголовки, которые охватывают несколько столбцов больше, чем газета.
Заполнение столбцов определяет, сколько контента будет в каждом столбце. Сбалансированные столбцы пытаются помещать одинаковое количество контента в каждый столбец, в то время как авто просто передает содержимое до тех пор, пока столбец не будет заполнен, а затем перейдет к следующему.
Дополнительные функции в CSS3, которые не включены в CSS2
В CSS3 есть много дополнительных функций, которых не было в CSS2, в том числе:
- Модуль компоновки шаблонов CSS и CSS3 Модуль позиционирования сетки: Создание сетки с помощью CSS.
- Текстовый модуль CSS3: Нарисуйте текст и даже создайте тени с помощью CSS.
- Цветовой модуль CSS3: Теперь с непрозрачностью.
- Изменения в коробке: Включает свойство marquee, которое действует как тег IE.
- Модуль интерфейса пользователя CSS3: Предоставление вам новых курсоров, ответов на действия, требуемые поля и даже изменение размеров элементов.
- Запросы мультимедиа: Медиа-запросы позволяют вам больше гибкости при определении того, как следует использовать таблицу стилей. Например, вы можете определить таблицу стилей, которая предназначена только для карманных устройств с размером окна больше 20 мкм.
- Модуль Ruby CSS3: Обеспечивает поддержку языков, которые используют текстовый рубин для аннотирования документов.
- CSS3 Paging Media module: Для еще большей поддержки для постраничных носителей (бумага, прозрачные пленки и т. Д.).
- Сгенерированный контент: L работает с верхними и нижними колонтитулами, сносками и другим контентом, который генерируется программно, особенно для постраничных носителей.
- Текстовый модуль CSS3: Изменения в слуховом CSS.
