it-swarm-id.com

Apa yang baru dalam HTML5 / CSS3?

Saya telah melihat situs ini dan situs ini , tapi itu banyak yang harus dicerna. Apa hal utama tentang HTML5 yang membuatnya berbeda/lebih baik daripada HTML/CSS lama (X) biasa?

23
Jason

HTML5 besar , tetapi juga keren .

Dalam pandangan saya, sebagian besar tentang interoperabilitas . Spesifikasinya masuk dan menentukan bahkan Edge case untuk mencoba dan memastikan bahwa semua browser membaca markup dengan cara yang sama .

Di tempat kedua, HTML5 memiliki video dan audio, yang melakukan persis apa yang dikatakan namanya. Jika Anda ingin memasukkan video atau audio, HTML5 harus mengurangi kebutuhan plugin Anda.

Di tempat ketiga, HTML5 mencakup banyak aksesibilitas dan bantuan semantik. Misalnya, elemen-elemen seperti <section> dan <article> membantu mesin mencari tahu konten apa yang seharusnya. Jenis input baru seperti <input type=email> juga dapat berguna untuk alasan yang sama, meskipun jenis input baru termasuk UI khusus yang membuatnya berguna bahkan untuk pembaca manusia "umum".

Perhatikan bahwa fitur Formulir baru lebih dari tipe input baru. Ini juga mencakup dukungan untuk teks placeholder dan beberapa atribut lainnya.

HTML5 termasuk <canvas>, yang memungkinkan menggambar bentuk 2D (dan, dengan WebGL, 3D) seperti bagan atau bahkan membuat game.

Perilaku lama sekarang distandarisasi, seperti contentEditable kuno Internet Explorer.

DOCTYPE akhirnya layak! Anda sekarang dapat benar-benar menghafalnya! <!DOCTYPE html>

Menentukan penyandian juga lebih mudah, dengan <meta charset=utf-8>.

Jika Anda ingin mengirim data ke klien dan mengaitkannya dengan elemen, Anda sekarang dapat melakukannya dengan atribut khusus. Sebagai contoh, <div data-status=open>Open</div> sekarang akhirnya diizinkan. Perhatikan bahwa nama atribut khusus harus diawali dengan data-.

Anda sekarang dapat memasukkan SVG dan MathML dalam dokumen HTML. Sebelumnya, Anda hanya bisa melakukannya dengan dokumen XHTML.

Di antara banyak fungsi dan bidang yang didefinisikan HTML5, salah satu yang paling mengesankan adalah classList, yang memungkinkan Anda untuk memanipulasi atribut kelas dengan lebih mudah. Alih-alih harus mendapatkanAttribute/setAttribute dan menggunakan peretasan kompleks untuk mencari tahu kelas mana yang dimiliki elemen dan menghapus kelas tertentu dari elemen itu, classList membuat situasi sulit itu sangat sederhana.

Ada juga beberapa spesifikasi terkait, seperti Pekerja Web, Soket Web, dan IndexedDB, yang sebenarnya bukan bagian dari HTML5 tetapi semua orang membicarakannya seolah-olah mereka itu. Mereka sangat berguna untuk mengambil keuntungan dari komputer multi-core, berkomunikasi dengan server dan menyimpan data secara lokal.

Adapun CSS3, itu termasuk dukungan untuk animasi , transisi , batas bulat dan model kotak fleksibel .

Juga baru di CSS3 adalah penyeleksi baru, yang membuatnya lebih mudah untuk mencocokkan elemen spesifik pada halaman (seperti hanya baris ganjil atau genap dalam tabel).

Opacity, unit baru, Marquee, dan Ruby juga merupakan bagian dari CSS3.

Saya pikir cukup banyak mencakup semua bagian penting.

33
luiscubal

Ada hal tata letak dasar seperti batas-radius, bayangan (kotak/teks), dukungan rgba, dan sebagainya; Inilah yang paling dikenal dengan CSS3. Yang lebih menarik adalah tag kanvas, tag video, penyimpanan lokal, soket web, dan sebagainya yang akan menciptakan pengalaman pengguna yang lebih kaya dalam HTML/JS/CSS biasa. Fitur-fitur ini berpotensi menjadi alternatif hebat untuk Flash di web tanpa perlu tambahan plugin.

4
D4V360

Saya menemukan elemen HTML baru agak menarik ... beberapa dari mereka menjanjikan penggantian semantik untuk divs generik. Elemen-elemen baru yang menjanjikan termasuk article, section, aside, figure, nav, header, dan footer, antara lain. Saya sangat suka ide elemen semantik menggantikan wadah yang tidak berarti.

Oh ya, item terkait: doctype yang paling disederhanakan - akhirnya sesuatu yang bisa saya ketik dari memori!

4
Grant Palin

( Ini jawaban saya untuk pertanyaan serupa di webapps.stackexchange.com )

Kanvas dan Utas Web Pekerja adalah aspek paling menarik dari HTML5 untuk saya. Saya telah menulis beberapa aplikasi web yang menggunakan fitur-fitur itu:

GioAUTHor [sic] menggunakan kanvas secara luas untuk memungkinkan Anda merencanakan jalur di peta dan kemudian menemukan rute terpendek dari awal hingga selesai (melalui algoritma Dijkstra dalam JavaScript).

Demo Utas JavaScript menggunakan kanvas secara terbatas tetapi menunjukkan penggunaan Worker Threads, lengkap dengan kode demo. Itu juga menggunakan HTML5 input type = "range" slider control.


Dukungan browser HTML5 sangat beragam seperti browser itu sendiri. Ada situs Nice (dalam HTML5, natch) tentang kesiapan HTML5 yang menunjukkan siapa yang siap untuk apa.

4
Alan

Sehubungan dengan CSS3 - miliki di http://css3please.com/ untuk melihat apa yang dapat Anda lakukan.

Semakin lama browser Anda, semakin besar kemungkinan Anda akan dapat melihat efeknya.

2
Sniffer

Ini tidak menawarkan pendapat tentang pentingnya, tetapi ini adalah delta yang bermanfaat antara HTML 4 dan 5.

2 ¢ saya pada peningkatan utama:

  • <section> dan algoritma penguraian header baru (saya memang mengatakan itu hanya my 2 ¢)
  • elemen formulir baru, mis. <input type=email>
  • data-* atribut
  • penyimpanan sisi klien
  • asli <audio> dan <video>
1
Paul D. Waite

Tag audio dan video memungkinkan penyajian media tanpa perlu plugin seperti Flash atau Silverlight, dan yang paling penting berfungsi pada browser iPhone dan iPad. Ada beberapa masalah yang perlu diatasi berkenaan dengan codec dan manajemen hak digital.

1
Steve Tranby

Jeremy Kieth baru saja merilis buku yang sangat bagus tentang topik, "HTML5 for Web Designer". Anda mungkin ingin memeriksanya.

Ini adalah buku pertama dari A Book Apart. Sangat merekomendasikannya untuk desainer menengah ke lanjutan. A ++

http://books.alistapart.com/

NOTE: Anda mungkin harus menunggu untuk mendapatkan salinannya

1
Kevin

Karena belum ada yang memasukkan ini:

HTML5 bagus untuk apa yang didaftar semua orang, tetapi juga mencakup geolokasi standar, pekerja web, soket web, kanvas, dan Penyimpanan lokal. Semua alat ini adalah bagian dari spesifikasi HTML5, yang menggunakan banyak JavaScript di belakang layar untuk mewujudkannya.

0
Ilan Biala