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

Возможно, вы слышали или встречали термин CSS3, если вы читали о веб-разработке или веб-дизайне. Если вы когда-нибудь задумывались над тем, что может быть разным между CSS3 и CSS, то здесь все ваши сомнения будут развеяны: они оба одинаковы.

Это верно: CSS3 и CSS так же отличаются друг от друга, как HTML и HTML5. CSS3 - это просто последняя итерация CSS. Люди, которые сейчас говорят о кодировании CSS, на самом деле просто ссылаются на CSS3.

Как HTML5, так и CSS3, как правило, стали модными словами, значение которых выходит за рамки их реальных технологий. Они символизируют приверженность определенным основным стандартам веб-разработки вместо использования проприетарного программного обеспечения. По большей части, шумиха вокруг этих модных слов уже утихла. Большинство компаний, даже те, которые клянутся хранить все внутри себя, согласятся с тем, что соблюдение этих основных стандартов значительно облегчает жизнь каждому.

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

Что вы, возможно, не знали о CSS3, так это то, что он начал разработку всего через год после того, как была представлена ​​его предыдущая версия. Это означает, что W3C работал над улучшенной версией с 1999 года. Потребовалось более 12 лет, чтобы выпустить первую стабильную версию CSS3.

Между CSS3 и CSS есть огромные различия (к которым мы скоро доберемся). Но дело в том, что веб-браузеры уже были готовы к дополнениям к CSS3 к моменту его выпуска. В результате они довольно быстро адаптировались к новому выпуску. Каждый крупный веб-браузер теперь поддерживает CSS3, даже Internet Explorer!

Конечно, W3C все еще продолжает разрабатывать CSS3 и HTML5, поэтому окончательная версия маловероятна. Чтобы быть справедливым, окончательная версия также не является необходимой в данный момент, учитывая, как быстро развивается Интернет. В условиях, когда требования к сети и сама отрасль растут и меняются так быстро, кодирование должно развиваться так же быстро, если не больше.

CSS3 против CSS Инфографика

CSS3 против CSS Различия определены

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

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

Доступно много модулей, но только четыре опубликованы в качестве официальных рекомендаций W3C. Эти большие четыре модуля следующие:

  1. Цвет, опубликовано в 2011 году
  2. Селекторы Уровень 3, опубликовано 2011
  3. Пространства имен, опубликованные 201
  4. Медиа-запросы, опубликованные в 2012 году

Среди них самый важный модуль - Медиа-запросы. Фактически, этот модуль может быть самым важным дополнением, которое CSS3 привнес в CSS в целом. Медиа-запросы довольно просты: они позволяют применять определенные условия к различным таблицам стилей. Это позволяет веб-сайтам быть гибкими или «реагировать» на экран разных размеров. Другими словами, веб-сайты могут настраивать свои размеры и элементы для соответствия различным устройствам. Сегодня адаптивный веб-дизайн, пожалуй, самое большое модное слово. Учитывая, что большая часть использования Интернета сейчас используется на мобильных устройствах, адаптивный дизайн абсолютно необходим, и медиа-запросы помогают достичь этого. Модуль также позволяет разработчикам адаптировать сайты к различным разрешениям без изменения или удаления контента.

Медиа-запросы также довольно легко выяснить и добавить. Как только вы используете их несколько раз, вы можете в значительной степени выяснить остальное. Вот несколько примеров строк кода:

экран @media и (максимальная ширина: 600 пикселей) (

фон: #FFF;

)

Кажется достаточно простым, не так ли? С помощью этой пары строк кода вы можете включить стили для экранов с максимальной шириной 600 пикселей. Это означает, что все экраны с максимальной шириной 600 пикселей будут иметь белый фон. Максимальная ширина - это только одно из нескольких условий, которые вы можете применить к таблице стилей в CSS3. Другой - максимальная ширина устройства. Это разрешение экрана, а не область просмотра. Также минимальное значение может быть указано вместо максимального; просто используйте «мин» вместо «макс». Вы также можете объединить два, как показано ниже:

экран @media и (минимальная ширина: 600 пикселей) и (максимальная ширина: 900 пикселей) (

фон: #FFF;

)

Здесь стиль применяется только для экранов с шириной просмотра 600-900 пикселей. CSS3 поставляется с некоторыми заранее определенными таблицами стилей для популярных мобильных устройств, таких как Apple iPad и iPhone. Вот некоторые из них:

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

Закругленные границы

CSS3 также поставляется с некоторыми действительно ключевыми соображениями веб-дизайна. Например, границы могут быть округлены без хаков с помощью CSS3, вводящего округленные границы. Это был огромный плюс для веб-разработчиков и дизайнеров, которые раньше боролись с CSS-границами. Не удивительно, что некоторые из этих функций все еще не работают в старых версиях Internet Explorer. Единственный дополнительный код, который необходимо добавить к определенному классу в таблице стилей, это, например:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

граница: 2px solid # 897048;

Таким образом, CSS3 значительно облегчает жизнь веб-разработчику и дизайнеру. Релиз также шел с градиентами, что было удивительно недоступно в предыдущих выпусках.

Рекомендуемые курсы

  • Онлайн обучение веб-сервисам на Java
  • Профессиональная разработка игр на C ++ Training
  • Программа этического взлома
  • Тренировочный комплект Vegas Pro 13

Границы изображения, тени текста

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

тень текста: 2px 2px 2px # ddccb5;

Колонны

CSS3 также упрощает добавление столбцов к контенту. Все, что вам нужно сделать сейчас, это добавить четыре строки кода:

  1. колонка подсчета
  2. ширина колонки
  3. Колонка зазор
  4. колонного правило

Несколько фонов

В последнем релизе CSS также добавлена ​​возможность напрямую связывать несколько фонов из CSS, а не использовать обходные хаки, как раньше. Код невероятно прост для запоминания и записи, а также очень важен для создания современных элементов веб-дизайна. Вот пример:

.multiplebackgrounds (

высота: 100 пикселей;

ширина: 200 пикселей;

отступы: 20 пикселей;

background: url (top.gif) вверху справа, без повторов,

url (bottom.gif) верхний левый повтор-у,

url (middle.gif) нижний повтор-z;

)

Приставочные префиксы

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

  • -moz- : Firefox
  • -webkit- : браузеры Webkit, такие как Apple Safari и Google Chrome
  • -o- : Опера
  • -ms- : Internet Explorer

Префикс Opera также стал избыточным, поскольку компания переключила свой браузер для мобильных устройств и настольных компьютеров на платформу Webkit со своего движка рендеринга Presto. Хотя префикс поставщика продолжает использоваться до некоторой степени, на этом этапе он в основном исчез.

Добавлены псевдоклассы

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

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

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

CSS3 предлагает несколько способов написания правил CSS с помощью новых селекторов, новых комбинаторных и псевдоэлементов: вот три новых атрибутных селектора:

  • Для точных совпадений, элемент (foo = ”bar”)
  • Для сопоставления элемента с атрибутом foo, начинающегося с 'bar', element (foo $ = ”bar”)
  • Для сопоставления элемента с атрибутом с именем foo, оканчивающимся на 'bar', element (foo * = ”bar”)

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

  • : nth-last-child (n) соответствует точным дочерним элементам из последнего
  • : nth-of-type (n) сопоставляет элементы одного уровня с одинаковыми именами перед ними в дереве документа
  • : nth-last-of-type (n) сопоставляет элементы одного и того же имени снизу
  • : last-of-type предназначается для последнего указанного типа элемента в родительском элементе
  • : only-of-type указывает на элемент, единственным типом которого он является
  • : целевые целевые элементы, на которые ссылается ссылающийся URI
  • : enabled соответствует элементу, когда он включен
  • : disabled соответствует элементу, когда он отключен
  • : флажок предназначается для элемента, когда он отмечен с помощью флажка или переключателя

Новый комбинатор

CSS3 также поставляется с новым комбинатором: elementA ~ elementB

Этот новый комбинатор совпадает, когда за элементом A следует где-то после элемента B, но не сразу после него.

Новые свойства стиля коробки

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

  • фон-клип

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

  • фон-происхождения

Это конкретное свойство используется для определения того, следует ли помещать фон в поле рамки, поле содержимого или поле заполнения.

  • фон-размер

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

CSS3 также изменил некоторые из существующих свойств стиля фона. Вот посмотрите на изменения:

  • фон-повторить

Это свойство теперь поставляется с двумя новыми значениями: round и space. Раунд изменяет масштаб изображения для укладки его несколько раз в коробку. Пространство равномерно размещает мозаичное изображение внутри рамки без обрезки.

  • фон-вложение

Свойство no содержит локальное значение, поэтому фон прокручивается с содержимым элемента в случае, если у элемента есть полоса прокрутки.

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

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

  • border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius позволяет создавать округленные границы
  • border-image-source позволяет вам указать исходный файл изображения вместо использования предопределенных стилей границ
  • border-image-slice представляет внутренние смещения от краев изображений границ
  • border-image-width определяет значение ширины для вашего изображения границы
  • Параметр border-image-outset определяет величину за пределами рамки, на которую изображение распространяется до
  • border-image-stretch определяет мозаику или масштабирование средней и боковых частей изображения границы

Вывод - CSS3 против CSS

Вы узнаете намного больше о CSS3, чем больше будете писать код. Но есть одна оговорка: вы не можете освоить CSS3, если не знаете CSS. Изучение CSS3 включает в себя развитие вашего понимания и опыта работы с CSS. Если вы не знаете CSS, вы должны изучить его сверху вместе с CSS3. Хорошо, что если вы не знакомы с CSS, вам будет проще объединить изучение CSS3 и CSS, чтобы сделать его проще и быстрее.

Рекомендуемые статьи

Вот несколько статей, которые помогут вам получить более подробную информацию о CSS3 против CSS, так что просто перейдите по ссылке.

  1. CSS против HTML
  2. Захватывающе знать основы Flexbox для начинающих
  3. HTML5 vs JavaScript Лучшая вещь для изучения
  4. CSS против CSS3: различия

Категория:

Разработка программного обеспечения