Разлика између ЦСС2 и ЦСС3

Највећа разлика између ЦСС2 и ЦСС3 је да је ЦСС3 подељен на различите одељке, тзв модула. Сваки од ових модула се пробија кроз В3Ц у различитим фазама процеса препоруке. Овај процес је много олакшао прихватање и примену различитих делова ЦСС3 у претраживачу од стране различитих произвођача.

Ако упоредите овај процес са оним што се догодило са ЦСС2, где је све достављено као један документ са свим Каскадни табеле стилова информације унутар ње, почињете да увиђате предности разбијања препоруке на мање појединачне делове. Будући да се на сваком од модула ради појединачно, програмери уживају много шири опсег подршке претраживача за ЦСС3 модуле.

Нови ЦСС3 селектори

ЦСС3 нуди неколико нових начина за писање ЦСС правила помоћу нових ЦСС селектора, као и нови комбинатор и неке нове псеудо-елементе.

Три су нова бирача атрибута:

• Атрибут на почетку се тачно подудара:

  елемент [фоо ^ = "бар"]

  Елемент има атрибут зван фоо који почиње са „бар“ нпр.
• Атрибути који се завршавају тачно одговарају:

  елемент [фоо $ = "бар"]

  Елемент има атрибут зван фоо који се завршава са „бар“ нпр.
instagram viewer
• Атрибут садржи подударање:

  елемент [фоо * = "бар"]

  Елемент има знак атрибут позвао фоо који садржи низ „трака“.

Уведено је 16 нових псеудо-класа:

• :корен
  • Основни елемент документа.
• : н-то дете (н)
  • Користите ово за подударање тачних подређених елемената или користите променљиве за добијање наизменичних подударања.
• : н-последње-дете (н)
  • Подударајте се тачно са подређеним елементима који се рачунају од последњег.
• : н-типа (н)
  • Повежите елементе брата и сестре са истим именом пре њега у стаблу докумената.
• : нтх-ласт-оф-типе (н)
  • Поклапајте елементе брата и сестре са истим именом одбројавајући одоздо.
• : последње дете
  • Одговара последњем подређени елемент родитеља.
• : први тип
  • Одговара првом братском елементу тог типа.
• : последњи тип
  • Упоредите последњи елемент брата или сестре тог типа.
• :једино дете
  • Упарите елемент који је једино дете његовог родитеља.
• : само-типа
  • Ускладите елемент који је једини тог типа.
• : празно
  • Упоредите елемент који нема деце (укључујући чворове текста).
• : таргет
  • Упоредите елемент који је циљ референтног УРИ-ја.
• : омогућено
  • Поравнајте елемент када је омогућен.
• : онемогућен
  • Поравнајте елемент када је онемогућен.
• : проверено
  • Ускладите елемент када је означен (радио дугме или поље за потврду).
• : не
  • Подударање када се елемент не подудара са једноставним селектори.

Постоји један нови комбинатор:

• елементА ~ елементБ
  • Поклапа се када елемент Б следи негде иза елемента А, не нужно одмах.

Нова својства

ЦСС3 је такође представио неколико нових ЦСС својстава. Многа од ових својстава стварају визуелне стилове који би се вероватно више повезали са графичким програмом попут Пхотосхоп. Неке од њих, попут бордер-радиус или бок-схадов, постоје од увођења ЦСС3. Други, попут флекбока или чак ЦСС Грид су новији стилови који се и даље често сматрају додацима ЦСС3.

У ЦСС3 модел кутије се није променио. Али постоји гомила нових својстава стила која вам могу помоћи у обликовању позадине и ивица ваших кутија.

Више слика у позадини

Користећи стилове позадинске слике, положаја позадине и понављања позадине, у пољу можете одредити више слика позадине које ће се слојити једна на другу. Прва слика је слој најближи кориснику, а следећи су насликани иза. Ако постоји боја позадине, она је обојена испод свих слојева слике.

Нова својства стила позадине

У ЦСС3 постоје и нека нова својства позадине:

• позадина-исечак
• Ово својство дефинише како се позадинска слика треба исећи. Подразумевано је бок-оквир, али се може променити у оквир за попуњавање или оквир за садржај.
• позадина-порекло
• Ово својство одређује да ли позадину треба ставити у оквир за попуњавање, оквир са оквиром или оквир за садржај.
• величина позадине
• Ово својство указује на величина слике у позадини. То вам омогућава развуците мање слике тако да одговарају страници.

Промене постојећих својстава стила позадине

Такође постоји неколико промена у постојећим својствима стила позадине:

• позадина-понављање
  • Постоје две нове вредности за ово својство - свемир и округли. Празан простор равномерно размакните унутар оквира, без да буде исечен. Округла рескалира позадинску слику тако да ће се цео број пута обложити плочицом.
• позадина-прилог
  • Додаје се нова вредност „лоцал“ тако да ће се позадина померати са садржајем елемента када тај елемент има траку за померање.
• позадини
  • Стенографско својство позадине додаје својства величине и порекла.

Својства границе ЦСС3

У ЦСС3, обруби могу бити стилови на које смо навикли (масивни, двоструки, испрекидани итд.) Или могу бити слика. Плус, ЦСС3 подржава заобљене углове. Слике ивица су занимљиве јер креирате слику све четири границе, а затим ЦСС-у кажете како да је примените на ваше границе.

Нова својства стила обруба

У ЦСС3 постоје нека нова својства обруба:

• граница-радијус
• граница-горњи-десни-полупречник, граница-доњи-десни-полупречник, граница-доњи-леви-полупречник, граница-горњи-леви-полупречник
• Ова својства вам омогућавају да направите заобљене углове на својим границама.
• бордер-имаге-соурце
• Одређује датотеку извора слике која ће се користити уместо већ дефинисаних стилова обруба.
• бордер-имаге-слице
• Представља унутрашње помаке од ивица граничне слике.
• бордер-имаге-видтх
• Дефинише вредност ширине ваше граничне слике.
• граница-слика-почетак
• Одређује количину коју подручје граничне слике прелази преко оквира са оквиром.
• граница-слика-протезање
• Дефинише како странице и средњи делови граничне слике треба да буду поплочани или скалирани.
• бордер-имаге
• Стенографско својство за сва својства бордер-имаге.

Додатна својства ЦСС3 која се односе на границе и позадине

Када се оквир разбије на прелому странице, прелому колоне или прелому реда (за уграђене елементе), кутија-украс-прелом својство дефинише како ће се нове кутије умотати у обрубе и подлоге. Позадине се деле на неколико сломљених поља помоћу овог својства.

Нова кутија-сенка својство додаје сенке елементима оквира.

Са ЦСС3 сада лако можете да поставите веб страницу са неколико колона без табела или компликовано див структуре ознака. Једноставно кажете прегледачу колико колона треба да има елемент тела и колико широке треба да буду. Уз то можете да додате ивице (правила) и боје позадине које се протежу по висини колоне, а ваш текст ће аутоматски пролазити кроз све колоне.

Дефинишите број и ширину колона

Три су нова својства који вам омогућавају да дефинишете број и ширину колона:

• Ширина колона
  • Одређује ширину колона. Прегледач ће затим кретати текст како би простор испунио широким колонама.
• цоунт-цоунт
  • Дефинише број колона на страници. Прегледач ће тада створити колоне довољно широке да стану у простор, али само број који наведете.
• колоне
  • Стенографско својство где можете дефинисати ширину или број (или обоје, али то ретко има смисла).

ЦСС3 празнине и правила у колони

Празнине и правила постављају се између колона у истом сценарију са више колона. Празнине ће раздвојити колоне, али правила не заузимају простор. Ако је правило колоне шире од празнине, преклапаће се са суседним колонама. Постоји пет нових својстава за правила и празнине колона:

• колона-празнина
  • Дефинише ширину празнина између колона.
• колона-правило-боја
  • Дефинише боју правила.
• колона-правило-стил
  • Дефинише стил правила (пуни, тачкасти, двоструки итд.).
• ширина колоне-правила
  • Дефинише ширину правила.
• колона-правило
  • Стенографско својство које дефинише сва три својства правила колоне одједном.

ЦСС3 преломи колона, распони колона и попуњавање колона

Колона прекиди користе исте ЦСС2 опције које се користе за дефинисање прелома у страничном садржају, али са три нова својства: преломни, прекид, и проваљивање.

Као и код табела, можете да поставите елементе да обухватају ступце са својством распона ступаца. То вам омогућава да креирате наслове који обухватају више колона више попут новина.

Попуњавање колона одлучује колико ће садржаја бити у свакој колони. Уравнотежени ступци покушавају да унесу исту количину садржаја у сваку колону, док ауто само пребацује садржај док се колона не попуни, а затим прелази на следећу.

Више функција у ЦСС3 које нису укључене у ЦСС2

Постоји много додатних функција у ЦСС3 које нису постојале у ЦСС2, укључујући:

• ЦСС модул за распоред предложака и модул за позиционирање мреже ЦСС3: Креирање мрежа са ЦСС-ом.
• ЦСС3 Текстуални модул: Уоквири текст и чак креирај сенке помоћу ЦСС-а.
• ЦСС3 модул у боји: Сада са непрозирношћу.
• Промене у моделу кутија: Укључујући а маркуее својство које делује као ИЕ ознака.
• ЦСС3 модул корисничког интерфејса: Давање нових курсора, одговора на акције, обавезна поља, па чак и промена величине елемената.
• Упити за медије: Упити за медије омогућавају вам већу флексибилност приликом дефинисања начина коришћења табеле стилова. На пример, могли бисте да дефинишете табелу стилова која је само за ручне уређаје који имају оквир за приказ већи од 20ем.
• ЦСС3 Руби модул: Пружа подршку за језике који користе текстуални рубин за означавање докумената.
• ЦСС3 Пагед Медиа модул: За још већу подршку за страничне медије (папир, фолије итд.).
• Генерисани садржај: Покретање заглавља и подножја, фуснота и другог садржаја који се генерише програмски, посебно за страничне медије.
• ЦСС3 Говорни модул: Промене у звучном ЦСС-у.