ЦСС

ЦСС (енгл. Cascading Style Sheets) је језик форматирања помоћу ког се дефинише изглед елемената веб-странице.

Првобитно, ХТМЛ је служио да дефинише комплетан изглед, структуру и садржај веб-странице, али је од верзије 4.0 ХТМЛ-а уведен ЦСС који би дефинисао конкретан изглед, док је ХТМЛ остао у функцији дефинисања структуре и садржаја.

ЦСС је у одређеној форми постојао још у зачецима СГМЛ-а 1970их година.

Како је ХТМЛ постајао компликованији, давао је све више могућности за дефиницију изгледа елемената, али је истовремено постајао нечитљивији и тежи за одржавање. Различити браузери су приказивали документе на различите начине, и постојала је потреба за досљедном техником дефинисања приказа елемената на страници.

Да би се ово постигло, девет различитих метода је предложено на званичном форуму W3Ц-а. Од девет, двије методе су изабране као темељ онога што је касније постало ЦСС: ЦХСС (енгл. Cascading HTML Style Sheets) и ССП (енгл. Stream-based Style Sheet Proposal). Прво је Хакон Виум Ли (који је сада шеф техничке службе компаније Опера) предложио ЦХСС у октобру 1994, језик који је имао доста сличности са данашњим ЦСС-ом. Берт Бос је радио на браузеру по називу Арго, који је имао сопствени начин дефинисања стилова, ССП. Ли и Бос су радили заједно да би основали ЦСС стандард (слово Х је избачено из скраћенице ЦХСС јер се ЦСС могао односити и на друге језике поред ХТМЛ-а).

За разлику од постојећих језика попут ДСССЛ-а и ФОСИ-а, ЦСС је дозвољавао да више описа утиче на документ, тј. једна дефиниција стилова је могла наслиједити особине од друге.

Лијев приједлог је постављен на конференцији "Веб мозаик" у Чикагу 1994. године, и поново са Босовим приједлогом 1995. Отприлике у ово вријеме је основан W3Ц, који је преузео функцију развоја ЦСС-а. До краја 1996, ЦСС је био спреман да се објави као стандард, и ЦСС1 је објављен у децембру.

Развој ХТМЛ-а, ЦСС-а и ДОМ-а се одвијао у једној истој групи, ХТМЛ Едиториал Ревиеw Боард (ЕРБ). Почетком 1997. група ЕРБ се подијелила на три радне групе: радна група за ХТМЛ, којом је управљао Ден Коноли из W3Ц-а, радна група за ДОМ, којом је управљао Лорен Вуд из компаније Софтквод, и радна група за ЦСС, којом је управљао Крис Лили из W3Ц-а.

Радна гр��па за ЦСС је почела да ради на проблемима који нису били обухваћени ЦСС-ом верзије 1, који се тако развио у ЦСС2, 4. новембра 1997; објављен је као званична верзија 12. маја 1998. ЦСС3, чији је развој започет 1998. се још увијек развија.

ЦСС синтакса се састоји од описа изгледа елемената у документу. Опис може да дефинише изглед више елемената, и више описа може да дефинише један елемент. На тај начин се описи слажу један преко другог да би дефинисали коначни изглед одређеног елемента (отуда назив Цасцадинг (енгл. cascade - цријеп) да би се дочарало слагање једног стила преко другог у дефинисању коначног изгледа елемента)

Сваки опис се састоји од три елемента:

• дефиниција циљних елемената
• својства
• вриједности

Након што дефинишемо циљне елементе, тј. елементе на које ће се тренутни опис односити, низом парова својство-вриједност дефинишемо изглед сваког циљног елемента. Синтакса која се при томе дефинише је сљедећег облика:

ciljni elementi {
    svojstvo: vrijednost;
    svojstvo: vrijednost;
    ...
}

ЦСС подржава и коментаре, који изгледају као у програмском језику C, дакле наводећи се између знакова /* и */.

Циљни елементи се дефинишу на три начина:

• наводећи ХТМЛ таг циљних елемената
• наводећи класу елемената
• наводећи директну идентификациону вриједност (ID) елемента

Када дефинишемо преко ХТМЛ тага, то значи да ће опис утицати на све елементе у документу који имају овај таг. Дефиниција циљних елемената се тада врши преко директног уписа одговарајућег ХТМЛ тага:

body {
    svojstvo: vrijednost;
    ...
}

Класа ХТМЛ елемента је ријеч коју ставимо као вриједност аргумента CLASS при дефиницији тог елемента. Дефиниција циљних елемената (свих који имају одређену исту класу) се врши тако што упишемо знак тачке (.) а затим назив класе:

.imeKlase {
    svojstvo: vrijednost;
    ...
}

Овај опис ће, дакле, имати утицаја на све елементе у документу који су дефинисани на сљедећи начин:

<p class="imeKlase">...</p>
<div class="imeKlase">...</p>
...

Идентификациона вриједност елемента је вриједност аргумента ID при дефиницији тог елемента. У једном документу идентификационе вриједности морају бити јединствене, тј. може постојати само један елемент са одређеном идентификационом вриједношћу, што значи да овакви описи могу утицати само на по један елемент у документу. Дефинишу се помоћу знака тарабе (#) а затим идентификациону вриједност:

#identifikacionaVrijednost {
    svojstvo: vrijednost;
    ...
}

Овај ће, дакле, опис утицати на све елементе који у својој ХТМЛ дефиницији имају id="identifikacionaVrijednost".

Својства на која желимо да утичемо у датом опису се дефинишу преко низа кључних ријечи дефинисаних у W3Ц стандарду, а које се категоришу у сљедеће групе:

• дефиниција позадине елемента
• ивица
• оквир
• приказ
• димензије
• фонт
• генерисани садржај
• маргине
• унутрашњи празан простор
• позиција
• изглед припадајућег текста

Вриједности појединих својстава се дефинишу на два начина:

• предефинисаним кључним ријечима
• бројевним вриједностима

Предефинисане кључне ријечи за вриједности својстава се користе у ситуацијама када дато својство има ограничен број могућности. Тако на примјер својство за дефиницију позадине елемента може бити само scroll (да се креће увијек заједно са садржајем елемента) и fixed (да стоји увијек на истом мјесту без обзира на садржај).

Бројевне вриједности се могу задавати на неколико начина:

• задајући само бројевну вриједност
• наводећи и јединицу величине скупа са описом (px, em, pt, ...)

Ако задајемо само бројевну вриједност, имамо могућност да је пишемо на два начина:

• у декадном систему (709)
• у хексадекадном систему (#а4фде3); овај систем се највише користи у дефиницији боје

• Примјер за дефиницију позадине цијеле странице:

body {
    background-color: aqua; /* pozadina boje aqua */
}

• Примјер за дефиницију изгледа свих елемената класе "цитат":

.citat {
    font-family: serif; /* font sa kukicama, kao Times New Roman */
    font-style: italic; /* iskošen tekst */
    font-size: 9pt;     /* veličina slova 9 tačaka */
}

ЦСС код се може задавати на три стандардна мјеста:

• директно у тагу, користећи аргумент style
• у заглављу документа унутар тага style
• у екстерној датотеци, која се у документ укључује тагом link

За јако мале документе, аргумент style тага може бити прихватљив, али за веће документе не може јер се на овај стил дефинише за сваки елемент понаособ. Дефиниција стилова се најчешће ради групишући елементе у класе, помоћу аргумента class тага, а затим дефинишући изглед тих класа било у оквиру елемента style у заглављу или у екстерној датотеци. Аргумент style тага се најчешће користи ако неки елемент не припада ниједној групи и има посебне захтјеве у односу на све остале елементе.

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

Позната ограничења "чистог" ЦСС-а укључују у следећа:

• Недосљедност браузера:

Различити браузери ће интерпретирати ЦСС-кŏд на различите начине због својих багова или због неподржавања одређених могућности ЦСС-а. На примјер, Мајкрософтов Интернет Експлорер, чија ранија издања нису подржавала многе могућности ЦСС-а 2.1, су погрешно интерпретирала велики број битних описа објеката, укључујући ширину, висину и плутање. Да би се постигла досљедност приказа у бројним популарним браузерима, морају се користити разноразне "вјештине" и "штимања". I поред тога, понекад је немогуће постићи идентичан приказ документа у различитим браузерима.

• Сложеност

Велики сајтови имају проблем величине ЦСС докумената, који временом постају толико сложени и дугачки да одржавање и додавање нових својстава постаје изузетно тежак посао.

• Описи елемената се не могу базирати на другим објектима

ЦСС не подржава „насљеђивање“ - не постоји начин да се изабере опис неког другог елемента на којем би се базирао тренутни елемент. Насљеђивање постоји, али се базира на унапријед утврђеном правилу да се описи насљеђују од елемента у којем се дотични елемент налази, тј. од родитељског елемента. Радна група за ЦСС објашњава да не жели да уведе произвољно насљеђивање јер би то отежало и успорило рад браузера.

Оне блоцк децларатион цаннот еxплицитлy инхерит фром анотхер

• Проблеми при вертикалној оријентацији елемената

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

• Недостатак аритметичких операција

Досадашње верзије ЦСС-а не подржавају ни најједноставније аритметичке операције (нпр. margin-left: 10%-10px;). Неки помаци су направљени, расправом Радне групе за ЦСС о увођењу израза calc(), а Интернет Експлорер од верзије 5.0 подржава израз expression, са сличним могућностима.

• Неслагање појединачних описа

Одређена својства имају сличну сврху, и често се не слажу у потпуности. На примјер, својства position, float и display одређују локацију приказа елемента и њихово комбиновање често проузрокује неочекиване резултате а одређене комбинације су по правилу забрањене. На примјер, ако одређеном елементу додијелимо својство display: table-cell, онда му не можемо додијелити својство float нити position: relative.

• Одређени елементи не могу садржати плутајуће под-елементе

Не постоји својство које такве елементе форсира да подржавају плутајуће под-елементе. Понекад додјељивање својства position: relative рјешава овај проблем, или дефинисање и самог над-елемента да има плутајуће својство, али у ситуацијама када то није прихватљиво за организацију документа, то није рјешење.

• Немогућност постављања више позадинских тема истом елементу

Сложена графичка рјешења захтијевају више од једне позадинске слике по елементу, али ЦСС подржава само једну. Због тога су дизајнери приморани да елементе слажу један преко другог да би добили оно што су тражили, или да одустану од првобитне идеје. Овај проблем се планира ријешити у трећој верзији ЦСС-а^[1], а одређена рјешења већ постоје у браузерима Сафари (браузер) и Конкверор.

• Контрола облика елемената

ЦСС тренутно допушта само правоугаоне елементе. Елементи заобљених углова или других неправоугаоних облика захтијевају излажење из опсега ЦСС-а или коришћење сличица.

• Не постоје стриктна правила о редослиједу описа и припадајућих својстава

Тренутно се описи и својства могу задавати у било ком реду, али уколико су у конфликту, предност има посљедње задати израз.

• Непостојање промјенљивих

ЦСС не подржава промјенљиве ни у каквом облику. Промјенљиве би послужиле за централизовани опис одређене боје, величине или читавог скупа својстава, што би обезбиједило лакше одржавање и мијењање, али и мање ЦСС документе. Са тренутним верзијама, приступа се групном описивању неколико различитих класа раздвојеним зарезом, да би се умањио проблем непостојања промјенљивих.

• Недостатак колумна

Колумне текста, попут новинарских, се најчешће рјешавају плутајућим елементима или табелама, али различити браузери, на мониторима различитих резолуција, величина и односа страна ће приказати различите резултате. Додавање једноставних декларација за дефинисање колумна би ријешило ове проблеме.

• ХТМЛ
• XМЛ

• W3Сцхоолс, "Референца за ЦСС2" Архивирано 2007-09-04 на Wаyбацк Мацхине-у
• W3, "ЦСС стандард"
• Инстант ЦСС Цоде Архивирано 2010-10-31 на Wаyбацк Мацхине-у
• ((енг.)) ЦСС1 спецификација
• ((енг.)) ЦСС2 спецификација
• ((енг.)) Инстант ЦСС Цоде Архивирано 2010-10-31 на Wаyбацк Мацхине-у