Çapraz tarayıcı nedir. Modern koşullarda çaprazbrowser düzeni - gerekli prensipin genel bir anlayışı

Konu, kendiliğinden toplanan Ünlü Yöntemler Crossbox kahverengi düzeni ve biraz ilginç, oldukça nadir görülen ile karşılaştı.

Önsöz. Neden oldu

1994'teki görünümden sonra, ilk tarayıcıya dayanarak ilk başarılı Netscape Navigator tarayıcılarından biri grafik kılıfı Mozaik, Microsoft'un kazımı tarayıcısını yapmaya ve Internet Explorer'ı çağırmaya karar verdi. IE'nin birinci ve ikinci versiyonu Microsoft Plus!, Tamamlayıcı ile birlikte verildi. pencere özellikleriAncak yaygın alamadım. Daha sonra, Microsoft, IE 1.0 ve 2.0 tarayıcısından radikal olarak farklı hale gelmeye karar verdi, hangi şirketin geliştirdiği Spyglass'tan programcıları işe aldı. yeni tarayıcı Mozaik temelinde. Böylece 1996 yılında Internet Explorer 3.0 ortaya çıktı. Bununla birlikte, tarayıcıda tanıtılan geliştiriciler, daha sonra sürümden sürümden depolanan HTML genişlemesinin standartlarına uymaz. IE ve Netscape Navigator'un bir sonraki paralel gelişimi, yani piyasanın% 95'inin nöbetlerine yol açtı. IE'nin 4.0 ila 6.0 sürümünün gelişiminde durgunluk, standartlar, düşük hız ve sayfa ekranı için düşük destekle, düşük hız ve sayfa ekranı, yeni bir Gecko motorunda yazılmış olan sürüm 6.0'daki Netscape'nin canlanmasına yol açtı. Güncellenen Netscape Navigator eski köşeleri elde edemedi ve zamanla Netscape tarayıcısının desteğinin sona erdiğini açıkladı.
Bununla birlikte, Gecko motoru 2004'te modern yaratmanın temeli olarak görev yaptı. tarayıcı Mozilla. Firefox. 1996 yılında, Opera, başarı hızını ve kullanım kolaylığını sağlayan ortaya çıktı. 2003'te. elma şirketi Safari tarayıcısını, Mac OS'de daha önce kullanılan, IE'yi reddetti. 2008'de Google ayrıca tarayıcı yarışını kaydetmeye karar verdi, sürüm Google Chrome.Safari olarak aynı motora dayanarak.
Böylece, tarayıcıların her biri kendi tarihi vardır, sırayla, JavaScript, HTML ve CSS desteği ile değişen kendi sürümlerine sahiptir.

Bugüne kadar, küresel tarayıcı pazarının payı: IE için% 45,% 31 Firefox,% 15 krom,% 5 safari ve% 2 opera.
Ayrı olarak, en eski ve problem tarayıcısının piyasasındaki payını azaltma konusunda memnun olmak istiyorum, bu da sadece% 6'sı olan IE6.

Crossboxrity

Çapraz tarayıcı altında, farklı tarayıcılardaki sitenin aynı ekran ve çalışması olarak anlaşılmaktadır. Bu konuda, JavaScript'in farklı tarayıcılardaki sorunlarını göz önünde bulundurmayacağım, ancak düzende duracağım.

Tarayıcılarda sitenin aynı ekranını elde etmenin iki ana yolu vardır:

Koşullu yorumlar kullanarak stillerin ayrılması

Farklı tarayıcılar için stillerin ayrılması, çapraz tarayıcı düzeninin en yaygın yöntemlerinden biridir. Yöntemin özü, kullanıcı tarayıcısının türünü tanımlamak ve uygun stili ana ile birlikte uygulamaktır.

Koşullu yorumlar sadece yani, bu nedenle tarayıcıların geri kalanı bu kodu sıradan yorumlar olarak okuyacaktır.

IE dışında tüm tarayıcıları görecek stilleri ayarlayabilirsiniz:

Kullanıcının IE sürümünü tanımlamak da mümkündür:
IE6 için
IE6 ve üzeri için
IE için 6 sürümden az
IE için 6 sürüm 6'ya eşit
IE için 6'dan fazla versiyon için
ve IE'nin her bir sürümü için uygun stilin bağlanması (IE sürüm numarası istenen şekilde değiştirilebilir).

IE'nin farklı versiyonları için farklı CSS stillerini birbirine bağlayarak, yani versiyonları tanımlayan ve vücut için sınıflar atama:

Ve her bir sürüm için genel olarak gelecekte onları kullanmak:
.E6 .Elementstyle (
Arka plan: # 123;
}

Artı bu method kullanımının geçerliliğidir.

Css-haki.

Bir diğeri, belirli elemanların özelliklerini belirlemenizi sağlayan CSS-Haki'nin daha az sık görülme şekli yoktur.

IE6 için:
.Elementstyle (
_Background: # 123;
}
veya:
.Elementstyle (
-Background: # 123;
}
Veya geçerli:
* Html .Elementstyle (
Arka plan: # 123;
}

IE7 için:
* + Html .style (
Arka plan: # 123;
}
Veya geçerli:
*: Birinci Çocuk + HTML. Elementstyle (
Arka plan: # 123;
}

IE8 için:
.Elementstyle (
Arka plan: # F12 \\ 3 /;
}

Firefox için:
@ -Moz-belge URL-öneki () () () () ()
.Elementstyle (
Arka plan: # 123;
}
}

Safari ve Chrome için (bir motor, hatırladın mı?):
@Media ekranı ve (-Webkit-Min-Cihaz-piksel-oranı: 0) (
. Elementstyle (
Arka plan: # 123;
}
}
veya
Vücut: Son Çocuk: Değil (: Kök: Kök) .Elementstyle (
Arka plan: # 123;
}

Opera için her şey daha karmaşık. Opera için CSS Haki Safari ve Chrome'u anlıyor, bu yüzden opera için bir hack kullanmanız gerekir ve Safari \\ Chrome için stili geriye doğru geçersiz kılmak için:
@Media Hepsi ve (min-genişlik: 0px) (
Kafa ~ vücut .Elementstyle (
Arka plan: # 123;
}
}
Vücut: Son Çocuk: Değil (: Kök: Kök) .Elementstyle (
Arka plan: #fff;
}
Bu iki Khanu'ya bir alternatif, JavaScript'te yerleşik Opera nesnesini kullanarak operanın stillerini tanımlamanın ilginç bir yolu olarak hizmet edebilir:

Yol güvenilmez, çünkü kullanıcı javascript'i devre dışı bırakırsa işe yaramaz.

Sonuç

Özetleyelim: Çok sayıda eşyaya sahip büyük siteler, sitenin daha fazla gelişimi ve keşfedilmesine sayım, stillerin ayrılmasını kullanmak hala tercih edilir. Geçerli, uygun, bu iyi bir ton kuralı. Ancak, küçük siteler için CSS hacklerini kullanmak için korkunç bir şey yoktur, özellikle de hacklerin çoğu doğrulamayı geçer.

Sonuç olarak, ideal olarak, düzenlemelerinizdeki becerilerinizi geliştirerek stillerin kullanımı ve stillerin ayrılmasının başarısızlığı için çabalamanız gerektiğini söyleyeceğim.

Etiketler: HTML Layout, CSS-Haki

Bugüne kadar birçok var popüler tarayıcılarHangi insanlar internette çalışmak için kullanıyorlar. Herhangi bir web tasarımcısının sürekli baş ağrısı, aynı HTML kodunun farklı tarayıcılarda farklı şekillerde görünmesidir. Üstelik, aynı kod farklı görünüyor farklı versiyonlar Aynı tarayıcı.

Doğal olarak, herhangi bir web yöneticisi sitenin eşit görünmesini engellemelidir. en büyük miktar tarayıcılar. Bu beceridir (kod eşit olarak bakıldığında Çeşitli tarayıcılar) ve "CrossBruster" denir html düzeni".
Site neden çeşitli tarayıcılarda farklı görünüyor?

Oluşmanın birkaç nedeni vardır. çeşitli tiplerde Çeşitli tarayıcılarda site.

1. Standart olmayan HTML özelliklerinin kullanımı.

Tasarımcı, HTML standardına dahil olmayan yetenekleri kullanabilir. Nitekim, tarayıcılar standartta açıklanmayan birçok farklı etiket niteliğini destekleyebilir. Bu özellikleri kullanmanız önerilmez. Bir basit nedenden dolayı, eğer bir şey standartta tarif edilmezse, tarayıcılardan herhangi biri desteklenmeyebilir. Ve böyle bir tarayıcının yaratıcıları tamamen doğru olacaktır. Standart olmayan özellikler kullanmanıza gerek yok.

Standart'a uyacak şekilde yazılan kodu daima kontrol edin.

Klasik bir örnek vereceğim. En basit tablonun bir sonraki HTML kodunu düşünün.

Selam Dünya

Bu kod bir hücreden oluşan bir tabloyu görüntüler. Web Tasarımcısı, bu tablonun ilk dizisinin yüksekliğini 100 piksel olmak istiyor. Ancak, etiketin HTML standardında Geçersiz yükseklik niteliği.

Bu durumda, etiketteki yükseklik niteliğinden beri hata büyük değildir. Çoğu modern tarayıcıları anlayın. (Sadece InternExplorer 4, bu özniteliği tanımıyor). Ancak diğer durumlarda, standardı ihmal etmek daha fazla konuşlandırılmış sonuçlara yol açabilir. Elbette, hepimiz herhangi bir öğenin bir tarafın ya da aşağı geldiği sitelerdeyiz. Her birimiz, büyük olasılıkla, sitenin profesyonel olmadığı ruhta düşündüm. Ancak, büyük olasılıkla, site ana tarayıcı türlerinde test edilmez. Kural olarak, siteler yalnızca Internetexplorer'da oluşturur ve test eder, çünkü kullanıcılar arasındaki en popüler tarayıcıdır. Bu nedenle, bir dahaki sefere, neden bir görünüm kaybı olduğunu bilerek küçümseyeceğiz.

Doğru çözüm Bir tablo ile bir örnek için - bu stillerin kullanımıdır. "Doğru" kodu böyle görünebilir:

Selam Dünya

Bu seçenek Her tür tarayıcıda eşit olarak görüntülenecek (veya en azından, olması gerekir).

2. Varsayılan özellik değerleri.

Her HTML öğesinin birçok niteliği vardır. Bu renk ve bitişik elemanlara olan mesafe ve hizaya ve çok daha fazlasıdır. HTML kodu ayırıldığında, tasarımcı genellikle yalnızca sayfadaki öğeleri sunmak için önemli olan özelliklerin değerlerini belirler. Belirtilmemiş niteliklerin değerleriyle bir tarayıcı ne yapmalı? Bu durumda, tarayıcılar varsayılan değerleri kullanır. Ve burada tehlike yatıyor. Çeşitli tarayıcılar için varsayılan değerler değişebilir. Örneğin, varsayılan yazı tipi boyutu farklı olabilir. Bu nedenle, bazı tarayıcılarda, metin başkalarından daha fazla alan alacaktır. Ne, sırayla, sayfa ekranındaki farklılıklara yol açabilir.

Bu sorun nasıl çözülebilir? İlk olarak, Evrensel İpucu: Sitenin ekranını mümkün olduğunca çok tarayıcıda kontrol edin. İkincisi, sayfada kullanılan tüm öğeler için CSS dosyasındaki varsayılan değerlerinizi belirleyebilirsiniz. Bu, tarayıcıyı HTML öğelerinin özelliklerinin değerlerini "düşünmek" gereksiniminden kurtarır. Bu, örneğin bunun gibi yapılabilir:
Html, vücut, div, span, applet, nesne, iframe,
H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE,
A, abbr, kısaltma, adres, büyük, alıntı, kod,
Del, dfn, em, yazı tipi, img, ins, kbd, q, s, samp,
Küçük, grev, güçlü, alt, sup, tt, var,
Dl, dt, gd, ol, ul, li,
Fieldet, Form, Etiket, Efsane,
Masa, başlık, thody, tfoot, thead, tr, th, td (
Marj: 0;
Dolgu: 0;
Sınır: 0;
Anahat: 0;
Yazı Tipi Ağırlığı: Miras;
Yazı tipi tarzı: miras;
Yazı tipi boyutu: 14px;
Yazı Tipi ailesi: Miras;
Dikey hizala: üst;
Arka plan: şeffaf;
Yazı Tipi: Verdana, Cenevre, Lucida, "Lucida Grande", Arial, Helvetica, Sans-Serif;
Arka plan rengi: beyaz;
}

Böylece, sayfadaki tüm öğeler belirtilen özelliklere sahip olacaktır. bu dosya. Mülkiyetin herhangi bir unsurunun varsayılan özelliklerden farklı olması gerekiyorsa, geçersiz kılınmaları gerekir.

3. Bazı tarayıcıların "özellikleri".

Bununla birlikte, Web Sihirbazı yalnızca standart HTML özelliklerini kullansa bile, tüm öğeler için varsayılan özelliklerini yükledikten sonra, site farklı tarayıcılarda hala farklı görünebilir. Bu, tarayıcıların kendilerinin HTML standardına uymayacağı gerçeğinden gelir. Herhangi biri gibi tarayıcılar yazılımhatalar içerebilir. Bu hatalar genellikle hızlı bir şekilde düzeltilir, ancak her zaman kullanıcının yüklenmediği olasılığı vardır. taze versiyonu Tarayıcı.
Ayrıca, tarayıcı üreticilerinin (özellikle bu günahkar Microsoft), görüntülenmesi gerektiği gibi, bir veya başka bir öğenin daha iyi bildiklerine inanmaktadır.

Standartla uyumsuzluk problemlerinin temel failinin Internet Explorer'dır, daha sonra birçok olası geçici çözüm icat edildi, sitenin yanı sıra diğer tarayıcılarda olduğu gibi nasıl yapılır.

En yaygın yol, yani için şartlı yorumlardır. Microsoft, tarayıcısının sorunlarını bilmek gibi, geliştiricilere HTML kodunu yalnızca IE'nin özel bir sürümünde çalıştırmanın bir yolunu vermiştir. Örneğin, aşağıdaki kod, IE tarayıcı sürüm 7 ve üstü için özel bir CSS dosyasını bağlar: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Koşullu yorumlar sadece bir dezavantajı var. Böyle yorumları içeren bir sayfa geçerli değil HTML sayfası. Gördüğünüz gibi, Microsoft ve burada standardı ihlal ediyor.

Sitenin farklı tarayıcılarda farklı şekilde gösterilebileceğini hiç fark ettiniz mi? Bu, Crossvluster Düzeninin anlamıdır.

Çaprazbrowser düzeni nedir

Çaprazbrowser Düzeni - Mevcut tüm tarayıcılarda doğru görüntülenen HTML kodunun (düzen) geliştirilmesine yaklaşım

Dahası, tam olarak da düzen ve fonksiyonelin tüm bölümlerinin tam olarak tam olarak bulunur. Site tüm popüler tarayıcılarda eşit görünmelidir:

• Firefox.
• Krom.
• Opera.
• Opera Mini.
• Safari.
• Internet Explorer.

Görev, "belirli" CSS yetenekleri kullanılıyorsa oldukça karmaşıktır, çünkü tüm tarayıcılar bazı Web sayfalarını kendi yollarına göre görüntüler. Ve her biri yeni bir versiyon Aynı gün uzaktaki diğer geliştiricilerden tarayıcılarda uygulanan yeni özellikler içerir.

Crossbox Browser Düzeni, Internet Explorer 6 tarayıcısı ile çalışanlar tarafından iyi bilinmektedir - benzersizliğinin pahasına ayetler için çok fazla sinir bozuldu. Ve bu benzersizlik, bu tarayıcının birçok kural ve standartları desteklememesi için ifade edildi. Sonuç olarak, mırıltılı yerleşim, Firefox ve Opera'ya bakacak şekilde, mutlak bir yulaf lapası içinde IE6'da serpin.

Doğru Sayfa Ekranının İhlali Nedenleri

Dünyada web sayfalarını oluşturmak için belirli standartların olmasına rağmen, geliştiriciler sürekli olarak yeni teknolojiler ve tarayıcılarda yeni CSS kurallarına destek veriyorlar. Bu, daha önce uluslararası olmayan özellikleri uygulayan daha dinamik ve işlevsel siteler oluşturmanıza olanak sağlar. Ve her geliştirici, tarayıcısının en yeni teknolojileri, yeni komut dosyalarını ve yeni kütüphaneleri desteklemesini sağlamaya kendini adamıştır. Sonuç olarak, bazı kullanıcılar, en gelişmiş sitelerin iyi görüntülendiği yeni bir tarayıcıda sevinirken, diğerleri açılış sayfasının neden yanlış açıldığını anlayamıyor. Bu nedenle tetikleyici, farklı tarayıcılarda görüntülenecek bir kod yazmalıdır.

Ayrıca, tarayıcıların yeni sürümlerinin sürekli olarak ortaya çıktığını ve sitenin de yeni sürümlerde düzgün çalıştığı çok kötü olmadığını unutmayın.

Çapraz tarayıcı düzeni için neye ihtiyacınız var - Araçlar

Crossbrawser Layout, modern ve güncel olmayan tarayıcılarda en doğru site ekranını sağlamalıdır. Bunun için, yasakçı, az bilinenler de dahil olmak üzere kullanılan çoğu tarayıcı için uygun bir kod oluşturmalıdır. Davasını inceleme sürecinde edindiği bazı bilgi ve becerilere ihtiyaç duyacak.

Çeşitli tarayıcıların bireysel unsurlarının algılanmasında farklılıkları gösteren geleneksel tablolar. Yani, çapraz tarayıcı düzeni yapmak için, ihtiyacımız olacak:

• Genel düzen bilgisi;
• Belirli tarayıcıların altında yerleşim özellikleri alanındaki bilgi;
• Bir bilgisayarda birkaç tarayıcı;
• Servis BrowserShots.org'da kontrol edin

Bu arada, bilgisayarınızda oluşturmak güzel olurdu sanal makineÜzerine yüklemek İşletim sistemi Ve tarayıcıların eski sürümlerini indirmek için - çoğu hala modern teknolojileri anlamayan eski bir yazılım kullanıyor.

Müşteri ile ayrı bir çalışma cephesi yapılmalıdır. Web tasarımı dünyasında mükemmel bir şey olmadığını ve bazı anların bağış yapması gerekeceğini açıklaması gerekiyor. Tasarımcıların ve programcıların ekibinin görevi, aşağıdaki paragraflara uyması gereken bir sitenin oluşturulmasıdır:

• Müşterinin orijinal düzeni ve istekleri ile maksimum uyum;
• Tüm popüler tarayıcılarda maksimum doğru ekran;

Kodda çapraz tarayıcı düzeni oluşturma sürecinde, HTML öğelerinin niteliklerini varsayılan olarak ayarlar, bu, ilk aşamada zaten gelecekteki sitelerin en basit düzenlerinin bile yanlış ekranından kurtulmanızı sağlar. Sonra, kodun çeşitli tarayıcılardaki uyumluluğunu dikkate alarak etiketlerin hizalanmasıdır. Bu aşamada, velocker, tüm sürümlerin tarayıcılarını ve bunun için nesillerin tarayıcılarını kullanarak (herhangi bir durumda, en azından son yıllarda en az temel popüler tarayıcılar) kullanarak site ekranının doğruluğunu sürekli izlemesi gerekir.

Bir çaprazlık düzeni oluşturma çalışmalarını kolaylaştırmak için, önce orijinal şablonun yazışmalarını PSD'deki yazışmalarını kontrol eden bir tarayıcı için önce bir tarayıcı için düzen yatırmanız gerekir. Bundan sonra, ekranın diğer tarayıcılardaki doğruluğu, kaynak kodunun eşzamanlı yükseltmeleri ile kontrol edilir. Bu yaklaşım, çapraz tarayıcı düzeninin oluşturulmasını önemli ölçüde hızlandırır ve iyi sonuçlar elde etmesine izin verir.

Sonuç

Crossbox kahverengi yerleşimi, modern bir web tasarımının temel taşıdır. Tarayıcıların çalışmalarındaki farklılıklar genellikle belirli fırsatların uygulanmasına engeldir. Sonuç olarak, ortalama olarak içeriğiz vardır, ancak mükemmellik sonucunun zirvesine getirilir. Ve bugün çapraz tarayıcı düzeni, yalnızca herhangi bir tarayıcısında değil, aynı zamanda herhangi bir mobil cihazda da doğru bir şekilde görüntülenme, adaptif bir tasarım oluşturma ihtiyacı ile desteklendi.

Bir site oluşturulduğunda, bir çapraz tarayıcı düzeni etkinliğini sağlamak için önemlidir. Ne olduğunu? Nasıl yapabilirim? Hangi sualtı taşları var?

Çapraz tarayıcı düzeni nedir?

HTML / CSS, siteyi oluşturmak için temeldir. Pek çok webmaster, prensip olarak bunun için uygundur: Kendimi iyi hissediyorum - ve yeterli. Ve tarayıcınızdan geldiğinizde nahoş nedir? mobil cihazVe site yanlış görüntülenir. Bu gibi durumlarda, uyarlanabilir tasarım ve çapraz tarayıcı düzeni kurtarmaya gelir.

CSS ve HTML bu durumda, her şeyin uygulandığı omurga. Bazı durumlarda JavaScript bu amaç için dahil olabilir. Ancak nihai hedef, her şeyin farklı versiyonlarda çalışması için bunu yapmaktır. Bu nedenle, çapraz tarayıcı sağlamak için bir arzu varsa, sitenin tüm tarayıcılarda iyi görüntülenmesi durumunda, sitenin ilk saniyesinden sürekli olarak düşünmek gerekir.

Genel anlamda Adım Adım Kılavuzu

Öyleyse, çapraz tarayıcı düzeninin nasıl yapıldığına bakalım. Başlangıçta, sitenin hangi programlarla çalışacağını tanımlamanız gerekir. Lütfen tarayıcı sayısının iki yüz bölüme yaklaştığını unutmayın, bu yüzden her şeyi memnun etmeye çalışıyor - inanılmaz karmaşıklık meselesi. Bu nedenle, 3 ila 8 arasında bir numara seçin. Neye gezineceğinize karar vermek için, Yandex Metrika gibi yardımcı hizmetleri kullanabilirsiniz ve daha sonra çapraz tarayıcıyı elde etme sorununun nasıl çözüleceğini öğrenmelisiniz.

Birçoğu Haki'de bahislerini yapar. Bunlar, yalnızca belirli bir tarayıcının anladığı özel kodlar, seçiciler ve kurallardır. Ancak, farklı tarayıcılar ve versiyonları için en az birkaç düzine ekli ekleme yazmanız gerektiği göz önüne alındığında, çoğu, yüksek maliyetleri, süresi ve irrasyonalitesi nedeniyle böyle bir yaklaşım yazıyor. Bazıları eşit olarak görüntülenen elemanların kullanımına ilişkin bir bahis yapar. Ancak aynı zamanda, bir dizi önemli avantajlar genellikle kaybedilir. Kayıpları en aza indirmek için, adaptif tasarım da paralel olarak kullanılır. Neyi temsil ediyor?

Uyarlanabilir Tasarım

Sitenin lastik yapıldığı sitelerin düzenine bu yaklaşım, yani farklı tarayıcılar ve ekran boyutları. Uyarlanabilir tasarımın ve çapraz tarayıcının yakından iç içe geçtiği ve bir şey hakkında konuştukları zaman, bir kural olarak da ima edildiğine dikkat edilmelidir. Küçük bir örnek olarak görelim.

Opera ve Opera Mini gibi tarayıcılar var. İlk tarafından kullanılır sıradan bilgisayarlarVe ikincisi cep telefonlarında. Genel olarak, onlar benzerdir, ancak çok sayıda özelliğe sahiptir. Bu gibi durumlarda, ayrı dosyaları ve / veya medya kayıtlarının kullanımını bağlamak önemlidir. Bu ne? İlk durumda oluşturulur ayrı dosyalarıBeton bir tarayıcıyı çalıştırmayı ve aramalarını reçete etmeye yöneliktir. İkinci durumda, medya kaydığında dosyalara ihtiyaç vardır. Kullanılan program belirli gereksinimleri karşılarsa, dosya istenen yapılandırmaya yüklenir.

Ne yapmalıyız?

Başlangıçta, HTML ile çalıştığınızda, çapraz tarayıcı düzeni özel dikkat gerektirdiği unutulmamalıdır. Bu nedenle, daha fazla performans için, maksimum kullanım olanakları basamaklı tablolar Stilleri. Aynı zamanda değişmesi gerekiyor ve bazı yaklaşımlar. Yani, birçok deneyimsiz insan, bir şeyin boyutunu belirtirken, pikselleri kullanın - PX. Sitenin üstünü süsleyen büyük bir başlık yazısına sahip bir örnek düşünün.

800rd miktarında genişliğe sahiptir. 1600RX'deki ekran ile oldukça çekici olacaktır. Ama 700'de gülünç görünecek. Bu durumda ne yapmalı? Boyutu piksellerde değil, yüzde olarak ayarlayabilirsiniz! Ve yazıyı işgal etmenin sabit bir uzunluğu olmayacak, ancak ekran genişliğinin yarısı olacak. Yüzde olarak, belirli bir öğenin ekranın kenarlarına yerleştirileceği mesafeyi ayarlayabilirsiniz. Peki ya ekran çok küçükse?

Diyelim ki 300rh? Bu durumda, medya kaydı bize yardımcı olacak, bu da genişlik sabitlenmesi gerekir. Ve eğer 700 ruble ve daha azsa, yazıtın yerinin% 75'ini alacağını belirleyebilirsiniz. Ve genişlik 300RH ise ve daha azsa,% 100'ü ayarlayabilirsiniz. Genel olarak, konu çok ilginç ve faydalıdır, bu nedenle oldukça ayrıntılı olarak çalışılabilir. Ancak, ne yazık ki, burada kitap hakkında bilgi ve makaleye her şeyi koymak işe yaramayacak.

Çapraz tarayıcı adaptif düzeni neden arama motorlarını çekiyor?

Ve cevap çok basittir: çünkü geliştiricilerin siteyi izlediklerini ve kullanıcıları için en keyifli hale getirdiğini söylüyor. Böylece, bu tür insanlar, arama motorlarında daha yüksek pozisyonlar sağlayarak teşvik edilebilir. Tabii ki, siteniz hemen ilk 1'e çıkarılmayacak, ancak diğer faktörlerle birlikte, bu güçlü bir şekilde tırmanmaya izin verecek. Bunun basit bir işe yaramaz bir gereklilik olmadığı, ancak dikkatin ödenmesini hak eden bir şey olduğunu belirtilmelidir.

Sonuçta, düşünün: Bu kullanıcı, harici olarak çok hoş olmayan siteye çarptığında bu kullanıcı nedir? Ama düşünceye gelebilir arama sistemi Kötü kaliteli içerik sunar! Bu nedenle, sunulması gereken dikkatli bir şekilde seçilirler. Buna ek olarak, web yöneticilerinin faydası da vardır, çünkü herhangi bir donanım kullanarak ilgilendiğiniz bilgileri alabilecekleri içerik için kaliteli bir kabuk yaratıyorlar: bilgisayar, dizüstü bilgisayar, tablet, akıllı telefon veya cep telefonu. Buna göre, daha memnun ziyaretçiler, site daha hızlı ve gelir seviyesi artıyor.

Sonuç

Bir çapraz tarayıcı sitesinin oluşturulması mütevazı gerçeğini not etmek mümkün değildir. uyarlanabilir Tasarım - Bu kolay bir iş değil, çok uzun ve zaman alıcıdır. Bu nedenle, sabırlı olmanız ve disiplinin harika bir şey olduğunu unutmayın! Başlangıçta bir şeyin elde edilmeyeceği, ancak denemelisiniz, bilgiyi aramanız, çeşitli yaklaşımları kullanmanız ve geri çekilmemesi mümkündür. Ve sonra ziyaretçilerine göstermek için pahalı olacak bir site yapmak gerekecektir.

Modern tarayıcıları bir araya getirirseniz, farklı şekillerde ayrıştırmak mümkündür: Cihazlarda, platformlarda, iş türüne göre, hatta renk simgelerinde. Geliştirici için en kullanışlı olanlar, onları motorlarda ayrıştırabilmektir. Motor, yani tarayıcının en çekirdeği, düzeninizde nasıl çalıştığını belirler.

Bazı tarayıcılar yalnızca bir platformda çalışır: kenar ve yani yalnızca Windows'ta, yalnızca MacOS ve iOS'ta Safari'dir. Bir zamanlar müdahalelerle girişimleri vardı, ama hiçbir şey çıkmadı. Kesinlikle testleri karmaşıklaştırır. Neyse ki, mevcut tüm tarayıcılara erişim sağlayan tarayıcıStack gibi hizmetler var ve Microsoft, sanal makinelerde test et ve yani test etmek için Windows Kompakt görüntüleri belirler.

Tamam! Şimdi tarayıcıları biliyoruz. Ve aynı tarayıcı, aynı motor - ve farklı platformlara ilişkin sonuç farklıdır? Ve hiçbir şey yapılamaz! Aslında, tarayıcılar platform veya cihaza bağlı olarak büyük ölçüde değişebilir. Masaüstü ile arasındaki en büyük fark mobil tarayıcılar - Sonuncusu çok fazla optimizasyon var ve sadece sihir var. Ancak masaüstü pencerelerde ve MACOS'ta farklı davranışları yakalayabilirsiniz.

Sanırım zaten bir klon olduğumu anladın. CrossBoxRity böyle bir gökkuşağı tek boynuzlu at, ardından tüm kovalayan, ancak kimse yakalayamaz. Chase'nin amacı kesinlikle asildir: bu siteler tüm tarayıcılarda ve tüm platformlarda aynı şekilde iyi bakıp çalıştı. Ve girintilerin boyutu, yazı tipi, çizgi yüksekliği, renge hala daha fazla ya da daha az garanti verebilir, ardından metni düzeltebilir, gölgahın bulanıklığı, grafik oluşturma ve görünüm Sistem kontrolleri, paylaşılan zihnine yol açmaya bile başlamaz.

Bu nedenle, sizin için bir piksel komple varsa, ızgaraya girmek ve yatay blok boyutlarında, o zaman hala şansınız var. Ancak, metni yumuşatırsanız, paragraftaki satır sayısı veya dikey boyutlar İçeriğe sahip bloklar, kesinlikle düzende, zaman harcanır. İdeal bir çapraz tarayıcı sitesi, tüm platformlarda eşit olarak uzaylı görünecektir - sonuçta, her birinin kullanıcılara aşina olan kendi özellikleri vardır.

Ve test hakkında daha fazla. Cihazın ve tarayıcıların emülatörü ne kadar iyi taklit edersem yoksa, gerçekliğe nasıl bakacakları bir ipucu. Gerçek platformlar ve cihazlara ilişkin sonuçları minimumda kontrol etmek önemlidir: Windows, Android, MacOS ve IOS'ta. Mevcut cihazdaki gerçek parmaklar, doğal yaşam alanındaki gerçek tarayıcılar, arayüzlerinizi nasıl kullanacağınız hakkında size çok şey söyleyecektir. Nasıl göründükleri için çok daha önemlidir.

Twitter'da tarayıcı haberlerine abone olun, Chrome Canary, Firefox Nightly, Safari Teknoloji Önizlemesi'ni yükleyin. Bayrakları açın, deneyin, farkında olun ve en önemlisi - pikselleri kovalayacak kadar iyi arayüzler yapın. Siteler tüm tarayıcılarda eşit derecede görünmemelidir.

Video sanatçısı