CSS

კასკადურ სტილთა ფურცლები (ინგლ. Cascading Style Sheets, CSS) — სტილთა ფურცლების ენა, რომელიც გამოიყენება მონიშვნის ენით დაწერილი დოკუმენტის წარდგინების აღსაწერად, მაგალითად HTML-ის გამოყენებით. CSS არის მსოფლიო აბლაბუდის ტექნოლოგიური ქვაკუთხედი, HTML-თან და JavaScript-თან ერთად. CSS შემუშავებულია კონტენტის და მისი წარდგენის, მათ შორის ფერების, ფონტების და გაწყობის გაცალკევებისათვის. ამგვარ გაცალკევებას შეუძლია გააუმჯობესოს კონტენტის ხელმისაწვდომობა, უზრუნველყოს წარდგენის თვისებების განსაზღვრის უფრო მეტი მოქნილობა და მართვადობა, უზრუნველყოს მრავალი ვებგვერდის მიერ საზიარო ფორმატირების გამოყენება შესაბამისი სტილების განცალკევებულ .css ფაილში აღწერით, რაც ამცირებს კონტენტის სტრუქტურაში სირთულესა და გამეორებადობას, ისევე როგორც უზრუნველყოს .css ფაილის კეშირება, რაც საზიარო სტილის და ფორმატირების მქონე სხვადასხვა გვერდის ჩატვირთვის სიჩქარეს აამაღლებს.

ფორმატირებისა და კონტენტის გაცალკევება ასევე იძლევა შესაძლებლობას ერთი და იგივე გვერდი წარდგენილ იქნას სხვადასხვა სტილში გამოქვეყნების სხვადასხვა მეთოდისათვის, როგორიცაა მონიტორისთვის, ბეჭდვისთვის, ხმოვანისთვის, და ბრაილის შრიფტზე დაფუძნებული ტაქტილური მოწყობილობებისთვის. CSS საშუალებას იძლევა ფორმატირება შეიცვალოს თუ კონტენტზე წვდომა ხორციელდება მობილური მოწყობილობიდან. სახელი „კასკადური“ მომდინარეობს სტილების პრიორიტეტულობის სქემიდან, რომლითაც განისაზღვრება თუ რომელი სტილი იქნება გამოყენებული ელემენტისთვის, იმ შემთხვევაში, როდესაც ერთსა და იმავე ელემენტზე გაწერილია ერთზე მეტი წესი. კასკადური პრიორიტეტების სქემა პროგნოზირებადია.

კასკადურ სტილთა ფურცლების ტექნიკური მახასიათებლების მხარდაჭერას ახორციელებს მსოფლიო აბლაბუდის კონსორციუმი (W3C). ინტერნეტის მედია-ტიპი (MIME-ტიპი) text/css რეგისტრირებულია კასკადურ სტილთა ფურცლებთან გამოსაყენებლად ცვლილებების შესახებ განაცხადით RFC 2318 (მარტი, 1998). W3C-ის მიერ წარდგენილია უფასო სერვისი CSS-დოკუმენტების შესამოწმებლად.

HTML-ის გარდა, CSS-ის გამოყენება მხარდაჭერილია მონიშვნის სხვა ენებშიც, მათ შორის XHTML, XML, SVG, XUL.

სინტაქსი

CSS-ს აქვს მარტივი სინტაქსი და იყენებს გარკვეული რაოდენობის ინგლისურ საკვაძო სიტყვებს სტილის სხვადასხვა თვისების სახელის განსაზღვრისთვის. სტილის ფურცელი შედგება წესების ნუსხისგან. თითოეული წესი ან წესების კრებული შედგება ერთი ან მეტი სელექტორისგან და გამოცხადების ბლოკისგან. სელექტორი განლაგებულია წესის მარცხენა მხარეს { ნიშნამდე, ხოლო გამოცხადების ბლოკი განლაგებულია წესის მარჯვენა მხარეს და მოთავსებულია ფიგურულ ფრჩხილებში. გამოცხადების ბლოკში შეიძლება იყოს ერთი, ან მრავალი გამოცხადება, რომლებიც ერთმანეთისაგან გამოიყოფა წერტილმძიმით ;. გამოცხადების შემადგენელი ნაწილებია თვისება და მისი მნიშვნელობა; თვისებას და მის მნიშვნელობას შორის ისმება ორწერტილი :.

სელექტორი, სელექტორი {
  თვისება: მნიშვნელობა;
  თვისება: მნიშვნელობა;
  თვისება: მნიშვნელობა;
}

სელექტორი

CSS-ში სელექტორები აცხადებენ მონიშვნის რომელ ნაწილს ეკუთვნის სტილი, რისთვისაც იყენებს ტეგების და ატრიბუტების შესაბამისობას თავად მონიშვნაში. სელექტორი შეიძლება გამოყენებულ იქნას შემდეგზე:

• სპეციალური ტიპის ყველა ელემენტზე, მაგალითად მეორე დონის სათაურებზე h2
• ატრიბუტით განსაზღვრულ ელემენტებზე, კერძოდ:
  • id: უნიკალური იდენტიფიკატორი დოკუმენტში
  • class: კლასობრივი იდენტიფიკატორი, რომელსაც შეუძლია მრავალი ელემენტის ანოტირება დოკუმენტში
• ელემენტებზე, იმის მიხედვით, მათი სხვა ელემენტების მიმართ დოკუმენტის ხეში განთავსების მიხედვით.

კლასები და იდენტიფიკატორები რეგისტრის მიმართ მგრძნობიარეა, იწყება ასობგერით და შეიძლება შეიცავდეს ასოებს, ციფრებს, დეფისებს და ხაზგასმებს. კლასი შეიძლება გამოყენებულ იქნას ნებისმიერი ელემენტის ნებისმიერი რაოდენობის ნიმუშზე. id შეიძლება დაერთოს მხოლოდ ერთ ელემენტს.

CSS-სელექტორებში ფსევდოკლასები გამოიყენება ფორმატირებისვის იმ ინფორმაციის საფუძვეზე, რომელიც არ არის მოცემული დოკუმენტის ხეში. ფართოდ გამოყენებადი ერთ-ერთი ფსევდოკლასის ნიმუშია :hover, რომელიც კონტენტის იდენტიფიცირებას ახდენს მხოლოდ მაშინ, როდესაც მომხმარებელი უთითებს ხილულ ლელემენტზე, ხშირ შემთხვევაში კომპიუტერის კურსორის ზედ გადავლებით ან მასზე გაჩერებით. სელექტორზე მიბმა ხდება შემდეგნაირად a:hover ან #elementid:hover. დოკუმენტის ელემენტებს, როგორიცაა :link ან :visited, ფსევდოკლასი კლასიფიცირებს იმ დროს, როდესაც ფსევდოელემენტი აკეთებს ამორჩევას, რომელიც შეიძლება შეიცავდეს ნაწილობრივ ელემენტებს, როგორიცაა ::first-line ან ::first-letter.

შესაძლებელია სელექტორების მრავალგვარი გაერთიანება, შთამბეჭდავი მოქნილობის და სპეციფიკურობის მისაღწევად. მრავალი სელექტორი შეიძლება გაერთიანდეს მიმორიგებულ სიაში, ელემენტების განსასაზღვრად მათი მდებარეობის, ტიპის, იდენტიფიკატორის, კლასის ან მათი რომელიმე კომბინაციით.

სელექტორების მითითების თანმიმდევრობა მნიშვნელოვანია. მაგალითისთვის, div .myClass {color: red;} მოქმედებს myClass კლასის ყველა ელემენტზე, რომელიც არის div ელემენტის შიგნით, მაშინ როდესაც .myClass div {color: red;} მოქმედებს ყველა div ელემენტზე რომლებიც არიან myClass კლასის ელემენტები.

შემდეგი ცხრილი შეიცავს სელექტორების სინტაქსის შეჯამებას, გამოყენების ჩვენებითა და CSS ვერსიის მითითებით, როდესაც იგი დაემატა.

ნიმუში	ელემენტი რომელზეც მოქმედებს	CSS-დონე, რომელშიც პირველად აღწერილ იქნა
E	E ტიპის ელემენტი	1
E:link	E ელემენტი არის ჰიპერბმულის საწყისი ღუზა, რომლის მიზანი ჯერ არ დათვალიერებულა (:link) ან უკვე დავალიერდა (:visited)	1
E:active	E ელემენტი მომხმარებლის გარკვეული ქმედებისას	1
E::first-line	E ელემენტის პირველი ფორმატირებული სტრიქონი	1
E::first-letter	E ელემენტის პირველი ფორმატირებული ასო	1
.c	„c“ კლასის ყველა ელემენტი (class="c")	1
#myid	ელემენტი იდენტიფიკატორით myid (id="myid")	1
E.warning	„warning“ კლასის E ელემენტი (დოკუმენტის ენა ადგენს კლასის განსაზღვრებას)	1
E#myid	E ელემენტი რომლის იდენტიფიკატორი ტოლია „myid“	1
.c#myid	„c“ კლასის ელემენტი (class="c") რომლის იდენტიფიკატორი ტოლია „myid“	1
E F	E ელემენტის მემკვიდრე F ელემენტი	1
*	ნებისმიერი ელემენტი	2
E[foo]	E ელემენტი ატრიბუტით „foo“	2
E[foo="bar"]	E ელემენტი, რომლის „foo“ ატრიბუტის მნიშვნელობა ტოლია „bar“-ის	2
E[foo~="bar"]	E ელემენტი, რომლის „foo“ ატრიბუტის მნიშვნელობა არის ნიშანსივრცით გამოყოფილი სია, რომელთაგან ერთ-ერთი ტოლია „bar“-ის	2
E[foo|="en"]	E ელემენტი, რომლის „foo“ ატრიბუტს აქვს დეფისი გამოყოფილი მნივნელობების სია, რომელიც იწყება (მარცხნიდან) „en“-ით	2
E:first-child	E ელემენტი, საკუთარი მშობლის პირველი შვილობილი ელემენტი	2
E:lang(fr)	E ტიპის ელემენტი „fr“ ენაზე (დოკუმენტის ენა ადგენს ენის განსაზღვრებას)	2
E::before	E ელემენტის კონტენტამდე გენერირებული კონტენტი	2
E::after	E ელემენტის კონტენტის შემდეგ გენერირებული კონტენტი	2
E > F	E ელემენტის შვილობილი F ელემენტი	2
E + F	F ელემენტი, რომელსაც უშუალოდ წინ უძღვის E ელემენტი	2
E[foo^="bar"]	E ელემენტი, რომლის „foo“ ატრიბუტის მნიშვნელობა იწყება სტრიქონით „bar“	3
E[foo$="bar"]	E ელემენტი, რომლის „foo“ ატრიბუტის მნიშვნელობა მთავრდება სტრიქონით „bar“	3
E[foo*="bar"]	E ელემენტი, რომლის „foo“ ატრიბუტის მნიშვნელობა შეიცავს „bar“ ქვესტრიქონს	3
E:root	E ელემენტი, დოკუმენტის ფესვი	3
E:nth-child(n)	E ელემენტი, საკუთარი მშობლის მე-n შვილობილი ელემენტი	3
E:nth-last-child(n)	E ელემენტი, ბოლოდან ათვლილი საკუთარი მშობლის მე-n შვილობილი ელემენტი	3
E:nth-of-type(n)	E ელემენტი, საკუთარი ტიპის მე-n ძმობილი	3
E:nth-last-of-type(n)	E ელემენტი, ბოლოდან ათვლილი საკუთარი ტიპის მე-n ძმობილი	3
E:last-child	E ელემენტი, საკუთარი მშობლის ბოლო შვილობილი	3
E:first-of-type	E ელემენტი, საკუთარი ტიპის პირველი ძმობილი	3
E:last-of-type	E ელემენტი, საკუთარი ტიპის ბოლო ძმობილი	3
E:only-child	E ელემენტი, საკუთარი მშობლის ერთადერთი შვილობილი	3
E:only-of-type	E ელემენტი, საკუთარი ტიპის ერთადერთი ძმობილი	3
E:empty	E ელმენტი, რომლესაც არ ჰყავს შვილობილი (ტექსტობრივი კვანძების ჩათვლით)	3
E:target	E ელემენტი, რომელიც მიმთითებელი URI-ს მიზანია	3
E:enabled	მომხმარებლის ინტერფეისის E ელემენტი რომელიც ჩართულია	3
E:disabled	მომხმარებლის ინტერფეისის E ელემენტი რომელიც გამორთულია	3
E:checked	მომხმარებლის ინტერფეისის E ელემენტი რომელიც მონიშნულია (რადიოღილაკის ან მოსანიშნი ალმის ნიმუშებისთვის)	3
E:not(s)	E ელემენტი, რომელიც არ შეესაბამება უბრალო s სელექტორს	3
E ~ F	F ელემენტი, რომელსაც წინ უძღვის E ელემენტი	3

გამოცხადების ბლოკი

გამოცხადების ბლოკი შედგება გამოცხადებების ნუსხისგან, რომელიც მოქცეულია ფიგურულ ფრჩხილებში. თითოეული გამოცხადება შედგება თვისებისგან, ორწერტილისგან (:) და მნიშვნელობისგან. თუ ბლოკში ერთზე მეტი გამოცხადებაა, მაშინ თითოეული გამოცხადების გამოსაყოფად მათ შორის უნდა დაიწეროს წერტილ-მძიმე (;).

თვისებები განსაზღვრულია CSS-ის სტანდარტში. თითოეულ თვისებას აქვს შესაძლო მნიშვნელობების გარკვეული ნუსხა. ზოგიერთ თვისებას მოქმედება შეუძლია ნებისმიერი ტიპის ელემენტზე, ხოლო ზოგიერთს — მხოლოდ გარკვეული ჯგუფის ელემენტებზე.

თვისებების მნიშვნელობები შეიძლება იყოს განსაზღვრული საკვანძო სიტყვები, მაგალითად როგორიცაა "center" ან "inherit", ან რიცხობრივი მნიშვნელობები, მაგალითად 200px (200 პიქსელი), 50vw, ან 80% (მობელი ელემენტის სიგანის 80%). ფერის მნიშვნელობები შესაძლებელია მინიჭებულ იქნას საკვაძო სიტყვების გამოყენებით (მაგალითად, "red"), ფერის თექვსმეტობითი კოდის მნიშვნელობით (მაგალითად, #FF0000 ან #F00), RGB მნიშვნელობით 0-და 25-ის ჩათვლით (მაგალითად, rgb(255, 0, 0)), RGBA მნიშვნელობებით, რომელიც ფერის გარდა ალფა არხის გამჭვირვალეობასაც განსაზღვრავს (მაგალითად, rgba(255, 0, 0, 0.8)), HSL ან HSLA მნიშვნელობით (მაგალითად, hsl(000, 100%, 50%), hsla(000, 100%, 50%, 80%)).

სიგრძის ერთეულები

არანულოვანი მნიშვნელობები, რომლებიც წარმოადგენენ წრფივ ზომებს, უნდა წარდგენილნი იყვნენ სიგრძის ერთეულან ერად, რომელიც შეიძლება იყოს აბრევიატურა ან ანბანური კოდი, მაგალითად, 200px ან 50vm; ან პროცენტის სიმბოლოს, მაგალითად, 80%. სიგრძის ზოგიერთი ერთეული, cm (სანტიმეტრი), in (ინჩი), mm (მილიმეტრი), pc (პიკა) და pt (წერტილი) — აბსოლუტურია, რაც იმას ნიშნავს, რომ მისი განზომილება გამოსახულებაზე, არ არის დამოკიდებული გვერდის სტრუქტურაზე. ისეთი ერთეულები, როგორიცაა em (em), ex (ex) და px (პიქსელი) — დაკავშირებულია გვერდის კონტენტთან, რაც ნიშნავს, რომ მის გამოსახვაზე შეიძლება გავლენა იქონიონ ისეთმა ფაქტორებმა, როგორიცაა მაგალითად მშობელი ელემენტის ფონტის ზომა. ჩამოთხვლილი სიგრძის რვავე ერთეული წარდგენილი იყო CSS-ის 1-ლ ვერსიაში და მემკვიდრეობით გადაეცა შემდგომ ვერსიებსაც. ცვლილებების შესახებ განაცხადი „CSS Values and Units Module Level 3“, თუ იგი მიღებული იქნება W3C-ის რეკომენდაციად, სტანდარტში დაამატებს დამატებით 7 ერთეულს, ესენია: ch, Q, rem, vmax, vmin და vw.

გამოყენება

CSS-ის შემუშავებამდე, HTML დოკუმენტის გაფორმების ატრიბუტები თითქმის სრულად თავსდებოდა HTML მონიშვნის შიგნით. ყველა ფონტის ფერი, ფონის სტილი, ელემენტების სწორებები, საზღვრები და ზომები აღწერილი იყო უშუალოდ HTML-კოდში, ხშირ შემთხვევაში კი, ეს აღწერა მეორდებოდა. CSS ავტორს საშუალებას აძლევს ინოფორმაციის დიდი ნაწილი გადატანილ იქნას სხვა ფაილში — სტილის ფურცელში, რისი წყალობით, მიიღება შედარებით გამარტივებული HTML დოკუმენტი.

მაგალითისთვის, სათაურები (h1 ელემენტი), ქვესათაურები (h2), ქვე-ქვესათაურები (h3) და ა. შ. განსაზღვრულია სტრუქტურალად HTML-ის გამოყენებით. ბეჭდვისა და ეკრანზე მოსახვისას ამ ელემენტების ფონტის ზომა, ფერი და გამოყოფა საპრეზენტაციო ხასიათისაა.

CSS-მდე, დოკუმენტის ავტორს, რომელსაც სსურდა გარკვეული ტიპოგრაფიული მახასიათებლების მინიჭება, მაგალითად, ყველა h2 სათაურისთვის, უწევდა HTML-ში საპრეზენტაციო მინიშვნის გამოყენება იმდენჯერ, რამდენჯერაც დოკუმენტში მეორდება h2 ტიპის სათაური, რაც ართულებდა დოკუმენტებს, ზრდიდა მათ ზომას, ხდიდა შეცდომების მიმართ მოწყვლადსა და რთულად მხარდასაჭერს. CSS-ის გამოყენებით, დოკუმენტის სტრუქტურილი საპრეზენტაციო ნაწილები ცალკევდება. CSS-ით შეიძლება განისაზღვროს ფერი, ფონტი, ტექსტის სწორება, ზომა, საზღვრები, დაშორება, განლაგება და სხვა მრავალი ტიპოგრაფიული მახასიათებელი, და ამის განსაზღვრა შესაძლებელია ერთანეთისგან დამოუკიდებლად, საეკრანოდ და საბეჭდვო წარდგენისთვის. CSS ასევე განსაზღვრავს უხილავ სტილებსაც, როგორიცაა კითხვის სიჩქარე და აქცენტირება ტექსტის ხმოვანი წამიკითხველებისთვის. წარდგენითიო მონიშვნის HTML-ში სრულად მოთავსება W3C-ის მიერ მოძველებულ პრაქტიკად არის გამოცხადებული.

მაგალითად, CSS-მდელი HTML-ში, სასათაურო ელემენტი წითელი ტექსტით უნდა დაწერილიყო შემდეგნაირად:

<h1><font color="red"> Chapter 1. </font></h1>

CSS-ის გამოყენების შემთხვევაში, იგივე ელემენტი შეიძლება დაიწეროს სტილის თვისებების გამოყენებით, HTML ატრიბუტების ნაცვლად:

<h1 style="color: red;"> Chapter 1. </h1>

ამის უპირატესობები პირველ ჯერზე არ იკვეება, თუმცა CSS-ის სიმძლავრე ნათელი ხდება, როდესაც სტილის თვისებები თავსდება შიდა სტილის ელემენტში, ან უფრო უკეთესი, გარე CSS ფაილში.

მაგალითად, დავუშვათ, დოკუმენტი შეიცავს შიდა CSS-ელემენტს:

<style>
h1 {
    color: red;
}
</style>

ყველა h1 ელემენტი დოკუმენტში ავტომატურად გადაიქცევა წითლად, ყოველგვარი მკაფიო კოდის გარეშე. თუ ავტორს შემდეგ მოესურვება რომ h1 სათაურები გაალურჯოს, ამის გასაკეთებლად მას დასჭირდება სტილის ელემენტის შეცვლად:

<style>
h1 {
    color: blue;
}
</style>

იმის ნაცვლად, რომ საგულდაგულოდ ეძება მთელ დოკუმენტში h1 ელემენტები და სათითაოდ შეეცვალა მათი ფერი. სტილი ასევე შეიძლება მოთავსდეს გარე CSS ფაილში, როგორც ეს ნაჩვენებია ქვედა მაგალითში და ჩატვირთონ შემდეგნაირი სინტაქსით:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

სტილის ცალკე ფაილად გატანა კიდევ უფრო აშორებს საპრეზენტაციო სტილს და HTML-სტრუქტურას ერთმანეთისგან და შესაძლებლობას იძლევა მრავალი დოკუმენტის სტილი შეიცვალოს მარტივად, საზიარო გარე CSS-ფაილის რედაქტირებით.

წყაროები

CSS-ის ინფორმაცია შესაძლებელია მოწოდებულ იქნას სხვადასხვა წყაროდან, ესენი შეიძლება იყოს ვებ-ბრაუზერი, მომხმარებელი, ან ავტორი. ავტორისეული ინფორმაციის შემდგომი კლასიფიცირება შესაძლებელია ჩაშენებულობით, მნიშვნელობით, მედია-ტიპით, სელექტორის (სელექტორის) სპეციფიკურობით, წესის მიმდევრობით, მემკვიდრეობითა და თვისების განსაზღვრებით. CSS-ის შესახებ ინფორმაცია შეიძლება ჩაშენებული იყოს HTML-დოკუმენტში , ან წარმოდგენილი იყოს ცალკე დოკუმენტის სახით. შესაძლებელია მრავალი სტილთა ფურცლების იმპორტირება. განსხვავებული სტილები შეიძლება იყოს გამოყენებული იმის მიხედვით, თუ რა მოწყობილობა გამოიყენება გამოსატანად; მაგალითად, საეკრანო სტილი შეიძლება მნიშვნელოვნად განსხვადებოდეს საბეჭდი ვერსიისგან, ამდენად, ავტორს შესაძლებლობა აქვს მოარგოს სტილი თითოეულ საშუალებას.

ყველაზე მაღალი პრიორიტეტის მქონე სიტილის ფურცელი მართავს კონტენტის გამოსახულებას. გამოცხადებები, რომლებიც არ არიან მითითებული წყაროს მაღალ პრიორიტეტეში, გადიან დაბალი პრიორიტეტის წყაროში, მაგალითად, მომხმარებლის აგენტის სტილში. ასეთ პროცესს ეწოდება კასკადური.

CSS-ის ერთ-ერთი მიზანია მომხმარებლისთვის წარდგენაზე მეტი კონტროლის დაშვება. დავუშვათ, თუ ვინმესთვის რთულად აღსაქმელია წითელი გაკრული ასოებით დაწერილი სათაურები, მას საშუალება აქვს კონტენტს მოარგოს წარდგენის სხვა სტილი. ბრაუზერზე და ვებ-საიტზე დამოკიდებულობით, მომხმარებელს შეუძლია აირჩიოს დიზაინერის მიერ მოწოდებული სტილებიდან, ან სრულად ამოიღოს დამატებული სტილები და კონტენტი იხილოს ბრაუზერის საწყისი სტილების გამოყენებით, ან შეიძლება თავი აარიდოს წითელი გაკრული წყობით დაწერილი სათაურების სტილს სხვა ატრიბუტების შეცვლის გარეშე.

CSS-ის პრიორიტეტულობის სქემა (მაღლიდან დაბლისკენ)

პრიორიტეტი	CSS-ის წყაროს ტიპი	აღწერა
1	მნიშვნელობა	განსაზღვრება "code=!important" გადაწერს პრიორიტეტის მომდევნო ტიპებს.
2	ჩაშენებულობა	სტილი, რომელიც HTML-ელემენტს ენიჭება HTML-ატრიბუტის გამოყენებით.
3	მედია-ტიპი	თვისების განსაზღვრება გამოიყენება ყველა მედია-ტიპისვის, თუ არ არის განსაზღვრული მედია-სპეციფიკური CSS
4	მომხმარებლის განსაზღვრული	ბრაუზერების უმეტესობას აქვს ხელმისაწვდომი ფუნქცია: მომხმარებლის განსაზღვრული CSS
5	სელექტორისსპეციფიკურობა	კონკრეტული კონტექტური სელექტორი (code=#heading p) გადაწერს ზოგად განსაზღვრებას
6	წესის მიმდევრობა	ბოლო გამოცხადებულ წესს აქვს უფრო მაღალი პრიორიტეტი
7	მშობლის მემკვიდრეობა	თუ თვისება არ არის განსაზღვრული, იგი მემკვიდრეობით მიიღება მშობელი ელემენტისგან
8	CSS-თვისების განსაზღვრება HTML-დოკუმენტში	CSS-წესი ან CSS ხაზისშიდა სტილი გადაწერს ბრაუზერის საწყის მნიშვნელობა
9	ბრაუზერის საწყისი	ყველაზე დაბალი პრიორიტეტი: ბრაუზერის საწყისი მნიშვნელობა დადგენილია W3C-ის საწყისი მნიშვნელობების სპეციფიკაციებით

სპეციფიკურობა

სპეციფიკურობა განსაზღვრავს სხვადასხვა წესის ფარდობით წონას. იგი საზღვრავს თუ რომელი წესი უნდა იქნას გამოყენებული ელემენტზე, ერთზე მეტი წესის არსებობის შემთხვევაში. სპეციფიკურობაზე დაყრდნობით, უბრალო სელექტორს (მაგ.,̇H1) აქვს სპეციფიკურობა "1", კლასის სელექტორებს — 1,0, ხოლო იდენტიფიკატორის (ID) სელექტორებს — 1,0,0. ვინაიდან სპეციფიკურობის მნიშვნელობები არ გადაიტანება ისე, როგორც ეს ათობით სისტემაშია, ციფრების გასაყოფად გამოიყენება მძიმის ნიშნები (,). მაგალითად, 11 ელემენტისგან და 11 კლასისგან შემდგარ CSS-წესს ექნება სპეციფიკურობა 11,11 და არა 121.

ამდენად, შემდეგი წესების სელექტორებს მივყავართ ნაჩვენებ სპეციფიკურობამდე:

სელექტორი	სპეციფიკურობა
H1 {color: white;}	0, 0, 0, 1
P EM {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
P.bright {color: blue;}	0, 0, 1, 1
P.bright EM.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

მაგალითი

ვთქვათ, გვაქვს შემდეგი HTML მონაკვეთი:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    #xyz { color: blue; }
    </style>
  </head>
  <body>
    <p id="xyz" style="color: green;">სანიმუშო პარაგრაფი სპეციფიკურობის საჩვენებლად</p>
  </body>
</html>

ზედა მაგალითში, <p> ელემენტის style ატრიბუტის განსაზღვრება გადაწერს <style> ელემენტის განსაზღვრებას, ვინაიდან მას აქვს უფრო მაღალი სპეციფიკურობის ხარისხი, ამიტომ პარაგრაფი იქნება მწვანე ფერის.

მემკვიდრეობითობა

მემკვიდრეობითობა CSS-ის საკვანძო შესაძლებლობაა; იგი ეყრდნობა წინაპარსა და შთამომავალს შორის ურთიერთობებს. მემკვიდრეობითობის წყალობით, თვისებები მოქმედებენ გამოიყენება არა მხოლოდ კონკრეტულ ელემენტზე, არამედ მის შთამომავლებზეც. მემკვიდრეობითობა ემყარება დოკუმენტის ხეს, რომელიც, თავისმხრივ, არის გვერდში არსებული XHTML ელემენტების იერარქია, რომელიც ეფუძნება ერთმანეთში მოთავსებულობას. შთამომავალი ელემენტებს შეუძლიათ მემკვიდრეობით მიიღონ CSS თვისების მნიშვნელობა ნებისმიერი წინაპრისგან, რომელიც მას გარს ერტყმის. როგორც წესი, შთამომავალი ელემენტები მემკვიდრეობით იღებენ ტექსტობრივ თვისებებს, თუმცა წინაპრის ბლოკთან დაკავშირებული თვისებები მათზე არ გადადის. თვისებები რომელიც შეიძლება მემკვიდრეობით გადაცემულ იქნას არის ფერი (color), ფონტი (font), ასოთშორისი მანძილი (letter-spacing), ხაზის სიმაღლე (line-height), ხაზის სტილი (list-style), ტექსტის სწორება (text-align), ტექსტის შეწევა (text-indent), ტექსტის გარდაქმნა (text-transform), ხილვადობა (visibility), თეთრსივრცე (white-space) და სიტყვათშორისი მანძილი (word-spacing). თვისებები, რომელიც არ გადაიცემა მემკვიდრეობით არის: background, border, display, float, clear, height, width, margin, min-height, max-height, min-width, max-width, outline, overflow, padding, position, text-decoration, vertical-align, z-index.

მაგალითი

მომოცემულია სტილის შემდეგი ფურცელი:

h1 {
   color: pink;
}

ვთქვათ შიგნით მასში არსებობს ელემენტი h1 მააქცენტირებელი ელემენტით (em)

<h1>
   ეს ტექსტი <em>აჩვენებს</em> მემკვიდრეობითობას
</h1>

თუ ელემენტისთვის არ იქნება განსაზღვრული ფერი, აქცენტირებული სიტყვა „აჩვენებს“ მემკვიდრეობით იღებს h1 მშობელი ელემენტის ფერს. h1 ელემენტს სტილის ფურცელში განსაზღვრული აქვს ვარდისფერი ფერი, აქედან გამომდინარე, em ელემენტიც ასევე ვარდისფერი იქნება.

თეთრსივრცე

თვისებებსა და სელექტორებს შორის თეთრსივრცე უგულვებელყვება. კოდის ეს სნიპეტი:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

იგივეა რაც:

body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

CSS-კოდის კითხვადობის გასაიოლებლად, ფორმატირებისას მიღებულია, რომ თითოეული თვისება შეიწიოს და მიეცეს მას საკუთარი სტრიქონი. კითხვადობისათვის CSS-ფორმატირების გარდა, შემოკლებული თვისებები ხელს უწყობს კოდის სწრაფ წერას, და ასევე უფრო სწრაფად მუშავდება წარმოდგენის აწყობისას:

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

პოზიციონირება

CSS 4.0 განსაზვრავს პოზიციონირების ოთხ სქემას:

ნორმალური

ნორმალური ნაკადით (Normal flow) სასტრიქონო (Inline) ელემენტები განლაგდება ისევე, როგორც სიტყვების ასოები ტექსტში, ერთმანეთის მიმდევრობით ხელმისაწვდომი სივრცეში, სანამ ადგილი არ ამოიწურება, რომლის მიშწევის შემდეგ იწყება ახალი სტრიქონი ქვემოთ. ბლოკური ელემენეტები განლაგდება შვეულად, როგორც პარაგრაფები, ან როგორც ელემენტები ბულიტიან სიაში. ნორმალური ნაკადი ასევე მოიცავს ბლოკური ან სასტრიქონო ელემენტების, და run-in ბლოკების ფარდობით პოზიციონირებას.

მცურავი

მცურავი (Float) თვისების მქონე ობიექტი ამოიღება ნორმალური ნაკადიდან და იძვრის ხელმისაწვდომ სივრცეში მარცხნივ ან მარჯვნივ, რაც შესაძლებელია შორს. შემდგომ, დანარჩენი კონტენტი მიუყვება ნაკადს მცურავი ობიექტის გასწვრივ.

აბსოლუტური

აბსოლუტურად პოზიციონირებულ ელემენტს არ აქვს ადგილი და სხვა ელემენტების ნორმალურ ნაკადში და არ ზემოქმედებს მათზე. აბსოლუტური ელემენტი იკავებს მისთვის მიკუთვნებულ ადგილს თავის კონტეინერში სხვა ელემენტებისაგან დამოუკიდებლად.

მწებარე

მწებარე sticky ელემენტს აქვს ფარდობითად პოზიციონირებული ელემენტის თვისება, სანამ მისი შემცველი ბლოკი არ გადალახავს დაწესებულ ზღვარს ნაკადში (მაგალითად, top-ის მნიშვნელობა განსხვავებული auto-სგან), რის შემდეგ იგი იძენს „გაჭედილის“ თვისებას იქამდე სანამ არ გადაეყრება მისი შემცველი ბლოკის საწინააღმდეგო გვერდს.

პოზიციის თვისება

პოზიციის position თვისებას აქვს ხუთი შესაძლო მნიშვნელობა. თუ ელემენტი პოზიციონირებულია ნებისმიერი სახით გარდა სტატიკურისა static, ასეთ შემთხვევაში, დამატებითი თვისებები top, bottom, left, right გამოიყენება ძვრისა და მდებარეობის განსასაზღვრად.

სტატიკური

საწყისი მნიშვნელობა static ათავსებს ელემენტს ნორმალურ ნაკადში.

ფარდობითი

მნიშვნელობა ̇relative ათავსებს ელემენტს ნორმალურ ნაკადში და შემდგომ ძრავს ან ანაცვლებს ამ პოზიციიდან. ნაკადის შემდგომი ელემენტები იმგვარად ლაგდება, როგორც ეს იქნებოდა ელემენტის არ გადაადგილების შემთხვევაში.

აბსოლუტური

მნიშვნელობა absolute განსაზღვრავს აბსოლუტურ პოზიციონირებას და ელემენტს ათავსებს მის უახლოეს არასტატიკურ წინაპართან დამოკიდებულებით. აბსოლუტურად პოზიციონირებული ელემენტი არ მონაწილეობს ნორმალურ ნაკადში. თუ absoluteმნიშვნელობის მქონე ელემენტს არ აქვს ფარდობითად პოზიციონირებული წინაპარი ელემენტი, მაშინ ეს ელემენტი თავსდება საწყის ბლოკში. ასეთი ელემენტის საბოლოო მდებარეობა განისაზღვრება top, bottom, left და right მნიშვნელობებით.

დამაგრებული

fixed მნიშვნელობის მქონე ელემენტი თავსდება უძრავ პოზიციაზე ეკრანზე, და ელემენტი რჩება ეკრანის მოცემულ ადგილას დანარჩენი დოკუმენტის ამოძრავების მიუხედავად. ასეთი ელემენტი ამოვარდება ნორმალური ნაკადიდან და პოზიციონირდება საწყის შემცველი ბლოკთან დამოკიდებულებით, გარდა იმ შემთხვევისა, როდესაც ერთ-ერთ მის წინაპარს აქვს transform, perspective, ან filter თვისება რომლის მნიშვნელობა არ არის none.

მწებარე

ელემენტი sticky მნიშვნელობით პოზიციონირდება დოკუმენტის ნორმალური ნაკადის შესაბამისად, შემდეგ იძვრის უახლოეს მიძრავ წინაპართან და შემცველ ბლოკთან (უახლოესი მშობელი ბლოკი) მიმართებით. ძვრას არ აქვს გავლენა სხვა ელემენეტების მდებარეობაზე.

Float და Clear თვისებები

თვისებას float შესაძლებელია რომ ჰქონდეს სამი მნიშვნელობა. აბსოლუტური და დამაგრებული ელემენტებს ვერ ექნებათ float თვისება. სხვა ელემენტები ჩვეულებრივ, „დაცურავენ“ მცურავი ელემენტების ირგვლივ, თუ ეს შეზღუდული არ არის clear თვისებით.

left

ელემენტი მოძრაობს იმ ხაზის მარცხენა მხარეს, რომელშიც იგი უნდა იმყოფებოდეს. სხვა ელემენტები შესაძლებელია მოძრაობდნენ მარჯვენა მხარეს.

right

ელემენტი მოძრაობს იმ ხაზის მარჯვენა მხარეს, რომელშიც იგი უნდა იმყოფებოდეს. სხვა ელემენტები შესაძლებელია მოძრაობდნენ მარცხენა მხარეს.

clear

თვისება clearმიუთითებს, შეუძლია თუ არა ელემენტს იყოს მცურავი float ელემენტების გვერდით, რომლებიც წინ უძღვიან მას, თუ უნდა მოხდეს მათი გადატანა მათ ქვეშ (გასუფთავდნენ). clear თვისების გამოყენება შესაძლებელია როგორც მცურავ ასევე არამცურავ ელემენტებზე.

ისტორია

CSS პირველად შემოთავაზებულ იქნა ჰოკონ ვიუმ ლის მიერ 1994 წლის 10 ოქტომბერს. იმ დროს, ჰოკონ ლი მუშაობდა ტიმ ბერნერს-ლისთან ერთად CERN-ში. იმავდროულად, არსებობდა სტილთა ფურცლების რამდენიმე სხვა ენის შემოთავაზება და საჯარო და W3C-ის შიდა დისკუსიების შედეგად შემუშავდა W3C-ის პირველი რეკომენდაცია CSS-თან დაკავშირებით (CSS1), რომელიც გამოქვეყნდა 1996 წელს. განსაკუთრებული გავლენა მასზე მოახდინა ბერტ ბოსის შეთავაზებამ; იგი გახდა CSS1-ის თანაავტორი და ითვლება CSS-ის თანაშემოქმედად.

ჰოკონ ვიუმ ლი — Opera Software-ის ტექნიკური დირექტორი და CSS-სტანდარტის თანაავტორი.

სხვადასხვა ფორმით სტილთა ფურცლები არსებობდა 1980-იანებიდან SGML-ის შექმნასთან ერთად, ხოლო CSS შეიქმნა სტილთა ფურცლების ვებში გამოსაყენებლად. ერთ-ერთი მოთხოვნა, რომელიც წაყენებული იყო ვების სტილთა ფურცლების ენის მიმართ იყო სტილების ფურცლების სხვადასხვა ვებ-რესურსიდან გამოყენების შესაძლებლობა. ამის გამო, არსებული ენები, როგორებიცაა DSSSL და FOSI გამოუდეგარი იყო. მეორე მხრივ, CSS იძლეოდა შესაძლებლობას დოკუმენტის სტილისთვის გამოყენებული ყოფილიყო სტილების მრავალი ფურცელი, „კასკადური“ გზით.

HTML-ის ზრდასთან ერთად, საჭირო გახდა სტილისტური შესაძლებლობების უფრო ფართო სპექტრის მოცვა, ვებ-შემმუშავებლების მოთხოვნების დასაკმაყოფილებლად. ასეთი განვითარება, დიზაინერს ვებ-გვერდის იერსახეზე უფრო მეტ კონტროლს აძლევდა, თუმცა ამის ფასი იყო გართულებული HTML-კოდი.

დანერგვის ნაირსახეობებმა ისეთ ვებ-ბრაუზერებში, როგორიც იყო ViolaWWW და WorldWideWeb, საიტის ერთფეროვანი იერის წარმოდგენა გაართულა, მომხმარებლებს ნაკლები კონტროლი ჰქონდათ ვებ-კონტენტის ეკრანზე გამოსახვაზე. ტიმ ბერნელს-ლის დაწერილ ბრაუზერს/რედაქტორს სტილის ფურცლები ჩაშენებული ჰქონდა პროგრამის კოდში. აქედან გამომდინარე, სტილების მიბმა ვებ-დოკუმენტზე ვერ მოხდებოდა. რობერტ კაიოს, რომელიც ასევე CERN-დან იყო, სურდა გამოეყო საიტის წარმოდგენის კომპონენტები საიტის სტრუქტურიდან, რაც საშუალებას იძლეოდა დოკუმენტის წარმოდგენა სხვადასხვა საჭიროებისთვის აღწერილიყო სხვადასხვა სტილით — ბეჭდვისთვის, საეკრანოდ და რედაქტორისთვის.

ვებ-წარმოდგენის შესაძლებლობების გაუმჯობესება ვებ-საზოგადოების დიდი ნაწილის ინტერესთა საგანს წარმოადგენდა და ვებ-საფოსტო დაგზავნის ხერხით შეთავაზებულ იქნა ცხრა განსხვავებული სტილთა ფურცლების ენა. ამ ცხრიდან ორმა მნიშვნელოვანი გავლენა მოახდინა საბოლოო CSS-ზე: HTML-სტილთა კასკადირებადი ფურცლები (Cascading HTML Style Sheets) და ნაკადზე დაფუძნებული სტილთა ფურცლების შეთავაზება (Stream-based Style Sheet Proposal - SSP). საწყისი პროექტების ტესტირებისთვის გამოიყენებოდა ორი ბრაუზერი: ლი მუშაობდა ივ ლაფონთან ერთად CSS-ის დასანერგად დეივ რეგეტის ბრაუზერში Arena. ბერტ ბოსმა საკუთარი SSP პროექტი დანერგა ბრაუზერში Argo. ამის შემდეგ, ლი და ბოსი ერთად მუშაობდნენ CSS-სტანდარტის შემუშავებაზე. სტანდარტის სახელს გამოაკლდა ასობგერა „H“, რადგან CSS-ის გამოყენება HTML-ის გარდა შესაძლებელია მონიშვნის სხვა ენებთანაც.

ლის შეთავაზება წარმოდგენილ იქნა 1994 წელს ჩიკაგოს ქალაქ ილინოესში გამართულ კონფერენციაზე „Mosaic and the Web“ (რომელსაც შემდგომ ეწოდა WWW2), შემდეგ კი ხელმეორედ ბერტ ბოსთან ერთად 1995 წელს. ამ დროისთვის უკვე დაფუძნებული იყო W3C რომელიც CSS-ის შემუშავებისადმი დაინტერესებას გამოხატავდა. W3C-მ ამ მიზნით გამართა ვორკშიპი, რომელსაც ხელმძღვანელობდა სტივენ პემბერტონი, რომლის შედეგად, W3C-მ CSS-ზე მუშაობის საკითხი ჩაამატა HTML-ის რედაქციული საბჭოს მუშაობის შედეგებში. ლი და ბოსი ამ კითხით იყვნენ მთავარი ტექნიკური პერსონალი პროექტში, რედაქციის წევრებთან ერთად, რომელთა შორის იყო Microsoft-ის წარმომადგენელი თომას რირდონი. 1996 წლის აგვისტოში კმომპანია Netscape Communication Corporation-მა წარმოადგინა სტილის ალტერნატიული ენა, რომელსაც უწოდეს JavaScript Style Sheets (JSSS). JSSS-ის პროექტი არ იქნა დასრულებული და მოძველდა. 1996 წლის დასასრულს CSS მზად იყო გამხდარიყო ოფიციალური და გამოქვეყნდა რეკომენდაცია CSS დონე 1.

HTML-ის, CSS-ის და DOM-ის შემუშავებას ახორციელებდა ერთი ჯგუფი, HTML Editorial Review Board (ERB). ადრეულ 1997 წელს, ERB დაიყო სამ სამუშაო ჯგუფად: HTML-ის სამუშაო ჯგუფი დენ კონოლის ხელმძღვანელობით W3C-დან; DOM-ის სამუშაო ჯგუფი ლორენ ვუდის ხელმძღვანელობით SoftQuad-დან; და CSS-ის სამუშაო ჯგუფი კრის ლილის ხელმძღვანელობით W3C-დან.

CSS-ის სამუშაო ჯგუფმა დაიწყო იმ პრობლემების მოგვარებაზე მუშაობა, რომელიც CSS დონე 1-ში არ გადაიჭრა, რის შედეგადაც 1997 წლის 4 ნოემბერს შეიქმნა CSS დონე 2, რომელიც W3C-ის რეკომენდაციის სახით გამოქვეყნდა 1998 წლის მაისში. იმავე 1998 წელს დაიწყო მუშაობა CSS დონე 3-ზე და 2021 წლისათვის კვლავ დამუშავების პროცესშია.

2005 წელს CSS-ის სამუშაო ჯგუფმა გადაწყვიტა, რომ მოთხოვნები სტანდარტებისადმი გაემკაცრებინა. ეს ნიშნავდა, რომ უკვე გამოქვეყნებული სტანდარტები CSS 2.1, CSS 3 Selectors და CSS 3 Text გამოხმობილ იქნა კანდიდატი რეკომენდაციების დონიდან სამუშაო პროეტის დონეზე.

სირთულეები მიღებისას

CSS 1-ის დაზუსტების სამუშაოები დასრულდა 1996 წელს. ამავე წელს გამოშვებულ იქნა Microsoft-ის ბრაუზერი Internet Explorer, რომელსაც CSS-ის შეზღუდული მხარდაჭერა ჰქონდა. Internet Explorer 4 და Netscape 4.x ვერსიებში ბრაუზერებში CSS-ის მხარდაჭერა გაფართოვდა, თუმცა ეს იყო არასრული მხარდაჭერა, ამასთან მოცული იყო შეცდომებითა და ხელს უშლიდან CSS-ის სრულყოფილ გამოყენებას. თითქმის სრული მხარდაჭერის მქონე პირველი ბრაუზერი გამოვიდა CSS-ის შემუშავებიდან სამი წლის შემდეგ. Internet Explorer 5.0 ვერსიის ბრაუზერი Macintosh-ის სისტემაზე, რომელიც გამოვიდა 2000 წლის მარტში, იყო პირველი, რომელსაც CSS 1-ის სრული მხარდაჭერა გააჩნდა (99%-ზე მეტი); ამით მან ჩამოიტოვა Opera, რომელიც ლიდერი იყო ამ საკითხში მას შემდეგ რაც თხუთმეტი თვით ადრე გამოქვეყნდა პირველად CSS. კვალდაკვალ, მხარდაჭერა გაჩნდა სხვა ბრაუზერებშიც, მრავალმა მათგანმა კი, დამატებით CSS 2 ვერსიის ნაწილებიც დანერგა.

ამისდა მიუხედავად, როდესაც მე-5 ვერსიის ბრაუზერებში CSS-ს თითქმის სრული დანერგვა მოხდა, ზოგიერთ საკითხში კვლავ არსებობდა შეცდომები, შეუსაბამობები, შეუთავსებლობები და სხვა ხარვეზები. ასე მაგალითად, Windows სისტემისათვის გამოშვებულ Microsoft Internet Explorer 5.x ვერსიის ბრაუზერს, Macintosh სისტემისათვის გამოშვებული Microsoft Internet Explorer-საგან განსახვავებით, CSS სტანდარტთან შეუსაბამოდ ჰქონდა რეალიზებული CSS-ის ბლოკური მოდელი. ახალი შესაძლებლობების მხარდაჭერის მსგავსი შეუთავსებლობების და განსხვავებულობის გამო, ვებ-რესურსების შემმუშავებლებისათვის რთულად მიღწევადი იყო სტანდარტული ხელსაწყოებით ყველა პლატფორმასა და ბრაუზერში ერთნაირი შედეგის და კორექტული მუშაობის უზრუნველყოფა სხვადასხვა ხრიკის გამოყენების გარეშე, რომელსაც უწოდებდნენ CSS-ჰაკებს და ფილტრებს. IE-ს Windows ვერსიაში ბლოკის მოდელში შეცდომები იმდენად სერიოზული იყო, რომ IE 6 ვერსიაში Microsoft-მა შესწორებულ „სტანდარტულ მოდელთან“ ერთად უკუთავსებადობა დანერგა წინა ვერსიის „შეცდომიან“ IE-ს ვერსიასთან, ამდენად IE-6-ში შესაძლებელი იყო როგორც სტანდარტული CSS ფუნქციონალის გამოყენება, ასევე წინა ვერსიებში არასწორად რეალიზებული ფუნქციონალის გამოყენებაც. მსგავსი „ხრიკების რეჟიმი“ არსებობდა სხვა მწარმოებლების ბრაუზერებშიც. ამის გამო, HTML ფაილების ავტორებისათვის საჭირო გახდა მკაფიოდ მიეთითებინათ რომ სსურდათ სტანდარტული CSS ვერსიის გამოყენება სპეციალური „სტანდარტთან შესაბამისობის“ მარკერის გამოცხადებით, რომელიც ბრაუზერს უთითებდა, რომ ავტორების განზრახვით გვერდი გამართულად ინტერპრეტირდება სტანდარტული CSS-ის შესაბამისად, და არ არის განკუთვნილი მოძველებული IE 5/Windows ვერსიის ბრაუზერთან სამუშაოდ. ამ მარკერის გარეშე, ის ვებრაუზერები, რომელშიც არსებობდა „ხრიკების რეჟიმი“, CSS სტანდარტების მიხედვით ინტერპრეტირების მაგივრად, ვებ-გვერდების ობიეტების ზომებს გაზრდიან, როგორც ეს IE 5-ის Windows ვერსიაში ხდება.

CSS-ის არაერთგაროვანი დანერგვის და თავად სტანდარტში შეცდომების გამო, W3C იძულებული გახდა CSS 2 ვერსიის შემდეგ გამოექვეყნებინა CSS 2.1 ვერსია, რომელიც დაახლოვდა თანამედროვე HTML ბრაუზერებში CSS-ის მხარდაჭერის ფორმატთან. CSS 2-ის ზოგიერთი შესაძლებლობა, რომელიც რომელიმე ბრაუზერში ვერ იქნა წარმატებით დანერგილი, ამოღებულ იქნა, ხოლო ზოგიერთ შემთხვევაში, ამ შესაძლებლობათა ქცევა შეიცავალა იმგვარად, რომ სტანდარტი შესაბამისობაში ყოფილიყო არსებულ დომინანტურ რეალიზაციებთან. 2004 წლის 25 თებერვალში CSS 2.1 რეკომენდაციის კანდიდატი გახდა, თუმცა 2005 წლის 13 ივნისს CSS 2.1 დაბრუნებულ იქნა სამუშაო პროექტის სტადიაზე. რეკომენდაციის კანდიდატის სტატუსი CSS 2.1-მა ხელმეორედ მიიღო მხოლოდ 2007 წლის 19 ივლისს.

ამ პრობლემების გარდა, .css გაფართოება გამოიყენებოდა პროგრამულ უზრუნველყოფაში, რომელიც PowerPoint-ის ფაილებს გარდაქმნიდა Compact Slide Show ფაილად, და ამის გამო, ზოგიერთი ვებ-სერვერი ყველა .css ფაილს ემსახურებოდა როგორც application/x-pointplus MIME-ტიპის მონაცემს, text/css ტიპის ნაცვლად.

ვენდორების თავსართები

სტანდარტის განსაზღვრამდე და უნივერსალიზაციამდე, ბრაუზერების მწარმოებლები დრო და დრო ინდივიდუალურად ნერგავდნენ ახალ პარამეტრებს და შესაძლებლობებს. იმისათვის რომ თავიდან აერიდებინათ სამომავლო სტანდარტიზებულ რეალიზაციებთან კონფლიქტი, ბრაუზერების შემმუშავებლები პარამეტრების სახელებში უნიკალურ თავსართს უმატებდნენ. ასე მაგალითად, Mozilla Firefox-ის პარამეტრების სახელში პარამეტრის სახელს ემატებოდა პრეფიქსი -moz-, Apple Safari-ის ძრავზე მომუშავე ბრაუზერში ამატებდნენ -webkit-, Opera-ს პარამეტრების პრეფიქსი იყო -o-, ხოლო Internet Explorer-ის შემთხვევაში უწერდნენ -ms-.

ზოგიერთ შემთხვევში, მწარმოებლის პრეფიქსიანი პარამეტრების სინტაქსი გარკვეულწინად განსხვავდება მათი სტანდარტიზებული ანალოგებისაგან, მაგალითად ასეა -moz-radial-gradient და -webkit-linear-gradient შემთხვევაში.

სტანდარტის დანერგვასთან ერთად პრეფიქსიანი თვისებები რუდიმენტული ხდება. პროგრამებს შეუძლიათ ავტომატურად დაამატონ პრეფიქსები ძველი ბრაუზერებისთვის და მიუთითონ პარამეტრების სტანდარტიზებული ვერსიები. ვინაიდან პრეფიქსები ბრაუზერების მცირე ჯგუფის შემთხვევაში არსებობს, თვისებიდან პრეფიქსის მოცილების გზით ფუნქციონალის დანახვა და გამოყენება სხვა ბრაუზერებსაც შეუძლიათ. გამონაკლისია -webkit- თავსართიანი ზოგიერთი მოძველებული თვისება, რომლებიც იმდენად გავრცელებული და მდგრადია ვებში, რომ თავსებადობისათვის ბრაუზერების სხვა ოჯახებშიც დაინერგა მათი მხარდაჭერა.

ვარიანტები

CSS აქვს განსხვავებული დონეები და პროფილები. თითოეული CSS დონე დაშენებულია წინამორბედ დონეზე, და ძირითადში ამატებს ახალ პარამეტრებს და აღინიშნება როგორც CSS 1, CSS2, CSS3 და CSS4. პროფილი არის ერთი ან რამდენიმე CSS დონის ქვესიმრავლე , რომელიც შექმნილია კონკრეტული მოწყობილობისათვის ან მომხმარებლის ინტერფეისისათვის. ამჟამად არსებობს პროფილები მობილური მოწყობილობებისათვის, პრინტერებისათვის და ტელევიზორებისათვის. პროფილები არ უნდა არეულ იქნას მულტიმედიურ ტიპებთან, რომელიც CSS 2-ში გახდა მხარდაჭერილი.

CSS 1

CSS-ის სპეციფიკაციების პირველი ვერსია, რომელმაც მიიღო W3C-ის ოფიციალური რეკომენდაციის სტატუსი, არის CSS დონე 1, რომელიც 1996 წლის 17 დეკემბერს გამოქვეყნდა. მის თავდაპირველ შემმუშავებლებად ითვლებიან ჰოკონ ვიუმ ლი და ბერტ ბოსი. სხვადასხვა შესაძლებლობათა შორის, მხარდაჭერილია:

• ფონტის თვისებები, როგორიცაა გარნიტურა და აქცენტირება
• ტექსტის ფერი, ფონი და სხვა ელემენტები
• ტექსტის ატრიბუტები, როგორიცაა დაშორება სიტყვებს, ასოებს და ხაზებს შორის ტექსტში
• ტექსტის, სურათების, ცხრილების და სხვა ელემენტების სწორება
• გარე (margin) და შიდა (padding) დაშორებები, საზღვრები და პოზიციონირება უმეტესი ელემენტებისათვის
• ატრიბუტების ჯგუფებისათვის უნიკალური იდენტიფიკაცია და საერთო კლასიფიკაცია

კონსორციუმი W3C აღარ ახორციელებეს CSS 1 ვერსიის რეკომენდაცის მხარდაჭერას.

CSS 2

CSS 2 დონის სპეციფიკაციები შემუშავდა W3C-ს მიერ და გამოქვეყნდა რეკომენდაციის სტატუსით 1998 წლის მაისში. როგორც CSS 1 ვერსიის ზესიმრავლე, CSS 2 მოიცავს ახალ შესაძლებლობებს, როგორიცაა ელემენტების აბსოლუტური, ფარდობითი და ფიქსირებული პოზიციონირება, z-ინდექსი, მულტიმედია-ტიპების კონცეფცია, ხმოვანი სტილების (რომელიც CSS 3-ში ჩანაცვლდა მეტყველების მოდულებით) და ორმხრივი ტექსტის მხარდაჭერა, დაემატა ფონტის ახალი თვისებები, როგორციაა ჩრდილები.

კონსორციუმი W3C აღარ ახორციელებეს CSS 2 ვერსიის რეკომენდაცის მხარდაჭერას.

CSS 2.1

CSS დონე 2 ვერსია 1, ხშირად მოიხსენიება როგორც „CSS 2.1“, მასში აღმოიფხვრა ხარვეზები, რომლებიც აღმოჩენილ იქნა CSS 2 ვერსიაში, ამოღებულ იქნა ცუდად მხარდაჭერილი ან არასრულად თავსებად შესაძლებლობები, და დაემატა ბრაუზერის გაფართოებების სპეციფიკაცია, რომელიც უკვე რეალიზებული იყო. რათა შეესაბამებოდეს W3C-ის ტექნიკური სპეციფიკაციების სტანდარტიზაციის პროცესს, CSS 2.1 რამდენიმე წლის მანძილზე მრავალჯერ შეიცვალა სტატუსი სამუშაო პროექტიდან რეკომენდაციის კანდიდატობაზე და პირიქით. CSS 2.1 პირველად რეკომენდაციის კანდიდატი გახდა 2004 წლის 25 თებერვალს, მაგრამ შემდგომი გადახედვის მიზნით დაბრუნებულ იქნა სამუშაო პროექტის სტადიაზე 2005 წლის 13 ივნისს. რეკომენდაციის კანდიდატის სტადიაზე განმეორებით CSS 2.1 დაბრუნდა 2007 წლის 19 ივლისს, შემდეგ 2009 წელს ორგზის განახლებულ იქნა. თუმცაღა, ვინაიდან შეტანილი იყო ცვლილებები და დაზუსტებები, კვლავ დაბრუნებლ იქნა სამუშაო პროექტის სტადიაზე 2010 წლის 7 დეკემბერს.

CSS 2.1 შეთავაზებული რეკომენდაციის სტადიაზე გადავიდა 2011 წლის 12 აპრილს. საბოლოოდ, W3C სამრჩევლო კომიტეტის მიერ განხილვის შემდეგ CSS 2.1 გამოქვეყნდა W3C რეკომენდაციის სახით 2011 წლის 7 ივნისს.

იგეგმებოდა, რომ CSS 2.1 იქნებოდა მე-2 დონის პირველი და უკანასკნელი რევიზია, — თუმცა, 2015 წელს დაიწყო მუშაობა დაბალი პრიორიტეტის მქონე CSS 2.2-ზე.

CSS 3

CSS 2 ვერსიისაგან განსხვავებით, რომელიც სხვადასხვა შესაძლებლობების აღმწერი ერთი დიდი სპეციფიკაციაა, CSS 3 დაყოფილია რამდენიმე ცალკეულ დოკუმენტად — „მოდულად. თითოეული მოდული ამატებს ახალ შესაძლებლობებს, ან აფართოვებს არსებულს, რომელიც აღწერილია CSS 2-ში, უკუთავსებადობის შენარჩუნებით. მუშაობა CSS 3 დონეზე დაიწყო CSS 2 დონის რეკომენდაციის გამოქვეყნების დროს. CSS 3-ის ყველაზე ადრეული პროექტი გამოქვეყნდა 1999 წლის ივნისში.

მოდულურობის გამო, სხვადასხვა მოდულს გააჩნია განსხვავებული სტაბილურობა და სტატუსი.

ზოგიერთ მოდულს აქვს რეკომენდაციის კანდიდატის (რკ) სტატუსი და ითვლება შედარებით სტაბილურად. „რკ“ სტადიაზე ვენდორებზე გაიცემა მწარმოებლის თავსართის მოცილების რეკომენდაცია.

ძირითადი მოდულის სპეციფიკაციების კრებსი

მოდული	სპეციფიკაციის დასახელება	სტატუსი	თარიღი
css3-background	CSS Backgrounds and Borders Module Level 3	რეკომენდაციის კანდიდატი	2020, დეკემბერი
css3-box	CSS basic box model	რეკომენდაციის კანდიდატი	2020, დეკემბერი
css-cascade-3	CSS Cascading and Inheritance Level 3	რეკომენდაცია	2021, თებერვალი
css3-color	CSS Color Module Level 3	რეკომენდაცია	2018, ივნისი
css3-content	CSS3 Generated and Replaced Content Module	სამუშაო პროექტი 2	2019, აგვისტო
css-fonts-3	CSS Fonts Module Level 3	რეკომენდაცია	2018, სექტემბერი
css3-gcpm	CSS Generated Content for Paged Media Module	სამუშაო პროექტი	2014, მაისი
css3-layout	CSS Template Layout Module	შენიშვნა	2015, მარტი
css3-mediaqueries	Media Queries	რეკომენდაცია	2012, ივნისი
mediaqueries-4	Media Queries Level 4	რეკომენდაციის კანდიდატი	2020, ივლისი
css3-multicol	Multi-column Layout Module Level 1	სამუშაო პროექტი	2021, თებერვალი
css3-page	CSS Paged Media Module Level 3	სამუშაო პროექტი	2018, ოქტომბერი
selectors-3	Selectors Level 3	რეკომენდაცია	2018, ნოემბერი
selectors-4	Selectors Level 4	სამუშაო პროექტი	2018, ნოემბერი
css3-ui	CSS Basic User Interface Module Level 3 (CSS3 UI)	რეკომენდაცია	2018, ივნისი

CSS 4

CSS 4 დაყოფილია მრავალ ცალკეულ მოდულად, რომელთა დონეების ცვლილება ხდება დამოუკიდებლად. ამდენად, CSS 4-ის სპეციფიკაციების ერთიანი ინტეგრირებული კრებული არ არსებობს.

მოდულებმა, რომლებიც დაშენებულია CSS 2 დონეზე, დაიწყეს განვითარება მე-3 დონიდან. ზოგიერთმა მათგანმა, უკვე მიაღწია მე-4 დონეს, ან უახლოვდებიან მე-5 დონეს. სხვა მოდულები, რომლებიც წარმოადგენენ სრულიად ახალ ფუნქციონალს, მაგალითად Flexbox, მიჩნეულია 1-ლ დონედ და უახლოვდება მე-2 დონეს.

CSS სამუშაო ჯგუფი ხანდახან აქვეყნებს „მდგომარეობის სურათებს“, რომელიც არის ბრაუზერებში მწარმოებლების მიერ დასანერგად საკმარისად სტაბილური მთლიანი მოდულების და სხვა სამუშაო პროექტების კოლექცია. სულ შენიშვნების სახით გამოქვეყნებულია ხუთი მსგავსი „მიმდინარე საუკეთესო პრაქტიკების“ დოკუმენტი, 2007, 2010, 2015, 2017 და 2018 წლებში.

ვინაიდან ასე „სურათები“ ძირითადად განკუთვნილია შემმუშავებლებისათვის, იზრდებოდა ავტორებზე მომართული მსგავსი საცნობარო ვერსირებული დოკუმენტის საჭიროება, რომელშიც წარმოდგენილი იქნებოდა თავსებადი რეალიზაციების მდგომარეობა, როგორც ეს არის დოკუმენტირებული ისეთ საიტებზე, როგორიცაა Can I Use... და MDN Web Docs. მსგავსი რესურსის განსახილველად და განსასაზღვრად, 2020 წლის დასაწყისში ჩამოყალიბდა W3C Community Group. განხილვის საგანია ასევე ვერსირების ფაქტობრივი სახეობაც, რაც ნიშნვას, რომ როდესაც დოკუმენტი შეიქმნება, მას შეიძლება არ ეწოდოს „CSS 4“.

ბრაუზერში მხარდაჭერა

თითოეული ვებ-ბრაუზერი ვებ-გვერდის გამოსასახად იყენებს შემდგენელ ძრავს, და CSS-ის ფუნქციონალის მხარდაჭერა მათ შორის არ არის შეთანხმებული. ვინაიდან ბრაუზერები ვერ ამუშავებენ სრულყოფილად CSS-ს, შემუშავდა კოდის წერის მრავალი ტექნიკა, რომელიც შემოვლითი გზებით მომართული იყო კონკრეტული ბრაუზერზე (ეს ტექნიკა ცნობილია როგორც CSS-ჰაკები ან CSS ფილტრები). CSS-ში ახალი ფუნქციონალის მიღება შესაძლებელია შეფერხდეს ძირითად ბრაუზერებში მხარდაჭერის არ არსებობის გამო. მაგალითად Internet Explorer-ში ძალზედ ნელი ტემპით მიმდინარეობდა CSS 3-ის მრავალი ფუნქციონალის მხარდაჭერის დანერგვა, რამაც შეაფერხა ამ ფუნქციონალების სტანდარტიზაცია და ბრაუზერმა შემმუშავებლებს რეპუტაცია დაიზიანა. რათა მომხმარებლებისათვის უზრუნველყოფილს იქნას მდგრადი შედეგი განურჩევლად ბრაუზერისა და პლატფორმისა, შემმუშავბლები ხშირად ატარებენ საკუთარი ვებ-საიტების ტესტირებას მრავალ ოპერაციულ სისტემაში, ბრაუზერში, ბრაუზერის ვერსიაში, რაც ზრდის შემუშავების დროს, ღირებულებას და სირთულეს. ამ პროცესის გასამარტივებლად, არსებობს სხვადასხვა პროგრამული გადაწყვეტა, მაგალითად როგორიცაა Selenium ან LambdaTest.

ტესტირების ხელსაწყოების გარდა, არსებობს მრავალი ვებ-საიტი, რომლებიც თვალს ადევნებენ კონკრეტული CSS-ფუნქციონალის მხარდაჭერის არსებობას ბრაუზერებში, მაგალითად Can I Use და MDN Web Docs. ასევე, CSS 3-ში უზრუნველყოფილია შესაძლებლობათა მოთხოვნებო, რომელიც უზრუნველყოფს @supports ბრძანებას, რომელიც შემმუშავებლებს საშუალებას აძლევს გარკვეული ფუნქციონალის მხარდასაჭერად კონკრეტული ბრაუზერები მიზანში ამოიღონ უშუალოდ CSS-დან. CSS-შესაძლებლობები, რომელიც არ არის მხარდაჭერილი ძველ ბრაუზერებში, ხანდახან შესაძლებელია მხარდაჭერილ იქნას JavaScript-ში პოლიფილის გამოყენებით, რომელიც არის JavaScript კოდის ნაწილი და შექმნილია რათა ბრაუზერების ქცევა იყოს თანმიმდევრული. ამ შემოვლითმა გზებმა და სრული სარეზერვო ფუნქციების მხარდაჭერის აუცილებლობამ შესაძლოა გაართულოს შემუშავების პროექტი, შესაბამისად, კომპანიები ხშირად განსაზღვრავენ ბრაუზერების ვერსიების ნუსხას, რომლებიც იქნება, ან არ იქნება მხარდაჭერილი.

ვებ-საიტების მიერ ახალი სტანდარტების კოდზე გადასვლის კვალდაკვალ, რომელიც შესაძლებელია არათავსებადი იყოს ძველ ბრაუზერებთან, ასეთმა ბრაუზერებმა შესაძლებალია ვეღარ მიიღონ წვდომა ბევრ ვებ-რესურსზე (ხანდახან განზრახ). ძველ ბრაუზერებში, CSS-ის სუსტი მხარდაჭერის გამო მარავალი პოპულარული ვებ-საიტი არამხოლოდ იერსახით მახინჯდება, არამედ საერთოდ არ მუშაობს, დიდწილად JavaScript-ის და სხვა ვებ-ტექნოლოგიების განვითარების მიზეზით.

შეზღუდვები

CSS-ის მიმდინარე შესაძლებლობების ზოგიერთი შემჩნეული შეზღუდვები მოიცავს:

სელექტორები არჩევა აღმავალი ხაზით შეუძლებელია

ამ დროისათვის CSS-ში არ არსებობს გზა, რომლითაც შესაძლებელი იქნება იმ ელემენტის მშობელის ან წინაპრის ამორჩევა, რომელიც აკმაყოფილებს გარკვეულ პირობას. CSS Selectors Level 4 რომელიც ჯერ კიდევ არის სამუშაო პროექტის სტადიაში, ითვალისწინებს მსგავს სელექტორს, თუმცა ის წარმოდგენილია როგორც მთლიანი „სურათის“ სელექტორის პროფილის ნაწილი, და არა როგორც სწრაფი „ცოცხალი“ პროფილი, რომელიც გამოიყენება დინამიურ CSS სტილებში. უფრო რთული სტილის ფურცლების გამოყენება შესაძლებელი გახდება უფრო განვითარებული სელექტორული სქემების გამოყენებით (როგორც არის XPath). ძირითადი მიზეზი, რატომაც CSS-ის სამუშაო ჯგუფმა უარყო მშობლის სელექტორების შემოთავაზებები, დაკავშირებულია ბრაუზერების წარმადობასთან და ინკრემენტული გამოსახვის პრობლემებთან.

შეუძლებელია მკაფიოდ გამოცხადებულ იქნას მოქმედების არე პოზიციისაგან დამოუკიდებლად

მოქმედების არის წესები ისეთი პარამეტრებისათვის, როგორიცაა z-ინდექსი, ეძებენ უახლოეს მშებელ ელემენტს პოზიციის ატრიბუტით position:absolute ან position:relative. ამ უცნაურ კავშირს არასასურველი შედეგი აქვს. მაგალითად, შეუძლებელია ახალი არეს გამოცხადებისაგან თავის არიდება, როდესაც ჩნდება საჭიროება, კორექტირებულ იქნას ელემენტის პოზიცია, რომელიც არ უშვებს მშობელი ელემენტის სასურველი არეს გამოყენებას.

ფსევდო-კლასის დინამიური ქცევა უკონტროლოა

CSS-ში მხარდაჭერილია ფსევდო-კლასები, რომლებიც მომხმარებლისგან უკუკავშირის მიღების საშუალებას იძლევიან ალტერნატიული სტილების პირობითი გამოყენებით. ერთ-ერთი ასეთი ფსევდო-კლასია :hover:, რომელიც დინამიურია (ეკვივალენტი JavaScript-ში: onmouseover) და აქვს არასწორი გამოყენების პოტენციალი (მაგალითად, კურსორის მიახლოვებისას გამომხტომი ფანჯრები), თუმცა კლიენტს არ აქვს მისი გათიშვის (არ აქვს თვისება disable) ან ეფექტის შეზღუდვის (მაგალითად, nochange მნიშვნელობა თითოეული თვისებისათვის) შესაძლებლობა.

შეუძლებელია წესის დასახელება

არ არსებობს გზა რომლითაც, რომლითაც შესაძლებელი იქნება წესის დასახელება, რომელიც საშუალებას მისცემს კლიენტურ სკრიფტს მიუთითოს წესისაკენ, იმ შემთხვევაშიც კი როდესაც მისი სელექტორი შეიცვლება.

შეუძლებელია წესიდან სტილის ჩართვა სხვა წესში

სასურველი შედეგის მისაღწევად, CSS სტილები ხშირად უნდა დუბლირებულ იქნას რამდენიმე წესში, რაც იწვევს დამატებითი მომსახურების საჭიროებას და მოითხოვს უფრო მეტ გულდასმით ტესტირებას. ზოგიერთ ახალ CSS შესაძლებლობაში შემოთავაზებული იყო ამ პრობლემის მოგვარება, თუმცა შემდეგში მიტოვებულ იქნა.

შეუძლებელია კონკრეტული ტექსტის მიზანში ამოღება მონიშვნის რედაქტირების გარეშე

გარდა :first-letterფსევდო-ელემნეტისა, არ არსებობს ტექსტის კონკრეტული დიაპაზონის მიზანში ამოღების შესაძლებლობა placeholder ელემენტების გამოყენების საჭიროების გარეშე.

ადრინდელი პრობლემები

CSS სტანდარტის წინა ვერსიებში არსებობდა სხვა პრობლემებიც, რომლებიც აღმოფხვრილ იქნა შემდგომ ვერსიებში:

უპირატესობები

მასალის გამოყოფა წარმოდგენისგან