Code.ge Blog » CSS http://www.code.ge ბლოგი ვებ პროგრამირებისა და ტექნოლოგიების შესახებ Mon, 03 May 2010 14:38:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 Jetpak – დამატებების ახალი სისტემა Mozilla – სგან http://www.code.ge/posts/jetpak http://www.code.ge/posts/jetpak#comments Thu, 21 May 2009 11:27:59 +0000 იოსები http://www.code.ge/?p=260 jetpack_logo საერთოდ ცნობილია რომ კონკურენცია ძალიან კარგი რამ არის. ამ მტკიცებულების სისწორის კიდევ ერთი ძალიან კარგი მაგალითი გვაქვს სახეზე კერძოდ კი Google Chrome – სა და Mofilla Firefox – ის ე.წ. extension – ების სისტემების სახით.

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

ცხადია ასე პირველივე დღიდან ყველაფერის ჩადებას ვერ მოახერხებდა Google თავის ახალ ბრაუზერში, თუმცა, როგორც მალე გაირკვა შეჩერებასაც არ აპირებდა. სულ რამდენიმე თვეში გამოჩნდა პირველი პროპოზალი რომელიც Chrome – ს დამატებების პლატფორმას შეეხებოდა. თუმცა ამ პროპოზალში ერთმა მეტად საგულისხმო დეტალმა გაიჟღერა – განსხვავებით FF – ის ანალოგიური სისტემისგან Chrome – ს დამატებების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. არავითარი XUL, არავითარი რთული XML კონფიგურაციის ფაილები დამატების ინსტალაციისათვის და ა.შ.

Google – ს ეს გდაწყვეტილება ჩემთვის პირადად გაცილებით მისაღები იყო რადგან XUL – ის ვერანაირ აუცილებლობას ვერც FF – ში ვხედავდი მანამდე და სიმართლე ითქვას ვერც დღეს ვერ ვხედავ… თუმცა არც Mozilla – მ დააყოფნა და დღეს უკვე შემოგვთავაზა FF – ის დამატებების შექმნის ახალი მექანიზმი. კერძოდ კი Jetpak!

ციტატა პროექტის საიტიდან:

In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

რითია საინტერესო Jetpak? პირველ რიგში ისევე როგორც Crhome – ს შემთხვევაში, Jetpak – ის შემთხვევაშიც დამატების შესაქმნელად საკმარისია მხოლოდ HTML/CSS და JavaScript. ამ შემთხვევაშიც არავითარი XUL და რთული XML კონფიგურაციის ფაილები. ასევე არავიტარი ბრაუზერის გადატვირთვა დამატების ინსტალაციის შემდგომ და რაც ყველაზე ყველაზე ყველაზე მნიშვნელოვანია დეველოპმენტის პროცესში შეგვიძლია გამოვიყენოთ ნებისმიერი არსებული ინსტრუმენტული საშუალებები და Firebug დებაგირებისათვის რაც არსებულ მოდელში პრაქტიკულად შეუძლებელია. ასევე jQuery – ს მოყვარულთათვის ძალიან მნიშვნელოვანი ფაქტია რომ ეს ბიბლიოთეკა ნაგულისხმევად არის ჩადებული Jetpak – ში, რაც კიდევ უფრო გაამარტივებს დამატებების პროგრამირებას.

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

]]> http://www.code.ge/posts/jetpak/feed 8 IE6/7 bug: img ელემენტის რენდერინგის ბაგი http://www.code.ge/posts/ie67-img-rendering-bug http://www.code.ge/posts/ie67-img-rendering-bug#comments Wed, 03 Oct 2007 08:49:22 +0000 იოსები http://www.code.ge/css/ie67-img-rendering-bug ამ პოსტის დაწერა ფორუმის ამ პოსტმა გადამაწყვეტინა(ანუ პოსტი არის inspired by Rocko :D ) , რადგან არ მინდა ეს საკითხი მილიონობით ფორუმის პოსტში დაიკარგოს. ეს არის მარტივი თუმცა სასარგებლო გამოსავალი IE – სთვის დამახასიათებელი პრობლემისგან.

თავისთავად პრობლემის არსი ძალიან მარტივია, ეს არის IE – ს რენდერინგის მორიგი ბაგი რომელიც გხვდება კონკრეტულად img ტეგთან მუშაობის დროს. თუ img ელემენტს განვათავსებთ div ან td ტეგში მას ქვედა მხარეს უჩნდება პატარა სივრცე, თუ სურათის კონტეინერს აქვს მითითებული ფონის ფერი მაშინ ეს ხარვეზი ბევრად უფრო თვალსაჩინო ხდება.

მაგალითი:

1
2
3
<div style="width:200px; background-color:green;">
 <img src="img/image.gif" alt=""/>
</div>

თუ ამ კოდს ვნახავთ IE – ში დავინახავთ რომ სურათის ქვეშ არის გარკვეული სივრცე.

სურათი 1:
img-bottom-space.gif

თუმცა გამოსავალი ამ პრობლემიდან არსებობს.

გამოსავალი 1:

1
<div style="width:200px; background-color:green;"><img src="img/image.gif" alt=""/></div>

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

ნაცვლად ამისა შეგვიძლია პრობლემა გადავჭრათ img ელემენტის css – ით დამუშავებით თუ მას მივუთითებთ display: block;

გამოსავალი 2:

1
2
3
<div style="width:200px; background-color:green;">
 <img src="img/image.gif" alt="" style="display: block"/>
</div>

სურათი 2:
img-no-space.gif

რაში მდგომარეობს პრობლემა? პრობლემა არის ის რომ img ელემენტის ნაგულისხმევი მნიშვნელობა display თვისებისათვის არის inline რის გამოც IE ამ ელემენტს აღიქვავს როგორც ტექსტს. ხოლო ელემენტს ქვედა მხრიდან სივრცეს უკეთებს იმის გამო რომ ეს სივრცე საჭიროა ისეთი ტიპის სიმბოლოებისათვის როგორიცაა: y, p, g…

გამომდინარე აქედან ელემენტისათვის display: block; – ის მითითების შემთხვევაში IE არ დაამუშავებს მას როგორც ტექსტს და თავისთავად სივრცის პრობლემაც ქრება.

თუმცა ყოველთვის რომ არ ვუთითოთ ელემენტს ეს სტილი, ამის გაკეთება შეგვიძლია ყველა ელემენტისათვის ერთხელ CSS ფაილში:

1
2
3
img {
    display: block;
}

რაც სამუდამოდ მოაგვარებს ამ პრობლემას.

]]> http://www.code.ge/posts/ie67-img-rendering-bug/feed 3 უნივერსალური CSS სელექტორი (*) და დოკუმენტის საწყისი სტილების გადატვირთვა http://www.code.ge/posts/universal-css-selector http://www.code.ge/posts/universal-css-selector#comments Fri, 06 Jul 2007 07:48:04 +0000 იოსები http://www.code.ge/css/universal-css-selector პოსტში CSS სელექტორების მინიმიზაციის შესახებ ნაწილობრივ შევეხე უნივერსალურ სელექტორებს (*).

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

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

მაგალითი 1

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

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

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

მაგალითი 1

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

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

როგორ შეიძლება გამოვიყენოთ ეს შესაძლებლობა ჩვენს სასარგებლოდ და როგორ უნდა გადავტვირთოთ დოკუმენტის საწყისი სტილები?

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

  1. დასათაურების ტეგები: h1, h2, h3, h4, h5, h6 – მათ განსაზღვრული აქვთ როგორც ელემენტის გარე საზღვრების ზომა (margin) ასევე ფონტის ზომა;
  2. პარაგრაფის ტეგი: p – განსაზღვრული აქვს გარე საზღვრების ზომა;
  3. HTML ფორმის ტეგი: form - ზოგიერთ ბრაუზერში იკეთებს სივრცეს
  4. ჩამონათვალის ტეგები: ul, ol – განსაზღვრული აქვთ როგორც გარე საზღვრების ზომა ასევე შიდა სივრცე;
  5. ბმულების ტეგი: a – განსაზღვრული აქვთ როგორც საწყისი ფონტის ფერი ასევე ფერი უკვე მონახულებული ბმულებისათვის;

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

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

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 გადავტვირთოთ დოკუმენტში არსებული ყველა ელემენტის შიდა და გარე საზღვრები და ფონტის სტილები
 */
* {
  margin: 0;
  padding: 0;
  font: normal 11px arial;
}

/**
 განვსაზღვროთ ფონის ფერი
 */
body {
  background-color: #FFF;
}

/**
 ჩამანათვალის ტეგების ელემენტებისათვის გავაუქმოთ ტიპი
 */
ul, ol {
  list-style-type: none;
}

/**
 ფორმას გავუუქმოთ გვერდები და ასევე მივუთითოთ სიგანე, ეს საჭიროა IE6 - ისთვის
 */
form {
  border: none;
  width: 100%;
}

/**
 გავუუქმოთ img ტეგს გვერდები რადგან a ტეგში მოთავსების შემთხვევაში იკეთებს მათ
 */
img {
  border: none;
}

/**
 აღვადგინოთ option ელემენტის მარცხენა და მარჯვენა სივრცე
 */
select option {
  padding: 0 4px;
}

/**
 აღვადგინოთ optgroup - ში მოთავსებული option ელემენტის მარცხენა საზღვარი
 */
optgroup option {
  margin-left: 20px;
}

/**
 განვსაზღვროთ სტილები a ელემენტის link, visited და active ფსევდო სელექტორებისათვის
 */
a:link, a:visited, a:active {
  font: normal 12px verdana;
  color: blue;
}

/**
 განვსაზღვროთ სტილები a ელემენტის hover ფსევდო სელექტორისათვის
 */
a:hover {
  text-decoration: none;
  color: red;
}

ნაჩვენები კოდი შესაძლებელია განვათავსოთ ფაილში და ყოველთვის გამოვიყენოთ ის რათა თავიდან ავირიდოთ განმეორებითი კოდის წერა. მსგავსი გლობალური ცვლილება დოკუმენტის ელემენტებისათვის ძალიან სასარგებლოა რადგან მსგავსი მიდგომა თავიდან აგვარიდებს უამრავი განმეორებითი კოდის წერას, და ყოველი დოკუმენტი გარანტირებულად ერთნაირად იმუშავებს ბრაუზერებში განსაზღვრული საწყისი სტილების მიუხედავად. მოცემული კოდიდან აღსანიშნავია სულ პირველი ინსტრუქცია სადაც გარე საზღვარი და შიდა სივრცე დაყვანილია 0 – ზე (margin: 0; padding: 0;), გამომდინარე იქედან რომ ყოველი ელემენტს გააჩნია გარანტირებულად ერთი და იგივე აღნიშნული მახასიათებელი ბევრად მარტივი ხდება მათი შემდგომი მენეჯმენტი, ასევე ამ მიდგომით IE6 – ში თავიდან ავირიდებთ margin – ის გამოთვლაში არსებულ გარკვეულ ხარვეზებს.

]]> http://www.code.ge/posts/universal-css-selector/feed 7 CSS შემოკლებები – background http://www.code.ge/posts/css-background-shorthands http://www.code.ge/posts/css-background-shorthands#comments Thu, 10 May 2007 10:56:25 +0000 იოსები http://www.code.ge/css/css-background-shorthands ვაგრძელებ CSS შემოკლებების თემას რომლის პირველი ორი ნაწილი შეგიძლიათ იხილოთ შემდეგ მისამართებზე:

ზემოთ მითითებული თვისებების მსგავსად background თვისების შემოკლებული ჩაწერის ფორმაც არსებობს რაც განსაკუთრებით მნიშვნელოვანია ისეთი ტიპის საიტებისათვის რომლებიც დიზაინში უხვად იყენებენ გრაფიკულ ელემენტებს…

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

  • background-color: განსაზღვრავს ელემენტის ფონის ფერს (მაგ. #0000CC)
  • background-image: განსაზღვრავს ელემენტსი ფონურ სურათს (მაგ. url(sidebar-bg.gif))
  • background-repeat: განსაზღვრავს უნდა განმეორდეს თუ არა ფონური სურათი (მაგ. no-repeat, repeat-x, repeat-y)
  • background-attachment: განსაზღვრავს ფონური სურათი ფიქსირებულად ინარჩუნების პოზიციას თუ არა (მაგ. scroll, fixed)
  • background-position: განსაზღვრავს ფონური სურათის პოზციას (მაგ. top left
    )

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

ქვემოთ მოყვანილ მაგალითში გამოყენებულია ყველა ზემოთ ჩამოთვლილი თვისება გარდა ერთისა:

This is background property test!

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

1
2
3
4
5
6
7
8
9
10
.bg-long {
    background-color: black;
    background-image: url(/wp-content/themes/myblog/img/logo.gif);
    background-repeat: no-repeat;
    background-position: top right;
    border: 2px solid red;
    padding: 24px;
    font: bold italic 1em arial;
    color: green;
}

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

1
2
3
4
5
6
7
.bg-short{
    background: black url(/wp-content/themes/myblog/img/logo.gif) no-repeat top right;
    border: 2px solid red;
    padding: 24px;
    font: bold italic 1em arial;
    color: green;
}

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

მსგავსი შემოკლებული ჩაწერისას გასათვალისწინებელია რამდენიმე დეტალი:

  1. თვისებების მნიშვნელობების მიმდევრობა უნდა განისაზღვროს იმ მიმდევრობით რა მიმდევრობითაც ეს ნაჩვენებია პოსტის დასაწყისში გაკეთებულ ჩამონათვალში;
  2. რომელიმე მნიშვნელობის გამოტოვება არ დაარღვევს საბოლოო რეზულტატს;
  3. როდესაც ელემენტისათვის გვინდა მხოლოდ ფონური ფერის განსაზღვრა სხვა css კლასის მნიშნველობით ან უბრალოდ ელემენტის style ატრიბუტის გამოყენებით, უნდა გამოვიყენოთ background-color (და არა background თუმცა ეს შესაძლებელია) რადგან იმ შემთხვევაში თუ ელემენტისთვის სხვა კლასში უკვე განსაზღვრულია ფონური სურათი მოხდება მისი ჩანაცვლება საწყისი none მნიშვნელობით რაც სურათის გაქრობას გამოიწვევს;
]]> http://www.code.ge/posts/css-background-shorthands/feed 0 CSS შემოკლებები – font http://www.code.ge/posts/css-font-shorthands http://www.code.ge/posts/css-font-shorthands#comments Thu, 10 May 2007 09:40:00 +0000 იოსები http://www.code.ge/css/css-font-shorthands ერთერთ პოსტში ლაპარაკი მქონდა css – ის border თვისების შემოკლებებზე, ამჯერად ყურადღებას შევაჩერებ font თვისებაზე. თავისთავად font თვისების გამოყენება შესაძლებელია მინიმუმამდე დავიყვანოთ კონკრეტული დოკუმენტისათვის თუმცა თვითონ ამ ელემენტს გააჩნია შემოკლებული სინტაქსი რომელიც ძალიან სასარგებლოა ისეთ შემთხვევებში როდესაც დოკუმენტის ან საიტის დონეზე მასიურად გვიწევს მისი გამოყენება…

პირველ რიგში მნისვნელოვანია გამოვყოთ ის ძირითადი თვისებები რომლებიც მეტნაკლებად ხშირად გამოიყენება:

  • font-style: განსაზღვრავს ფონტის სტილს (მაგ. normal, italic)
  • font-weight: განსაზღვრავს ფონტის წონას (მაგ. normal, bold)
  • font-size: განსაზღვრავს ფონტის ზომას (მაგ. small, medium, 12em, 12px)
  • font-family: განსაზღვრავს პრიორიტეტულად დალაგებულ ფონტების ჩამონათვალს(მაგ. arial, verdana)

გამომდინარე აქედან ქვემოთ ნაჩვენები შედეგი:

This is sample text

შესაძლებელია მივიღოთ შემდეგი css კოდით:

1
2
3
4
5
6
.long-text-style {
   font-style: italic;
   font-weight: bold;
   font-size: 1em;
   font-family: arial, verdana;
}

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

This is sample text

შესაბამისი css კოდი გამოიყურება შემდეგ ნაირად:

1
2
3
.short-text-style {
   font: bold italic 1em arial, verdana
}

შედეგი თვალსაჩინოა, თუმცა აღსანიშნავია bold italic ჩაწერა, სადაც ორი თვისების მნიშვნელობა (font-style და font-weight) მითითებულია ერთმანეთის მიმდევრობით. ამ შემთხვევაში არანაირი აუცილებლობა იმისა რომ ორივე აღნიშნული თვისება მივუთითოთ ერთდროულად არ არსებობს, თავისუფალად შესაძლებელია რომ მივუთითოთ მხოლოდ bold ან italic ან normal და მივიღოთ სასურველი შედეგი.

]]> http://www.code.ge/posts/css-font-shorthands/feed 1 ელემენტის id და class ატრიბუტების გამოყენება http://www.code.ge/posts/using-element-id-and-class-attributes http://www.code.ge/posts/using-element-id-and-class-attributes#comments Sun, 18 Mar 2007 15:28:39 +0000 იოსები http://www.ioseb.com/css/using-element-id-and-class-attributes როგორც პოსტში სელექტორების მინიმიზაციის შესახებ ავღნიშნე მაქსიმალურად უნდა ავარიდოთ თავი არასაჭირო და ზედმეტი 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 ატრიბუტი და შესაბამისი კლასის სელექტორები.

]]> http://www.code.ge/posts/using-element-id-and-class-attributes/feed 0 CSS სელექტორების მინიმიზაცია http://www.code.ge/posts/minimizing-css-selectors http://www.code.ge/posts/minimizing-css-selectors#comments Thu, 15 Mar 2007 06:56:42 +0000 იოსები http://www.ioseb.com/?p=39 შეუძლებელია 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 კოდი ბევრად უფრო ლოგიკურია და მისი მენეჯმენტიც შესაბამისად საგრძნობლად ადვილია.

]]> http://www.code.ge/posts/minimizing-css-selectors/feed 2 CSS შემოკლებები – border http://www.code.ge/posts/css-border-shorthands http://www.code.ge/posts/css-border-shorthands#comments Wed, 14 Mar 2007 11:31:05 +0000 იოსები http://www.ioseb.com/?p=38 ლეიაუტის CSS – ის გამოეყენებით აწყობის ერთერთი მთავარი უპირატესობა მდგომარეობს იმაში რომ დოკუმენტებში საგრძნობლად მცირდება HTML კოდის რაოდენობა, ხოლო დიზაინის ლოგიკა მთლიანად გატანილია CSS – ში, თუმცა პირველ პერიოდში როდესაც დავინტერესდი CSS – ით, HTML კოდის შემცირებასთან ერთად აღმოვაჩინე რომ თვითონ CSS კოდი გამოდიოდა საკმაოდ დიდი და რაც ყველაზე უარესია რთულად წასაკითხი და გასარჩევი. დროთა განმავლობაში დავიწყე ინფორმაციის მოძიება CSS – ის კოდის უფრო შემოკლებულად და ეფექტურად წერის შესახებ და ამის ხარჯზე მოვახერხე კოდის საკმაოდ შემცირება.

არის რამდენიმე CSS თვისება რომელიც შეიძლება საგრძნობლად მოკლედ ჩიაწეროს: border, font, padding, margin, list-style.


border

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

this is div

უნდა დავწეროთ შემდეგი CSS კოდი:

1
2
3
border-size: 1px;
border-style: dotted;
border-color: green;

თუმცა უფრო მოკლე გზა გამოიყურება ასე:

1
border: 1px solid green;

იგივე ტიპის შემოკლება შეგვიძლია გამოვიყენოთ: border-top, border-right, border-bottom და border-left – ისთვის.

მაგალითად შემდეგი კოდით:

1
2
3
4
5
6
#d1 {
  border-top: 2px dotted red;
  border-right: 2px dotted green;
  border-bottom: 2px dotted blue;
  border-left: 2px dotted orange;
}

მივიღებთ ასეთ შედეგს:

this is div

თუმცა იგივე შედეგის მისაღწევად საკმარისია შემდეგი კოდი:

1
2
3
4
#d1 {
  border: 2px dotted;
  border-color: red green blue orange;
}

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

ნებისმიერი CSS თვისება რომელისაც აქვს საშუალება რომ ერთდროულად განვსაზღვროთ მნიშვნელობა ელემენტის გვერდებისთვის(მაგ: padding, margin, border) იყენებს ზუსტად იგივე მიმდევრობას.

ასევე აღსანიშნავია რომ არ არის აუცილებელი ოთხივე მნიშვნელობის მითითება, მაგალითად სავსებით დასაშვებია და შესაძლებელი კოდის მსგავსი ჩაწერა:

border-color: red green blue; ან სულაც border: red green; ან border: red; თუმცა ამ ჩაწერით მიღებული რეზულტატი საჭიროებს ახსნას.

შემდეგი კოდი:

1
border-color: red green blue;

ექვივალენტურია ასეთი ჩაწერისა:

1
border-color: red green blue green;

აქედან გამომდინარე შეგვიძლია ვთქვათ, რომ თუ გამოტოვებულია მნიშვნელობა მეოთხე(მარცხენა) გვერდისათვის მისი ფერი იქნება იგივე რაც განსაზღვრულია მეორე(მარჯვენა) გვერდისათვის. თუ გამოტოვებულია მნიშვნელობები მესამე(ქვედა) და მეოთხე(მარცხენა) გვერდებისათვის შესაბამისად ქვედა გვერდის ფერი იქნება იგივე რაც პირველი(ზედა) გვერდისათვის, ხოლო მარცხენა გვერდის ფერი იქნება იგივე რაც მეორე(მარჯვენა) გვერდის ფერი. იმ შემთხვევაში თუ მითითებულია მხოლოდ ერთი მნიშვნელობა(მაგ. border-color: red) ეს ნიშნავს იმას რომ ელემენტის ყველა გვერდს ექნება იგივე ფერი.

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

1
2
border: 2px solid;
border-color: blue red;

this is div

მსგავსი ტიპის შემოკლებები შეგვიძლია გამოვიყენოთ მაგალითად გვერდების ზომებისათვის.

მაგალითად ეს კოდი:

1
2
3
4
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 2px;
border-left-width: 5px;

შეგვიძლია გადავწეროთ ასე:

1
border-width: 2px 4px 2px 5px;

აბსოლუტურად იგივე ეხება გვერდების სტილებს: border-top-style, border-right-style, border-bottom-style, border-left-style. ისნი შეიძლება შევამოკოთ და მათ ნაცვლად საჭიროების შემთხვევაში გამოვიყენოთ border-style(მაგ. border-style: solid dotted dotted solid).

]]> http://www.code.ge/posts/css-border-shorthands/feed 6 CSS rollover ეფექტი JavaScript – ის გარეშე http://www.code.ge/posts/css-rollover-effect-without-javascript http://www.code.ge/posts/css-rollover-effect-without-javascript#comments Mon, 12 Mar 2007 10:41:32 +0000 იოსები http://www.ioseb.com/?p=28 rollover ეფექტი ვებ საიტებისა თუ ვებ აპლიკაციების დიზაინში ხშირად გამოყენებადი ელემენტია. განსაკუთრებით ხშირად იგი გამოიყენება ნავიგაციის მენიუებში, თუმცა არც სხვა შემთხვევები წარმოადგენს გამონაკლისს. წლების წინ როდესაც CSS – ის მხარდაჭერა არასრულყოფილად იყო რეალიზებული ბროუზერებში ამ ეფექტის მიღწევის ერთადერთი გზა იყო JavaScript.

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

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

ქვემოთ ნაჩვენები მარტივი მენიუ მთლიანად გაკეთებულია CSS და XHTML კოდის მეშვეობით და იგი არ იყენებს JavaScript – ს.

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

  1. იცვლება ელემენტის ფონის ფერი
  2. იცვლება ტექსტის ფერი
  3. იცვლება მარჯვენა გვერდის ფერი

მენიუს HTML კოდი შედგება სულ რამდენიმე სტრიქონისგან:

1
2
3
4
5
6
7
<div id="menu">
  <ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
  </ul>
</div>

კოდიდან ცხადად ჩანს რომ მასში არ არის გამოყენებული არც ერთი მოვლენა (event), JavaScript – ით იგივე ეფექტის მიღების შემთხვევაში ყველა a ელემენტისთვის საჭირო იქნებოდა onmouseover და onmouseout მოვლენების გამოყენება. ამ შემთხვევაში კი ყველა ცვლილება ხორციელდება მხოლოდ CSS კოდით რომელიც ნაჩვენებია ქვემოთ.

მენიუს CSS კოდს აქვს შემდეგი სახე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#menu ul {
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}
#menu a {
  display: block;
  width: 150px;
  background-color: lightblue;
  color: blue;
  border-bottom: 1px solid gray;
  border-right: 5px solid silver;
  text-decoration: none;
  padding: 2px;
}
#menu a:hover {
  background-color: pink;
  border-right: 5px solid orange;
  color: red;
}

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

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

1
2
3
4
5
6
#menu a:hover {
  background-image: url("hoverimage.gif");
        background-repeat: no-repeat;
  border-right: 5px solid orange;
  color: red;
}

ასეთ შემთხვევაში (იგულისხმება რომ სურათი სახელად hoverimage.gif არსებობს) ელემენტს მიენიჭება ახალი ფონის სურათი… თუმცა ეს არ არის ყველაფერი, მაგალითად წარმოვიდგინოთ შემთხვევა როდესაც მენიუს ელემენტზე მაუსის ისრის მიტანის დროს უნდა გამოჩნდეს რაიმე დამალული ელემენტი როგორც ნაჩვენებია შემდეგ მაგალითში:

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

როგორ მიიღწევა ეს ეფექტი? პირველ რიგში მცირე ცვლილება HTML კოდში:

1
2
3
4
5
6
7
<div id="menu">
  <ul>
    <li><a href="#">Item One<span>&nbsp;Info One</span></a></li>
    <li><a href="#">Item Two<span>&nbsp;Info Two</span></a></li>
    <li><a href="#">Item Three<span>&nbsp;Info Three</span></a></li>
  </ul>
</div>

მენიუს ყოველ ელემენტს a ტეგს შიგნით დავამატეთ span ტეგი შესაბამისი ტექსტით, რომელიც მენიუს ელემენტზე ისრის მიტანის დროს გამოჩნდება.

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

1
2
3
4
5
6
7
8
9
#menu a span {
  display: none;
}

#menu a:hover span {
  display: inline;
  font-weight: bold;
  color: green;
}

განვიხილოთ თითოეული მათგანი.

#menu a span – ის მეშვეობით უბრალოდ ვმალავთ a ელემენტების შიგნით არსებულ span ტეგებს.

#menu a:hover span – ის მეშვეობით კი პირიქით, ვაჩენთ span ტეგს CSS display თვისების მეშვეობით.

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

1
2
3
4
#menu ul li {
        display: inline-block;
        float: left;
}

ვერტიკალურის ნაცვლად მივიღებთ ჰორიზონტალურ მენიუს.

]]> http://www.code.ge/posts/css-rollover-effect-without-javascript/feed 10 ელემენტის სტილებთან მუშაობა – ნაწილი 2 http://www.code.ge/posts/working-with-element-styles-part-two http://www.code.ge/posts/working-with-element-styles-part-two#comments Sat, 24 Feb 2007 20:50:19 +0000 იოსები http://localhost/wordpress/?p=16 ელემენტების სტილებთან მუშაობა ხშირი და გარდაუვალი აუცილებლობაა, თუმცა მას გააჩნია თავისი სირთულეები. სტილებთან მუშაობის მარტივი მაგლითი აღწერილია ამ სტატიის პირველ ნაწილში. რაში მდგომარეობს სტილებთან მუშაობის სირთულე და რითია ეს საკითხი ასეთი მნიშვნელოვანი? მთავარი პრობლემა ბროუზერების არათავსებადობაში მდგომარეობს, მიუხედავად იმისა რომ დღეს მინიმუმამდე დავიდა ეს პრობლემა გარკვეულ და ხშირად საკმაოდ მნიშვნელოვან საკითხებში მაინც საჭიროა ამ პრობლემასთან ბრძოლა.

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

1
<p class="someClass"></p>

ასეთ შემთხვევაში როდესაც ელემენტს სტილი განსაზღვრული აქვს class ატრიბუტის მეშვეობით და არა style ატრიბუტის მეშვეობით შეუძლებელია მივიღოთ დავუშვათ ელემენტის border-left-width css ატრიბუტის მნიშვნელობა. როგორ მოვიქცეთ იმ შემთხვევაში თუ აუცილებლად გვესაჭიროება რომელიმე css ატრიბუტის მნიშვნელობის დადგენა?

ამისათვის ორი გზა არსებობს:

  • w3c სტანდარტის გამოყენებით.
  • Internet Explorer – ის სტანდარტის გამოყენებით (IE ბრწყინავს როგორც ყოველთვის)

ზემოთთქმულიდან გამომდინარე შეგვიძლია დავწეროთ ასეთი JavaScript კოდი:

1
2
3
4
5
6
7
function getStyle(element, styleName) {
    if (isIe) {
       return element.currentStyle[styleName];
    } else {
       return document.defaultView.getComputedStyle(element, null).getPropertyValue(styleName);
    }
}

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

მაგალითად CSS – ის წერისას თუ გვინდა განვსაზღვროთ ელემენტსი მარცხენა გვერდის სიგანე ვწერთ ასეთ კოდს: border-left-width: 5px; ან თუ გვსურს მისი ფონის ფერის განსაზღვრა: background-color: red; ამ ნიმუშებიდან ჩანს რომ სტილის დასახელება შედგება ორი ან ორზე მეტი სიტყვისგან რომელიც გამოყოფილია ტირეების მეშვეობით. თუ დაგვჭირდება რომელიმე ამ სტილის მნიშვნელობის მიღება შეგვიძლია გამოვიყენოთ ზემოთ აღწერილი getStyle ფუნქცია:

1
2
alert(getStyle(someElement, 'border-left-width'));
alert(getStyle(someElement, 'background-color'));

თუმცა ამ კოდს თუ გავტესტავთ Mozilla FireFox – სა და Internet Explorer – ში განსხვავებულ შედეგს მივიღებთ – ცეცხლაკუდა სწორ პასუხს დაგვიბრუნებს ხოლო ინტერნეტ ექსპლორერი კი არაფერს… რის გამო ხდება ეს?

მიზეზი მდგომარეობს იმაში რომ IE – ს CSS ატრიბუტებს ინახავს განსხვავებულად, მაგალითად: background-color ატრიბუტი IE – სთვის არის backgroundColor და თუ გვინდა მისი მნიშვნელობის მიღება კოდი უნდა ჩავწეროთ შემდეგნაირად:

1
2
alert(getStyle(someElement, 'borderLeftWidth'));
alert(getStyle(someElement, 'backgroundColor'));

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

ამ პრობლემის თავიდან ასარიდებლად შეგვიძლია დავწეროთ ისეთი ფუნქცია რომელიც საჭიროების შემთხვევაში დავუშვათ ასეთ ტექსტს border-left-width მისცემს ასეთ სახეს borderLeftWidth და ბროუზერების შესაბამისად დაგვიბრუნებს სწორ რეზულტატს:

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
var Util = {
    style: {
        getStyle: function(element, styleName) {
           
            // private function
            function getCamelCase(string) {
                var tokens = string.split('-');
                if (tokens.length > 1) {
                    for (var i = 1; i < tokens.length; i++) {
                        tokens[i] = tokens[i].substring(0, 1).toUpperCase() + tokens[i].substring(1).toLowerCase();
                    }
                    string = tokens.join('');
                }
                return string;
            }
           
            var style = null;
           
            if (element.style[styleName]) {
                style = element.style[styleName];
            } else if (element.currentStyle) { //detect if we are working with IE
                styleName = getCamelCase(styleName);
                if (element.currentStyle[styleName]) {
                    style = element.currentStyle[styleName];
                }
            } else if (window.getComputedStyle) { //detect if w3c model is available
                style = document.defaultView.getComputedStyle(element, null).getPropertyValue(styleName);
            }
           
            return style;
           
        }
    }
}

კოდში პირველ რიგში ყურადღება უნდა მივაქციოთ getCamelCase ლოკალურ ფუნქციას (თუ რა არის camelCase შეგიძლიათ იხილოთ http://en.wikipedia.org/wiki/CamelCase მისამართზე) რომელიც ასრულებს ძირითად სამუშაოს და ტირეებით გამოყოფილ ატრიბუტის სახელს გარდაქმნის საჭირო ფორმატში (მაგ. border-left-width სტრიქონს გადაიყვანს borderLeftWidth) და აბრუნებს ამ ახალ მნიშვნელობას, რომლის გამოყენებაც უკვე შესაძლებელია IE-ს შემთხვევაში.

ამ კოდის მეშვეობით უკვე შესაძლებელია რომ ელემენტის სტილის მნიშვნელობა მივიღოთ ერთი სტანდარტული გზით, ისე როგორც ეს იყო აღწერილი პირველ JavaScript ნიმუშში:

1
2
alert(Util.style.getStyle(someElement, 'border-left-width'));
alert(Util.style.getStyle(someElement, 'background-color'));

ეს კოდი იმუშავებს ორივე ბროუზერში ერთნაირად.

]]> http://www.code.ge/posts/working-with-element-styles-part-two/feed 2 ელემენტის სტილებთან მუშაობა – ნაწილი 1 http://www.code.ge/posts/working-with-element-styles-part-one http://www.code.ge/posts/working-with-element-styles-part-one#comments Sat, 24 Feb 2007 05:29:48 +0000 იოსები http://localhost/wordpress/?p=15 HTML ელემენტებთან მუშაობისას JavaScript-ით ხშირად საჭიროა მისი სტილების ცვლა. სხვადასხვა შემთხვევაში და სხვადასხვა ამოცანის გადაწყვეტის დროს შეიძლება ერთი ან რამდენიმე სტილი შევუცვალოთ ელემენტს, თუმცა ცვლილების გარდა ხშირ შემთხვევაში საჭიროა ელემენტს დავუბრუნოთ საწყისი სახე გარკვეული ოპერაციის დასრულების შემდეგ.

მაგალითად ტესტირების დროს ხშირად მიწევს ასეთი კოდის წერა:

1
2
3
4
5
function elementOnMove(element) {
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
var oldStyle = null;

function elementOnMove(element) {
    oldStyle = element.style.cssText;
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

function elementOnStop(element) {
    element.style.cssText = oldStyle;
}
  • მაგალითში შევქმენით ახალი გლობალური oldStyle ცვლადი რომელზე წვდომაც პირდაპირ შეგვიძლია ფუნქციებიდან (PHP-სგან განსხვავებით JavaScript-ში არავითარი დამატებიტი კონსტრუქციების გამოყენება არ არის საჭირო გლობალურ ცვლადებთან სამუშაოდ).
  • elementOnMove ფუნქციაში ამ ცვლადს მივანიჭეთ ელემენტის უკვე არსებული CSS ტექსტი (თუ ცარიელი არ არის მას აქვს მსგავსი სახე: font: arial; font-size: 12px; background-color: blue და ა.შ.)
  • ელემენტს შევუცვალეთ სტილები საჭიროების მიხედვით.

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

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

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

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
var Util = {
    style: {
        saveState: function(element) {
            if (element) {
                element.oldCssText = element.style.cssText;
            }
        }, restoreState: function(element) {
            if (element) {
                element.style.cssText = element.oldCssText;
                element.oldCssText = null;
            }
        }
    }
}

//usage
function elementOnMove(element) {
    Util.style.saveState(element);
    element.style.display = "block";
    element.style.border = "2px solid red";
    element.style.width = element.offsetWidth;
}

function elementOnStop(element) {
    Util.style.restoreState(element);
}

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

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

]]> http://www.code.ge/posts/working-with-element-styles-part-one/feed 1 ეფექტური მუშაობა CSS კლასებთან JavaScript-ის მეშვეობით http://www.code.ge/posts/effective-working-with-css-classes-via-javascript http://www.code.ge/posts/effective-working-with-css-classes-via-javascript#comments Sat, 24 Feb 2007 00:27:56 +0000 იოსები http://localhost/wordpress/?p=12 რამდენიმე დღის წინ ჩემს მეგობართან საუბრისას(Otory) მან დამისვა ასეთი შეკითხვა შეიძლებოდა თუ არა რომ HTML ელემენტისთვის რაიმე ეფექტური გზით მოგვეშორებინა CSS კლასი. ცნობილია რომ ერთ ელემენტს შეიძლება გააჩნდეს რამდენიმე CSS კლასი ერთდროულად:

1
<div class="classOne classTwo classThree"></div>

ასევე შესაძლებელია რომ ელემენტს JavaScript – ის მეშვეობით დავამატოთ ან მივანიჭოთ სხვა CSS კლასი. თუმცა რომელიმე ერთი კონკრეტული კლასის მოცილება ელემენტისთვის თუ მას გააჩნია რამდენიმე კლასი გარკვეულ სირთულესთან არის დაკავშირებული, რადგან არ არსებობს რაიმე წინასწარ შემუშავებული მეთოდი ამ ამოცანის გადასაწყვეტად.

მოცემულ შემთხვევაში საჭირო იყო რომ გარკვეულ HTML ელემენტს mouseover მოვლენაზე დამატებოდა სხვა CSS კლასი, ხოლო mouseout მოვლენაზე კი ეს კლასი მოცილებოდა.

ცალკეულ და ერთეულ შემთხვევაში ამ მიზნის მიღწევა შეიძლება მარტივად თუმცა გარკვეული კოდირების საშუალებით, მაგრამ მსჯელობის შედეგად მივიღეთ ასეთი პატარა მაგრამ სასარგებლო JavaScript კლასი რომლის გამოყენება შეიძლება ნებისმიერ შემთხვევაში და არ არის დამოკიდებული მხოლოდ ამ მოცემულ მაგალითზე:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var Util = {
    style: {
        addClass: function(element, className) {
            var classNames = element.className.split(' ');
            classNames.push(className);
            element.className = classNames.join(' ');
        },
        setClass: function(element, className) {
            element.className = className;
        },
        removeClass: function(element, className) {
            var classNames = element.className.split(' ');
            for (var i = 0; i < classNames.length; i++) {
                if (classNames[i] == className) {
                    classNames.splice(i, 1);
                    break;
                }
            }
            element.className = classNames.join(' ');
        }
    }
};

როგორც კოდიდან ჩანს, style კლასს გააჩნია სულ სამი მეთოდი და ყოველი მათგანი პარამეტრად ღებულობს HTML ელემენტს და CSS კლასის სახელს. მეთოდები აღწერას არ საჭიროებენ რადგან მათი სახელებიდან ნათლად ჩანს მათი დანიშნულება.

ამ კლასის გამოყენების მაგალითი ნაჩვენებია ქვემოთ (ყურადღება მიაქციეთ რომ div ელემენტს თავიდანვე მინიჭებული აქვს ორი CSS კლასი):

CSS კოდი რომელიც გამოყენებული იყო მაგალითისთვის:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div.initial {
    border: 2px solid red;
    background: silver;
}

div.common {
    font: normal 12px arial;
    color: red;
    padding: 8px;
}

div.over {
    border: 2px solid red;
    background: gray;
    font-weight: bold;
}

HTML კოდი რომელიც გამოყენებული იყო მაგალითისთვის:

1
2
3
<div class="initial common" onmouseover="Util.style.addClass(this, 'over')" onmouseout="Util.style.removeClass(this, 'over')">
  This is sample text
</div>

ელემენტის onmouseover და onmouseout ატრიბუტები გვიჩვენებენ თუ რა ოპერაციას ასრულებს style კლასი.

]]> http://www.code.ge/posts/effective-working-with-css-classes-via-javascript/feed 3