CSS3 срещу CSS - Cascading Style Sheets или 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 px) (

фон: #FFF;

)

Изглежда достатъчно просто, нали? С тези няколко реда код можете да активирате стилизиране за екрани с максимална ширина 600 пиксела. Това означава, че всички екрани с максимална ширина 600 пиксела ще показват бял фон. Максималната ширина е само едно от няколкото условия, които бихте могли да приложите към таблица със стилове в CSS3. Друг е максималната ширина на устройството. Това е разделителната способност на екрана, а не зоната за гледане. Също така, минимална стойност може да бъде посочена вместо максимална; просто използвайте 'min' вместо 'max'. Можете също да комбинирате двете, като по-долу:

@media екран и (минимална ширина: 600 px) и (max-width: 900px) (

фон: #FFF;

)

Тук стайлингът важи само за екрани с широчина на гледане от 600-900 пиксела. CSS3 се предлага с някои предварително дефинирани стилови таблици за популярни мобилни устройства, като Apple iPad и iPhone. Ето някои от тях:

Досега трябва да е доста ясно колко важни са медийните заявки. Този модул е ​​много удобен за разработчици, които искат да създадат отзивчив уеб дизайн с възможно най-малко количество кодиране.

Заоблени граници

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

-моз-граница-радиус: 5px;

-webkit-border-radius: 5px;

граница: 2px твърд # 897048;

По този начин, CSS3 прави живота много по-лесен за уеб разработчика и дизайнера. Изданието също идва с градиенти, което беше изненадващо недостъпно в предишните версии.

Препоръчителни курсове

  • Онлайн обучение за уеб услуги в Java
  • Професионално разработване на игри в C ++ обучение
  • Програма за етично хакерство
  • Вегас Про 13 тренировъчен пакет

Граници, текстови сенки

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

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

колони

CSS3 също опрости как да добавяте колони към съдържанието. Всичко, което трябва да направите сега, е да добавите четири реда код:

  1. колона броене
  2. колона ширина
  3. колона междина
  4. колонна правило

Множество фонове

Най-новата версия на CSS също добави възможността директно да инсайдира множество фонове от CSS, а не да използва кръгови хакове като преди. Кодът е невероятно прост за запомняне и писане, а също така е изключително важен за създаването на модерни елементи в уеб дизайна. Ето един пример:

.multiplebackgrounds (

височина: 100px;

ширина: 200px;

подплънки: 20px;

фон: url (top.gif) горе вдясно без повторение,

url (долу.gif) горе вляво повторение-y,

url (middle.gif) дъно повторение-z;

)

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

Префиксите на доставчика често се използват по времето, когато CSS3 току-що пусна. Те помогнаха на браузърите да интерпретират CSS код. Те се използват и до ден днешен, в случай че вашият уеб браузър не е в състояние да чете кода. Ето префиксите на доставчика за основните браузъри:

  • -moz- : Firefox
  • -webkit- : Браузъри на Webkit като Apple Safari и Google Chrome
  • -o- : Опера
  • -ms- : Internet Explorer

Префиксът на Opera също стана излишен, след като компанията превключи мобилния си и настолен браузър на платформата Webkit от своя механизъм за изобразяване Presto. Въпреки че префиксът на доставчика продължава да се използва до известна степен, той в повечето случаи изчезна.

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

С допълнителния CSS3 получихме и доста допълнителни псевдокласове, включително структурни за насочване на елементи въз основа на тяхната позиция на документа и връзката с други различни елементи. Ето някои от тях:

  • : root насочва коренния елемент на документа
  • : не (s) целеви елементи, които не съвпадат от селекторите, посочени в (и)
  • : първо дете насочва първото дете в контейнер, независимо от вида на артикула
  • : първо от типа насочва към първия зададен тип елемент в родител
  • : nth-дете (n) използва числови стойности в рамките на (n), за да насочи към елементите на детето по отношение на позицията им в родителя. Например, можете да използвате това, за да добавите редуващи се цветове на фона към коментарите в блога
  • : празни цели елементи, които нямат текст или деца, като празни елементи като
  • : only-child прицелва елементи в дървото на документите, което е единственият дочамен елемент в родителя

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

CSS3 предлага редица начини за записване на CSS правила чрез новите селектори, нови комбинаторни и псевдоелементи: ето трите нови селектора на атрибути:

  • За точни съвпадения елемент (foo = ”bar”)
  • За съпоставяне на елемент с атрибут, наречен foo, започващ с 'bar', елемент (foo $ = «bar»)
  • За съпоставяне на елемент с атрибут, наречен foo, завършващ с 'bar', element (foo * = ”bar”)

CSS3 идва с няколко нови псевдокласове, някои от които бяха разгледани по-горе. Ето още няколко:

  • : nth-last-child (n) съвпада с точните елементи от последното
  • : nth-of-type (n) съвпада с елементи на братя, имащи същото име преди тях в дървото на документите
  • : nth-last-of-type (n) съвпада с елементи на братя, имащи същото име от дъното
  • : последен тип насочва последния зададен тип елемент в родител
  • : only-of-type target, елементът, от който е единственият тип
  • : целеви целеви елементи, към които е насочен референтният URI
  • : разрешено съвпада с елемента, когато е активиран
  • : disabled съвпада с елемента, когато е деактивиран
  • : отметка насочва към елемента, когато той е отметен чрез квадратче за отметка или радио бутон

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

CSS3 също се предлага с чисто нов комбинатор: elementA ~ elementB

Този нов комбинатор съвпада, когато elementA е последван някъде след това от elementB, но не веднага след това.

Нови свойства в стил кутия

CSS3 разполага със същия модел кутия като предишната версия, но с някои нови свойства на стила, които ви помагат да оформяте граници и фонове на кутиите си. Новите фонови свойства в CSS3 са:

  • фон-клип

Това свойство се използва за дефиниране как да изрежете фоново изображение. Размерите за подрязване по подразбиране са полето за рамка, но можете да го промените в полето за съдържание или полето за подплънки.

  • фон-произход

Това конкретно свойство се използва за определяне дали фонът трябва да бъде поставен в полето за рамка, полето за съдържание или полето за подплънки.

  • фон размер

Това свойство дава възможност на програмиста да посочи размера на фоновото изображение и да разтегли по-малки изображения за монтиране на страницата.

CSS3 също промени някои от съществуващите свойства на стила на фона. Ето поглед върху промените:

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

Това свойство сега идва с две нови стойности: кръг и интервал. Кръгло преоразмерява изображението, за да го постави няколко пъти в поле. Пространството равномерно поставя плочковото изображение в полето, без да се изрязва.

  • фон-закрепване

Свойството no включва стойност "local", така че фоновият превърта се със съдържанието на елемента, в случай че елементът има лента за превъртане.

Нови гранични свойства

CSS3 позволява границите да бъдат оформени като двойни, плътни, пунктирани или дори като изображение. Границите изображения са интересно допълнение: те ви позволяват да създадете изображение на всичките четири граници и след това да кажете на CSS да приложи изображението към границите. Ето някои от новите свойства на границата, които се предлагат с CSS3:

  • граница-радиус, граница-дъно-дясно-радиус, граница-горе-дясно-радиус, граница-горе-наляво-радиус, граница-дъно-ляво-радиус ви позволява да създавате заоблени граници
  • 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. Вълнуващо да знаете CSS Flexbox Essentials за начинаещи
  3. HTML5 vs JavaScript Най-доброто нещо, което трябва да научите
  4. CSS срещу CSS3: Разлики

Категория:

Разработване на софтуер