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

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

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

Как и в случае любой новой и изменяющейся спецификации, обязательно тщательно протестируйте свои страницы CSS3 в максимально возможном количестве браузеров и операционных систем. Помните, что цель состоит не в том, чтобы создавать веб-страницы, которые выглядят одинаково в каждом браузере, а в том, чтобы все используемые вами стили, в том числе стили 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 появилось несколько новых свойств границ:

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

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

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

    Также есть свойство box-shadow, которое можно использовать для добавления теней к элементам box.

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

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

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

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

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

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

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

    CSS3 Разрывы столбцов, Охватывающие столбцы и Заполнение столбцов

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

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

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

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

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

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