Web sitemi oluşturmak için HTML5 ve / veya CSS3 kullanmalı mıyım?
Yeni HTML5/CSS3 (Web8!) Öğeleri kulağa hoş geliyor! Şimdi kullanmaya başlamalı mıyım veya css/xhtml ile bağlı mıyım, daha fazla tarayıcı kullanana kadar bekleyin mi?
HTML5 şimdi tüm tarayıcılar tarafından desteklenmektedir, hatta IE5! (Html5shiv komut dosyasını kullanıyorsanız). Okumayı şiddetle tavsiye ediyorum http://diveintohtml5.org Oradaki en iyi HTML5 kaynaklarından biridir.
CSS3'te ise, kullanırsanız, normal sözdiziminin üstünde satıcı predix'i de kullandığınızdan emin olun. Örneğin.
border-radius
-moz ötesi yarıçaplı
-webkit ötesi yarıçaplı
İlerici gelişime inanıyorum. IE9'un css3 desteği çok umut verici görünüyor.
Muhtemelen.
Şu anda, bugün kullanabileceğiniz HTML5 bölümleri var. Örneğin, formlar. Eğer HTML5'i desteklemeyen bir tarayıcıda <input type="email"> varsa (evet, IE6 bile) <input type="text"> kullanıyorsanız, göreceğiniz şeyi görürsünüz. Ancak, HTML5 form öğelerini destekleyen bir tarayıcıda, email türünün avantajlarını elde edersiniz: yani müşteri, fazladan JS gerekmeden değeri kontrol eder. Evet, yine de HTML5 olmayan tarayıcılar için JS’ye ihtiyacınız olacak, ancak destekleyici tarayıcılarda bir onaylama katmanınız daha olacak.
Başka bir bu sitedeki sor , HTML5 ve CSS3 aracılığıyla kullanabileceğiniz yeni özelliklere genel bir bakış sağlar. Bu sorudaki formlar hakkında da pek çok iyi veri var.
Çünkü Internet Explorer (ve Safari ve Firefox'un eski sürümleri, ancak nadiren olabilir), boşluğu doldurmak için JavaScript kitaplıklarında bıraktığınız bu özelliklerin çoğunu desteklemiyor. Bunlara bir performans vuruşu (yalnızca onları kullanması gereken tarayıcılar için de dahil) olsa da, kullanıcıları kullanırken dikkatli olun.
Özellik desteği olmayan sorunları azaltmak için, bu yeni özelliklerin buna değer olduğuna karar verirseniz, aşağıdaki kaynakları kullanın:
- html5shiv: HTML5 öğelerini tanıması ve stillendirmesi için IE için bir JavaScript kaydırma.
- CSS3 Turtası: İnterneti oluşturan bir IE ekli davranış (bir
.htcdosyası) Explorer 6-8 en kullanışlı CSS3 dekorasyon özelliklerinden birçoğunu gösterme yeteneğine sahiptir. Bir öğeye uygulandığında, IE'ınborder-radius,box-shadow,border-image, çoklu arka plan görüntüsü velinear-gradientarka plan görüntüsü olarak tanımasını ve görüntülemesini sağlar. . - Modernizr: mevcut tarayıcıyı yaklaşmakta olan CSS3/HTML5 özelliklerine göre sınamak için özellik algılamasını kullanan, Javascript kitaplığını, Desteklenenler için <html> öğesi. Ayrıca, her özellik için bir boolean özelliği içeren, destekleniyorsa
trueve desteklenmiyorsafalseolan, kendinden başlıklı bir genel JavaScript nesnesi oluşturur. HTML5 öğelerine stil oluşturma ve yazdırma desteği ekler, böylece<section>,<header>ve<nav>gibi öğeleri kullanabilirsiniz. - ie-css3.js:, Internet Explorer'ın CSS3 sözde sınıf seçicilerini tanımlamasını ve bunlarla tanımlanan stil kurallarını oluşturmasını sağlar. Sitenizin kullandığı JavaScript kitaplığına bağlı olarak farklı CSS3 seçicilerini destekler.
- DD_belatedPNG: IE6’ya PNG resim desteği ekleyen bir Javascript kitaplığı. PNG'leri,
<img />öğesininsrcdeğeri olarak veya CSS'debackground-imageözelliğinin olarak kullanabilirsiniz.AlphaImageLoader'in tersine,background-positionvebackground-repeatistendiği gibi çalışır ve öğelera:hoversözde sınıfına cevap verir. - TwinHelix IE PNG Düzeltmesi: bir IE ekli davranış (bir
.htcdosyası) alfa opaklığıyla PNG desteği ekleyerek IE 6. Tam CSS arkaplan konumlandırma ve tekrarlama (CSS sprite'lar dahil) ek (dahil) JavaScript destekliyor. - Herhangi biri: vurgulu: otomatik olarak bir IE ekli davranış (bir
.htcdosyası) yamalar: hover,: active ve: focus, IE6, IE7 ve IE8 tuhaflıkları için, başka tarayıcılarda olduğu gibi kullanmanıza izin verir. AJAX desteğini içerir; yani, javascript aracılığıyla belgeye eklenen herhangi bir html'nin IE'de:hover,:activeve:focusstillerini tetikleyeceği anlamına gelir.
DD_belatedPNG'nin her iki sorunu da çözdüğünü not etmek ilginç: Her ne: hover ve TwinHelix'in IE PNG Saf JavaScript ile düzeltme yaparken, Her ne: hover ve TwinHelix'in IE PNG Düzeltmesi bir JavaScript ve _ kombinasyonunu kullanıyorIE bağlı davranışlar (.htc files).
Genellikle, IE olmayan tarayıcıları kullanan kişiler, istendiğinde onları yükseltir ve bu nedenle IE "Ama bazı tarayıcılar bu özelliği desteklemiyor!" şikayet. Modernizr, HTML5/CSS3'ü yalnızca IE'yi değil, görmeyi düşündüğünüz tarayıcılara da ekler. yani-css3.js aynı şeyi yapacak, sadece bir [IE şartlı yorum yapmadan uygulamanız gerekiyor (bu, demek ki tüm tarayıcılar bunu başaracak Sunucu tarafı kullanıcı aracısı denetimlerine dahil etmediğiniz sürece, bu yalnızca IE kullanıcılarınız yerine tüm ziyaretçilerinizin performansını büyük ölçüde azaltır.)
Gereksinimlerinize en uygun teknolojiyi kullanın.
Eric Meyer yazdı güzel bir makale neden CSS kurallarında satıcıya özel ön ekler kullanmaya başlamanın eskiden kullanılan css filtre kırmalarını kullanmak gibi topal olmadığına dair.
Aynı şeyin HTML5 için de geçerli olduğunu düşünüyorum. Tarayıcı desteğini farklı özellikler için kontrol edebilirseniz neden kullanmıyorsunuz? Site incelikle bozulduğu sürece, yaşayın.
Hangi CSS3 özelliklerini kullanmak isteyeceğinize karar verirken diğer bazı faydalı linkler: http://caniuse.com/ (hangi elemanların ve seçicilerin hangi platformlarda kullanılabileceği konusunda iyi bir döküm sağlar)
http://css3please.com/ (CSS3 özellikleriyle uğraşmak üzere sayfa içinde düzenlenebilir bir oyun alanıdır, bu aynı zamanda hangi tekniklerin ve özelliklerin sıkça istenen stiller için hangi platformlar tarafından desteklendiği konusunda bazı tavsiyeler verir, yuvarlatılmış köşeler, degrade arka planlar vb. gibi)
Modern tarayıcılardaki deneyimi geliştirmek için kullanıyorum, bu yüzden iyi bir tarayıcıya sahip kullanıcılar, daha iyi görünümlü UI'lerle (yuvarlak köşeler, gölgeler, bu tür şeyler) "ödüllendiriliyor". Sanırım, bunun için bir tür JS geri dönüşü almadıkça, mevcut müşterilerinizin form doğrulamanızı söyleyelim.
HTML5 kullanarak eski bir tarayıcıda da desteklenmesi gereken yeni bir proje başlatıyorsanız, en iyi seçenek Initializr - komutunu kullanmaktır.
Arka ucunda HTML5 Boilerplate kullanır ve kendi sitenize dağıtabileceğiniz bir şablon vermek için kendi başına birkaç seçenek ekler. Sitenizi eski tarayıcılarla uyumlu hale getirecek olan Javascript kitaplıklarını (HTML Shiv veya Modernizr gibi) içerir.
Kitlenin ne olduğuna ve hangi özellikleri kullanmak istediğinize bağlı. Ortalama projenin ie6 :( için destek bırakabilmesi için birkaç yıl daha geçmesini bekliyorum.
Siteniz özel bir intranet ise ve tarayıcıyı kontrol ediyorsanız veya uğraşmak için sınırlı sayıda tarayıcıya sahipseniz, teknoloji kanaması üzerinde çalışmaktan çekinmeyin.
Değilse, ne kullanırsanız kullanın, daima en düşük ortak paydayı hesaba katmanız gerekecektir. Bu durumda muhtemelen IE 6 ve bir dizi mobil tarayıcı kombinasyonu var. Bu nedenle, HTML 5 ile ilerlemeye devam ederseniz, sitenizin güzel bir şekilde 'bozulduğundan' emin olma konusunda ek bir sorun yaşarsınız.