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:
.htc
dosyası) Explorer 6-8 en kullanışlı CSS3 dekorasyon özelliklerinden birçoğunu gösterme yeteneğine sahiptir. Bir öğeye uygulandığında, IE'ın border-radius
, box-shadow
, border-image
, çoklu arka plan görüntüsü ve linear-gradient
arka plan görüntüsü olarak tanımasını ve görüntülemesini sağlar. .true
ve desteklenmiyorsa false
olan, 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.<img />
öğesinin src
değeri olarak veya CSS'de background-image
özelliğinin olarak kullanabilirsiniz. AlphaImageLoader
'in tersine, background-position
ve background-repeat
istendiği gibi çalışır ve öğeler a:hover
sözde sınıfına cevap verir..htc
dosyası) alfa opaklığıyla PNG desteği ekleyerek IE 6. Tam CSS arkaplan konumlandırma ve tekrarlama (CSS sprite'lar dahil) ek (dahil) JavaScript destekliyor..htc
dosyası) 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
, :active
ve :focus
stillerini 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.