«
»

CSS სელექტორების მინიმიზაცია

Mar 14 2007

შეუძლებელია CSS კოდის დაწერა სელექტორების გარეშე და ნებისმიერ შემთხვევაში მუდმივად გვიწევს მათი გამოყენება(რა თქმა უნდა აქ არ იგულისხმება HTML ელემენტის style ატრიბუტში CSS – ის გამოყენება). თუმცა ხშირად სელექტორებთან მუშაობა მოსაბეზრებელი და არასასიამოვნო რუტინაა და ამისათვის საჭირო მათი მინიმიზაცია…

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

მიუხედავად იმისა რომ არსებობს ბევრი ტიპის სელექტორი, ძირითადად გამოიყენება კლასის(class) სელექტორი, იდენტიფიკატორის(id) სელექტორი, მემკვიდრეების(descendant) სელექტორი, ელემენტის(element) სელექტორი და უნივერსალური(*) სელექტორი. არსებობს კიდევ სხვა ტიპის და ძალიან მოქნილი სელექტორები თუმცა მათი მხარდაჭერა არ გააჩნია ყველა ბროუზერს (განსაკუთრებით ამ მხრივ ბრწყინავს IE) ამიტომ მათ გამოყენებაზე აქ არ ვისაუბრებ.

განვიხილოთ ზემოთ ჩამოთვლილი სელექტორები.


class selector

მაგალითად: .style-one {color: red;} ამ სტილის გამოყენება შეიძლება ნებისმიერი ელემენტისთვის:

1
2
3
<p class="style-one">paragraph text</p>
<span class="style-one">text</span>
<div class="style-one">div text</div>

როგორც კოდში ჩანს აღწერილი სტილი შეიძლება მივანიჭოთ ელემენტებს მათი class ატრიბუტის გამოყენებით. აქ ყურადღება უნდა მივაქციოთ იმ დეტალს რომ ყველა ელემენტს ესაჭიროება ამ ატრიბუტისა და მისი მნიშვნელობის მითითება.


id selector

ამ ტიპის სელექტორის გამოყენება თითქმის ანალოგიურია წინა მაგალითისა, პირველი განსხვავება მდგომარეობს იმაში რომ სტილის აღწერას ვიწყებთ არა წერტილით(.) არამედ # ნიშნით: #id-one{color: blue;} ამ სტილის გამოყენება შეიძლება ყველა იმ ელემენტისთვის რომლის id ატრიბუტის მნიშვნელობა არის id-one. თუმცა უნდა გავითვალისწინოთ ის ფაქტი რომ დოკუმენტში არ შეიძლება არსებობდეს ორი ან ორზე მეტი ელემენტი ერთი და იგივე იდენტიფიკატორით. მაგალითად:

1
2
<div id="id-one">some text</div>
<p id="id-one">paragraph</p>

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


descendant selector

მემკვიდრეების სელექტორები შედარებით რთულია განსხვავებით კლასისა და იდენტიფიკატორის სელექტორებისგან. მაგალითად: #id-two p span {color: green;} ეს კოდი გულისხმობს იმას რომ id-two იდენტიფიკატორის მქონე ელემენტის შიგნით არსებული p ელემენტის შიგნით არსებული ყველა span ელემენტის ტექსტის ფერი იქნება მწვანე.

1
2
3
4
5
6
<div id="id-two">
    <p>
         <span>text one</span>
         <span>text two</span>
    </p>
</div>

კოდში ნაჩვენებია ზემოთ აღწერილი სტრუქტურა, ანუ div ელემენტი რომლის იდენტიფიკატორიც არის id-two შეიცავს p ელემენტს რომელიც თავის მხრივ შეიცავს ორ span ელემენტს.


element selector

ელემენტის სელექტორი შედარებით მარტივია, მაგალითად div {font-size: 24px;} გულისხმობს რომ დოკუმენტში არსებული ყველა div ელემენტის ფონტის ზომა იქნება 24 პიქსელი. ამ ტიპის სელექტორი შეიძლება გამოვიყენოთ დოკუმენტში არსებული ნებისმიერი ელემენტისათვის.


universal(*) selector

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

1
2
3
4
* {
   font-size: 13px;
   color: yellow;
}

ეს კოდი განსაზღვრავს დოკუმენტის აბსოლუტურად ყველა ელემენტის საწყისი ფონტის ზომასა და ფერს.

ხოლო შემდეგი კოდი განსაზღვრავს მხოლოდ div ელემენტების შიგნით არსებული ყველა ელემენტის ფონტის ზომასა და ფერს:

1
2
3
4
div * {
   font-size: 13px;
   color: yellow;
}

საკმარისი ინფორმაციია იმსათვის რათა შევუდგეთ შემდეგი მაგალითის განხილვას. ქვევით ნაჩვენებია ფრაგმენტი რომელიც შედგება ერთი მთავარი კონტეინერისგან(ლურჯი გვერდებით) მის შიგნით არსებული დასათაურებებით(Heading 1, Heading 2, Heading 3), დასათაურების შესაბამისი ტექსტებითა და კონტეინერის ზედა მარჯვენა კუთხეში განთავსებული ჩამონათვალით.

Heading 1

this is paragraph

this is paragraph

this is paragraph

Heading 2

this is paragraph

this is paragraph

Heading 3

this is paragraph

this is paragraph

მაგალითში გამოყენებულია შემდეგი HTML კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="sample">
 
  <h1>Heading 1</h1>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
 
  <br />
 
  <h2>Heading 2</h2>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
 
  <br />
 
  <h3>Heading 3</h3>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
 
  <div>
    <h3>Table of Contents</h3>
    <ul>
      <li><a href="#">List item</a></li>
      <li><a href="#">List item</a></li>
      <li><a href="#">List item</a></li>
      <li><a href="#">List item</a></li>
      <li><a href="#">List item</a></li>
    </ul>
  </div>
 
</div>

ერთი თვალის გადავლებითაც ჩანს რომ კოდში არ არის გამოყენებული არცერთი class ატრიბუტი და გამოყენებულია ერთადერთი იდენტიფიკატორი მთავარი კონტეინერისათვის id=”sample”. ვიზუალურად ჩანს რომ კოდის ამ ფრაგმენტის ყველა დეტალი დამუშავებულია და ყველა ელემენტს გააჩნია თავისი სტილი.

სტილები sample კონტეინერისათვის აღწერილია შემდეგ CSS კოდში:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#sample {
  border: 2px solid blue;
  padding: 24px;
  position: relative;
  width: 75%;
  margin: 0 auto;
}

#sample * {
  font-family: arial;
  padding: 0;
  margin: 0;
}

#sample p {
  padding-left: 24px;
  color: green;
}

#sample div {
  position: absolute;
  top: 2px;
  right: 2px;
  background: pink;
  padding: 4px;
}

#sample div ul {
  list-style-type: none;
}

#sample div h3 {
  color: gray;
}

#sample div a:link, #sample div a:visited {
  color: red;
  text-decoration: underline;
}

#sample div a:hover {
  text-decoration: none;
  color: blue;
}

დეტლურად განვიხილოთ მოცემული CSS კოდი. პირველ რიგში ავღნიშნავ რომ გადამწყვეტი დეტალი ზემოთ მოყვანილ მაგალითში არის იდენტიფიკატორი sample(id=”sample”) რადგან სწორედ მაგ იდენტიფიკატორის მქონე ელემენტია მთავარი კონტეინერი. დავიწყოთ განხილვა სტილის პირველი დეკლარაციიდან:

#sample {
განვსაზღვრავთ კონტეინერის ზოგად სტილს.

#sample * {
იდენტიფიკატორისა და უნივერსალური სელექტორის კომბინაციით განვსაზღვრავთ საერთო სტილს sample კონტეინერის შიგნით არსებული აბსოლუტურად ყველა ელემენტისათვის. აქ ყურადღებას იმსახურებს padding და margin თვისებების მნიშვნელობა, ორივე თვისებას აქვს მინიჭებული 0 (ნული) მაგრამ მას არ აქვს მითითებული საზომი ერთეული(მაგ. px, em, %…) იმ შემთხვევაში თუ თვისების მნიშვნელობა არის 0 არ არის აუცილებელი საზომი ერთეულის მითითება და ეს არ არის შეცდომა, ხოლო როდესაც მნიშვნელობა აღემატება ნულს აუცილებელია რომელიმე საზომი ერთეულის მითითება წინააღმდეგ შემთხვევაში ბროუზერები მათ არ გაითვალისწინებენ.

#sample p {
საერთო სტილები sample კონტეინერს შორის არსებული ყველა p ელემენტისთვის

#sample div {
ამ შემთხვევაში div ელემენტის position თვისების მნიშვნელობა განსაზღვრულია როგორც absolute რაც გვაძლევს იმის საშუალებას რომ sample კონტეინერს შიგნით არსებული ერთადერთი div ელემენტი გადავაადგილოთ კონტეინერს შიგნით ნებისმიერ პოზიციაზე, თუმცა ყურადღება მიაქციეთ თვითონ #sample { დეკლარაციას სადაც კონტენიერის position თვისების მნიშვნელობა არის relative რაც იძლევა იმის გარანტიას რომ მის შიგნით არსებული აბსოლუტური პოზიციის მქონე div ელემენტის პოზიციონირება შეგვიძლია სწორედ მისი კონტეინერს მიმართ(მის შიგნით) და არა მის გარეთ.

დანარჩენი #sample div ul {, #sample div h3 {, #sample div a:link, #sample div a:visited { და #sample div a:hover { გამოიყენება უშუალოდ #sample div ელემენტის შიგნით არსებული ელემენტების სტილების განსაზღვირსათვის. თუმცა აქ ყურადღებას იმსახურებს #sample div a:link, #sample div a:visited { დეკლარაცია, ამ შემთხვევაში #sample div a:link და #sample div a:visited არის დაჯგუფებული (უბრალოდ გამოიყოფა მძიმით(,)) რადგან ორივე შემთხვევაში(a:link და a:visited) გვესაჭიროება ერთი და იგივე სტილები.

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

ტეგები:

2 Responses to “CSS სელექტორების მინიმიზაცია”

  1. Code.ge Blog - For Better WEB » მარტივი XPath რეალიზაცია JavaScript - ში says:
    May 14, 2007 at 2:18 am

    [...] (და არც არის სასურველი. იხ. CSS სელექტორების მინიმიზაცია) რომ დოკუმენტში ყველა ელემენტს [...]

  2. Code.ge Blog - For Better WEB » უნივერსალური CSS სელექტორი (*) და დოკუმენტის საწყისი სტილების გადატვირთვა says:
    July 6, 2007 at 1:23 am

    [...] CSS სელექტორების მინიმიზაციის შესახებ ნაწილობრივ შევეხე უნივერსალურ [...]

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"