Front-end

ბლოგზე მაინც დავწერო რამე, გულს გადავაყოლებ..

ყველაზე ბოლოს რაც მახსოვს, html file input-ის ღილაკზე მინდოდა სტილის დადება (არ მითხრათ flash-ით გექნაო :D)

ნუ, თურმე, რაც არ უნდა თავი მოიკლას კაცმა, მაგ ღილაკს სტილს ვერ შეუცვლის.. ვერც ტექსტს (choose file…). ამ ტექსტს ბრაუზერი სვამს და თან სხვადასხვა ბრაუზერში სხვადასხვაა ხოლმე.

გუგლმა რაღაც ჰაკებამდე მიმიყვანა.. ხალხი css-ით და javascript-ით აღწევს იმას, რომ ამ file input-ს გამჭვირვალეს ასვამს თავზე ჩვეულებრივ ღილაკს და input ველს (ანუ fileinput ზევიდანაა).

და მერე ჯავასკრიპტით იღებს ფაილის სახელს..

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

<button type="submit" id="fake-btn" onclick="document.getElementById('real').click();"> ატვირთვა</button>
<input type="text" id="filename_in"/>
<input type="file" id="real" style="display:none" value="some" onchange="document.getElementById('filename_in').value = this.value;"/>

ანუ, ვმალავ ნამდვილ ამტვირთავ ინფუთს, მაქვს ჩემი ღილაკი და ტექსტური ინფუთი და როცა ვინმე დააჭერს ჩემს ღილაკზე, ვაჭერინებ დამალულზეც click() მეთოდით. ხოლო მერე რა value-საც მიიღებს დამალული ელემენტი , ის გამომაქვს ჩემს ტექსტურ ინფუთში (onchange ივენტის საშუალებით).

მაგრამ მერე გამოჩნდა რატომაც არ გამოდიოდა ესე მარტივად. მოზილას და ოპერას click() მეთოდი (რომლითაც პროგრამულად ვაკეთებთ ელემენტზე მაუსის დაჭერის შემცვლელ მოქმედებას) არ აქვთ file input-ისთვისთვის.. გამონაკლისია ეს. ალბათ უსაფრთხოების მხრივ, მაგრამ რა დიდი ზარალი ეგ არის, ერთი ფაილ დიალოგი გამოვიდეს და მორჩა.. მოკლედ არ ვიცი რატომ არ აქვთ 😀 მაგრამ ფაქტია.. და კიდევ არც onchange ივენთი არ ესმით მაგისთვის.

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

ყოველი შემთხვევისთვის ერთ-ერთი გავრცელებული გზა ეს არის: Quirksmode.org

ისე კარგი ამბავიც არის – html5-ში multiple file ამტვირთავი იქნება ეს ელემენტი. ახლა ეს შესაძლებლობა არ აქვს და flash-ის uploader-ებს იყენებენ ხოლმე.

რომ დავფიქრდი, მგონი ყველაზე მეტი ამ ელემენტმა მაწვალა 😀 მე კიდევ jquery-ის ვაწვალებდი. აი მაგალითად აჯაქს რიქვესთით კი ვერ ატვირთავთ სურათს 😀 აუცილებლად უნდა გადავიდეს საბმიტის გვერდზე. jquery.post-ით ფორმის მონაცემებს რომ ვგზავნით, არ იგზავნება ეს. არც jQuery-ის serialize() ფუნქცია მოქმედებს მაგაზე, ფორმის სერიალიზებას როცა ვაკეთებთ..

გამოსავალი iframe ელემენტია ან ისევ flash uploader-ი.

და ბოლოს, რომ გამოვკეთდები ეს პოსტი რომ არ წავშალო, სიმღერასაც დავამატებ… : D i love it

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

სულ მავიწყდება, რომ ერთხელ და საბოლოოდ გავარკვიო როდის, რა და როგორ ჯობია.

ახლა თქვენთან ერთად გავარკვევ : )

ზოგადი მიმოხილვა

ფარდობითი ერთეულები

em
% – პროცენტი
ex – ამ ერთეულს ‘x-height’-ს ეძახიან, 1ex დაახლოებით პატარა x-ის სიმაღლის ტოლია.  სიდიდე განსაზღვრულია იმ ფონტებისთვისაც, რომლებიც საერთოდ არ შეიცავენ x-ს.

ფიქსირებული ერთეულები

px – პიქსელი
mm – მილიმეტრი
cm – სანტიმეტრი
in – დიუმი (= 2.54სმ)
pt – point. CSS 2.1-მიხედვით ის დიუმის 1/72 ნაწილს უდრის.
pc – pica. 1 pica = 12 points

სტილის წერის დროს კიდევ გვხვდება ზომები xx-small, x-small, small, medium, large, x-large, და xx-large. ასევე smaller და larger. ბოლო ორი ფარდობითია მშობელი ელემენტის ზომის მიმართ. წინებს კი ზუსტად არ ვიცი რა ზომები შეესაბამება პიქსელებში, თუმცა სხვადასხვა ბრაუზერებში საკმაოდ სტაბილურად აჩვენებენ.

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

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

რატომ არ უნდა გამოვიყენოთ px?

IE არ მისცემს მომხმარებელს ასეთი ფონტის ზომის შეცვლას, რაც მოუხერხებელია. იგივე ეხება სხვა ფიქსირებულ ერთეულებს (mm, cm, in ა.შ.).

რატომ არ უნდა გამოვიყენოთ ex?

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

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

თუმცა, ეს პიროვნულ არჩევანზეა დამოკიდებული.

და ბოლოს em

‘medium’ ზომის ტექსტი ბრაუზერებში default-ად 16px-ის ტოლია და ხანდახან რთული გამოსათვლელია ხოლმე აქედან em სიდიდე (იხ. ცხრილი).

ვებ დეველოპერებმა იპოვეს გზა ამ გამოთვლების გასამარტივებლად. მთელი საიტის ფონტის ზომას (body ელემენტში) ანიჭებენ ხოლმე 62.5%-ს. და ამის მერე 1em = 10px (რადგან em ფარდობითი გამოდის უკვე body-ის მიმართ). ასე რომ ნაცნობი პიქსელებიდან მარტივად შეგვიძლია გადავიყვანოთ em-ში 10-ზე გაყოფით.

აქვე გასათვალისწინებელია, რომ ეს ფარდობითობა მისდევს ელემენტების მთელს იერარქიას 😀 შვილს, მერე კიდევ იმის შვილს.. და ა.შ. ამიტომ კარგი იქნება რაც შეიძლება ნაკლები რაოდენობით თუ აღვწერთ font-size თვისებას. ისიც იერარქიების თავში.

არის კიდევ ერთი პატარა საკითხი : )

ბრაუზერები.

ბრაუზერებს აქვთ გვერდის ზომის და ფონტის ზომის რეგულირების შესაძლებლობა (თუმცა ქრომში ფონტის ზუმი ვერ ვიპოვე, მას მერე რაც მთელი გვერდის ზუმი ჩასვეს). უმრავლესობას (Google Chrome, Firefox, Opera, IE 7-8 …) default-ად აქვს მთელი გვერდის ზუმი.

რა განსხვავებაა?

ფონტის გადიდება/დაპატარავების დროს მარტო ფონტის ზომა იცვლება, ხოლო გვერდის ზუმის დროს გვერდი სურათივით იზრდება ერთიანად და ერთიანადვე პატარავდება.

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

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

ისევ და ისევ, ეს IE-ს ძველ ვერსიებს ეხება, თორემ, მაგალითად, Firefox-ში ვერანაირად ვერ გააჩერებთ ფონტს ერთ ზომაზე. მაინც იქნება მისი გადიდების შესაძლებლობა.

საბოლოო ჯამში,

გადავწყვიტე, რომ ამის შემდეგ ყოველთვის em გამოვიყენო ან პროცენტი.. 😛

Update: არა, ყოველთვის px-ს ვიყენებ და ბედნიერი ვარ :))