HTML5 & CSS3 untuk dunia sebenar, edisi kedua

Takeaways Key

HTML5 dan CSS3 direka untuk memastikan keserasian ke belakang dengan pelayar yang lebih tua, yang bermaksud perubahan kepada markup tidak akan menyebabkan masalah susun atur atau kesilapan. Walaupun penyemak imbas yang lebih tua tidak menyokong sepenuhnya ciri -ciri baru, mereka tidak akan memecahkan halaman atau menyebabkan masalah yang kelihatan.
HTML5 dan CSS3 disokong dengan baik dalam banyak pelayar web mudah alih, menjadikannya ideal untuk pasaran mudah alih yang berkembang pesat. Beberapa teknologi baru yang diperkenalkan dalam HTML5 dan CSS3, seperti aplikasi web luar talian dan penyimpanan web, telah direka khusus dengan peranti mudah alih dalam fikiran.
HTML5 dan CSS3 membolehkan penciptaan laman web yang kuat, mudah untuk dikekalkan, masa depan. Apabila penyemak imbas yang lebih tua tidak dapat digunakan, pemaju hanya perlu mengeluarkan apa -apa kejatuhan dan polyfills, meninggalkan pangkalan kod yang bertujuan untuk penyemak imbas moden.

Berikut adalah ekstrak dari buku kami, HTML5 & CSS3 untuk dunia sebenar, edisi ke -2, yang ditulis oleh Alexis Goldstein, Louis Lazaris, dan Estelle Weyl. Salinan dijual di kedai -kedai di seluruh dunia, atau anda boleh membelinya dalam bentuk ebook di sini.

Walaupun HTML5 membentangkan perubahan yang ketara dalam cara kandungan ditandakan, perlu diperhatikan bahawa perubahan tersebut tidak akan menyebabkan penyemak imbas yang lebih tua tercekik, atau mengakibatkan masalah susun atur atau kesilapan halaman. apa maksudnya ialah anda boleh mengambil apa -apa projek lama yang mengandungi markup HTML4 atau XHTML yang sah, tukar DOCTYPE ke HTML5 (yang akan kami tutup sebelumnya. Perubahan dan penambahan dalam HTML5 telah dilaksanakan ke dalam bahasa sedemikian rupa untuk memastikan keserasian ke belakang dengan pelayar yang lebih tua-bahkan versi Internet Explorer yang lebih tua! Sudah tentu, ini tidak menjamin bahawa ciri -ciri baru akan berfungsi, itu hanya bermakna mereka tidak akan memecahkan halaman anda atau menyebabkan masalah yang kelihatan.

Walaupun berkaitan dengan ciri-ciri baru yang lebih kompleks (contohnya, API), pemaju telah menghasilkan pelbagai penyelesaian untuk memberikan pengalaman yang setara dengan penyemak imbas yang tidak disokong, semuanya memeluk kemungkinan baru yang menarik yang ditawarkan oleh HTML5 dan CSS3 . Kadang -kadang ini semudah menyediakan kandungan sandaran, seperti pemain video flash kepada penyemak imbas tanpa sokongan video asli. Walau bagaimanapun, pada masa -masa lain, ia perlu menggunakan skrip untuk meniru sokongan untuk ciri -ciri baru.

Teknik "pengisian" ini dirujuk sebagai polyfills. Bergantung pada skrip untuk mencontohi ciri-ciri asli tidak semestinya pendekatan terbaik ketika membina aplikasi web berprestasi tinggi, tetapi ia adalah kesakitan yang perlu berkembang ketika kita berkembang untuk memasukkan peningkatan dan ciri-ciri baru, seperti yang kita akan berbincang dalam buku ini . Mujurlah, sebagai penulisan, pelayar yang lebih tua seperti Internet Explorer 6 hingga 9 yang gagal menyokong banyak ciri baru dalam HTML5 dan CSS3, digunakan oleh kurang daripada 10% pelawat web hari ini. Semakin ramai orang menggunakan apa yang telah disebut pelayar malar hijau; Iaitu, penyemak imbas yang mengemas kini secara automatik. Ini bermakna ciri -ciri baru akan berfungsi untuk khalayak yang lebih besar, dan akhirnya kepada semua, kerana saham pelayar yang lebih tua berkurang.

Dalam buku ini, kita kadang -kadang boleh mengesyorkan pilihan balik atau polyfills untuk memasangkan jurang dalam ketidakcocokan pelayar; Kami juga akan berusaha untuk melakukan yang terbaik dalam memberi amaran kepada anda tentang kelemahan dan perangkap yang berpotensi yang berkaitan dengan menggunakan pilihan ini.

Sudah tentu, perlu diperhatikan bahawa kadang -kadang tiada kejatuhan atau polyfills diperlukan sama sekali; Sebagai contoh, apabila menggunakan CSS3 untuk membuat sudut bulat pada kotak dalam reka bentuk anda, seringkali tidak membahayakan pengguna penyemak imbas yang benar -benar melihat kotak persegi sebaliknya. Fungsi laman web ini tidak mempunyai kemerosotan, dan pengguna -pengguna itu tidak akan lebih bijak tentang apa yang mereka hilang.

Semasa kami maju melalui pelajaran dan memperkenalkan subjek baru, jika anda merancang untuk menggunakan salah satu daripada ini dalam satu projek, kami sangat mengesyorkan agar anda berunding dengan rujukan penyemak imbas seperti yang disebutkan di atas ... dengan cara itu, anda akan Ketahui bagaimana dan sama ada untuk memberikan gantian atau polyfills. Di mana perlu, kami kadang-kadang akan membincangkan cara-cara yang anda dapat memastikan bahawa pelayar yang tidak menyokong mempunyai pengalaman yang boleh diterima, tetapi berita baiknya adalah bahawa ia menjadi kurang dan kurang masalah seiring dengan berjalannya waktu.

pasaran mudah alih yang semakin meningkat

Sebab lain yang menarik untuk memulakan pembelajaran dan menggunakan HTML5 dan CSS3 hari ini adalah pasaran mudah alih yang meletup. Menurut satu sumber, pada tahun 2009 kurang daripada 1% daripada semua penggunaan web adalah pada peranti mudah alih dan tablet. Menjelang pertengahan tahun 2014, jumlah itu telah meningkat kepada lebih daripada 35%! Itulah kadar pertumbuhan yang mengagumkan dalam masa lebih daripada lima tahun. Jadi apa maksudnya bagi mereka yang belajar html5 dan css3?

HTML5, CSS3, dan teknologi canggih yang berkaitan sangat disokong dengan baik dalam banyak pelayar web mudah alih. Sebagai contoh, safari mudah alih pada peranti iOS seperti iPhone dan iPad, Opera Mobile, pelayar Android, dan penyemak imbas UC semuanya menyediakan tahap sokongan HTML5 dan CSS3 yang kukuh. Ciri -ciri dan teknologi baru yang disokong oleh beberapa pelayar termasuk animasi CSS3, CSS Flexbox, API kanvas, penyimpanan web, SVG, aplikasi web luar talian, dan banyak lagi.

Malah, beberapa teknologi baru yang akan kami memperkenalkan dalam buku ini telah direka khusus dengan peranti mudah alih dalam fikiran. Teknologi seperti aplikasi web luar talian dan penyimpanan web telah direka, sebahagiannya, kerana semakin banyak orang yang mengakses laman web dengan peranti mudah alih. Peranti sedemikian sering mempunyai batasan dengan penggunaan data dalam talian, dan dengan itu mendapat manfaat daripada keupayaan untuk mengakses aplikasi web di luar talian.

Kami akan menyentuh subjek tersebut dalam Bab 11, serta yang lain sepanjang perjalanan buku, menyediakan alat yang anda perlukan untuk membuat laman web untuk pelbagai peranti dan platform.

ke barangan sebenar

Ia tidak realistik untuk meneruskan teknologi baru dan mengharapkan halaman dan aplikasi pengarang untuk hanya satu tahap penyemak imbas. Di dunia nyata, dan di dunia di mana kita menginginkan HTML5 dan CSS3 untuk membuat lebih jauh, kita perlu bersedia untuk membangunkan halaman yang berfungsi di seluruh landskap yang bervariasi. Landskap itu termasuk penyemak imbas moden, mana -mana versi yang lebih lama di Internet Explorer, dan pasaran yang meletup peranti mudah alih.

Ya, dalam beberapa cara, membekalkan satu set arahan yang berbeza untuk ejen pengguna yang berbeza menyerupai hari -hari awal web dengan penyemak imbasnya yang mengendus dan mengikat kod. Tetapi kali ini, kod baru adalah lebih banyak bukti masa depan: Apabila pelayar yang lebih tua jatuh dari penggunaan umum, semua yang anda perlu lakukan adalah mengeluarkan apa-apa penolakan dan polyfills, hanya meninggalkan pangkalan kod yang bertujuan untuk pelayar moden.

HTML5 dan CSS3 adalah teknologi terkemuka yang telah membawa di dunia penulisan laman web yang lebih menarik. Kerana semua penyemak imbas moden memberikan tahap sokongan yang sangat baik untuk beberapa ciri HTML5 dan CSS3, mewujudkan laman web yang kuat dan sederhana untuk mendapatkan lebih mudah daripada sebelumnya.

Jadi, cukup tentang "Kenapa," mari kita mula menggali ke dalam "How"!

soalan yang sering ditanya mengenai html5 dan css3

Apakah perbezaan utama antara HTML5 dan CSS3? HTML5 adalah bahasa markup yang digunakan untuk menstrukturkan dan menyampaikan kandungan di web. Ia memperkenalkan unsur -unsur dan atribut baru yang mencerminkan penggunaan tipikal di laman web moden. Sebaliknya, CSS3 adalah bahasa gaya gaya yang digunakan untuk menggambarkan rupa dan pemformatan dokumen yang ditulis dalam HTML. Ia memperkenalkan ciri -ciri baru seperti sudut bulat, bayang -bayang, kecerunan, peralihan, animasi, dan banyak lagi. HTML5 dan CSS3. Laman web seperti Codecademy, Udemy, dan Khan Academy menawarkan kursus interaktif. Anda juga boleh merujuk kepada dokumentasi dan tutorial dalam talian. Amalan adalah kunci dalam menguasai bahasa -bahasa ini, jadi cuba membina laman web anda sendiri atau memperbaiki yang sedia ada.

Apakah faedah menggunakan HTML5 dan CSS3?

HTML5 dan CSS3 datang dengan beberapa faedah. Mereka membolehkan pengekodan yang lebih bersih dan lebih cekap, prestasi yang lebih baik, dan kebolehcapaian yang lebih baik. Mereka juga menawarkan ciri -ciri yang lebih canggih dan fleksibiliti yang lebih besar dalam merancang dan menyesuaikan laman web. Selain itu, mereka disokong oleh semua pelayar moden.

Bolehkah saya menggunakan HTML5 dan CSS3 untuk pembangunan web mudah alih? Mereka menawarkan ciri -ciri seperti Tag Meta Viewport, yang membolehkan kawalan ke atas saiz dan skala Viewport, dan pertanyaan media, yang membolehkan kandungan memberikan menyesuaikan diri dengan keadaan seperti resolusi skrin. Mereka juga menyokong peristiwa sentuhan, yang penting untuk antara muka mudah alih. Semua ciri HTML5 dan CSS3. Juga, kerana ini masih berkembang teknologi, mengekalkan perubahan terkini boleh mencabar. Selain itu, mencapai susun atur dan reka bentuk yang dikehendaki kadang-kadang boleh menjadi kompleks dan memakan masa. Seperti perkhidmatan pengesahan markup W3C untuk menyemak kod HTML5 anda, dan perkhidmatan pengesahan CSS untuk kod CSS3 anda. Alat ini akan mengenal pasti sebarang kesilapan atau isu dalam kod anda.

Apakah amalan terbaik untuk menulis kod HTML5 dan CSS3? , menjaga kod CSS3 anda kering (jangan ulangi diri anda), dan mengatur kod anda dengan cara yang memudahkan membaca dan mengekalkan. Juga, pastikan kod anda sah dan bebas ralat.

Bolehkah saya menggunakan HTML5 dan CSS3 dengan bahasa pengaturcaraan lain? Seperti JavaScript, PHP, dan Ruby. Mereka digunakan untuk struktur dan gaya kandungan, sementara bahasa lain mengendalikan fungsi dan tingkah laku laman web. Laman web anda responsif menggunakan pertanyaan media CSS3. Ini membolehkan anda menggunakan gaya yang berbeza bergantung pada saiz skrin peranti. Anda juga boleh menggunakan susun atur yang fleksibel dan imej fleksibel untuk memastikan skala kandungan anda dan saiz semula dengan betul. Multimedia, elemen kanvas untuk lukisan, dan kawalan bentuk seperti pemetik tarikh, pemetik warna, dan slider. CSS3 memperkenalkan ciri -ciri seperti peralihan dan animasi, kecerunan, dan transformasi 2D/3D.

Atas ialah kandungan terperinci HTML5 & CSS3 untuk dunia sebenar, edisi kedua. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!