«
»

ელემენტის id და class ატრიბუტების გამოყენება

Mar 18 2007

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

აღნიშნულ თემაში განხილული იყო იდენტიფიკატორის(id) და კლასის(class) სელექტორები, მაგრამ არაფერი მითქვამს იმის შესახებ თუ რა შემთხვევაში უნდა გამოვიყენოთ თითოეული მათგანი.

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

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

მაგალითად ამ ბლოგის სტრუქტურას შედგება სამი ძირითადი ნაწილისგან Header(თავი რომელიც ერთი და იგივეა ყველა დოკუმენტისათვის), Sidebar(მარცხენა მხარეს განთავსებული მენიუ რომელიც ასევე ერთი და იგივეა ყველა დოკუმენტისათვის) და Content(მაჯვენა ნაწილი რომელიც იცვლება კონტექსტის შესაბამისად). რადგან დოკუმენტის აღნიშნული ელემენტები არ შეიძლება მეორდებოდნენ დოკუმენტზე(რაც სავსებით ლოგიკურია), ასეთ შემთხვევაში თამამად შეგვიძლია გამოვიყენოთ იდენტიფიკატორის სელექტორები და შესაბამისად განვსაზღვროთ id ატრიბუტის მნიშვნელობები თითოეული მათგანისათვის:

  • Header – id=”blog-header”
  • Sidebar – id=”blog-sidebar”
  • Content – id=”blog-content”

შესაბამისად აღწერილი შემთხვევისათვის HTML კოდი იქნება შემდეგნაირი:

1
2
3
4
5
6
7
8
9
<div id="blog-header">
    Header contents and elements
</div>
<div id="blog-sidebar">
    Sidebar contents and elements
</div>
<div id="blog-content">
    Content and elements
</div>

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

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

აღწერილი შემთხვევისათვის HTML კოდი შეგვიძლია დავწეროთ ასე:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="blog-header">
    Header contents and elements
</div>
<div id="blog-sidebar">
    Sidebar contents and elements
</div>
<div id="blog-content">
    <div id="blog-post-1" class="blog-post">Post content 1</div>
    <div id="blog-post-2" class="blog-post">Post content 2</div>
    <div id="blog-post-3" class="blog-post">Post content 3</div>
    <div id="blog-post-4" class="blog-post">Post content 4</div>
</div>

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

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

CSS კოდი მაგალითისათვის:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#blog-header {
  background-color: red;
}

#blog-sidebar {
  background-color: green;
}

#blog-content {
  background-color: green;
}

div.blog-post {
   padding: 1em;
   background-color: #EFEFEF;
}

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

ტეგები:

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

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