Გამოიყენე CSS to ნულოვანი თქვენი საზღვრები და საზღვრები

დღევანდელი ბრაუზერი გრძელი გზაა გიჟური დღეებიდან, სადაც ნებისმიერი სახის ჯვარედინი ბრაუზერის თანმიმდევრულობა იყო სასიამოვნო აზროვნება. დღევანდელი ინტერნეტ ბრაუზერები ყველა სტანდარტების შესაბამისია. ისინი თამაშობენ ლამაზად ერთად და სიტყვით საკმაოდ თანმიმდევრული გვერდი ჩვენება მასშტაბით სხვადასხვა ბრაუზერები. ეს გულისხმობს Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari და სხვა ბრაუზერების უახლესი ვერსიები, რომლებიც განთავსებულია ვებ-გვერდზე წვდომის მობილური მოწყობილობების გამოყენებით.

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

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

შენიშვნა ბრაუზერის უპირობოდ

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

ნორმალიზება ფასეულობები ზღვრებისა და პანდინგისათვის

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

* {margin: 0; padding: 0; }

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

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

html, სხეული {margin: 0; padding: 0; }

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

საზღვრები

თქვენ შეიძლება ფიქრობთ "მაგრამ ბრაუზერებს არ აქვთ საზღვარი სხეულის ელემენტზე". ეს არ არის მკაცრად ჭეშმარიტი. Internet Explorer- ის ძველი ვერსიები აქვს გამჭვირვალე ან უხილავი საზღვარი ელემენტების გარშემო. თუ სასაზღვრო არ არის 0-ზე, ეს საზღვარი შეიძლება გაანადგუროთ თქვენს გვერდზე. თუ თქვენ გადაწყვიტეთ, რომ გააგრძელებთ ამ ანტიკვარული ვერსიების IE- ს მხარდაჭერის გაგრძელებას, თქვენ უნდა მივმართოთ ამას თქვენი სხეულისა და HTML სტილის შემდეგ:

HTML, სხეული {
ზღვარი: 0px;
padding: 0px;
საზღვარი: 0px;
}

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

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 9/27/16.