Bu günün veb brauzeri hər hansı bir cross-brauzer tutarlılığının arzuolunan düşüncəsi olduğu çılpaq günlərdən uzun bir yol gəldi. Bu günün veb brauzerləri bütün standartlara uyğundur. Onlar birlikdə yaxşı oynayır və müxtəlif brauzerlər arasında kifayət qədər ardıcıl bir səhifə nümayiş etdirirlər. Bu, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari və son günlərdə veb sayta daxil olmaq üçün istifadə edilən çox sayda mobil cihazda olan müxtəlif brauzerlərdən ibarətdir.
Veb brauzerlər və CSS-ləri necə nümayiş etdirdiyinə dair irəliləyişlər qətiliklə irəli sürülsə də, bu müxtəlif proqram variantları arasında hələlik ziddiyyətlər mövcuddur. Ümumi uyğunsuzluqlardan biri bu brauzerlərin marjinləri, padding və sərhədləri default olaraq necə hesablayır.
Boks modelinin bu aspektlərinə görə bütün HTML elementləri təsir edir və onlar səhifə düzəltmələri yaratmaqda vacib olduğundan, uyğun olmayan bir görünüş bir səhifə bir brauzerdə böyük görünə bilər, ancaq bir-birinə bir az baxın. Bu problemlə mübarizə aparmaq üçün bir çox veb-dizaynerlər qutu modelinin bu aspektlərini normallaşdırır. Bu təcrübə margin, padding və sərhədlərin dəyərlərini "sıfıra endirmək" kimi tanınır.
Brauzer Varsayılanlarına dair Qeyd
Veb brauzerlərin hamısı bir səhifənin müəyyən görünüş aspektləri üçün standart parametrlərə malikdir. Məsələn, köprüler mavi və default olaraq vurğulanır. Bu müxtəlif brauzerlər arasında uyğundur və ən dizaynçıların öz konkret layihələrinin dizayn ehtiyaclarına uyğun dəyişməsinə baxmayaraq, onların hamısı eyni əvəzi ilə başlayan fakt bu dəyişiklikləri daha asanlaşdırır. Təəssüf ki, boşluqlar, padding və sərhədlər üçün standart dəyər eyni səviyyədə cross-browser tutarlılığından zövq almaz.
Margins və Padding üçün Normalleştirici Dəyərlər
Tutarsız kutu modelinin problemini çözmenin en yaxşı yolu, HTML öğelerinin bütün kenar boşluklarını ve padding değerlerini sıfıra ayarlamaktır. Bunu edə biləcəyiniz bir neçə yol var ki, bu CSS qaydasını stilinizə əlavə etməkdir:
* {margin: 0; padding: 0; }Bu CSS qayda * və ya joker karakterdən istifadə edir. Bu xarakter "bütün elementlər" deməkdir və əsasən hər bir HTML elementini seçəcək və marjinləri təyin etmək və 0-a doldurmaq olar. Bu qayda çox xarici görünməmiş olsa da, xarici üslubda olduğundan, u mənim brauzerdən dəyərlər edir. Bu əvvəldən nələr yazdığınızdan bəri, bu bir tərz sizin etdiyinizə nail olacaq.
Digər bir seçim bu dəyərləri HTML və bədən elementlərinə tətbiq etməkdir. Sayfanızdaki bütün diğer öğeler bu iki öğenin çocukları olacağından, CSS kaskadı, bu değerleri diğer tüm unsurlara uygulayacaktır.
html, body {margin: 0; padding: 0; }Bu, bütün brauzerlərdə eyni yerdə dizaynınıza başlayacaq, ancaq xatırlamaq lazım olan bir məqam, bütün marjinləri açdığınız və padding-dən çıxdığınız zaman, görünüşünə nail olmaq üçün veb-səhifənizin müəyyən hissələrinə seçici olaraq onları yenidən seçmək lazımdır və dizaynınızın çağırış etdiyini hiss edin.
Sərhədlər
Düşünürsünüz, ancaq "heç bir brauzerin vücut elementi ətrafında sərhəd yoxdur". Bu, həqiqətə uyğun deyil. Internet Explorer'ın daha eski versiyalarında elementlər ətrafında şəffaf və ya görünməz sərhəd var. Sərhədi 0-a təyin etmədiyiniz təqdirdə, bu sərhəd səhifə düzəltmələrinizi poza bilər. IE'nin bu antik versiyalarını dəstəkləməyə davam edəcəyinizə qərar verdiyiniz təqdirdə bədəninizə və HTML üslublarına aşağıdakıları əlavə etmək lazımdır:
HTML, bədən {
margin: 0px;
padding: 0px;
sərhəd: 0px;
}
Kenar boşluğunun ve padding'in nasıl kapandığına benzer şekilde, bu yeni stil de standart sınırları kapatacaktır. Həm də məqalədə əvvəlcədən göstərilən joker seçicidən istifadə etməklə eyni şeyi edə bilərsiniz.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard 9/27/16 tarixində redaktə etdi.