Разумевање главних промена у ЦСС3
Највећа разлика између ЦСС2 и ЦСС3 је да је ЦСС3 подељен на различите секције, назване модулима. Сваки од ових модула иде кроз В3Ц у различитим фазама процеса препоручивања. Овај процес је учинио много лакшим да различити дијелови ЦСС3 буду прихваћени и имплементирани у претраживачу од стране различитих произвођача.
Ако упоредите овај процес са оним што се десило са ЦСС2, где је све било поднето као један документ са свим информацијама о Цасцадинг Стиле Схеетима унутар њега, почињете да видите предности разбијања препоруке на мање појединачне комаде. Пошто се сваки од модула обрађује појединачно, имамо много шири опсег подршке за ЦСС3 моделе.
Као и са било којом новом и променљивом спецификацијом, обавезно тестирајте своје ЦСС3 странице темељито у оном броју претраживача и оперативних система колико можете. Запамтите да циљ није креирање веб страница које изгледају потпуно исто у сваком прегледачу, већ како би се осигурало да сви стилови које користите, укључујући и ЦСС3 стилове, изгледају одлично у претраживачима који их подржавају и да се грејтако враћају за старије прегледаче који немој.
Нови ЦСС3 селектори
ЦСС3 нуди пуно нових начина на који можете написати ЦСС правила са новим ЦСС селектора, као и нови комбинатор и неки нови псеудо-елементи.
Три нова селектора атрибута:
- Атрибут почиње да одговара тачно елементу [фоо ^ = "бар"] Елемент има атрибут под називом фоо који почиње са "баром" нпр.
- Атрибут који се завршава у матрици тачно елемент [фоо $ = "бар"] Елемент има атрибут под називом фоо који се завршава са "баром" нпр.
- Атрибут садржи елемент меча [фоо * = "бар"] Елемент има атрибут под називом фоо који садржи стринг "бар" нпр.
16 нових псеудо-класа:
- :корен
- Коријенски елемент документа. У ХТМЛ-у ово је увек.
- : н-дијете (н)
- Користите ово да бисте подударали са тачним елементима детета или користите променљиве да бисте добили измјенична подударања.
- : нтх-ласт-цхилд (н)
- Испуните тачне елементе детета који се рачунају од последњег.
- : нтх-оф-типе (н)
- Подударите елементе с сестрама са истим именом пре њих у стабло документа.
- : нтх-ласт-оф-типе (н)
- Подударите елементе с сестрама са истим именом које се рачунају одоздо.
- : последње дете
- Подесите последњи детски елемент родитеља.
- : први тип
- Подударајте с првим сродним елементом тог типа.
- : последња врста
- Подесите последњи елемент сродства тог типа.
- :једино дете
- Подесите елемент који је једино дете његовог родитеља.
- : само-врсте
- Подесите елемент који је једини од његовог типа.
- : празно
- Подесите елемент који нема деце (укључујући текст чворове).
- : циљ
- Подесите елемент који је циљ референтног УРИ-а.
- : омогућено
- Подесите елемент када је омогућен.
- : онеспособљено
- Подесите елемент када је онемогућен.
- : проверено
- Подесите елемент када је означен (радио дугме или поље за потврду).
- : не (и)
- Подударање када се елемент не подудара с једноставним селекторима с.
Један нови комбинатор:
- елементА ~ елементБ
- Утакмица када елемент Б следи негде после елемента А, не мора одмах.
Нове особине
ЦСС3 је такође увео неколико нових ЦСС особина. Многа од ових особина била су стварање визуелних стилова који би вероватно више повезали са графичким програмом као што је Пхотосхоп. Неке од ових, као што су гранични радијус или сенка са снопом, биле су још од увода ако је ЦСС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 Говорни модул : промене на усмени ЦСС.