CSS

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

Првобитно, HTML је служио да дефинише комплетан изглед, структуру и садржај веб-странице, али је од верзије 4.0 HTML-а уведен CSS који би дефинисао конкретан изглед, док је HTML остао у функцији дефинисања структуре и садржаја.

Историја

CSS је у одређеној форми постојао још у зачецима SGML-а 1970их година.

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

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

За разлику од постојећих језика попут DSSSL-а и FOSI-а, CSS је дозвољавао да више описа утиче на документ, тј. једна дефиниција стилова је могла наслиједити особине од друге.

Лијев приједлог је постављен на конференцији „Веб мозаик“ у Чикагу 1994. године, и поново са Босовим приједлогом 1995. Отприлике у ово вријеме је основан W3C, који је преузео функцију развоја CSS-а. До краја 1996, CSS је био спреман да се објави као стандард, и CSS1 је објављен у децембру.

Развој HTML-а, CSS-а и DOM-а се одвијао у једној истој групи, HTML Editorial Review Board (ERB). Почетком 1997. група ERB се подијелила на три радне групе: радна група за HTML, којом је управљао Ден Коноли из W3C-а, радна група за DOM, којом је управљао Лорен Вуд из компаније Софтквод, и радна група за CSS, којом је управљао Крис Лили из W3C-а.

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

Језик

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

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

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

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

циљни елементи {
    својство: вриједност;
    својство: вриједност;
    ...
}

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

Циљни елементи

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

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

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

body {
    својство: вриједност;
    ...
}

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

.imeKlase {
    својство: вриједност;
    ...
}

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

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

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

#identifikacionaVrijednost {
    својство: вриједност;
    ...
}

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

Својства и вриједности

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

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

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

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

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

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

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

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

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

Примјери

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

body {
    background-color: aqua; /* позадина боје aqua */
}

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

.citat {
    font-family: serif; /* фонт са кукицама, као Times New Roman */
    font-style: italic; /* искошен текст */
    font-size: 9pt;     /* величина слова 9 тачака */
}

Организација CSS кода

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

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

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

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

Ограничења

Позната ограничења „чистог“ CSS-а укључују у следећа:

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

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

• Сложеност

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

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

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

One block declaration cannot explicitly inherit from another

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Недостатак колумна (стубаца)

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

Види још

• HTML
• XML
• CSS зен башта
• CSS filter
• Poligoni u CSS-u

Литература

• Jeffrey Zeldman : Designing With Web Standards, New Riders. 2009. ISBN 978-0-321-61695-1. (paperback) (book's companion site)
• Dan Cederholm : Web Standards Solutions, The Markup and Style Handbook, Friends of Ed. 2009. ISBN 978-1-4302-1920-0. (paperback) (Author's site)
• Meyer, Eric A. (2006). Cascading Style Sheets: The Definitive Guide, Third Edition. O'Reilly Media, Inc. ISBN 0-596-52733-0. 
• More Eric Meyer On CSS . 2004. ISBN 0-7357-1425-8.
• Eric Meyer On CSS . 2002. ISBN 0-7357-1245-X.
• Meyer, Eric A (2001). Cascading Style Sheets 2.0 Programmer's Reference. McGraw-Hill Osborne Media. ISBN 0-07-213178-0. 
• The Zen of CSS Design (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag). 2005. ISBN 0-321-30347-4.
• Kynn Bartlett: Teach Yourself CSS in 24 Hours, 2nd Edition , Sams Publishing. 2006. ISBN 978-0-672-32906-7.
• Cascading Style Sheets: Designing for the Web by Håkon Wium Lie and Bert Bos. 2005. ISBN 0-321-19312-1.
• Cascading Style Sheets Cascading Style Sheets, PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
• Cascading Style Sheets: Separating Content from Presentation, (co-authored by Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson), Friends of Ed . 2004. ISBN 978-1-59059-231-1.
• Keith Schengili-Roberts : Core CSS, 2nd Edition, Prentice Hall. 2003. ISBN 0-13-009278-9.
• On the Analysis of Cascading Style Sheets, Pierre Geneves, Nabil Layaida, and Vincent Quint, Proceedings of the 21st International Conference on World Wide Web (WWW'12). стр. 809-818, 2012.

Спољашње везе

• W3Schools, „Референца за CSS2"
• W3, "CSS стандард"
• Instant CSS Code