• თარგმანი

ეს სტატია პირველია სერიიდან CSS-ის მოთვინიერების თემაზე. დღეს ჩვენ განვიხილავთ ტექნოლოგიას CSS გადატვირთვა.

რატომ არის ეს საჭირო?

თითოეული ბრაუზერი ადგენს თავის ნაგულისხმევ სტილის მნიშვნელობებს სხვადასხვა HTML ელემენტებისთვის. CSS Reset-ის გამოყენებით ჩვენ შეგვიძლია გავათანაბროთ ეს განსხვავება, რათა უზრუნველვყოთ სტილების ბრაუზერის თავსებადობა.

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

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

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

* ( ზღვარი: 0; შიგთავსი: 0; ) p ( ზღვარი: 5px 0 10px 0; )

შედეგად მივიღეთ ის, რაც ჩანს მესამე მაგალითში.

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

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

1. Less is more - ჩემი არჩევანი Reset CSS (Ed Elliott).

2. თქვენი CSS Reset არის პირველი, რაც ბრაუზერმა უნდა ნახოს

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

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

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

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

3. გამოიყენეთ ცალკე CSS დოკუმენტი CSS გადატვირთვისთვის

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

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

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

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

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

5. მოერიდეთ საკუთრების ზედმეტ დეკლარაციებს CSS Reset-ის გამოყენებისას

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

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

სხეული (ხაზის სიმაღლე: 1; ფერი: შავი; ფონი: თეთრი; )

ვთქვათ, თქვენ უკვე იცით, როგორი იქნება ელემენტი სხეული:

1. ფონის ფერი: #cccccc;
2. ფერი: #996633;
3. გსურთ გაიმეოროთ გარკვეული ფონის სურათი ჰორიზონტალურად.

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

ტექსტი ( ხაზის სიმაღლე: 1; ფერი: #996633; ფონი: #cccc url(tiled-image.gif) გამეორება-x ზედა მარცხენა; )

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

ერიკ მაიერმა თქვა შემდეგი: ”ეს არ არის შემთხვევა, როდესაც ყველამ უნდა გამოიყენოს CSS Reset ცვლილებების გარეშე.”

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

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

Html, body, div, span, აპლეტი, ობიექტი, iframe,
h1, h2, h3, h4, h5, h6, p, დაბლოკვის ციტატა, წინასწარი,
a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი,
del, dfn, em, შრიფტი, img, ins, kbd, q, s, samp,
პატარა, დარტყმა, ძლიერი, სუბ, სუპ, tt, var,
b, u, i, ცენტრი,
dl, dt, dd, ol, ul, li,
ველების ნაკრები, ფორმა, იარლიყი, ლეგენდა,
მაგიდა, წარწერა, tbody, tfoot, thead, tr, th, td (
ფონი: გამჭვირვალე;
საზღვარი: 0;
შრიფტის ზომა: 100%;
ზღვარი: 0;
მონახაზი: 0;
padding: 0;
ვერტიკალური გასწორება: საბაზისო;
}
სხეული (
ხაზის სიმაღლე: 1;
}
ოლ, ულ (
list-style: არცერთი;
}
დაბლოკვის ციტატა, q(
ციტატები: არცერთი;
}
blockquote: ადრე, blockquote: after,
Q: ადრე, Q: შემდეგ (
შინაარსი: "";
შინაარსი: არცერთი;
}
:ფოკუსი (
მონახაზი: 0;
}
მაგიდა (
საზღვარი-ჩაშლა: ნგრევა;
საზღვრების დაშორება: 0;
}

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

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

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

თუ გადახედავთ პოსტის გადახედვის სურათს, დაინახავთ, რომ ჩვეულებრივი ხაზი სრულიად განსხვავებული გზით არის ნაჩვენები Safari-ში, Chrome-სა და Firefox-ში. დიახ, ზოგჯერ წესები ერთი და იგივეა, მაგალითად, ყველა მალავს head tag-ს დისპლეის საშუალებით: არცერთი, მაგრამ ხშირ შემთხვევაში არის სერიოზული განსხვავებები, თუ როგორ ხდება ობიექტების გადაცემა გვერდზე. ეჭვი მაქვს, რომ ზოგიერთ თქვენს კლიენტს შეიძლება არ მოეწონოს, როდესაც საბოლოო განლაგება განლაგებისგან განსხვავებულად გამოიყურება.

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

რატომ გჭირდებათ CSS პარამეტრების გადატვირთვა?

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

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

მაგრამ ახლა განლაგების ვითარება ნაკლებად საკამათოა?

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

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

მაგრამ ჩვენ ვიყენებთ ჩვენს საკუთარ სტილებს, უმთავრესს?

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

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

CSS გადატვირთვის სახეები (შეგიძლიათ ჩამოტვირთოთ სტატიის ბმულებიდან)

შორეული 2004 წლიდან, როდესაც პირველი ასეთი განვითარება გამოჩნდა, ახლა საკმაოდ ბევრი მეთოდია, რომლებიც განსხვავდება სირთულითა და სპეციფიკით. არსებითად, არსებობს 3 მიზანი, რომელთა გადაჭრასაც ცდილობს CSS სტილის გადატვირთვა:

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

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

შესწორება/შეცდომის გამოსწორება

განვიხილოთ ზემოთ ჩამოთვლილი მიზნებიდან პირველი. როგორც უკვე გესმით, ბრაუზერების სხვადასხვა ნაკლოვანებებისა და ბლოკირების აღმოფხვრა ყველაზე აქტუალურია მოძველებული გამოშვებების მხარდასაჭერად. ამ სიტუაციის ერთ-ერთი კარგი მაგალითია, როდესაც HTML5-ის გამოჩენის შემდეგ, იგივე Internet Explorer 9-მა არ გამოიყენა სწორი ეკრანის ტიპი ახალ ობიექტებზე.

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

/** * დაამატეთ სწორი ჩვენება IE-ში.*/

მთავარი (ჩვენება: ბლოკი;)

/** * დაამატეთ სწორი ჩვენება IE-ში.

*/ მთავარი (ჩვენება: ბლოკი;)

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

[ დამალული] (ჩვენება: არცერთი! მნიშვნელოვანი;

// !მნიშვნელოვანის ერთ-ერთი კარგი გამოყენების შემთხვევა

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

ეს არის სტილი, რომელიც არ არის ელემენტის ჩვენების "შიშველი" ვერსია

. მაგალითად, 2em padding-ის დამატება სათაურებისთვის (როგორც ბევრი აკეთებს) არ არის ცუდი იდეა, მაგრამ რატომ არის 2em და არა 3em ან 4em. ამ შემთხვევაში, ძირითადი ვარიანტი იქნება რაიმე შეწევის არარსებობა, ანუ ნულოვანი ზღვარი.

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

* (ზღვარი: 0 ; ბალიშები: 0 ;)

html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, ბლოკციტატი, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ლეიბლი, ლეგენდა, ცხრილი, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, გამომავალი, რუბი, განყოფილება, შეჯამება, დრო, ნიშანი, აუდიო, ვიდეო (ზღვარი: 0 ; შიგთავსი: 0 ; საზღვარი: 0 ; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საბაზისო; )

html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, ბლოკციტატი, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ლეიბლი, ლეგენდა, ცხრილი, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, გამომავალი, რუბი, განყოფილება, რეზიუმე, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; შიგთავსი: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საბაზისო; )

უმთავრესი სტილები

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

მაგალითად, ყველა შრიფტის დაყენების ნაცვლად 1em ზომაზე და მინდვრებზე = 0, Sanitize.css დაყენებულია სხვა მნიშვნელობებზე:

/** * შეასწორეთ შრიფტის ზომა და ზღვარი `h1` ელემენტებზე `სექციის` და * `სტატიის` კონტექსტში Chrome-ში, Firefox-სა და Safari-ში.*/

h1 (შრიფტის ზომა: 2em; ზღვარი: 0. 67em 0; )

/** * შეასწორეთ შრიფტის ზომა და ზღვარი `h1` ელემენტებზე `სექციის` და * `სტატიის` კონტექსტში Chrome-ში, Firefox-სა და Safari-ში.

*/ h1 ( შრიფტის ზომა: 2em; ზღვარი: 0.67em 0; ) Bootstrap's Reboot-ში ნახავთ მიმდინარე ამოცანის კიდევ ერთ ილუსტრაციას. დეველოპერები ცოტა შორს წავიდნენ და მიუთითეს სხეულის შრიფტები და ფონის ფერი. // სხეული // // 1. წაშალეთ ზღვარი ყველა ბრაუზერში. // 2. როგორც საუკეთესო პრაქტიკა, გამოიყენეთ ნაგულისხმევი `ფონის ფერი`.	// 3. დააყენეთ ტექსტის გასწორების მკაფიო საწყისი მნიშვნელობა, რათა მოგვიანებით გამოვიყენოთსხეული ( ზღვარი: 0 ; // 1 შრიფტი- ოჯახი: $font - საოჯახო-ბაზა; შრიფტის ზომა: $font - ზომა- საფუძველი; შრიფტი- წონა: $font - წონა- საფუძველი; ხაზის სიმაღლე: $ხაზი - სიმაღლე - საბაზისო ფერი: $body - color-text-align: left;

// Body // // 1. წაშალეთ ზღვარი ყველა ბრაუზერში. // 2. როგორც საუკეთესო პრაქტიკა, გამოიყენეთ ნაგულისხმევი `ფონის ფერი`. // 3. დააყენეთ ტექსტის გასწორების მკაფიო საწყისი მნიშვნელობა, რათა მოგვიანებით გამოვიყენოთ // `მემკვიდრეობის` მნიშვნელობა ისეთ რამეებზე, როგორიცაა ` `ელემენტები. სხეული ( ზღვარი: 0; // 1 შრიფტის ოჯახი: $font-family-base; შრიფტის ზომა: $font-size-base; შრიფტის წონა: $font-weight-base; ხაზის სიმაღლე: $line-height -ბაზა ფერი: $body-color: მარცხნივ;

სულ. რა აირჩიოს

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

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

ერთ-ერთი მაგალითი იყო სიის ნაგულისხმევი სტილები, სადაც Internet Explorer-ისა და Opera-ს ბრაუზერის ნაგულისხმევი სტილის ფურცლები თავდაპირველად ჰქონდა სიის შევსება margin-left: 30pt;, ხოლო Firefox-სა და KHTML-ს მოჰყვა padding-left: 40px;. თუ გსურთ შეცვალოთ ნაგულისხმევი padding ul-ის განსაზღვრით (padding-მარცხნივ: 0;), ეს გამოიწვევს ძალიან განსხვავებულ შედეგებს ბრაუზერებში.

CSS პარამეტრების გადატვირთვა

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

* (ზღვარი: 0; ბალიშები: 0;)

* ( ზღვარი : 0 ; ბალიშები : 0 ; )

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

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

html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, ბლოკციტატი, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ლეიბლი, ლეგენდა, ცხრილი, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, გამომავალი, რუბი, განყოფილება, რეზიუმე, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; შიგთავსი: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საბაზისო; )

html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, დაბლოკვის ციტატა, წინასწარი, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, დარტყმა, ძლიერი, სუბ, სუპ, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, იარლიყი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავი, გამომავალი, რუბი, განყოფილება, რეზიუმე, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; padding: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური - გასწორება: საბაზისო;

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

CSS პარამეტრების გადატვირთვის პრობლემები

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

/* გახსოვდეთ ფოკუსის სტილის განსაზღვრა! */ :ფოკუსირება (მოხაზულობა: 0; )

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

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

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

CSS გადატვირთვის წესები მეორდება მემკვიდრეობის გამო

NORMALIZE.CSS

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

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

იმის გამო, რომ Normalize.css-ში ცვლილებები უფრო მიზანმიმართულია, თქვენი ბრაუზერის განვითარების ინსტრუმენტებში არ არსებობს ხელახლა დაწერილი წესების მემკვიდრეობის კასკადი. აქ არის მარტივი ul:, დესტილირებული Meyer Reset და Normalize.css ვერსიებით 1 და 2:

შეუკვეთავი სიის "უსტილირებული" ელემენტი

Meyer Reset-ის გამოყენება

გამოიყენეთ Normalize.css v1

გამოიყენება Normalize.css v2

აშკარა განსხვავებაა ფილოსოფიაში, როდესაც Meyer Reset-ის მაგალითი ჩნდება ჩვეულებრივი ტექსტის რამდენიმე სტრიქონად, ზღვრების, ჩაღრმავების ან პუნქტების გარეშე, ხოლო Normalize.css მაგალითები ნაგულისხმევ სტილებს ჰგავს. ამ ul-ზე გამოყენებული სტილების განსხვავება ასევე ადვილად შესამჩნევია.

თუმცა, ეს არ არის ყველა სტილი, რომელიც გამოიყენება ul. შედარებისთვის, აქ არის იგივე „არასტილირებული“ სკრინშოტი, მაგრამ ხილული მომხმარებლის აგენტის სტილებით, Firefox 21-ში და Opera Next 15-ში.

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

CSS სტილის გადატვირთვის სკრიპტების მაგალითები

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

ერიკ მეიერის CSS გადატვირთვა

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

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 ლიცენზია: არ არის (საჯარო დომენი) */ html, body, div, span, აპლეტი, ობიექტი, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, აკრონიმი, მისამართი, დიდი, ციტირება, კოდი, del, dfn, em, img, ins, kbd, q, s, samp, პატარა, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, ველების ნაკრები, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, thead, tr, th, td, სტატია, განზე, ტილო, დეტალები, ჩაშენება, ფიგურა, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, nav, გამომავალი, რუბი, განყოფილება, შეჯამება, დრო, ნიშანი, აუდიო, ვიდეო ( ზღვარი: 0; padding: 0; საზღვარი: 0; შრიფტის ზომა: 100%; შრიფტი: მემკვიდრეობა; ვერტიკალური გასწორება: საწყისი ხაზი ) /* HTML5 დისპლეის როლის გადატვირთვა ძველი ბრაუზერებისთვის */ სტატია, განზე, დეტალები, ფიგურა, ქვედა კოლონტიტული, სათაური, hgroup, მენიუ, ნავიგაცია, სექცია (ჩვენება: ბლოკი; ) ტექსტი (ხაზის სიმაღლე: 1; ) o კოლაფსი: კოლაფსი;

საზღვრების დაშორება: 0; )

Yahoo! (YUI 3) გადატვირთეთ CSS

/* YUI 3.18.1 საავტორო უფლება 2014 Yahoo! Inc. ყველა უფლება დაცულია. ლიცენზირებულია BSD ლიცენზიით. http://yuilibrary.com/license/ */ /* TODO-ს დასჭირდება წაშალოს პარამეტრები HTML-ზე, რადგან ჩვენ არ შეგვიძლია მისი სახელების დაყენება. TODO პრეფიქსით, უნდა დავაჯგუფო სელექტორის მიხედვით ან თვისების მიხედვით წონის დაზოგვისთვის? */ html( ფერი:#000 ფონი:#FFF ) /* TODO წაშალეთ პარამეტრები BODY-ზე, რადგან ჩვენ არ შეგვიძლია მისი სახელების დაყენება. */ /* TODO ტესტი, რომელიც აყენებს კლასს HEAD-ზე.

- ჩავარდა FF-ზე. */ სხეული, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, წინა, კოდი, ფორმა, ველების ნაკრები, ლეგენდა, შეყვანა, ტექსტური არე, p, ბლოკციტატი, th, td ( margin:0; padding:0; ) table ( border-collapse:collapse; border-spacing:0; ) fieldset, img ( border:0; ) /* TODO იფიქრეთ მემკვიდრეობის სხვაგვარად გამოყენებაზე, შესაძლოა, IE6-ს ცოტათი მარცხი მისცეს ... */ მისამართი, წარწერა, ციტირება, კოდი, dfn, em, ძლიერი, th, var ( font-style:normal; font-weight:normal; ) ol, ul (list-style:none; ) წარწერა, th ( ტექსტის გასწორება:მარცხნივ; ) h1, h2, h3, h4, h5, h6 ( შრიფტის ზომა:100%; შრიფტის წონა: ნორმალური; ) q:წინა, q:after ( შინაარსი:""; ) abbr, აკრონიმი ( საზღვარი: 0; შრიფტის ვარიანტი: ნორმალური; ) /* ხაზის სიმაღლისა და ამომრჩევის გარეგნობის შესანარჩუნებლად */ sup ( vertical-align:text-top; ) sub ( vertical-align:text-bottom; ) შეყვანა, textarea აირჩიეთ ( font-family:inherit; font-size:inherit; font-weight:inherit; *font-size:100%; /*IE-სთვის ზომის შეცვლის ჩასართავად*/ ) /*რადგან ლეგენდა არ იღებს მემკვიდრეობას IE-ში * / ლეგენდა ( ფერი:#000; ) /* YUI CSS Detection Stamp */ #yui3-css-stamp.cssreset ( ჩვენება: არცერთი; )

normalize.css სტილის გადატვირთვა

/*! normalize.css v6.0.0 | MIT ლიცენზია | github.com/necolas/normalize.css */ /* დოკუმენტი ============================================================= = ===================================== */ /** * 1. შეასწორეთ ხაზი სიმაღლე ყველა ბრაუზერში. */ კოდი, kbd, samp ( font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ ) /** * დაამატეთ სწორი შრიფტის სტილი Android 4.3-ში. დაამატეთ სწორი ჩვენება IE 9-ში.

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

გადატვირთვა უნივერსალური სელექტორის მეშვეობით * (ვარსკვლავი)