Разница между CSS2 и CSS3

Самая большая разница между CSS2 и CSS3 заключается в том, что CSS3 разделен на несколько разделов, называемых модули. Каждый из этих модулей проходит через W3C на различных этапах процесса рекомендации. Этот процесс значительно упростил принятие и реализацию различных частей CSS3 в браузере разными производителями.

Если вы сравните этот процесс с тем, что произошло с CSS2, где все было представлено как единый документ со всеми Каскадные таблицы стилей информации в нем, вы начинаете видеть преимущества разделения рекомендации на более мелкие, отдельные части. Поскольку каждый из модулей обрабатывается индивидуально, разработчики пользуются гораздо более широким диапазоном поддержки браузерами модулей CSS3.

Новые селекторы CSS3

CSS3 предлагает несколько новых способов написания правил CSS с новыми селекторами CSS, а также новый комбинатор и некоторые новые псевдоэлементы.

Есть три новых селектора атрибутов:

• Начало атрибута точно совпадает:

  элемент [foo ^ = "bar"]

  У элемента есть атрибут foo, который начинается с bar, например.
instagram viewer
• Окончание атрибута точно соответствует:

  элемент [foo $ = "bar"]

  У элемента есть атрибут foo, который заканчивается на «bar», например.
• Атрибут содержит совпадение:

  элемент [foo * = "bar"]

  Элемент имеет атрибут называется фу который содержит строку «bar».

Введено 16 новых псевдоклассов:

• :корень
  • Корневой элемент документа.
• : nth-child (n)
  • Используйте это для точного сопоставления дочерних элементов или используйте переменные для получения альтернативных совпадений.
• : nth-последний-ребенок (n)
  • Соответствие точным дочерним элементам, начиная с последнего.
• : nth-of-type (n)
  • Сопоставьте одноуровневые элементы с тем же именем перед ним в дереве документа.
• : nth-последний-типа (n)
  • Сопоставьте одноименные элементы с одним и тем же именем, считая снизу вверх.
• :последний ребенок
  • Матч последний дочерний элемент родителя.
• : первый в своем роде
  • Сопоставьте первый элемент-брат этого типа.
• : last-of-type
  • Соответствует последнему элементу-брату этого типа.
• :единственный ребенок
  • Сопоставьте элемент, который является единственным дочерним элементом своего родителя.
• : only-of-type
  • Сопоставьте элемент, который является единственным в своем типе.
• :пустой
  • Соответствует элементу, у которого нет дочерних элементов (включая текстовые узлы).
• :цель
  • Соответствует элементу, являющемуся целью ссылающегося URI.
• :включено
  • Сопоставьте элемент, когда он включен.
• :отключен
  • Сопоставьте элемент, когда он отключен.
• : проверено
  • Сопоставьте элемент, когда он установлен (переключатель или флажок).
• : not (s)
  • Соответствует, когда элемент не соответствует простому селекторы.

Есть один новый комбинатор:

• elementA ~ elementB
  • Соответствует, когда elementB следует где-то после elementA, не обязательно сразу.

Новые свойства

CSS3 также представил несколько новых свойств CSS. Многие из этих свойств создают визуальные стили, которые, вероятно, будут больше ассоциироваться с графической программой, например Фотошоп. Некоторые из них, такие как border-radius или box-shadow, существуют с момента появления CSS3. Другие, такие как flexbox или даже CSS Grid - это более новые стили, которые до сих пор часто считаются дополнением к CSS3.

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

Несколько фоновых изображений

Используя стили background-image, background-position и background-repeat, вы можете указать несколько фоновых изображений, которые будут наложены друг на друга в поле. Первое изображение - это слой, ближайший к пользователю, за ним нарисованы следующие. Если есть цвет фона, он закрашивается под всеми слоями изображения.

Новые свойства стиля фона

В CSS3 также есть несколько новых свойств фона:

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

Изменения существующих свойств стиля фона

Также есть несколько изменений в существующих свойствах стиля фона:

• фон-повтор
  • У этого свойства есть два новых значения: космос а также круглый. Пространство равномерно распределяет мозаичное изображение внутри рамки без обрезки. Round изменяет масштаб фонового изображения таким образом, чтобы оно отображалось в блоке несколько раз.
• фоновая привязка
  • Добавлено новое значение «local», чтобы фон прокручивался вместе с содержимым элемента, когда этот элемент имеет полосу прокрутки.
• задний план
  • Сокращенное свойство фона добавляет свойства размера и происхождения.

CSS3 Border Properties

В CSS3 границы могут быть стилями, к которым мы привыкли (сплошная, двойная, пунктирная и т. Д.), Или они могут быть изображениями. Кроме того, CSS3 поддерживает закругленные углы. Изображения границ интересны тем, что вы создаете изображение всех четырех границ, а затем указываете CSS, как применить это изображение к вашим границам.

Новые свойства стиля границы

В CSS3 появилось несколько новых свойств границы:

• border-radius
• граница-верх-правый-радиус, граница-нижний-правый-радиус, граница-нижний-левый-радиус, граница-верх-левый-радиус
• Эти свойства позволяют создавать закругленные углы на границах.
• граница-изображение-источник
• Задает исходный файл изображения, который будет использоваться вместо уже определенных стилей границ.
• граница-изображение-фрагмент
• Представляет смещения внутрь от краев изображения границы.
• ширина границы изображения
• Определяет значение ширины вашего изображения границы.
• граница-изображение-начало
• Задает величину, на которую область изображения границы выходит за пределы рамки.
• граница-изображение-растяжка
• Определяет, как боковые и средние части изображения границы должны быть выложены плиткой или масштабированы.
• граница-изображение
• Сокращенное свойство для всех свойств изображения границы.

Дополнительные свойства CSS3, связанные с границами и фоном

Когда блок разрывается при разрыве страницы, разрыва столбца или разрыва строки (для встроенных элементов), коробка-украшение-перерыв Свойство определяет, как новые блоки обертываются рамкой и отступом. С помощью этого свойства фон разделяется на несколько разбитых ящиков.

Новый тень коробки свойство добавляет тени к элементам коробки.

С помощью CSS3 теперь вы можете легко настроить веб-страницу с несколькими столбцами без таблиц или сложных div структуры тегов. Вы просто указываете браузеру, сколько столбцов должно иметь элемент body и какой ширины они должны быть. Кроме того, вы можете добавить границы (правила) и цвета фона, которые охватывают высоту столбца, и ваш текст будет автоматически перемещаться по всем столбцам.

Определите количество и ширину столбцов

Есть три новых характеристики которые позволяют вам определять количество и ширину ваших столбцов:

• ширина колонки
  • Определяет ширину ваших столбцов. Затем браузер перенаправит текст, чтобы заполнить пространство столбцами такой ширины.
• счетчик столбцов
  • Определяет количество столбцов на странице. Затем браузер создаст столбцы, достаточно широкие, чтобы уместиться в пространстве, но только указанное вами число.
• столбцы
  • Сокращенное свойство, в котором вы можете определить ширину или число (или и то, и другое, но это редко имеет смысл).

Пробелы в столбцах и правила CSS3

В одном и том же сценарии с несколькими столбцами между столбцами помещаются пробелы и правила. Промежутки раздвигают столбцы, но правила не занимают места. Если правило столбца шире, чем его зазор, оно будет перекрывать соседние столбцы. Есть пять новых свойств для правил столбцов и зазоров:

• колонна-пробел
  • Определяет ширину промежутков между столбцами.
• столбец-правило-цвет
  • Определяет цвет правила.
• стиль правила столбца
  • Определяет стиль линейки (сплошной, пунктирный, двойной и т. Д.).
• ширина правила столбца
  • Определяет ширину линейки.
• столбец-правило
  • Сокращенное свойство, определяющее сразу все три свойства правила столбца.

CSS3 разрывы столбцов, составные столбцы и заполнение столбцов

Столбец breaks используют те же параметры CSS2, которые используются для определения разрывов в выгружаемом содержимом, но с тремя новыми свойствами: перерыв перед, перерыв после, а также взлом.

Как и в случае с таблицами, вы можете настроить элементы для охвата столбцов с помощью свойства column-span. Это позволяет создавать заголовки, охватывающие несколько столбцов, как в газете.

Заполнение столбцов определяет, сколько содержимого будет в каждом столбце. Сбалансированные столбцы пытаются поместить одинаковое количество содержимого в каждый столбец, в то время как auto просто передает содержимое, пока столбец не заполнится, а затем переходит к следующему.

Дополнительные функции CSS3, которые не включены в CSS2

В CSS3 есть множество дополнительных функций, которых не было в CSS2, в том числе:

• Модуль макета CSS-шаблона и модуль позиционирования CSS3 Grid: Создание сеток с помощью CSS.
• CSS3 текстовый модуль: Обводите текст и даже создавайте тени с помощью CSS.
• Цветовой модуль CSS3: Теперь с непрозрачностью.
• Изменения в бокс-модели: Включая шатер свойство, которое действует как тег IE.
• Модуль пользовательского интерфейса CSS3: Предоставление вам новых курсоров, ответов на действия, обязательных полей и даже изменения размеров элементов.
• Медиа-запросы: Медиа-запросы обеспечивают большую гибкость при определении того, как следует использовать таблицу стилей. Например, вы можете определить таблицу стилей, которая предназначена только для портативных устройств с окном просмотра больше 20 em.
• Модуль CSS3 Ruby: Обеспечивает поддержку языков, использующих текстовый рубин для аннотирования документов.
• CSS3 Paged Media модуль: Для еще большей поддержки страничных носителей (бумага, прозрачные пленки и т. Д.).
• Сгенерированный контент: Запуск верхних и нижних колонтитулов, сносок и другого содержимого, созданного программно, особенно для мультимедийных файлов с разбивкой на страницы.
• CSS3 Речевой модуль: Изменения в звуковом CSS.