Herkesin bilmesi gereken basit ama etkili çapraz tarayıcı düzeni ipuçları. Modern koşullarda çapraz tarayıcı düzeni - gerekli ilkenin genel olarak anlaşılması

Opera, Safari, Internet Explorer, Google Chrome, Mozila Firefox ve tabii ki bilgisayarlara kendiliğinden kurulabilme özelliğine sahip Amigo tarayıcı gibi mevcut tarayıcı çeşitleri arasında sadece bağlantıya bakmanız yeterli. Ve tarayıcılardan herhangi birinin birbiri ardına çıkan çok sayıda sürümü vardır. Bu nedenle, her tarayıcının her yeni sürümünün kendine has özellikleri vardır. Ve sitenin her birinde doğru çalışması için kullanılması gerekir. çapraz tarayıcı düzeni.

Ve bir site oluşturulduğunda, tüm tarayıcılarda test edilmelidir. Bu yapılmazsa, sitenin tesliminden sonra hoş olmayan kusurlar ortaya çıkabilir.

Tarayıcıların en "eğlenceli"si elbette Internet Explorer tarayıcısıdır, ancak tüm bunlarla birlikte çoğu kullanıcı hala bu tarayıcıyı kullanıyor. Yani site daha önce Chrome'da kontrol edildiyse ve ardından Explorer'da açıldıysa ve ah, korku. Bloklar karışmış, menü butonları birbirine girmiş, resimler yanlış görüntülenmiş, genel olarak tam bir kaos.

Bu nedenle, kullanıcının sitenizle herhangi bir tarayıcı üzerinden çalışmasını kolaylaştırmak ve böyle bir korku görmemek için, herhangi bir site için çapraz tarayıcı düzeni zorunludur. Yukarıda söylenenlere dayanarak, şu sonuca varıyoruz: çapraz tarayıcı html ve css düzeni- bu, her tarayıcıda eşit olarak doğru şekilde görüntülenen bir site oluşturmayı amaçlayan sitenin düzenidir.

Bu kadar çeşitli tarayıcıların yanı sıra sitenin evrensel olması ve tüm tarayıcılarda doğru gösterilebilmesi ihtiyacı göz önüne alındığında, işverenler mizanpaj tasarımcılarının çapraz tarayıcı yapmalarını ister. Sitenin yanlış görüntülenmesinin nedenlerini ve çapraz tarayıcı düzeni becerisini anlamak, zamanla ve uzun uygulama sürecinde gelir. Sadece deneme yanılma yoluyla bir kişi hangi tarayıcıları, hangi sorunları olduğunu anlayabilir. Deneyimle, düzen tasarımcısı kodu, tarayıcıların her biri için mümkün olan her şekilde uyarlanacak şekilde oluşturmaya çalışır ve düzen sürecinde yalnızca küçük kenarlıkları düzeltmek için kalır.

Sitenin görüntülenmesiyle ilgili sorunların nedenleri.

Şimdi farklı tarayıcılarda kod algısı ile neden bu tür sıkıntılar oluştuğuna bakalım.

1. Düzen eşleşmiyor bazı HTML standartları.
2. /i>Sürekli güncellenir ve yeni CSS kitaplıkları ve kuralları görünür. Tarayıcıların güncellenmiş sürümleri tarafından mükemmel bir şekilde yeniden üretilirler, ancak eski sürümler tarafından doğru şekilde görüntülenmeyebilirler.
3. Internet Explorer. Tüm kuralların yarısını anlamayan en garip tarayıcı ve bu nedenle bu IE sorununu aşmak için sürekli olarak yeni hack'ler geliyor.
4. Öznitelik varsayılan değeri. Her tarayıcının farklı bir değeri olabilir. Nitelikler, öğe renkleri, yazı tipleri ve boyutlarıdır. Bütün bunlar stil sayfasında açıklanmalıdır, aksi takdirde tarayıcı varsayılan olarak hepsinde belirtilen değerleri yazacaktır. Bu nedenle, her birinde site farklı şekilde görüntülenecektir.

Bu problemlerin nasıl aşılacağını öğrenmek için, bir başlangıç ​​için, zaten öğrenmiş olduğunuz gibi, pratik gereklidir ve çapraz tarayıcı düzenini öğrenmenin ilk aşamasını kolaylaştırmak için size bazı ipuçları hazırladım.

1. ipucuÖznitelik sorununu çözmek biraz sıkıcı olsa da yeterince kolaydır. Bunu yapmak için, stil sayfasındaki niteliklerin her birini kaydetmeniz yeterlidir. Bu sayede tarayıcılar istedikleri gibi değerleri girmek zorunda kalmazlar.

2. ipucu Tüm popüler tarayıcıları ve Internet Explorer tarayıcısının tüm sürümlerini iş bilgisayarınıza yükleyin. Tef ile özel danslar olmadan bir bilgisayara aynı anda birkaç sürümü yüklemek kolay olmadığından, Internet Explorer Tester'ı yükleyebilirsiniz. Bu program, siteyi tarayıcının çeşitli sürümlerinde hemen kontrol etmenizi sağlar.

3. ipucu Düzeninizi önceden seçin. Burada iki seçenek var. Birincisi, bir siteyi tek bir tarayıcı için tamamen uygun hale getirmek ve ardından sonraki her tarayıcıdaki sorunları düzeltmektir. İkinci seçenek, kodun her bir öğesini tüm tarayıcılarda yazıldığı şekliyle kontrol etmektir. İlk seçeneği seçerek kodu tamamen yeniden yazarak gereksiz sorunlardan kaçınabilirsiniz. Ama seçim her zaman senin.

4. ipucu Tarayıcıların her biri için kod hatalarını hızla bulmanızı sağlayan eklentileri kullanın. Örnek olarak şu eklentileri test edebilirsiniz:

1. getfirebug.com adresindeki Chrome için
2. Opera için Opera'nın resmi web sitesinde
3. Mozila eklentileri sitesinde Mozila için
4. Ofiste IE için. Microsoft web sitesi

Yukarıdakilerin hepsinden bir sonuç çıkaralım. Çapraz tarayıcı düzeni Korkutucu değil ve bazen eğlenceli. Modern dünyada başarılı bir düzen tasarımcısı olmak çok önemlidir. Bu düzende ustalaşmak için en önemli şey deneyim, çok fazla deneyim. Bu nedenle, çok pratik yapmanız gerekecek. Pratik yaparken farklı stratejiler kullanın, farklı yöntem ve araçlar deneyin (örneğin, işinizde site geliştirmeyi hızlandırabilecek ve kolayca uyarlanabilir site düzenleri oluşturabilecek hazır çerçeveler kullanın). Bir süre sonra, tarayıcılar arası bir düzen oluşturma stratejinizi tam olarak bulabilecek ve popüler tarayıcıların her birinde doğru şekilde görüntülenen bir site yazabileceksiniz.

Tarayıcılar arası düzeni öğrenin ve ilginiz için teşekkürler.

Bir web sitesinin farklı tarayıcılarda farklı görüntülenebileceğini hiç fark ettiniz mi? Çapraz tarayıcı düzeninin anlamı budur.

Çapraz tarayıcı düzeni nedir

Çapraz tarayıcı düzeni- mevcut tüm tarayıcılarda doğru görüntüyü sağlayan html kodunun (düzen) geliştirilmesine yönelik bir yaklaşım

Ayrıca, doğruluk, yerleşim düzeninin ve işlevselliğinin tüm detaylarının tam yeri olarak anlaşılmaktadır. Site, tüm popüler tarayıcılarda aynı görünmelidir:

• Firefox
• Krom
• Opera
• Opera Mini
• safari
• Internet Explorer

Tüm tarayıcılar web sayfalarının bazı öğelerini kendi yöntemleriyle görüntülediğinden, CSS'nin "belirli" özelliklerini kullanırsanız, görev oldukça zordur. Ve her yeni sürüm, aynı günden çok uzakta diğer geliştiricilerin tarayıcılarında uygulanan yeni özellikleri içerir.

Çapraz tarayıcı düzeni, Internet Explorer 6 tarayıcısıyla çalışanlar tarafından iyi bilinir - benzersizliği nedeniyle düzen tasarımcıları için çok fazla sinir bozmuştur. Ve bu benzersizlik, bu tarayıcının birçok kuralı ve standardı desteklemediği gerçeğinde ifade edildi. Sonuç olarak, yerleşim düzeninin Firefox ve Opera'da harika göründüğü, IE6'da parçalanarak mutlak bir karmaşaya dönüştüğü ortaya çıktı.

Sayfaların doğru görüntülenmesinin ihlali nedenleri

Dünyada web sayfaları oluşturmak için belirli standartlar olmasına rağmen, geliştiriciler tarayıcılara sürekli olarak yeni teknolojiler ve yeni CSS kuralları için destek sunuyor. Bu, daha önce erişilemeyen fırsatları gerçekleştirerek daha dinamik ve işlevsel siteler oluşturmanıza olanak tanır. Ve her geliştirici, tarayıcısının en son teknolojileri, yeni komut dosyalarını ve yeni kitaplıkları desteklemesini sağlamaya çalışır. Sonuç olarak kimi kullanıcılar en gelişmiş siteleri iyi görüntüleyen yeni tarayıcıdan memnun kalırken kimileri de açılan sayfanın neden düzgün açılmadığını anlayamıyor. Bu nedenle mizanpaj tasarımcısı, farklı tarayıcılarda görüntülenecek kodu en özdeş şekilde yazmalıdır.

Ayrıca, tarayıcıların sürekli yeni sürümlerinin çıktığını ve sitenin yeni sürümlerde de düzgün çalışması çok iyi olacağını unutmayın.

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

Çapraz tarayıcı düzeni, sitenin modern ve eski tarayıcılarda en doğru şekilde görüntülenmesini sağlamalıdır. Bunu yapmak için mizanpaj tasarımcısı, az bilinenler de dahil olmak üzere kullanılan tarayıcıların çoğuna uygun bir kod oluşturmalıdır. İşini inceleme sürecinde edindiği belirli bilgi ve becerilere ihtiyacı olacak.

Farklı tarayıcılar tarafından bireysel öğelerin algılanmasındaki farklılıkları gösteren karşılaştırmalı tablolar paha biçilmez yardım sağlar. Yani, tarayıcılar arası düzeni gerçekleştirmek için şunlara ihtiyacımız var:

• Düzen hakkında genel bilgiler;
• Belirli tarayıcılar için düzen özellikleri alanında bilgi;
• Bir bilgisayarda birden çok tarayıcı;
• Browsershots.org hizmetinde kontrol etme

Bu arada, bilgisayarınızda sanal bir makine oluşturmak, üzerine bir işletim sistemi kurmak ve eski tarayıcı sürümlerini oraya yüklemek güzel olurdu - çoğu hala modern teknolojileri anlamayan eski yazılımları kullanıyor.

Müşteri ile ayrı bir ön çalışma yapılmalıdır. Web tasarım dünyasında hiçbir şeyin mükemmel olmadığını ve bazı noktaların feda edilmesi gerektiğini açıklaması gerekiyor. Tasarımcılar ve programcılar ekibinin görevi, aşağıdaki noktaları karşılaması gereken bir web sitesi oluşturmaktır:

• Orijinal yerleşim düzenine ve müşterinin isteklerine maksimum uyum;
• Tüm popüler tarayıcılarda maksimum doğru görüntü;

Tarayıcılar arası bir düzen oluşturma sürecinde, kodda, HTML öğesi niteliklerinin varsayılan değeri belirlenir; bu, zaten ilk aşamada, gelecekteki sitelerin en basit düzenlerinin bile yanlış görüntülenmesinden kurtulmanıza olanak tanır. Ardından, farklı tarayıcılardaki kodun uyumluluğu dikkate alınarak etiketler düzenlenir. Bu aşamada, düzen tasarımcısının, bunun için tüm sürümlerin ve nesillerin tarayıcılarını kullanarak site görüntüsünün doğruluğunu sürekli olarak izlemesi gerekecektir (her durumda, en azından son yılların temel bir popüler tarayıcı setine ihtiyacınız vardır).

Çapraz tarayıcı düzeni oluşturma çalışmanızı kolaylaştırmak için, önce bir tarayıcı için düzen gerçekleştirmelisiniz, PSD'deki orijinal şablonla uyumluluğu kontrol etmelisiniz. Bundan sonra, kaynak kodunun eşzamanlı modernizasyonu ile diğer tarayıcılarda ekranın doğruluğu kontrol edilir. Bu yaklaşım, çapraz tarayıcı düzeninin oluşturulmasını önemli ölçüde hızlandırır ve kısa sürede iyi sonuçlar almanızı sağlar.

Çözüm

Çapraz tarayıcı düzeni, modern web tasarımının temel taşıdır. Tarayıcıların çalışma biçimindeki farklılıklar, genellikle belirli özelliklerin uygulanmasının önünde bir engeldir. Sonuç olarak, ortalama bir sonuçtan memnunuz, ancak mükemmelliğin zirvesine ulaştık. Ve bugün, çapraz tarayıcı düzeni, yalnızca herhangi bir tarayıcıda değil, aynı zamanda herhangi bir mobil cihazda da doğru şekilde görüntülenen uyarlanabilir bir tasarım oluşturma ihtiyacı ile desteklenmiştir.

Bugün, insanların İnternet'teki işleri için kullandıkları en popüler tarayıcılardan bazıları var. Aynı HTML kodunun farklı tarayıcılarda farklı görünmesi, herhangi bir web tasarımcısı için sürekli bir baş ağrısıdır. Ayrıca, aynı kod aynı tarayıcının farklı sürümlerinde farklı görünüyor.

Doğal olarak, herhangi bir web yöneticisi, sitenin mümkün olduğunca çok tarayıcıda aynı göründüğünden emin olmalıdır. "Çapraz tarayıcı HTML düzeni" adı verilen bu beceridir (kod farklı tarayıcılarda aynı göründüğünde). Bu tür bir kodu dizme yeteneği çok faydalıdır ve potansiyel işverenler tarafından takdir edilmektedir. Çoğu zaman, böyle bir gereklilik, ciddi bir şirkette boş bir web programcısı için potansiyel bir adayın karşılaması gereken koşullardan biridir.
Site neden farklı tarayıcılarda farklı görünüyor?

Farklı tarayıcılarda farklı türde bir sitenin görünmesinin birkaç nedeni vardır.

1. Standart olmayan HTML özelliklerini kullanma.

Tasarımcı, HTML standardının parçası olmayan özellikleri kullanabilir. Aslında tarayıcılar, standartta açıklanmayan birçok farklı etiket özelliğini destekleyebilir. Bu özellikler tavsiye edilmez. Basit bir nedenden dolayı - standartta bir şey tanımlanmamışsa, tarayıcılardan biri onu desteklemiyor olabilir. Ve böyle bir tarayıcının yaratıcıları kesinlikle haklı olacak. Standart olmayan özellikleri kullanmaya gerek yok.

Yazdığınız kodun her zaman standarda uygunluğunu kontrol edin.

Size klasik bir örnek vereyim. Basit bir tablo için aşağıdaki HTML kodunu göz önünde bulundurun.

Selam Dünya

Bu kod, bir hücreden oluşan bir tablo görüntüler. Web tasarımcısı bu tablonun ilk satırının yüksekliğinin 100 piksel olmasını istiyor. Ancak, HTML standardında etiket yükseklik özelliği geçersiz.

Bu durumda, etiketin yükseklik özelliği nedeniyle hata büyük değildir. çoğu modern tarayıcı tarafından anlaşılır. (Yalnızca Internet Explorer 4 bu özelliği tanımaz). Ancak diğer durumlarda, standardı ihmal etmek daha feci sonuçlara yol açabilir. Elbette hepimiz bir öğenin yana ya da aşağı hareket ettiği siteleri ziyaret etmişizdir. Her birimiz, büyük olasılıkla, kalbinde sitenin bir profesyonel tarafından yapılmadığını düşündük. Her ne kadar, büyük olasılıkla, site ana tarayıcı türlerinde test edilmemiştir. Kural olarak, siteler yalnızca Internet Explorer'da oluşturulur ve test edilir, çünkü bu, kullanıcılar arasında en popüler tarayıcıdır. Bu nedenle, bir dahaki sefere, görünüm kaybının neden oluştuğunu bilerek hoşgörülü olacağız.

Tablo örneği için doğru çözüm, stilleri kullanmaktır. "Doğru" kod şöyle görünebilir:

Selam Dünya

Bu seçenek, tüm tarayıcı türlerinde aynı şeyi gösterecektir (veya en azından göstermelidir).

2. Varsayılan öznitelik değerleri.

Her HTML öğesinin birçok özelliği vardır. Bu, renk ve komşu öğelere olan mesafe, hizalama ve çok daha fazlası. HTML kodu oluşturulduğunda, tasarımcı genellikle yalnızca sayfadaki öğelerin sunumu için önemli olan nitelikler için değerler ayarlar. Tarayıcı, belirtilmemiş özniteliklerin değerleriyle ne yapmalıdır? Bu durumda, tarayıcılar varsayılan değerleri kullanır. Ve tehlikenin yattığı yer burasıdır. Farklı tarayıcılar için varsayılan değerler değişebilir. Örneğin, varsayılan yazı tipi boyutu farklı olabilir. Bu nedenle, metin bazı tarayıcılarda diğerlerinden daha fazla yer kaplar. Bu da sayfa gösteriminde farklılıklara yol açabilir.

Bu sorun nasıl çözülebilir? İlk olarak, evrensel bir ipucu: Sitenin görüntüsünü mümkün olduğu kadar çok tarayıcıda kontrol edin. İkinci olarak, sayfada kullanılan tüm öğeler için css dosyasındaki varsayılan değerlerinizi ayarlayabilirsiniz. Bu, tarayıcıyı HTML öğelerinin özelliklerinin değerleri hakkında "düşünmek" zorunda kalmaktan kurtarır. Bunu, örneğin şöyle yapabilirsiniz:
html, gövde, div, yayılma, uygulama, nesne, iframe,
h1, h2, h3, h4, h5, h6, p, blok alıntı, ön,
a, kısaltma, kısaltma, adres, büyük, alıntı, kod,
del, dfn, em, yazı tipi, img, ins, kbd, q, s, örnek,
küçük, vuruş, güçlü, alt, sup, tt, var,
dl, dt, dd, ol, ul, li,
alan seti, form, etiket, gösterge,
tablo, resim yazısı, tbody, tfoot, thead, tr, th, td (
kenar boşluğu: 0;
dolgu: 0;
sınır: 0;
anahat: 0;
yazı tipi ağırlığı: miras;
yazı tipi stili: devral;
yazı tipi boyutu: 14 piksel;
yazı tipi ailesi: devral;
dikey hizalama: üst;
arka plan: şeffaf;
yazı tipi: verdana, cenevre, lucida, "lucida grande", arial, helvetica, sans-serif;
arka plan rengi: beyaz
}

Böylece sayfadaki tüm elemanlar bu dosyada belirtilen özelliklere sahip olacaktır. Herhangi bir öğenin varsayılan özelliklerden farklı özelliklere sahip olması gerekiyorsa, bunların açıkça yeniden tanımlanması gerekir.

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

Ancak, web yöneticisi yalnızca standart HTML özelliklerini kullansa ve tüm öğeler için varsayılan özniteliklerini ayarlamış olsa bile, site farklı tarayıcılarda farklı görünebilir. Bunun nedeni, tarayıcıların kendilerinin HTML standardına uymamalarıdır. Tarayıcılar, herhangi bir yazılım gibi, hatalar içerebilir. Bu hatalar genellikle hızlı bir şekilde düzeltilir, ancak kullanıcının tarayıcının en son sürümünü yüklememiş olma olasılığı her zaman vardır.
Tarayıcı satıcılarının (özellikle Microsoft) belirli bir öğenin nasıl görüntüleneceğini daha iyi bildiklerini düşünmeleri de mümkündür.

Standardın uyumsuzluk sorunlarının ana suçlusu Internet Explorer olduğundan, bir sitenin IE'de diğer tarayıcılarda olduğu gibi görünmesini sağlamak için birçok olası geçici çözüm geliştirilmiştir.

En yaygın yol, IE için koşullu yorumlardır. Microsoft, tarayıcısının sorunlarını biliyormuş gibi, geliştiricilere HTML kodunu yalnızca IE'nin özel bir sürümünde yürütmenin bir yolunu verdi. Örneğin, aşağıdaki kod, IE 7 ve üzeri için özel bir CSS dosyası içerecektir: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Koşullu yorumların bir dezavantajı vardır. Bu tür yorumları içeren bir sayfa, geçerli bir HTML sayfası değildir. Gördüğünüz gibi Microsoft burada da standardı ihlal ediyor.

- bu, bir web kaynağının aynı şekilde görüntülenmesi ve tüm popüler olanlarda, operasyon ve düzen hatalarında kesinti olmadan ve içeriğin aynı doğru okunabilirliği ile çalışma yeteneğidir. Teknolojinin hızlı gelişimi nedeniyle, sitenin yalnızca tarayıcıların en son sürümleriyle ilgili olarak çapraz tarayıcı yapılması önerilir.

Terim ilk olarak 1990'larda, tarayıcı rekabetinin dorukta olduğu zamanlarda kullanıldı. O günlerde, Netscape Navigarot'ta (tarayıcı 2007'de ortadan kalktı) ve Internet Explorer'da eşit olarak çalışan kaynaklar, tarayıcılar arası kaynaklar olarak kabul edildi. Zamanla, uygulama satıcıları tarayıcılardan yalnızca birine özgü özellikleri uygulamaya başladı. Sonuç olarak, sayfaların görüntülenme şekli ve çalışma şekli bakımından birbirlerinden farklılaşmaya başladılar.

Herhangi bir modern tarayıcı, kendi kaynak ve kod işleme algoritmalarını kullanır. Bu bağlamda, kaynak geliştiriciler, belirli bir tarayıcıyla site uyumluluğuyla ilgili sorunlarla karşılaşmaktadır. Bir projeyi çapraz tarayıcı yapmak için sadece standart CSS araçlarını kullanamazsınız. Ayrıca, belirli bir tarayıcıya özgü özel CSS seçicileri (hack'ler) gerektirecektir, bu nedenle her uygulama için ayrı ayrı yazılmaları gerekecektir.

Tarayıcıların eski sürümlerinde bile sayfaların doğru görüntülenmesini sağlayabileceğiniz birçok etkili yöntem vardır. Ancak, ziyaretçilerin çoğunun sitenizi onlardan ziyaret ettiğinden eminseniz bu tür prosedürlere başvurmak mantıklıdır.

Yazılım geliştiriciler artık tarayıcılarının eski sürümlerini desteklemediğinden, son yıllarda SEO uzmanları tarayıcılar arası daha az sorun yaşadı. Bu nedenle, örneğin Microsoft, ürünün güncel olmayan sürümlerinin terk edilmesi çağrısında bulunarak, güncellenmiş Internet Explorer'ı kullanma gereğini zaten açıkça ilan ediyor.

Bir notta. Bugün, birçok web sitesi oluşturucu, site tarafından desteklenmeyen tarayıcıların kullanıcılarının ekranında görünen "saplama" olarak bilinen özel bir sayfa kuruyor. Böyle bir sayfa, içeriğin doğru şekilde görüntülenmesi için bunları yeni sürümlerle veya popüler tarayıcılarla değiştirmeyi önerir.

Bir web kaynağının öğelerinin bugün mevcut olan tüm tarayıcılarda kesinlikle aynı olması gerekmediğini belirtmekte fayda var. Bir site aşağıdaki durumlarda uygun kabul edilebilir:

• sayfadaki bilgiler okunabilir;
• yapı korunur;
• düzen hatası yok;
• metin, içerik yazarı tarafından aksi belirtilmedikçe, diğer metin ve resimlerin üzerine "katılmaz".

Bir web kaynağını tarayıcılar arası uyumluluk açısından test ederken, en popüler tarayıcıların en son sürümlerini kullanmak gerekir:

1. Google Chrome.
2. Mozilla Firefox.
3. Opera.
4. İnternet Gezgini.
5. Netscape.
6. safari.

Son zamanlarda mobil trafik yüzdesinin önemli ölçüde artması ve Google'ın bunu uygulaması nedeniyle, web yöneticileri, sayfaların tabletler ve akıllı telefonlarla uyumluluğunu sağlamaya giderek daha fazla dahil oluyor. Bu cihazların ekranları kişisel bilgisayar monitörlerinden çok daha küçüktür, bu nedenle mobil cihazlara uyarlanmaları gerekir.

Bir site çapraz tarayıcısı nasıl yapılır?

Web kaynağınızın tarayıcılar arası uyumluluğunu elde edebileceğiniz birkaç etkili yöntem vardır.

Başvurucss hileler

CSS saldırıları, yalnızca bir tarayıcının anlayabileceği kod parçalarıdır. Örneğin, siteniz üç tarayıcıda doğru bir şekilde görüntüleniyorsa ve diğer üçünde bazı "söveler" görünüyorsa, sorun, sayfa içeriğini yanlış yorumlayan üç tarayıcının her biri için uygun hack'ler ayrı ayrı reçete edilerek çözülür.

Bir notta. Hack'ler koddaki hataları düzeltmenin en iyi yolu değildir, çünkü kodu çirkin ve yanlış gösterirler. Ancak görevlerini yerine getirmeye devam ediyor.

Evrensel unsurların uygulanması

Bu tür öğeler çoğu tarayıcıda eşit derecede iyi çalışır, bu nedenle bunlara özel dikkat gösterilmesi önerilir. Yalnızca evrensel öğelerin yardımıyla, sitenizin kaynak kodu estetik açıdan hoş, kısa ve net olacak ve aynı zamanda yaygın olarak kullanılan tüm tarayıcılar için uygun olacaktır.

Tamamen ücretsiz olarak sunulan caniuse.com hizmetini kullanarak motorun hangi sürümünün hangi etiketleri desteklediğini kontrol edebilirsiniz.

Satıcı önekleri

Tarayıcı savaşlarından, özellikle WebKit'ten kalmadırlar. Bu yöntem, hack kullanmaktan daha verimli ve "daha temiz".

Her tarayıcının bir satıcı önekine sahip benzersiz özellikleri vardır. Google Chrome örneğinde, border-radius öğesi burada -webkit-border-radius özelliği ile temsil edilir. Ve Mozilla Firefox -moz- önekini ekler. Bu tür özellikler, öğenin işlevselliğini yalnızca belirli bir tarayıcıda değiştirir ve diğer tarayıcıları hiçbir şekilde etkilemez.

Tarayıcılar arası uyumluluğu kontrol etmeye yönelik hizmetler

Web siteniz yeterince çapraz tarayıcı değilse, çoğu ziyaretçinin içeriğini aynı şekilde algılaması zor olacak ve bu, arama motorlarının sonuçları sıralama sürecinde mutlaka dikkate aldığı davranışsal faktörlerin bozulmasına yol açacaktır.

Bu nedenle, web kaynağınızın tarayıcılar arası uyumluluğunu bulmak önemlidir. Bu göstergeyi, hem çevrimiçi olarak hem de cihaza kurulumdan sonra sunulan çok sayıda hizmeti kullanarak test edebilirsiniz. En uygun ücretli ve ücretsiz hizmetleri dikkatinize sunuyoruz.

1. Çapraz Tarayıcı Testi

Bu test hizmeti ücretlidir, çevrimiçi çalışır. İşletim sistemlerinin, tarayıcıların neredeyse tüm sürümleri tarafından desteklenir ve çoğu mobil cihaz ve ekran çözünürlüğü için uygundur.

Sitenin farklı tarayıcılarla uyumluluğunu aşağıdaki şekillerde kontrol edebilirsiniz:

• Canlı test.Önceden seçilmiş seçeneklerle tarayıcıda kaynakla çalışabilir, video kaydedebilir ve ekran görüntüsü alabilirsiniz.
• Selenyum testi.Önceden yapılmış bir komut dosyasına göre otomatik doğrulama anlamına gelir. Sonuçların video dosyası formatında kaydedilmesine izin verilir.
• Ekran görüntüsü modunu otomatik kaydet. Farklı işletim sistemlerini, tarayıcıları, cihazları ve ekran boyutlarını birleştirebilirsiniz.
• Yerel bağlantı. Henüz siteye yüklenmemiş belgeleri inceleyebilirsiniz.

Hizmetin ücretli olmasına rağmen, ücretli bir aboneliğe abone olmadan önce uygulamanın işlevlerini ve yeteneklerini değerlendirmek için 7 gün içinde kullanımı için 60 dakikalık bir sınırınız vardır.

2. tarayıcı görüntüleri

Eski ve popüler olmayanlar da dahil olmak üzere birçok tarayıcıdan ve bunların derlemelerinden (200'den fazla parça) çapraz tarayıcı uyumluluğu kontrol edilen bir sitenin ekran görüntülerini kaydetmenin mümkün olduğu başka bir çevrimiçi hizmet.

Hem ücretsiz hem de ücretli sürümler burada mevcuttur. Ücretsiz ile ilgili kötü olan şey, isteğinizin sıraya alınması ve siteler yayınlandıktan sonra ekran görüntülerinin birer birer sunucuya yüklenmesidir. Bu işlem 10 dakikadan 2-3 saate kadar sürebilir ki bu oldukça uzun bir süre.

Ücretli bir abonelikle, tarayıcılar arası test talepleriniz bir öncelik olacaktır. Renk derinliğinin yanı sıra farklı sürümlerin ekran çözünürlüğünü, JavaScript'i ve Flash'ı da seçebilirsiniz.

Numara 3. IE NetRenderer

Çevrimiçi olarak kullanılabilen ücretsiz bir çek anlamına gelir. Hizmet, sitenin uyumluluğunu yalnızca Internet Explorer için 5.5 sürümünden başlayarak ve 11. sürümle biten kontrol etmenin mümkün olması bakımından farklılık gösterir. Burada yalnızca tarayıcı sürümünü ve test edilen kaynağın adresini belirtebilirsiniz.

4 numara. .IE Test Cihazı

IE'nin farklı sürümlerini kontrol edebileceğiniz özel bir tarayıcıdır. Bu, bilgisayara kurulumdan sonra kullanılabilen yerel bir uygulamadır. Uygulamanın ana işlevleri, tarayıcının seçilen sürümünün işleyişini taklit etmek ve internette gezinerek çevrimiçi para kazanmaktır.

Numara 5. tarayıcı

Bu hizmet sayesinde, denetlenen kaynakla öykünmede değil, programın sanal makinesine yüklenmiş gerçek bir tarayıcı penceresinde çalışma fırsatı elde edersiniz. Windows işletim sisteminin 5 sürümü ve Anrdoid işletim sisteminin 4 sürümü için en popüler 5 tarayıcıyı (Chrome, Opera, IE, Safari, Firefox) kontrol etmek mümkündür. Ekran çözünürlüğünü ayarlayabilir ve ekran görüntüsü alabilirsiniz. Hizmetin tüm işlevleri ücretlidir, 1024x768 çözünürlük ve Windows Vista ile yalnızca ilk 3 dakikalık test ücretsizdir.

6. Kaşık Tarayıcı Korumalı Alanı

Chrome, IE, Opera, Safari ve Firefox'un tam sürümleriyle bir web sitesi uyumluluk kontrolü sunar. Tarayıcıların en son sürümleri ücretsiz olarak test edilir, ancak daha eski sürümleri test etmek isterseniz ücret ödemeniz gerekecektir.

Bir tarayıcı seçtikten sonra, yeni bir pencerede açılacak ve ardından adres çubuğunda sayfanın URL'sini belirtmeniz ve ardından test etmeniz gerekiyor. Araçta, tarayıcılar arası uyumluluğun tüm parametrelerinin test edilmesi mevcuttur. Ancak, kullanmak için özel bir eklenti indirmeniz gerekecek.

7 numara Çoklu Tarayıcı

Tarayıcılar arası uyumluluğu kontrol etmek için ücretli program. Firefox ve Chrome'un şu anda mevcut olan tüm sürümleri, Safari 5.1, çeşitli Explorer yapıları ve çok çeşitli ekran çözünürlüklerine sahip çoğu akıllı telefon ve tabletin öykünmesiyle çalışır.

Uygulama, bilgisayarda yüklü olan tarayıcıları kullanabilir veya kullanıcının ihtiyaç duyduğu sürümleri indirebilir. Hizmetin büyük bir avantajı, İnternet dosyalarını kaydederseniz siteyi çeşitli tarayıcılarda çevrimdışı olarak test etmenizi sağlayan işlevdir.

Çeşitli modlar sayesinde şunları yapabilirsiniz:

• kaynakla istenen tarayıcıda çalışın;
• öykünülmüş akıllı telefonlarda ve tabletlerde web sitelerini izleyin, video kaydedin;
• ekran boyutlarının bolluğuna göre çeşitli tarayıcılardan ve cihazlardan ekran görüntülerini otomatik olarak kaydedin.

Başlamak için, programın 2 hafta boyunca kullanılabilen bir demo sürümünü yükleyebilirsiniz.

8. Sos Laboratuvarları

Çevrimiçi tarayıcılar arası test hizmeti. Deneme sürümü oldukça sınırlıdır, ancak ücretli bir aboneliğe kaydolduğunuzda otomatik doğrulama kullanılabilir hale gelecektir. Yaklaşık 700 tarayıcı, izin ve cihaz kombinasyonu vardır.

9. tarayıcı

Tarayıcılar arası uyumluluk denetleyicisi hem ücretli hem de ücretsiz sürümlerde mevcuttur. İkincisinin işlevleri, elbette, sitenin kontrol edilen sayfalarının ve mevcut tarayıcıların sayısı ile önemli ölçüde sınırlıdır.

10. Turnusol

Sadece ilk 3 gün ücretsiz kullanılabilecek çevrimiçi bir uygulama. Popüler tarayıcıların ve mobil cihazların birçok yeni sürümünü destekler.

11. eşitlemek

Bu, yalnızca çevrimiçi bir web kaynağının tarayıcılar arası uyumluluğunu test etmek için değil, aynı zamanda belgeleri çeşitli tarayıcılarda görüntüleme sürecinde otomatik olarak taramak ve düzen hatalarını aramak için en etkili programdır.

Video formatında kaydedilebilen kontrol etmeden önce, diğer birçok benzer hizmette bulunmayan çok sayıda ayar yapabilirsiniz. Tek sorun İngilizce, ancak bir tercüman yardımıyla işlevselliği anlamak hiç de zor olmayacak.

Son sütundaki Göster okunu tıklayarak bitmiş raporun sayfa listesindeki ekran görüntülerini görüntüleyebilirsiniz.

12. tarayıcı yığını

Demo versiyonu ilk 30 dakikada denenebilen ücretli uygulama. Bir sitenin tarayıcılar arası testi, çeşitli sürümlere sahip 7 modern tarayıcı, çok sayıda öykünmüş akıllı telefon ve tabletin yanı sıra bir bilgisayara yüklenmiş yazılımla yapılabilir.

Kaynağı test etmek için seçtiğiniz tarayıcı penceresi, tarayıcı penceresinde görünür. İnternete tamamen erişilebilir, ekran görüntüleri oluşturmak da mümkündür.

13. görünümlike.us

Farklı uzantılara sahip bir kaynağın görüntüsünü kontrol etmek için mükemmel bir hizmet. Bir web sitesinin görünümünü ve verdiği hissi test etmek ve ne kadar duyarlı olduğunu görmek istiyorsanız bu harika bir seçenektir.

Tarayıcılar arası uyumluluğu kontrol etmenin yanı sıra, kaynağın indirme hızını ve kullanılabilirliğini de öğreneceksiniz. Viewlike.us'un HTML kodunun ve görüntü öğelerinin boyutunu ve ayrıca statik kaynakların sayısını bulmasına yardımcı olacaktır.

Başka bir araç, kullanılabilirlik kurallarıyla ilgili öneriler almanızı sağlar. Örneğin, sitenin yetersiz tanınabilir bir yazı tipi boyutuna sahip olup olmadığı ve içinde eklentilerin kullanılıp kullanılmadığı. Ardından, test edilen web kaynağının sayfalarının farklı çözünürlüklerde ekran görüntülerini alacaksınız.

14. hayalet laboratuvarı

Ücretsiz ücretli çok işlevli test programı. İlk 7 gün deneme sürümü mevcuttur.

Bir web sitesinin tarayıcılar arası uyumluluğunu kontrol etmeye yönelik yukarıdaki hizmetlerin tümü, kendilerine özgü belirli yeteneklerde birbirlerinden bir dereceye kadar farklılık gösterir. Bu nedenle, kaynağı tam olarak kontrol etmek ve gerekli tüm verileri almak için test için aynı anda birkaç uygulamayı kullanmak en iyisidir.

Çözüm

Çapraz tarayıcı uyumluluğu, davranışsal faktörlerin göstergeleri ve sonuç olarak sitenin arama motorları tarafından sıralanırken konumu üzerinde büyük bir etkiye sahiptir. Projenizi ne kadar iyi ve kaç tarayıcının desteklediği, ziyaretçi sayısına ve içeriğine olan kullanıcı ilgisine bağlıdır.

Bir siteye akıllı telefondan erişen bir kişinin, cihazındaki tasarım ve yapı okunaksız ve estetik görünmüyorsa siteden ayrılma olasılığının yüksek olduğunu anlamak için deneyimli bir uzman olmanıza gerek yok. Ayrıca, arama motorlarının, tasarımı yerleşim kurallarına uygun, dahili derecelendirmelerini yükselten ve böylece dönüşümü iyileştiren uyarlanmış web kaynaklarını teşvik ettiğini unutmayın.

Alexander Ovsyannikov, diğer adıyla İnternet Binbaşı

2009'dan beri web sitelerinde tanıtım yapıyor ve para kazanıyorum.

Konu, hem iyi bilinen çapraz tarayıcı düzeni yöntemlerini hem de birkaç ilginç, oldukça nadir olanı topladı.

Önsöz. neden oldu

1994'te Mozaik grafik kabuğuna sahip ilk tarayıcı temelinde oluşturulan ilk başarılı Netscape Navigator tarayıcılarından birinin ortaya çıkmasından sonra, Microsoft kendi tarayıcısını yapmaya ve buna Internet Explorer demeye karar verdi. IE'nin 1. ve 2. sürümleri, Windows özelliklerini tamamlayan ancak yaygın olarak kullanılmayan Microsoft Plus! Ardından Microsoft, şirketin Mosaic tabanlı yeni bir tarayıcı geliştiren Spyglass'tan programcıları işe aldığı IE 1.0 ve 2.0'dan kökten farklı bir tarayıcı geliştirmeye karar verdi. Böylece 1996'da Internet Explorer 3.0 ortaya çıktı. Ancak geliştiriciler, tarayıcıya uyumsuz HTML uzantıları eklediler ve bunlar daha sonra sürümden sürüme korundu. IE ve Netscape Navigator'ın müteakip paralel gelişimi, pazarın %95'inin IE'nin ele geçirilmesine yol açtı. IE'nin 4.0'dan 6.0'a yavaş gelişimi, zayıf standart desteği, düşük performans ve sayfa oluşturma, Netscape'in yeni Gecko motorunda yazılan 6.0 sürümünde yeniden canlanmasına yol açtı. Güncellenen Netscape Navigator, eski zirvelerine ulaşamadı ve zamanla Netscape, tarayıcısı için desteğin sona erdiğini duyurdu.
Bununla birlikte, Gecko motoru, 2004'te modern Mozilla Firefox tarayıcısının oluşturulmasının temelini oluşturdu. Opera 1996 yılında doğdu ve başarısını hız ve kullanım kolaylığı ile elde etti. 2003 yılında Apple, daha önce Mac OS'de kullanılan IE'yi kullanımdan kaldırarak WebKit destekli Safari tarayıcısını piyasaya sürdü. 2008'de Google da Safari ile aynı motora dayalı Google Chrome'un piyasaya sürülmesiyle tarayıcı yarışına girmeye karar verdi.
Bu nedenle, tarayıcıların her birinin kendi geçmişi vardır, Javascript, HTML ve CSS desteği açısından farklılık gösteren kendi sürümleri vardır.

Bugüne kadar, küresel tarayıcı pazar payı: %45 IE, %31 Firefox, %15 Chrome, %5 Safari ve %2 Opera.
Ayrıca, şu anda sadece %6'lık bir yer kaplayan “en eski” ve sorunlu tarayıcı IE6'nın pazar payındaki düşüşe sevinmek istiyorum.

Çapraz tarayıcı uyumluluğu

Tarayıcılar arası uyumluluk, sitenin farklı tarayıcılarda aynı görüntülenmesi ve çalışması anlamına gelir. Bu başlıkta JavaScript'in farklı tarayıcılardaki problemlerini ele almayacağım, ancak layout üzerinde duracağım.

Tarayıcılarda sitenin aynı görüntüsünü elde etmenin iki ana yolu vardır:

Koşullu Yorumlarla Stilleri Ayırma

Farklı tarayıcılar için stilleri ayırmak, tarayıcılar arası düzenin en yaygın yollarından biridir. Yöntemin özü, kullanıcının tarayıcısının türünü belirlemek ve ana stil ile birlikte uygun stili uygulamaktır.

Yalnızca IE koşullu yorumları anlar, bu nedenle diğer tarayıcılar bu kodu normal yorumlar olarak okuyacaktır.

IE dışındaki tüm tarayıcıların göreceği stilleri ayarlayabilirsiniz:

Kullanıcının IE sürümünü belirlemek de mümkündür:
IE6 için
IE6 ve üstü için
sürüm 6'dan daha az IE için
IE için sürüm 6'dan küçük veya ona eşit
IE için 6'dan fazla sürüm
ve her IE sürümü için uygun stilin bağlanması (IE sürüm numarası istenilen şekilde değiştirilebilir).

IE sürümleri tanımlayarak ve gövdeye sınıflar atayarak, farklı IE sürümleri için farklı CSS stilleri eklemek zorunda kalmayabilirsiniz:

Ve bunları her sürüm için genel tarzda daha fazla kullanmak:
.ie6 .elementstyle(
arka plan: #123;
}

Bu yöntemin avantajı, kullanımının geçerliliğidir.

CSS hileleri

Çapraz tarayıcı düzeninin daha az yaygın olmayan bir başka yolu da, belirli öğeler için özellikleri tanımlamanıza izin veren CSS hileleridir.

IE6 için:
.elementstyle(
_arka plan: #123;
}
veya:
.elementstyle(
-arka plan: #123;
}
veya geçerli:
*html.elementstyle(
arka plan: #123;
}

IE7 için:
**html .stil (
arka plan: #123;
}
veya geçerli:
*:birinci çocuk+html . eleman stili (
arka plan: #123;
}

IE8 için:
.elementstyle(
arka plan: #F12\3/;
}

Firefox için:
@-moz-belge url-ön eki() (
.elementstyle(
arka plan: #123;
}
}

Safari ve Chrome için (bir motor, hatırladınız mı?):
@medya ekranı ve (-webkit-min-device-pixel-ratio:0) (
. eleman stili (
arka plan: #123;
}
}
veya
body:last-child:not(:root:root) .elementstyle (
arka plan: #123;
}

Opera için her şey daha karmaşık. Opera için CSS korsanları Safari ve Chrome'u anlar, bu nedenle stili geri geçersiz kılmak için hem Opera hem de Safari\Chrome için kesmeyi kullanmanız gerekir:
@media all ve (min-width:0px) (
baş~gövde .elementstyle (
arka plan: #123;
}
}
body:last-child:not(:root:root) .elementstyle (
arka plan: #fff;
}
Bu iki hack'e bir alternatif, JavaScript'in yerleşik "opera" nesnesini kullanarak Opera için stilleri tanımlamanın ilginç bir yoludur:

Kullanıcı JavaScript'i devre dışı bırakmışsa işe yaramayacağından, yöntem güvenilmezdir.

Çözüm

Özetleyelim: çok sayıda öğeye sahip büyük siteleri düzenlerken, sitenin daha da gelişmesine ve büyümesine güvenerek, yine de bir stil ayrımı kullanmak tercih edilir. Geçerlidir, uygundur, iyi bir formun kuralıdır. Ancak küçük siteler için CSS hack'lerini kullanmanın yanlış bir tarafı yok, özellikle de hack'lerin çoğu doğrulanmış olduğundan.

Sonuç olarak, ideal olarak, düzendeki becerilerinizi geliştirerek, hack kullanımını ve stillerin ayrımını terk etmeye çalışmanız gerektiğini söyleyebilirim.

Etiketler: html düzeni, css hileleri