Bu baş verəcək, çünki brauzerdə artıq açılmış səhifələrə standart olaraq tətbiq olunan elementlər üçün öz üslubları var. Və fakt budur ki, müxtəlif brauzerlərdə bu qaydalar brauzerdən brauzerə qədər bir qədər fərqlidir. Təxminən 10 il əvvəl bu fərqlər birbaşa kardinal idi və çox təəccüblü idi. İndi onlar minimaldır, amma yenə də var.

Bu fərqləri aradan qaldırmaq və səhifənin bütün brauzerlərdə standart olaraq eyni görünməsi üçün xüsusi .css faylından istifadə edin: reset.css və ya normalize.css

reset.css - nə edir və necə istifadə olunur

İlk olaraq reset.css faylı göründü. Bu css faylı bütün mümkün html teqlərinin siyahısını ehtiva edir və onların dəyərini sıfıra qaytarır. Yəni, bütün mümkün abzasları aradan qaldırır, şrifti bütün teqlərdə eyni edir, bütün mətn üslublarını sıfırlayır. Beləliklə, bütün başlıqlar və paraqraflar düz mətndə, eyni ölçüdə və abzassız göstərilir. Nəticədə, bütün brauzerlərdə standart üslub sıfırlaması alırıq.

Bu belə işləyir, səhifəyə əvvəlcə reset.css faylını, ondan sonra isə üslubları olan faylımızı daxil edirik. Nəticədə, biz əvvəlcə bütün üslubları sıfırladıq və yalnız bundan sonra style.css-də html teqlərinin dizaynını təyin etdik. Bu yolla biz nail oluruq ki, bütün brauzerlər öz standart üslublarını sıfırlayacaq və bütün işarələmələr style.css-də təyin etdiyimiz üslublara əsaslanacaq.

reset.css faylını yükləyin

Siz cssreset.com saytından reset.css faylını yükləyə bilərsiniz

Və ya versiyanı yükləyə bilərsiniz Aşağıdakı düymədə Eric Meyer-in "CSS-i Sıfırla" 2.0, bloqumdan:

normalize.css - necə işləyir və fərq nədir

reset.css səhifəyə qoşulduqdan sonra bütün üslublar yenidən yazılmalıdır. Və hər dəfə bu işğal yorucu olur. Buna görə sıfırlama başqa bir vasitə ilə əvəz olundu - normallaşdırın. Normailze - adından göründüyü kimi, bütün üslubları sıfırlamır, lakin onları normallaşdırır, bütün brauzerlərdə vahid görünüşə gətirir. Tətbiq edildikdən sonra əsas başlığın ekran üslubları, şrift ölçüsü, abzaslar ... birləşdirilir və bütün brauzerlərdə eyni şəkildə göstərilir. Bundan istifadə edərək, müəyyən bir vaxta qənaət edə bilərsiniz, bu da sıfırlama vəziyyətində sıfırlama üslublarının təyin edilməsinə sərf ediləcəkdir.

Əgər siz hələ normalize.css-dən istifadə etməmisinizsə, onu növbəti layihənizdə sınamağı məsləhət görürəm və kim bilir, bundan artıq imtina edə bilməyəcəksiniz 😉

normalize.css faylını yükləyin

Siz normalize.css faylını necolas.github.io/normalize.css saytından yükləyə bilərsiniz

Və ya bloqumdan yükləyin:

Hansı daha yaxşıdır sıfırlamaq və ya normallaşdırmaq?

Tək cavab yoxdur.

Birincisi bütün üslubları sıfırlayır, ikincisi ortaq məxrəcə gətirib çıxarır. reset.css-dən istifadə edən təcrübəli tərtibatçıların adətən məzmunu üslub etmək üçün sıfırlandıqdan sonra dərhal daxil edilən öz üslub dəstləri var. Və onlar hər dəfə yeni tərtibatda əsas elementlər üçün üslubları yenidən müəyyən etmək məcburiyyətində deyillər. Mən də həmçinin. Mən rahatam və standart olaraq hansı üslubları təyin etdiyimi və onların necə işlədiyini bilirəm.

onun strukturunu öyrənirsinizsə normallaşdırmaq faydalıdır, teqlərin əsas görünüşünü fərdiləşdirməklə onu özünüz üçün dəyişdirə bilərsiniz. Həm də onunla işləmək axında rahat olacaq - çox və tez-tez düzəltməli olduğunuz zaman.

Hər bir alət yaxşıdır, əsas ondan düzgün istifadə etməkdir 😉

Veb saytları tərtib edərkən, bütün əsas brauzerlər tərəfindən eyni dərəcədə yaxşı başa düşüləcək bir sıra CSS xüsusiyyətlərini yazmaq mümkün olmadıqda bir vəziyyət yaranır. Və bu problem Firefox, Google Chrome, Opera və Safari brauzerlərində çox vaxt baş vermirsə, onda Internet Explorer-in müxtəlif versiyalarında brauzerlər arası tərtibata nail olmaq çox çətindir. Buna görə də, bu problemi həll etmək üçün IE-nin bəzi versiyaları üçün xüsusi olaraq css xüsusiyyətlərinin bir hissəsini yazmalısınız (ən çox bunlar IE6 və IE7). Bunun iki yolu var: birincisi Internet Explorer-in şərti şərhlərindən (Şərti şərhlər), ikincisi css hacklərindən istifadə edir (məsələn, *margin-left:10px və ya _margin-left:10px). Hər iki üsulun bir sıra çatışmazlıqları var, amma xoşbəxtlikdən, cross-brauzer css faylları yaratmaq üçün ən optimal hesab etdiyim başqa bir həll var.

Birincisi, ilk iki metodun çatışmazlıqları haqqında daha ətraflı. Şərti şərhlərdən istifadə edildiyi təqdirdə, biz Internet Explorer-in müxtəlif versiyaları üçün əlavə üslubları olan ayrı bir css faylını yükləyirik. Məsələn, bu kimi:

Bu metodun çatışmazlıqları aşağıdakılardır:

• biz internet Explorer-in müxtəlif versiyaları üçün üslublu faylları yükləmək üçün əlavə http sorğuları alırıq ki, bu da səhifənin yüklənmə müddətinə mənfi təsir göstərəcək;
• üslublar müxtəlif fayllara bölünür, bu da saytın tərtibatı üzərində işləyərkən onları tapmağı çox çətinləşdirir (mən özüm çox vaxt ie7 üçün ayrıca css fayllarının norma olduğu belə layihələrlə işləyirdim və harada olduğunu başa düşmək üçün çox vaxt sərf edirəm. cəhənnəm , IE üçün bu və ya digər üslub yüklənir).

Üstəlik, ikinci çatışmazlığı çox əhəmiyyətli hesab edirəm. Və bu baxımdan, hətta IE üçün css hacklərindən istifadə etmək, brauzerlər arası tərtibata nail olmaq üçün daha yaxşı bir yol kimi görünür. Lakin css hacklərinin bir çatışmazlığı da var - onların istifadə olunduğu sayt yoxlamadan keçməyəcək. Əgər veb səhifənin yoxlanılması vacib deyilsə, o zaman hacklərdən istifadə etmək olar, lakin yuxarıda təsvir edilən çatışmazlıqları olmayan ilk ikisindən daha zərif bir həll var. Bununla, bütün üslubları bir faylda yaza bilərsiniz, bu, yoxlamadan uğurla keçəcəkdir. Bu üsul Paul İrishin saytında təsvir edilmişdir. Onun mahiyyəti ondan ibarətdir ki, şərti şərhlərin köməyi ilə biz əlavə css faylı yükləmirik, sadəcə olaraq etiket üçün xüsusi bir sinif təyin edirik. , Modernizr js kitabxanasının sinifləri necə ifşa etdiyinə bənzəyir.

Etiketi açmaq üçün kod , buna görə belə görünəcək:

Bloqumda, yeri gəlmişkən, IE6 və IE7 brauzerlərində saytın səhifələri digər brauzerlərdə olduğu kimi göstərilməsi üçün brauzerlər arası düzülüşün bu xüsusi üsulu istifadə olunur.

Salam əziz oxucular!

Hamımız üslublarımızın müxtəlif brauzerlərdə düzgün göstərilməsini istəyirik. Ancaq kim nə deyə bilərsə, başqa brauzerlərdə işləməsi üçün üslub əlavə etməli olacaqsınız. Bu prosesə saytın tərtibatını gətirmək deyilir çarpaz brauzer görünüşü. Brauzerlər arası uyğunluq css üslublarının müxtəlif brauzerlərdə və onların müxtəlif versiyalarında düzgün şəkildə göstərildiyi zamandır.

Sizə gətirmə prosesinə bəzi məsləhətlər vermək istəyirəm css cross-brauzer uyğunluğu üçün daha az vaxt apardı.

1. Ən populyar brauzerlərə diqqət yetirin. Brauzer reytinqləri internetdə tapıla bilər. Saytın auditoriyasının bölgəsini də nəzərə almağa dəyər. Məsələn, bu Afrikadan olan bir auditoriya üçün bir saytdırsa, Chrome deyil, burada artıq başqa bir brauzer üstünlük təşkil edir. Həmçinin, tərtibat zamanı saytın 2-ci və 3-cü yerləri tutan brauzerlərdə necə göründüyünə baxmağa dəyər.

2. Ən məşhurları axtara bilərsiniz css üslubları, digər brauzerlərdə düzgün görünməyən. Onlar üçün CSS hacklərini tapın.

3. Yaratmaq üçün şəbəkədə xüsusi alətlər var çarpaz brauzer üslubları. Fikrimcə ən maraqlı 2-ni qeyd etmək istəyirəm.

Çarpaz brauzer CSS üçün alətlər.

• Bir çox üslub təsvir edilmişdir;
• Nəticə ilə istifadə nümunəsi var.

• Əvvəlcə saytda naviqasiya etmək çətindir;
• Öz parametrləri ilə üslub yaratmaq mümkün deyil (istifadə nümunəsi verilmişdir).

CSS3 Generator

• İstifadəsi rahat və intuitivdir;
• Parametrləriniz üçün üslublar yarada bilərsiniz;
• Yaradılan üslubun nəticəsini görə bilərsiniz.

• Bir neçə üslub

"Sosial Media Məzmun Marketinqi: Abunəçilərin başına necə girmək və onları brendinizə aşiq etmək" adlı yeni kitabı buraxdıq.

Çarpaz brauzer uyğunluğu - veb-resursun çoxsaylı brauzerlərə uyğunlaşması və onlarda düzgün göstərilməsi qabiliyyəti.

Kanalımızda daha çox video - SEMANTICA ilə internet marketinqini öyrənin

Məsələn, onlayn mağazanız üçün veb sayt yaratdınız. Siz gözə xoş gələn gözəl dizayn hazırlamısınız. Lakin istifadəçilər saytınıza müxtəlif brauzerlər vasitəsilə daxil olurlar. Bəziləri hətta smartfondan istifadə edirlər. Resursun çarpaz brauzer uyğunluğunu yoxlamamısınızsa, saytın bəzi brauzerlərdə yaxşı görünməməsi baş verə bilər.

Elementlər yerindən çıxa bilər, şəkillər göstərilməyə bilər, şriftlər çirkinləşə bilər. Bir şəxs belə bir xidmətdən istifadə etməyəcək. O, daha çox axtaracaq.

Sayt tərtibatçısının vəzifəsi onu elə etməkdir ki, brauzerdən və cihazdan asılı olmayaraq resurs düzgün göstərilsin.

Çarpaz brauzer düzümü

Brauzerlər arasında rəqabət var. Keçmişdə hər kəs müstəsna xüsusiyyətlər və seçimlər əlavə etməyə çalışırdı. Nəticədə, HTML standartlarına artıq hörmət edilmədi və hər bir brauzer səhifələri fərqli şəkildə göstərdi.

Netscape Navigator yarışdan çıxdı və Internet Explorer inhisarını verdi. Demək olar ki, eyni vaxtda Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) və Safari (WebKit) layihələri sürət qazanmağa başladı, bazarı öz aralarında böldü və icmanı brauzerlər arası uyğunluq məsələsi üzərində düşünməyə məcbur etdi. onların saytlarından.

Müəllifdən: insanlar internetə baxmaq üçün müxtəlif brauzerlərdən istifadə edirlər. Əlbəttə ki, Chrome kimi ən populyarları var. Daha az istifadə olunanlar da var (Safari, Internet Explorer), lakin insanlar üçün sayt yaradırsınızsa, brauzerlər arası uyğunluq haqqında bilməlisiniz - bunu necə etmək və nə ilə bağlı olduğunu. Bütün əsas brauzerlərdə saytın eyni görüntüsünü necə əldə edəcəyinizi görək.

Brauzerlər arası uyğunluğun əsas məqsədi müxtəlif veb-brauzerlərdə saytın dizaynında əhəmiyyətli dəyişikliklərin qarşısını almaqdır. Əgər fərq yalnız təfərrüatlardadırsa və bu, saytın ümumi qavranışına təsir etmirsə, onda deyə bilərik ki, siz cross-brauzer uyğunluğu probleminin öhdəsindən gəlmisiniz. Ancaq yenə də bu barədə hansı real məsləhət verilə bilər?

Çarpaz brauzer uyğunluğuna necə nail olmaq olar

Hal-hazırda, saytı optimallaşdırmalı olduğunuz 5 əsas ən populyar brauzer var. Və əgər adətən veb-brauzerlərin ən yeni versiyaları ilə dostluq etmək asandırsa, versiya nə qədər köhnədirsə, bir o qədər çox problemlər yarana bilər.

Məsələn, IE6 yeni html teqlərini və css xüsusiyyətlərini dəstəkləmək baxımından ən problemli brauzerlərdən biridir. Və buna baxmayaraq, bəziləri bu gün hələ də bu brauzerdə saytın normal göstərilməsini tələb edir. Mənə gəlincə, bu, artıq çoxdur. IE8 dəstəyi kifayətdir.

Ancaq bu, kiçik bir sapmadır. İndi saytın cross-brauzer uyğunlaşmasına kömək edəcək real addımlara baxaq.

Hazır həllərdən maksimum yararlanın. Yeni funksiyalar tətbiq etmək və köhnə brauzerlərə onları başa düşməyi öyrətmək istəyirsinizsə, sizə javascript kitabxanaları lazımdır. Onlarsız, bu vəziyyətdə, sadəcə heç bir yerdə. Siz jQuery-ni quraşdırmalısınız.

Modernizr adlı belə gözəl bir javascript kitabxanası var. Onun imkanları dəstəklənməyən xüsusiyyətlər üçün alternativ tətbiq etməyə imkan verir. İstifadə etməyi tövsiyə etdiyim budur.

Beləliklə, əvvəlcə rəsmi veb saytına daxil olmalısınız. https://modernizr.com/download. Burada saytınızda istifadə etməyi planlaşdırdığınız texnologiyaları işarələməlisiniz. Deməliyəm ki, siyahı kifayət qədər uzundur və müasir veb standartları və ingilis dilini orta səviyyədə bilmədən, çətin ki, başa düşə bilərsiniz. Hər halda, intuitiv xüsusiyyətlər də var. Hər şeyi işarələsəniz belə, əldə edilən kod çox çətin olmayacaq.

düyü. 1. Kitabxananın yoxlayacağı texnologiyaların seçimi.

Kitabxananın yoxlanılması

Kitabxananın xüsusi versiyasını yüklədikdən sonra onun işini yoxlamaq lazımdır. O, fayla gedən yolu göstərən skript teqindən istifadə edərək qoşulmalıdır. Hər şey düzgündürsə, html teqində çoxlu yeni stil sinifləri olmalıdır. Bu siniflər qeyd etdiyiniz texnologiyaların adını daşıyır.

>p?Müvafiq olaraq, əgər html teqində belə bir sinif göstərilibsə, o zaman texnologiya bu brauzerdə işləyir. Əgər bir şey dəstəklənmirsə, o zaman “texnoloji olmayan ad” sinfi qeydə alınacaq. İndi sizə bir nümunə verəcəyəm:

Məsələn, qutu-kölgə xüsusiyyətini yoxlamaq lazımdır. İstinad üçün o, elementə kölgə təyin edir. Brauzer bunu dəstəkləyirsə, bu stil sinfi html teqində görünəcək. Veb-brauzerlər mülkiyyəti tanımırsa, "no-boxshadow" sinfi görünəcək.

düyü. 2. Html teqində siz çoxlu siniflər görəcəksiniz. Bu halda brauzerin demək olar ki, bütün texnologiyaları dəstəklədiyini görürük.

İndi cross-brauzer uyğunluğunun idarə edilməsi tamamilə sizin əlinizdədir. No-boxshadow sinfinə bəzi alternativ xassələri təyin etmək kifayətdir və qutu-kölgə xassəsini dəstəkləməyən bütün brauzerlərdə bunun əvəzinə bu qaydalar tətbiq olunacaq. Çox rahatdır.

Habrahabrda sizə burada vermək istədiyim başqa bir nümunə tapdım. Kitabxananın köhnə brauzerlərdə alternativləri həyata keçirmək üçün necə istifadə oluna biləcəyinə dair bir nümunə var idi.

Multiplebgs seçicisi ( fon şəkli: url("image.png") mərkəz 40px təkrarsız, url("image2.png"); ) .no-multiplebgs selektoru (fon şəkli: url("image.png") mərkəzi 40px təkrarsız açıq boz; )

Nümunə izahı. Bizi uzun müddətdir ki, CSS3-də dəstəklənən çoxsaylı fonların texnologiyası maraqlandırır. Bunun üçün şəkillərin ünvanlarını və onların parametrlərini vergüllə ayırmaq kifayətdir. Təbii ki, köhnə brauzerlər bunu dəstəkləmir, ona görə də biz .no-multiplebgs sinfindən istifadə edərək onlar üçün öz üslublarımızı yazırıq. Brauzer birdən çox fonu dəstəkləmirsə, üslubların tətbiq olunduğunu müəyyən edir.

Beləliklə, o, bu seçici üçün başqa üslublar təyin edə bilər və beləliklə, istənilən veb brauzerdə saytın gözəl görüntüsünü əldə edə bilər. Əlbəttə ki, Modernizr-in imkanlarını tam şəkildə yaşamaq üçün veb proqramlaşdırma və veb sayt tərtibatını yaxşı bilmək lazımdır. Təcrübəli bir şəxs, çox zəif dəstəklənənləri hansı xüsusiyyətlərin əvəz edə biləcəyini müəyyən edə biləcək.

Təbii ki, kitabxananın funksional imkanları daha genişdir. Sonda nəticə üçün müxtəlif texnologiyalar və zəncirvari hadisələr üçün dəstəyi test edə bilərsiniz. Misal.