→ CSS 3.0 основные отличия

CSS 3.0 основные отличия

В чем разница между CSS и СSS3, самая важная особенность это скорость. В данной статье будет рассмотрены CSS 3.0 основные отличия.

При использовании CSS 3.0 больше не требуется производить загрузку фоновых изображений, на смену стандартному расширению изображений .PNG приходят соответствующие инструменты, для работой с изображениями. С каждым месяцем, всё больше сайтов переходят на использование новой технологии CSS 3.0, таким образом обновленная версия языка очень уверенно, но хоть и медленно, адаптируется в сети интернет. Обновлённая технология языка CSS версии 3.0 способствует увеличению скорости прогрузки интернет – страниц, связано это с тем что из-за уменьшения размером файлов значительно сокращается количество HTTP запросов. Произвести отслеживание времени загрузки страниц интернет ресурсов можно с помощью Pingdom.


На изображении произведено сравнение двух версий языка CSS. Исходя из этого можно с легкостью заметить что изображение было ужато на 81,3 кб, это позволяет сократить время загрузки страницы интернет ресурса на 1, 4 секунды. Еще одним важным результатом использования обновленного языка CSS 3.0 является время на разработку одной и той же страницы. Время на разработку страницы c CSS составляет 73-78 минут, с помощью языка CSS 3.0 45 минут, в итоге время на разработку сократилось на 35%. Размер изображений, которые используется в виде фонового стиля сокращается на 15%. Количество запросов сократилось вдвое, у языка CSS – 22, у CSS 3.0 – 12.


В обновленной версии языка CSS 3.0 реализована возможность создания анимации: данная функция поддерживается лишь с помощью языка SVG, не реализована поддержка в создании анимации с помощью языка CSS. В языке CSS версии 3.0 было внедренно несколько свойств, которые отвечают за создание анимации и полностью реализовано использование и управление ею. Запишем значения, которые будут описаны в селекторе keyframe:

@keyframes 'wobble' {
0 {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
} 100% {
left: 100px;
}
}

, где «wobble» - это название функции анимации, с соответствующими значениями 0, 40%, 60% и 100% - это определяемый момент времени, которое зависит от общего интервала времени.

Дополнительным вариантом реализации является задание каждого фрагмента определенной функции, которая управляет отрисовкой:

@keyframes 'bounce' {
from {
top: 100px;
animation-timing-function: ease-out;
}
25% {
top: 50px;
animation-timing-function: ease-in;
}
50% {
top: 100px;
animation-timing-function: ease-out;
}
75% {
top: 75px;
animation-timing-function: ease-in;
}
to {
top: 100px;
}
}

Данный метод позволяет создать анимацию с именем «bounce», которая состоит из 4 кадров, каждый из кадров занимает 25% общего времени анимации. Каждому фрагменту нужно задать определенную функцию «ease-in» или «easy-out».
Функция «ease-in» - отвечает за изменения отрисовки элемента внутри какой-нибудь области.
Функция «easy-out» - отвечает за изменения отрисовки элемента за пределами какой-нибудь области.
Управление положением элемента на плоскости. Вот пара примеров реализации: div { transform: translate(100px, 100px); }


Добавим описание дополнительных возможностей:

div {
height: 100px;
width: 100px;
transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
}

Добавлена возможность введения css - переменных, пример использования:

@variables {
CorporateLogoBGColor: #fe8d12;
}
div.logoContainer {
background-color: var (CorporateLogoBGColor);
}
@variables { myMargin1: 2em;
}
@variables print {
myMargin1: 2em;
}
.data, div.entry {
margin-left: 30px; margin-left: var (myMargin1);
}

Новые функции и возможности были придуманы специально для CSS3
. Мы постараемся продемонстрировать некоторые из них, которые будут реализованы в любом браузере Firefox , Konqueror , Opera или Google Chrome.

Границы
границы цвета
границы изображения
границы радиус
коробка-тени

Фоны
фон-история создания и клип
фон-размер
Несколько фонов

Цвет
HSL цвета
HSLA цвета
непрозрачность RGBA цвета

Текстовые эффекты
Текст-тень
Текст переполнения
перенос слова

Пользовательский интерфейс
коробка-размеров
размер
контур
NAV-топ, NAV-право, NAV-низ, NAV-левый

Селекционеры
селекторы атрибутов

Базовая модель окно
Переполнение-х переполнение-у

Контент
содержание

Другие модули
CSS3 переходы
запросы средств массовой информации
Схема нескольких столбцов
Веб-шрифты
речь

Данная статья ответит всем пользователям на вопрос в чем основные отличия CSS 3.0. Задавайте вопросы ниже статьи и оставляйте комментарии, так же не забывайте предлагать тем, которые вас интересуют для дальнейшего обсуждения.

devicehit.ru


Теги: css css 3.0

Читайте также по теме статьи «CSS 3.0 основные отличия»:


Вам будет интересно