Çapraz tarayıcı css uygulamanın en iyi yolları nelerdir?
Kural: Bir cevap için bir yaklaşım.
Internet Explorer ile ilgili sorunları gidermek için koşullu yorumlar kullanabilirsiniz. Bunun dışında, Firefox/Chrome/Opera’yı birbirinden ayrı olarak hedeflemeniz gerekmez, hepsi de standartları destekler.
Önbelleğe alma içine girmemelidir; Tüm tarayıcılar için aynı kodu kullanmanız gerekir.
En iyi, en kolay yol bir kütüphane kullanmaktır. OOCSS, Blueprint veya 960gs gibi kütüphaneler, ekranlarını ana tarayıcılarda çoğaltmak için zaten tasarlanmıştır. Bundan sonra bıraktığınız tek şey, çoğu zaman, özel stillerinizin tarayıcılar arası uyumlu olduğundan ve biçimlendirmenizin sorun yaratmadığından emin olmanızdır.
Eğer mümkünse, veba gibi bilgisayar korsanlarından kaçının (evet, koşullu kullanın).
Bunun gibi soruları ve cevapları okuduğumda deli olduğumu düşünmeye başlıyorum, ancak css3 ve diğer hileler de dahil olmak üzere oldukça fazla css kullanarak oldukça karmaşık web siteleri yazdım ve koşullu yorumlara bile başvurmak zorunda kalmadım.
Bununla birlikte, kodlama sırasında çalışmamı birden çok tarayıcıda (ağırlıklı olarak Chrome'da kodluyorum ve firefox ve ie7'de test ediyorum) sürekli olarak kontrol ediyorum. Sorunların ortaya çıktığını gördüğümde, bir adım geri atıyorum, işlerin neden farklı şekillerde ortaya çıktığını anlıyorum ve genellikle biraz farklı bir yaklaşım seçiyorum.
Söylendiği gibi, bu farklı hack ve yöntemlerle entelektüel bir ilgim var. Özellikle CSS3 PIE ve modernizr tarafından kullanılan teknikleri okumaktan hoşlanıyorum.
Çapraz tarayıcı kodlamasına yaklaşmanın en iyi yolu, farklı tarayıcıların kodunuzu yorumlayacağının farklı yollarının farkında olmak ve bunu yardımcı olamayacakları bir şekilde yazmaktır.
web standartları ile tasarım ve geliştirme
belgelerinizi ve stil sayfalarınızı sürekli doğrulayın!
günlük tarayıcı/çapraz platform testi!
en azından bir talepte bulunmadan önce veya bir depoya taahhütte bulunmadan önce.
yine de uygun belgeler yazıyor olmalısınız, ancak bu çapraz tarayıcı/çapraz platform css yazmak için çok önemlidir.
not: gerçek doğrulama gücü zamanın% 100'üne uymuyor; neyin onaylanması gerekmediğini, ertelenebileceğini ve derhal düzeltilmesi gerektiğini anladığınızda süper güçler elde edersiniz.
ve bu güç: sürekli doğrulama şartnamelerin kurallarını pekiştirir ve sizlere iyi bilgi vereceksiniz. sürekli çapraz tarayıcı/çapraz platform testi, en çok hangi tarayıcıyla savaşmakta olduğunuz tarayıcısı kullanıcı aracısı stil sayfalarına meraklı kalmanızı sağlar. stillerinize uygun şekilde uyursanız, daha az sorun yaşarsınız.
i̇sterseniz kütüphaneleri ve çerçeveleri kullanabilirsiniz, ancak iş akışınızın tüm acısını ve acısını çekiyorsunuz ve burada talep ettiğiniz stiller için ayrıntılı bir göz alamayacaksınız. Bununla birlikte, libs/çerçeveler tipik olarak sayfa boşluğu ile birlikte gelse de, size bu gücü vermek için iyi bir iş çıkarır.
reset.css, normalizr.css ve hatta
*{border:none; margin:0; padding:0) reset bile oyun alanınızı stillerinizi ödünç veren tarayıcı ile kendi stiliniz arasında eşitlemek için cephaneliğinizdeki silahlardır.
evet,
* "hack" i tavsiye ettim, iki seçenek daha var. kullanıcı-ajanlarla savaş yaparken her birinin kendi yeri vardır.
dahası, bazı kullanıcı temsilcilerinin sahip olduğu kusurlardan faydalanmamak saçmadır, çünkü söz konusu kusurlar% 100 süreklilik göstermeyecek ve ele alınması gerekecektir. bunu yaparken, kusurların kendileri size özellik saptamak için mükemmel bir kanca sunar, hatta onları koklamak için bile atarlar, böylece buna göre davranılabilirler!
her kesmek, kusur, özellik, dom bükmek ve tarayıcıları satır içi zorlamak için ellerini alabilirsiniz özellik olmayan özellik kullanın.
......Eğer zorundaysan. Ancak, web standartları ile geliştiriyorsanız, geçmişte olduğu kadar onlara ihtiyaç duymayacağınızı da fark edeceksiniz.
ve onlara daha az güvendiğinizden, bir sorunu çözmek için birini kullanma fırsatını yakaladığınızda, çabuklukla kullanın! Sorunun ne olduğunu zaten biliyorsunuz ve ayrıca sorunu ve başka hiçbir şeyi hedeflemeyen bir çözümünüz var.
her bir tarayıcının kendi hedefleme yöntemleri vardır, en belirgin olanı koşullu yorumlardır.
ie6-9 için koşullu yorumlar kullanın ve ie10 ve ie11 için stiller oluşturmak için koşullu derleme kullanın.
ama yine, eğer dv'ler ve dvww'larsanız, onları oluşturduğunuz her belgeye dahil edebilirsiniz, ancak stil sayfalarının kısaltılmış olduğunu, yalnızca 1-3 piksel farklarını hedef alan veya arka plana ulaşan bir avuç stil barındıracağını görebilirsiniz -% 100 (vb.) uzatma (veya uzatma) renkleri.
Yaptığım şey bir sıfırlama CSS ve ardından koşullu ifadeler kullanmak. Sıfırlama CSS neredeyse tüm sorunları giderir ve koşullu IE'de herhangi bir sorunları giderir. Diğer tarayıcılar arasında farklılıklar varsa, genellikle tüm tarayıcıların genişliğini veya yazı tipi boyutunu artırmak gibi etraflarında çalışmayı denerim.
Şahsen YUI sıfırlama CSS'yi kullanıyorum.
CSS saldırılarını kullanmaya karşı bir uyarıyla ön hazırlık yapma.
Saf performans açısından bakıldığında, önbellekleme, istemciden tek bir HTTP isteğine bir kez yanıt vermesi dışında herhangi bir nedenden ötürü tek bir dosyada daha etkili olacaktır. Tarayıcıdan bağımsız olarak her kullanıcıya aynı dosyayı sunmanın yanı sıra, bazı durumlarda Koşullu yorumların indirilmesi .
Tüm farklı Internet Explorer sürümlerinizi tek bir dosyada hedeflemek için çeşitli CSS korsanları var. Bunların CSS’nizi geçersiz kılacağını unutmayın (doğrulama sizin için endişeliyse).
gövde { renk: kırmızı;/* tüm tarayıcılar */ renk: yeşil\9;/* IE8 ve altı */ * Renk: sarı;/* IE7 ve altı */ _Color: orange;/* IE6 */ }
Koşullu yorumların engellenmesi gerçekten, yalnızca koşullu bir yorum olduğunda IE8'deki bazı durumlarında bir sorundur. Internet Explorer'ı destekleme konusunda ne düşündüğünüze bağlı olarak, bu bir sorun olabilir veya olmayabilir.
Şahsen koşullu yorumları kullanıyorum. Ben şahsen CSS saldırılarının berbat olduğuna ve koşullu yorumlardan gelen herhangi bir performans vuruşunun gerçek veya hayal edildiğine inandığına inanıyorum ki sorunlara değmez CSS saldırılarının sıkça sebep olduğu.
Koşullu yorumların uygulanması nispeten kolaydır ve Quirksmode'daki kullanımları hakkında bir harika makale vardır. Aşağıdakiler yalnızca IE6'yı ele alacaktır:
<! - [eğer IE 6]> <link rel = "stylesheet" türü = "text/css" href = "/ media/css/ie6.css" /> [ .____]. <[endif] ->
Belirli bir sürüm numarasına eşit, daha küçük, eşit veya daha küçük, eşit veya daha büyük sürümün Internet Explorer sürümünü hedeflemenizi sağlayacak sözdizimi vardır. Yukarıdaki örnek, eşittir.