Разлики между CSS и CSS3

Жена, работеща на бюро в зает творчески офис

Жена уеб дизайнер на работа на компютъра си в модерен офис

Кредит на изображението: monkeybusinessimages/iStock/Getty Images

Оригиналната спецификация на каскадни стилови таблици, както и нейната много по-нова ревизия на CSS3, са технологии, използвани за подобряване и форматиране на HTML уеб страници. Първоначално CSS е проектиран да обработва слоя за представяне на уеб страница по по-ефективен начин от форматиране с HTML, което никога не е било предназначено да се справи със сложната конструкция на съвременната мрежа. Тъй като CSS2 е универсално прието разширение на CSS1, терминът CSS без номер предполага включването на CSS2. Спецификацията CSS3 все още е в процес на разработка към юли 2014 г., така че уеб разработчиците трябва да имат предвид, че поддръжката на функции варира в различните браузъри.

CSS3 е обратно съвместим с CSS

CSS3 е актуализация на CSS2, която поддържа съвместимост с всички функции на CSS - CSS3 не отменя нито един от CSS кода. CSS3 кодът е предназначен да направи уеб страниците да изглеждат по-добре и да се зареждат по-бързо, както и да намали времето за разработка за създаване на страници в браузъра на потребителя. CSS3 прави уеб дизайна по-малко зависим от файловете с изображения за елементите на дизайна на страници и намалява заявките за прехвърляне на файлове и времето за изтегляне чрез използване на по-малко изображения. CSS1 се фокусира върху форматирането на външния вид, докато CSS2 добави възможности за позициониране на текст и обекти. По-старите версии на браузъра като IE 9 и по-ранни не поддържат широко добавените функции на CSS3, което може да изисква допълнително време за разработка за поддържане на резервен код на CSS.

Видео на деня

CSS3 добавя заоблени ъгли и градиенти

Преди CSS3, уеб разработчиците трябваше да проектират файлове с изображения, за да добавят неща като заоблени ъгли за структурни граници и градиенти на фоново изображение; CSS3 включва сравними функции, които могат да бъдат добавени с няколко реда код. В CSS уеб разработчикът трябва да проектира граница или градиент, да го качи на сървъра за изображения, да постави изображението на страницата и да използва CSS, за да позиционира правилно границата. В CSS3 уеб разработчикът може да постигне нещо подобно с код като ".roundBorder{border-radius: 10px;}". Фоновите градиенти са малко по-сложни и изискват различен код за различните браузъри. Например градиент от бяло към черно за Chrome и IE използва код като ".gradBG{background: liner-gradient (бяло, черно);}".

CSS3 добавя функции за анимация и текстови ефекти

CSS3 има шепа функции, които не присъстват в CSS, за да подобрите как изглеждат елементите на вашата страница. С CSS3 уеб разработчиците могат да добавят текстова сянка към текста, за да го направят по-лесен за четене или да добавят визуален усет и могат да принудят прекъсвания на редове в по-дълги думи, за да ги накарат да се поберат в колони с пренос на думи. Преди CSS3, уеб разработчиците трябваше да кодират анимация на скриптови езици като JavaScript и jQuery; CSS3 добавя няколко функции за анимация към дизайнерския слой. W3C все още работи върху стандарт за уеб анимации, за да разреши проблеми със съвместимостта между различните техники за анимация.

CSS3 дефинира текстови колони

CSS3 добавя възможността за разделяне на текстови секции на множество колони, за да се чете като вестник. В спецификацията CSS2, уеб разработчиците изпитват трудности при конструирането на текстови секции от няколко колони, тъй като стандартът не е оборудван за автоматично разделяне на текст. Особено със сайтове, които разполагат с отзивчив дизайн, техника за разработка, която пренарежда и преоразмерява съдържанието въз основа на гледайки разделителната способност на екрана на устройството, хората с по-големи монитори може да имат затруднения да четат текстови редове, които се разпръскват в екран.