Sepuluh tahun yang lalu, hanya desainer situs web paling mutakhir yang akan menggunakan CSS untuk tata letak halaman web dan hiasan. Pada saat itu, dukungan browser untuk tata letak CSS tidak lengkap dan penuh dengan celah, jadi sementara orang -orang ini bersikeras pada standardisasi web, mereka harus menggunakan peretasan untuk membuat halaman mereka ditampilkan secara normal di semua browser. Salah satu teknologi peretasan yang lebih banyak yang digunakan adalah browser sniffing, yang menggunakan atribut navigator.useragent dalam JavaScript untuk menentukan merek dan versi browser mana yang digunakan pengguna. Teknologi sniffing browser dapat dengan cepat cabang kode untuk menerapkan instruksi yang berbeda ke browser yang berbeda.
Saat ini, tata letak berbasis CSS sudah sangat umum, dan browser mendukungnya dengan sangat solid. Tetapi sekarang CSS3 dan HTML5 ada di sini, sejarah telah berbalik dan kembali ke tempat aslinya - dukungan untuk teknologi baru ini oleh berbagai browser telah mulai menjadi tidak merata lagi. Kami telah lama digunakan untuk menulis kode yang rapi dan sesuai standar, dan kami tidak akan lagi menggunakan peretasan atau browser CSS untuk mengendus teknologi tingkat rendah yang tidak dapat diandalkan dan rendah. Kami juga percaya bahwa semakin banyak pengguna akan setuju dengan gagasan bahwa situs web tidak harus terlihat sama di semua browser. Jadi dalam menghadapi situasi yang akrab ini (dukungan browser yang berbeda) sekarang, apa yang harus kita lakukan? Sederhana: Gunakan deteksi fitur, yang berarti kami tidak perlu bertanya kepada browser siapa Anda? Untuk membuat spekulasi yang tidak dapat diandalkan. Sebaliknya, kami bertanya kepada browser apakah Anda bisa melakukan ini atau itu. Ini mudah untuk mendeteksi browser, tetapi masih membosankan untuk menghabiskan waktu secara manual mengujinya satu per satu. Modernizr dapat membantu kita saat ini.
Modernizr: Perpustakaan Deteksi Fungsional yang dikembangkan secara khusus untuk HTML5 dan CSS3
Modernizr adalah perpustakaan JS open source yang memudahkan desainer yang mengembangkan tingkat pengalaman yang berbeda berdasarkan perbedaan dalam browser tamu (mengacu pada perbedaan dalam mendukung standar baru). Ini memungkinkan desainer untuk memanfaatkan sepenuhnya fitur HTML5 dan CSS3 untuk pengembangan di browser yang mendukung HTML5 dan CSS3 tanpa mengorbankan kendali browser lain yang tidak mendukung teknologi baru ini.
Ketika Anda menyematkan skrip Modernizr di halaman web, itu akan mendeteksi apakah browser saat ini mendukung fitur CSS3, seperti @font-face, border-radius, border-image, box-shadow, RGBA (), dll., Dan juga akan mendeteksi apakah fitur HTML5 didukung-seperti Audio, Video, dan jenis tag lokal. Atas dasar mendapatkan informasi ini, Anda dapat menggunakannya di browser yang mendukung fitur-fitur ini untuk memutuskan apakah akan membuat fallback berbasis JS atau hanya menurunkan peringkat yang tidak mendukungnya. Selain itu, Modernizr juga dapat memungkinkan IE untuk mendukung penerapan gaya CSS pada elemen HTML5, sehingga pengembang dapat segera menggunakan tag semantik ini.
Modernizr dikembangkan berdasarkan teori peningkatan progresif, sehingga mendukung dan mendorong pengembang untuk membuat situs web mereka lapisan demi lapisan. Semuanya dimulai dengan fondasi idle dengan JavaScript diterapkan, menambahkan lapisan aplikasi yang disempurnakan satu per satu. Karena Modernizr digunakan, mudah bagi Anda untuk mengetahui apa yang didukung oleh browser. Mari kita lihat contoh membuat situs web mutakhir dengan menerapkan Modernizr.
Mulailah dengan menerapkan Modernizr
Pertama, unduh versi stabil terbaru Modernizr dari www.modernizr.com (situs web resmi Modernizr saat ini diblokir di Cina, dan kami dapat mengunduhnya dari GitHub. Atau lebih sederhana, Anda dapat mengunduh file skrip 1.7 versi 1.7 terbaru dari The Master). Di situs web resmi, Anda juga dapat melihat daftar semua fitur yang didukungnya untuk dideteksi (halaman terakhir artikel ini akan memberikan daftar ini sehingga sepatu anak -anak yang tidak dapat dibalik melalui dinding dapat mengetahui mana yang mereka dukung). Setelah mengunduh versi terbaru (penulis menggunakan versi 1.5 saat menulis artikel ini), tambahkan ke area halaman:
Selanjutnya, tambahkan kelas no-js ke elemen.
Ketika Modernizr berjalan, itu akan mengubah kelas no-js menjadi JS untuk memberi tahu Anda bahwa itu sedang berjalan. Modernizr tidak hanya melakukan ini, tetapi juga menambahkan kelas kelas untuk semua fitur yang dideteksi. Jika browser tidak mendukung fitur, itu awalan nama kelas yang sesuai dengan fitur oleh No-. Jadi, elemen Anda mungkin menjadi seperti ini:
Modernizr juga akan membuat objek JS bernama Modernizr, yang merupakan daftar hasil boolean yang diberikan untuk setiap fitur yang terdeteksi. Jika browser mendukung elemen kanvas baru, nilai modernizr.canvas benar; Jika browser tidak mendukung elemen baru ini, nilai yang sesuai adalah salah. Objek JS ini juga akan berisi informasi yang lebih rinci untuk fungsi -fungsi tertentu, seperti modernizr.video.h264 akan memberi tahu Anda apakah browser mendukung codec khusus ini. Modernizr.inputTypes.Search akan memberi tahu Anda apakah browser saat ini mendukung jenis input pencarian baru, dll.
Halaman kecil kami yang belum diproses dan sederhana terlihat seperti sistem pra-tes, tetapi memiliki semantik dan aksesibilitas yang lebih baik. Mari kita tambahkan sedikit gaya dasar: Sedikit format teks, warna, dan tata letak agar terlihat lebih baik. Saat ini, tidak ada yang baru, cukup tambahkan gaya ekspresi ke halaman HTML struktur semantik, dan lihat halaman setelah menambahkan gaya.
Di bawah ini, kami ingin meningkatkan halaman ini agar lebih menarik. Saya ingin menerapkan efek teks yang aneh ke H1 di kepala, membagi daftar fitur deteksi menjadi dua kolom, dan kemudian mendapatkan segalanya tentang modernizr dengan foto di sebelah kanan. Saya juga ingin membuat perbatasan di sekitar konten halaman yang indah. Sekarang, CSS3 yang lebih kuat memungkinkan Anda untuk menambahkan lebih banyak properti ke aturan yang akan mengabaikannya jika browser tidak mendukungnya. Dengan CSS Cascade (warisan), Anda dapat menggunakan properti baru seperti perbatasan-radius tanpa mengandalkan Modernizr. Namun, menggunakan Modernizr dapat memberi Anda beberapa fitur yang tidak dapat disediakan dengan cara yang ada: nama kelas yang dimodifikasi secara dinamis berdasarkan dukungan diferensial browser untuk hal -hal baru. Saya akan mengilustrasikan ini dengan menambahkan 2 aturan baru ke halaman kami:
Aturan pertama menambahkan sudut bundar 12-piksel ke elemen #Content. Tetapi di halaman yang ada, kami telah menetapkan perbatasan dengan elemen #Content dengan nilai atribut 2px outset #666. Ini terlihat cukup bagus ketika kotak itu sudut yang tepat, tetapi tidak di sudut bulat. Berkat Modernizr, saya dapat menetapkan kotak nyata 1px ke kotak dengan Radius perbatasan yang didukung oleh browser.
Aturan kedua sedikit lebih maju. Kami menambahkan bayangan ke elemen #Content dan menghapus atribut perbatasan untuk browser yang mendukung atribut shadow kotak. Mengapa? Karena sebagian besar browser tidak memberikan kinerja yang baik untuk kombinasi tepi dan sudut dengan bayangan (ini adalah cacat dalam browser yang harus dicatat, tetapi kita harus menanggungnya sekarang). Alih -alih menggunakan bayangan dan hanya menggunakan batas, saya lebih suka menggunakan bayangan untuk mengelilingi elemen. Dengan cara ini, saya dapat memiliki kinerja CSS terbaik, akurat, dan terbaik di dunia: bayangan yang indah akan muncul di browser yang mendukung atribut kotak-bayar; Browser yang hanya mendukung atribut perbatasan-radius akan menghadirkan perbatasan tipis bundar yang indah; Untuk browser yang rusak yang tidak mendukung keduanya, kita akan melihat batas sudut kanan 2 piksel.
Di bawah ini kami ingin menerapkan font khusus khusus ke header. Berikut ini adalah pernyataan kami saat ini untuk H1, tanpa perubahan:
Pernyataan ini bekerja dengan baik di halaman dasar kami, dan ukuran teks 27-pixel juga cocok untuk tampilan font yang kami tetapkan untuk H1. Tapi untuk font yang akan saya gunakan yang disebut cantik, 27 piksel terlalu kecil. Di sini kami ingin menambahkan aturan lain untuk menggunakan font khusus ini:
Pertama, kami menambahkan deklarasi @font-wajah dan menentukan jalur, nama file, dan nama font untuk font khusus kami. Kemudian kami menggunakan pernyataan CSS untuk memilih gaya font untuk H1 kami. Anda akan melihat bahwa saya memilih ukuran font yang besar di sini, karena font yang indah itu sendiri jauh lebih kecil dari teks font lain, jadi kami harus menginstruksikan browser untuk memberi H1 ukuran font yang besar saat menampilkan font khusus kami.
Selain itu, teks tulisan tangan kami yang indah memiliki beberapa masalah rendering dengan bayangan teks, jadi kami harus membatalkan teks yang membayangi ketika browser memutuskan untuk menggunakan teks khusus. Selain itu, daftar bagian fitur deteksi perlu dibagi menjadi dua kolom. Untuk mencapai tujuan saya, saya ingin menggunakan atribut kolom CSS yang mengagumkan, yang akan memungkinkan browser untuk membagi daftar secara cerdas menjadi kolom tanpa mengganggu pesanannya. Meskipun daftar kami tidak memiliki nomor numerik, itu juga diatur dalam urutan abjad. Tentu saja, tidak semua browser mendukung properti ini. Bagi mereka yang tidak mendukung, kami menggunakan float untuk mencapai tujuan 2 kolom - setelah menggunakan float, daftar tidak akan lagi diatur secara abjad lagi, tapi itu lebih baik daripada tidak sama sekali.
Saya telah menggunakan Modernizr lagi untuk mengatur properti yang berbeda untuk situasi yang berbeda. Jika browser mendukung kolom CSS, itu akan dengan sempurna membagi daftar menjadi 2 kolom. Jika tidak didukung, kami juga dapat menggunakan metode mengambang untuk membuat daftar menjadi dua kolom dengan mengambang. Meskipun tidak begitu sempurna, lebih baik daripada secara langsung menerapkan daftar panjang kolom tunggal.
Di sini Anda mungkin telah memperhatikan bahwa saya telah menambahkan awalan yang berbeda (-moz-, -webkit-, -o-) ke atribut. Ini karena produsen browser yang berbeda memiliki definisi yang berbeda dari implementasi fungsi ini, sehingga untuk mengimplementasikan fungsi ini, mereka perlu menambahkan awalan yang sesuai ke browser yang berbeda.
Setelah perubahan ini, halaman baru kami terlihat lebih baik.
Kami akan menambahkan peningkatan yang lebih progresif ke halaman kami untuk mengakhiri tutorial ini. Browser berbasis WebKit mendukung beberapa efek khusus yang lebih mengagumkan, seperti transformasi CSS, animasi dan transformasi tiga dimensi. Dan saya ingin menerapkan beberapa efek khusus ini di halaman tahap terakhir. Sekali lagi, properti ini akan ditambahkan ke CSS kami yang ada dan diabaikan di browser yang tidak mendukungnya. Oleh karena itu, tepat untuk menggunakan Modernizr untuk situasi ini di mana peningkatan bertahap tidak didukung di satu sisi.
Set pertama:
Aturan @KeyFrames adalah bagian dari spesifikasi animasi CSS baru dan saat ini hanya mendukung WebKit. Ini memungkinkan Anda untuk mendeklarasikan jalur animasi lengkap untuk atribut apa pun dan mengubahnya pada setiap tahap yang Anda suka. Untuk mempelajari lebih lanjut tentang animasi, baca spesifikasi draft kerja W3C.
Di sini kami menambahkan kode yang menyebabkan elemen berputar dalam ruang tiga dimensi:
Karena logo perlu diputar, dan saya harap akan rukun lebih harmonis dengan latar belakang ketika diputar, sehingga file format PNG digunakan di sini. Saya juga menggunakan atribut overflow: tersembunyi untuk menyembunyikan teks di header dengan indentasi-9999 piksel. Sangat menarik untuk membuat elemen berputar dalam 3D, tetapi tidak terlalu indah. Akhirnya, kami memilih untuk menggunakan aturan animasi, mengatur periode rotasinya menjadi 2 detik, berputar di sepanjang sumbu tengahnya sendiri, tidak pernah berhenti.
Halaman terakhir terlihat bagus, dan bahkan mengatur animasi yang menyenangkan untuk browser WebKit. Saya harap sejauh ini Anda dapat memahami betapa luar biasa itu dapat membuat pergelangan tangan Anda dengan kontrol modernizr atas situs web Anda dan betapa sederhananya itu dapat membuat peningkatan progresif yang nyata. Ini bukan hanya manfaat penuh dari Modernizr, ini juga dapat membantu Anda membangun fallback berdasarkan JS dan membantu Anda menerapkan fitur baru yang mengagumkan dari HTML5.