it-swarm-tr.com

HTML5 / CSS3'teki yenilikler neler?

Gördüm bu site ve bu site , ama bu çok sindirmek için. HTML5 hakkında normal eski (X) HTML/CSS'den farklı/daha iyi yapan temel şeyler nelerdir?

23
Jason

HTML5 çok büyük , ancak ayrıca awesome .

Benim görüşüme göre, çoğunlukla birlikte çalışabilirlik hakkında. Bu özellik gider ve denemek ve bunu yapmak için Edge vakalarını bile belirtir; tüm tarayıcılar işaretlemeyi aynı şekilde okurlar .

İkincisi, HTML5, adının söylediğini aynen yapan video ve sese sahiptir. Video veya ses eklemek istiyorsanız, HTML5 eklenti ihtiyaçlarınızı azaltmalıdır.

Üçüncü olarak, HTML5 erişilebilirliği ve anlamsal yardımı içerir. Örneğin, <section> ve <article> gibi öğeler, makinelerin hangi içeriğin olması gerektiğini bulmasına yardımcı olur. <input type=email> gibi yeni giriş tipleri de aynı nedenlerle faydalı olabilir, ancak yeni giriş tipleri "ortak" insan okuyucular için bile faydalı olmasını sağlayan özel kullanıcı arayüzleri içerir.

Yeni Formlar özelliklerinin yeni giriş türlerinden çok daha fazla olduğunu unutmayın. Ayrıca, yer tutucu metni ve diğer birkaç özellik için destek içerir.

HTML5, grafikler (hatta WebGL, 3D ile) grafikler veya hatta oyunlar oluşturmak için 2D (ve WebGL ile 3D) şekiller çizmenize olanak sağlayan <canvas> içerir.

Internet Explorer’ın antik contentEditable gibi eski davranışlar artık standartlaştırılmıştır.

DOCTYPE nihayet terbiyeli! Şimdi aslında ezberleyebilirsiniz! <!DOCTYPE html>

<meta charset=utf-8> ile kodlamanın belirlenmesi de daha kolaydır.

İstemciye veri göndermek ve onu öğelerle ilişkilendirmek istiyorsanız, şimdi bunu özel niteliklerle yapabilirsiniz. Örneğin, <div data-status=open>Open</div> şimdi nihayet izin verildi. Özel öznitelik adlarına data- ile önceden eklenmesi gerektiğini unutmayın.

Artık HTML belgelerine SVG ve MathML'yi dahil edebilirsiniz. Önceden, yalnızca XHTML belgeleriyle yapabilirdiniz.

HTML5'in tanımladığı birçok yeni işlev ve alan arasında en etkileyici olanlardan biri, sınıf niteliğini daha kolay bir şekilde değiştirmenize olanak sağlayan classList'tir. Bir elemanın hangi sınıflara sahip olduğunu bulmak ve bu elemandan belirli bir sınıfı kaldırmak için karmaşıkAyarlar/setAttribute almak ve karmaşık kesmek zorunda kalmak yerine, classList bu zor durumları çok basit hale getirir.

Ayrıca, HTML5’in bir parçası olmayan Web İşçileri, Web Prizleri ve IndexedDB gibi birbiriyle ilişkili birden fazla özellik var, ancak herkes sanki onlar hakkında konuşuyor. Çok çekirdekli bilgisayarlardan yararlanmak, sunucularla iletişim kurmak ve yerel olarak veri depolamak için çok kullanışlıdır.

CSS3'te ise, animasyonlar , geçişler , yuvarlatılmış kenarlıklar desteği içerir. ve esnek kutu modeli .

Ayrıca CSS3'te yeni olan, sayfadaki belirli öğeleri eşleştirmeyi kolaylaştıran yeni seçicilerdir (örneğin, tablodaki tek veya çift satırlar gibi).

Opaklık, yeni birimler, Marquee ve Ruby ayrıca CSS3'ün bir parçasıdır.

Bence hemen hemen tüm önemli kısımları kapsıyor.

33
luiscubal

Kenarlık yarıçapı, gölgeler (kutu/metin), rgba desteği vb. Gibi temel düzen şeyleri vardır; Bu, CSS3'ün en çok bilindiği şeydir. Daha ilgi çekici olan tuval etiketi, video etiketi, yerel depolama, websockets ve benzeri düz HTML/JS/CSS'de daha zengin kullanıcı deneyimleri yaratacaktır. Bu özellikler, ek eklentilere gerek olmadan web üzerinde Flash için mükemmel bir alternatif olma potansiyeline sahiptir.

4
D4V360

Yeni HTML öğelerini oldukça ilginç buluyorum ... bazıları, genel divs için anlamsal değişimler vaat ediyor. Gelecek vaat eden yeni unsurlar arasında diğerleri arasında article, section, aside, figure, nav, header ve footer, . Anlamsız kapların yerini alan anlamsal öğeler fikrini gerçekten seviyorum.

Oh evet, ilgili bir öğe: çok basitleştirilmiş doctype - nihayet bellekten yazabileceğim bir şey!

4
Grant Palin

( Bu cevabım webapps.stackexchange.com 'daki benzer bir soruya

Tuval ve Web Çalışanı İplikleri HTML5’in en heyecan verici yönleridir. ben mi. Bu özelliklerden yararlanan bazı web uygulamaları yazdım:

GioAUTHor [sic], bir haritada yolları çizmenize ve daha sonra baştan sona kadar en kısa rotayı bulmanıza (Dijkstra'nın JavaScript algoritması aracılığıyla) bulmanıza izin vermek için tuvalden geniş bir şekilde faydalanır.

JavaScript Thread Demo , tuvalden sınırlı bir şekilde faydalanır, ancak demo koduyla birlikte Çalışan Konularının kullanımını gösterir. Ayrıca HTML5 giriş tipi = "range" kaydırıcı denetimini kullanır.


HTML5 Tarayıcı desteği, tarayıcıların kendileri kadar çeşitlidir. Kimin neye hazır olduğunu gösteren bir Güzel site (HTML5'te, natch) hakkında HTML5 hazırlığı var.

4
Alan

CSS3 ile ilgili olarak - neler yapabileceğinizi görmek için http://css3please.com/ adresine bakınız.

Tarayıcınız ne kadar sonra, efektleri o kadar çok görebileceksiniz.

2
Sniffer

Bu önemi hakkında bir fikir sunmuyor, ancak HTML 4 ve 5 arasındaki kullanışlı bir delta.

Ana gelişmeler üzerine 2 ¢:

  • <section> ve yeni başlık ana hat algoritması (Ben sadece dedin mi benim 2 ¢)
  • yeni form elemanları, ör. <input type=email>
  • data-* özellikleri
  • istemci tarafı depolama
  • yerel <audio> ve <video>
1
Paul D. Waite

Ses ve video etiketleri Flash veya Silverlight gibi bir eklentiye ihtiyaç duymadan medya sunmaya izin verir ve en önemlisi iPhone ve iPad tarayıcılarında çalışır. Codec ve dijital haklar yönetimi konusunda dikkat edilmesi gereken bazı konular var.

1
Steve Tranby

Jeremy Kieth, "Web Tasarımcıları için HTML5" konulu çok güzel bir kitap yayımladı. Bunu kontrol etmek isteyebilirsiniz.

A Book Apart'ın ilk kitabı. İleri düzeydeki tasarımcılara orta düzeyde kullanılması tavsiye edilir. A ++

http://books.alistapart.com/

NOT: basılı bir kopya almak için beklemeniz gerekebilir

1
Kevin

Çünkü henüz kimse bunu söylemedi:

HTML5, herkesin listelediği şeyler için mükemmeldir, ancak standart coğrafi konumu, web çalışanlarını, web soketini, tuvali ve localStorage'ı da içerir. Tüm bu araçlar, HTML5 özelliklerinin bir kısmıdır, sahnede sahne almak için çok fazla JavaScript kullanırlar.

0
Ilan Biala