CSS

CSS

Екстензија датотеке:	.css
Развио:	Хекон Виум Лај, Берт Бос и W3C конзорцијум
Прво појављивање:	17. децембар 1996. (1996-12-17)
Тип формата:	Језик стилских листова

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). Прво је Хакон Виум Ли (који је сада шеф техничке службе компаније Opera) предложио 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, којом је управљао Лорен Вуд из компаније SoftQuad, и радна група за 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-а. На пример, Internet Explorer, чија ранија издања нису подржавала многе могућности CSS-а 2.1, су погрешно интерпретирала велики број битних описа објеката, укључујући ширину, висину и плутање. Да би се постигла доследност приказа у бројним популарним прегледачима, морају се користити разноразне „вештине“ и „штимања“. И поред тога, понекад је немогуће постићи идентичан приказ документа у различитим прегледачима.

• Сложеност

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Литература

• 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 978-0-596-52733-4. 
• More Eric Meyer On CSS . 2004. ISBN 978-0-7357-1425-0.
• Eric Meyer On CSS . 2002. ISBN 978-0-7357-1245-4.
• Meyer, Eric A. (2001). Cascading Style Sheets 2.0 Programmer's Reference. McGraw-Hill Osborne Media. ISBN 978-0-07-213178-9. 
• The Zen of CSS Design (co-authored by CSS Zen Garden Owner, Dave Shea, and Molly E. Holzschlag). 2005. ISBN 978-0-321-30347-9.
• 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 978-0-321-19312-4.
• Cascading Style Sheets Cascading Style Sheets, PhD thesis, by Håkon Wium Lie – provides an authoritative historical reference of CSS
• Briggs, Owen; Patterson, Matt; Costello, Eric; Champeon, Steven (2004). Cascading Style Sheets: Separating Content from Presentation. Apress. ISBN 978-1-59059-231-1. 
• Keith Schengili-Roberts (2003). Core CSS, 2nd Edition. Prentice Hall. ISBN 978-0-13-009278-6. 
• 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). p. 809-818, 2012.

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

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