• Გადაცემა

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

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

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

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

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

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

* (ზღვარი: 0; padding: 0;) P (Margin: 5px 0 10px 0;)

შედეგად, ჩვენ გვქონდა რა შეიძლება ითქვას მესამე მაგალითში.

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

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

1. ნაკლებია - ჩემი არჩევანი CSS (ედ Elliot).

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

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

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

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

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

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

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

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

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

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

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

5. თავიდან ასაცილებლად გადაჭარბებული თვისებები, როდესაც CSS გადატვირთვისას

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

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

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

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

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

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

სხეული (LINE- სიმაღლე: 1 ფერი: # 996633; ფონი: #CCC URL (კრამიტი- image.gif) გამეორება-x ზედა მარცხენა;)

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

Eric Meyer განაცხადა ამის შესახებ: "ეს არ არის შემთხვევა, როდესაც ყველამ უნდა გამოიყენოს CSS გადატვირთვა ცვლილებების გარეშე".

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

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

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

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

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

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

გადატვირთეთ CSS ერთად უნივერსალური სელექტორი

* (შრიფტის ოჯახი: ყველა ელემენტი მათ მშობლის შრიფტის ყურსასმენებისგან * / შრიფტის სტილი: მემკვიდრეობა; / * მემკვიდრეობა * / შრიფტის წონა: მემკვიდრეობა; / * მემკვიდრეობა ცხიმიანი * / ვერტიკალური გასწორება: საბაზისო / * ვერტიკალური საბაზისო განლაგება * / შრიფტის ზომა: 100%; / * შრიფტის ზომა 100% * / ფონის: გამჭვირვალე; / * ყველა ელემენტის ფონზე გამჭვირვალე * / საზღვრის: 0; / * ამოღება ჩარჩო * / მონახაზი: 0; / * წაშლა კონტურები * / ზღვარი: 0; / * ამოღება სფეროები * / padding: 0; / * ამოიღონ ინდპენტები * /)

მაგალითის აღწერა

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

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

გადატვირთეთ CSS საწყისი Yahoo!

სხეული, div, dl, dt, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, წინასწარი, ფორმა, fieldset, შეყვანის, ტექსტის, p, blockquote, ე, TD (ზღვარი: 0; Padding: 0;) Fieldset, IMG, ABBR, აკრონიმი (სასაზღვრო: 0;) მისამართი, წარწერა, ციტირება, კოდი, DFN, EM, ძლიერი, TH, VAR (FONT-STYLE: ნორმალური; (სასაზღვრო კოლაფსი: Collapse; / * საერთო საზღვრები ცხრილების მაგიდები * / სასაზღვრო-ინტერპრეტაცია: 0; / * ნულოვანი მანძილი უჯრედებს შორის /) წარწერა, ე (ტექსტის გასწორება: მარცხნივ; / * ტექსტის გასწორება მარცხნივ * /) OL, UL (List-STYLE: NONE; / * ჩამონტაჟებული ჩამონათვალი * /) H1, H2, H3, H4, H4, H6 (შრიფტის ზომა: 100%; _ ადრე, Q: შემდეგ (შინაარსი: ""; / * ჩვენ გააუქმებთ შეთავაზებებს Q * /)

მაგალითის აღწერა

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

RESET CSS ეხლა ერიკ Meyer

HTML, Body, Div, Span, აპლეტი, ობიექტი, IFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, აკრონიმი, მისამართი, BIG, Cite, კოდი, Del, DFN, Em, img, ins, kbd, q, s, samp, მცირე, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, fieldset, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, tfoot, tr, tr, th, td, სტატია, განზე, ტილო, დეტალები, embed, ფიგურა, figcaption, footer, header, hgroup, მენიუ, Nav, გამომავალი, Ruby, განყოფილება, რეზიუმე, დრო, მარკ, აუდიო, ვიდეო (ზღვარი: 0; padding: 0; სასაზღვრო: 0; Font-size: 100%; შრიფტი: მემკვიდრეობა: ვერტიკალური გასწორება: ") მუხლი, განზე, დეტალები, ფიგურა, დეტალები, ფიგურა, ფიგურა, ძირი, სათაური, ჰიგუნი, მენიუ, მენიუ, სექცია (ჩვენება: / * ჩვენ ბლოკებს (ძველი ბრაუზერები) * /) სხეული (Line-Height: 1; / * სტრიქონებს შორის მანძილი ტექსტი გვერდზე * /) OL, UL (სია-სტილის: None;) BlockQuote: სანამ, BlockQuote: შემდეგ, Q: ადრე, Q: შემდეგ (შინაარსი: ""; / * ამოიღეთ შეთავაზებები Q და BlockQuQuote * / Content: არცერთი; / * დამატება ლოიალურობის * /) BlockQuote, Q (შეთავაზებები: არცერთი; / * სხვა გზა ამოიღონ შეთავაზებები * /) მაგიდა (სასაზღვრო კოლაფსი: კოლაფსი;

მაგალითის აღწერა

CSS- ის გადატვირთვის შემდეგი გზა ერიკ მაიერ (ერიკ მაიერი) - ვებ დეველოპერი ცნობილია გარკვეულ წრეებში. აქ მან უკვე დაამატა HTML 5-დან Tags- ის სტილის გადატვირთვა, რომელიც, სხვათა შორის, ამ სტატიის წერის დროს და თავად ჯერ კიდევ ძალიან ცუდად არის მხარდაჭერილი თანამედროვე ბრაუზერები. მაგრამ თქვენ ყოველთვის უნდა გამოიყურებოდეს პერსპექტივაში, არა?

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

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

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

HTML, სხეული, div, span, აპლეტი, ობიექტი, iframe,
H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre,
A, ABBR, აკრონიმი, მისამართი, დიდი, ციტიანი, კოდი,
Del, DFN, Em, Font, IMG, IMG, IM, KBD, Q, S, Samp,
პატარა, strike, ძლიერი, sub, sup, tt, var,
B, U, I, ცენტრი,
Dl, dt, dd, ol, ul, li,
Fieldset, ფორმა, ეტიკეტი, ლეგენდა,
მაგიდა, წარწერა, tbody, tfoot, thad, tr, th, td (
ფონის: გამჭვირვალე;
საზღვარი: 0;
ფონტის ზომა: 100%;
ზღვარი: 0;
განტოტვილი: 0;
Padding: 0;
ვერტიკალური გასწორება: საბაზისო;
}
სხეული (
ხაზი სიმაღლე: 1;
}
Ol, ul (
სიის სტილი: არა;
}
Blockquote, q (
შეთავაზებები: არა;
}
BlockQuote: ადრე, BlockQuote: შემდეგ,
Q: ადრე, Q: შემდეგ (
შინაარსი: "";
შინაარსი: არა;
}
: ფოკუსი (
განტოტვილი: 0;
}
მაგიდა (
სასაზღვრო კოლაფსი: დაშლა;
სასაზღვრო-ინტერვალი: 0;
}

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

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

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

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

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

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

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

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

მაგრამ ახლა სიტუაცია ნაკლებია ეწინააღმდეგება განლაგებას?

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

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

მაგრამ ჩვენ ვრცელდება ჩვენი სტილის, ძირითადი ძირითადი?

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

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

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

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

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

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

კორექტირება / შეცდომის კორექტირება

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

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

/ ** * დაამატეთ სწორი ჩვენება IE- ში. * / / ძირითადი (ჩვენება: ბლოკი;)

/ ** * დაამატეთ სწორი ჩვენება IE- ში. * / ძირითადი (ჩვენება: ბლოკი;)

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

კიდევ ერთი მაგალითი PURE CSS, რომელიც შესაფერისია, მათ შორის თანამედროვე ვებ პროგრამების - ფიქსის ჩვენების ელემენტები და ატრიბუტი გადამალული.

[დამალული] (ჩვენება: არა! მნიშვნელოვანია; // ერთი კარგი გამოყენების შემთხვევები! მნიშვნელოვანია }

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

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

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

მარტივი უნივერსალური მიდგომამოხსნის indents / საველე Tags:

* (ზღვარი: 0; padding: 0;)

* (ზღვარი: 0; padding: 0;)

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

HTML, Body, Div, Span, აპლეტი, ობიექტი, IFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, აკრონიმი, მისამართი, BIG, Cite, კოდი, Del, DFN, Em, img, ins, kbd, q, s, samp, მცირე, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, fieldset, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, tfoot, tr, tr, th, td, სტატია, განზე, ტილო, დეტალები, embed, ფიგურა, figcaption, footer, header, hgroup, მენიუ, Nav, გამომავალი, Ruby, სექცია, შემაჯამებელი, დრო, მარკ, აუდიო, ვიდეო (ზღვარი: 0; padding: 0; სასაზღვრო: 0; Font- ზომა: 100%; შრიფტი: მემკვიდრე: ვერტიკალური გასწორება: საბაზისო;)

hTML, Body, Div, Span, აპლეტი, ობიექტი, IFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, აკრონიმი, მისამართი, BIG, Cite, კოდი, Del, DFN, Em, img, ins, kbd, q, s, samp, მცირე, strike, ძლიერი, sub, sup, tt, var, b, u, i, ცენტრი, dl, dt, dd, ol, ul, li, fieldset, ფორმა, ეტიკეტი, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, tfoot, tr, tr, th, td, სტატია, განზე, ტილო, დეტალები, embed, ფიგურა, figcaption, footer, header, hgroup, მენიუ, Nav, გამომავალი, Ruby, სექცია, შემაჯამებელი, დრო, მარკ, აუდიო, ვიდეო (ზღვარი: 0; padding: 0; სასაზღვრო: 0; ფონტის ზომა: 100%; შრიფტი: მემკვიდრეობა: საბაზისო;)

Override სტილის

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

მაგალითად, 1EM- ისა და მარგინების ყველა ზომის ნაცვლად, Sanitize.css, სხვა ღირებულებები მითითებული:

/ ** * შეასწოროთ შრიფტის ზომა და ზღვარი "H1" ელემენტების "სექციაში" და "სტატია" კონტექსტში Chrome, Firefox და Safari- ში. * / / H1 (შრიფტის ზომა: 2EM; ზღვარი: 0. 67EM 0;)

/ ** * შეასწოროთ შრიფტის ზომა და ზღვარი "H1" ელემენტების "სექციაში" და "სტატია" კონტექსტში Chrome, Firefox და Safari- ში. * / H1 (შრიფტის ზომა: 2EM; ზღვარი: 0.67EM 0;)

Bootstrap- ის გადატვირთვა მოახდენს მიმდინარე ამოცანის სხვა ილუსტირებას. დეველოპერები წავიდნენ პატარა შემდგომი და დადგენილი შრიფტები და ფონის ფერი.

// სხეული // // 1. ამოღება ზღვარი ყველა ბრაუზერში. // 2. როგორც საუკეთესო პრაქტიკა, ვრცელდება default `ფონის ფერი` // 3. უცნობია თავდაპირველი ტექსტის გასწორების მნიშვნელობა ისე, რომ ჩვენ მოგვიანებით შეგვიძლია გამოვიყენოთ // "მემკვიდრე" ღირებულება, როგორიცაა "	`ელემენტები. სხეული (ზღვარი: 0; // 1 შრიფტი - ოჯახი: შრიფტი - ოჯახი - შრიფტი - ზომა - ზომა - შრიფტი - წონა: $ შრიფტი - წონა - ხაზი - სიმაღლე: $ ხაზი - სიმაღლე - ბაზა; ფერი: $ სხეული - ფერი; ტექსტი-გასწორება: მარცხნივ; // 3 ფონის ფერი: $ body - bg; // 2)

// სხეული // / 1. ამოღება ზღვარი ყველა ბრაუზერში. // 2. როგორც საუკეთესო პრაქტიკა, ვრცელდება default `ფონის ფერი` // 3. უცნობია თავდაპირველი ტექსტის გასწორების მნიშვნელობა ისე, რომ მოგვიანებით შეგვიძლია გამოვიყენოთ // "მემკვიდრე" ღირებულებით, როგორიცაა ` `ელემენტები. სხეული (ზღვარი: 0; // 1 შრიფტი-ოჯახი: $ შრიფტი-ზომა: $ შრიფტის ზომა; შრიფტი-წონა: $ შრიფტი-წონა-ბაზა; ხაზის სიმაღლე: $ LINE- სიმაღლე -Base; ფერი: $ სხეულის ფერი; ტექსტი-გასწორება: მარცხნივ; // 3 ფონის ფერი: $ body-bg; // 2)

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

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

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

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

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

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

რატომ ცალკე ფაილი? დიახ, მხოლოდ იმიტომ, რომ ეს უფრო მოსახერხებელია პროექტის პროექტში.

აქ არის მაგალითი reset.css 2007 წლიდან:

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | ლიცენზია: არცერთი (საზოგადოებრივი დომენი) * / HTML, Body, Div, Span, აპლეტი, ობიექტი, IFRAME, H1, H2, H3, H4, H5, H6, P, BlockQuote, Pre, A, ABBR, აკრონიმი, მისამართი, Big, Cite, Code, Del, DFN, EM, IMG, IMG, IMG, IMG, KBD, Q, S, Samp, მცირე, გაფიცვის, ძლიერი, Sub, Sup, TT, Var, B, U, I, TT, VAR, B, U, I, CENTER, DL, DT, DT, DD, DD, OL, LI, FIEPET, ფორმა, ეტიკეტების, ლეგენდა, მაგიდა, წარწერა, tbody, tfoot, th, tr, th, td, სტატია, განზე, ტილო, დეტალები, დეტალები, Embed, ფიგურა, figcaption, footer, header, hgroup, მენიუ, MAV, გამომავალი, რუბი, სექცია, შემაჯამებელი, დრო, ნიშანი, აუდიო, ვიდეო (ზღვარი: 0; padding: 0; საზღვრის ზომა: 0; ; შრიფტი: მემკვიდრეობა;) / * HTML5 დისპლეი-როლი გადატვირთვა ხანდაზმული ბრაუზერებისათვის * / სტატია, გარდა, დეტალები, ფიგურა, ფიგურა, სათაური, ჰედერი, HGROUP, მენიუ, NAV, სექცია (ჩვენება: ბლოკი; ) Body (Line Height: 1;) OL, UL (List-STYLE: NONE;) BlockQuote, Q (Quotes: None;) BlockQuote: ადრე, BlockQuote: Agenter, Q: ადრე, Q: შემდეგ (შინაარსი: ""; შინაარსი: არა;) მაგიდა (სასაზღვრო კოლაფსი: C. Ollapse; სასაზღვრო-ინტერვალი: 0; )

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

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

შეყვანა, ტექსტურია, ღილაკი, აირჩიეთ (ნუ) IMG (საზღვარი: არცერთი;) HR (Clear: ორივე საზღვარი: არა, ფონური: არა;) * (ფონის გამეორება: არა-გამეორება;) / * HTML5 ხანდაზმული ბრაუზერების ჩვენება * / სტატია, გარდა, დეტალები, ფიგურა, ფიგურა, სათაური, ჰედერი, ჰიგუნი, მენიუ, ნავ, სექცია (ჩვენება: ბლოკი;) სხეული (line სიმაღლე: 1;) ol, ul (სია -Style: None; 0; padding: 0;) BlockQuotQuote, Q (Quotes: None;) BlockQuote: სანამ, BlockQuote: Agenter, Q: ადრე, Q: შემდეგ (შინაარსი: "") (სასაზღვრო კოლაფსი: დაშლა; სასაზღვრო-ინტერვალი: 0;)

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