Seorang desainer web wanita bekerja di komputernya di kantor modern
Kredit Gambar: monkeybusinessimages/iStock/Getty Images
Spesifikasi Cascading Style Sheets asli, serta revisi CSS3 yang jauh lebih baru, adalah teknologi yang digunakan untuk meningkatkan dan memformat halaman Web HTML. CSS awalnya dirancang untuk menangani lapisan presentasi halaman Web dengan cara yang lebih efisien daripada pemformatan dengan HTML, yang tidak pernah dimaksudkan untuk menangani konstruksi kompleks Web kontemporer. Karena CSS2 adalah ekstensi CSS1 yang diadopsi secara universal, istilah CSS tanpa angka menyiratkan penyertaan CSS2. Spesifikasi CSS3 masih dalam pengembangan pada Juli 2014, jadi pengembang Web perlu mempertimbangkan dukungan fitur yang bervariasi antar browser.
CSS3 Kompatibel dengan CSS
CSS3 adalah pembaruan untuk CSS2 yang mempertahankan kompatibilitas dengan semua fitur CSS -- CSS3 tidak menghentikan kode CSS apa pun. Kode CSS3 dirancang untuk membuat halaman Web terlihat lebih baik dan memuat lebih cepat serta mengurangi waktu pengembangan untuk membuat halaman di browser pengguna. CSS3 membuat desain Web tidak terlalu bergantung pada file gambar untuk elemen desain halaman dan mengurangi permintaan transfer file dan waktu pengunduhan dengan menggunakan lebih sedikit gambar. CSS1 berfokus pada pemformatan tampilan, sedangkan CSS2 menambahkan kemampuan pemosisian untuk teks dan objek. Versi browser yang lebih lama seperti IE 9 dan sebelumnya tidak secara luas mendukung fitur tambahan CSS3, yang dapat memerlukan waktu pengembangan ekstra untuk mempertahankan kode mundur CSS.
Video Hari Ini
CSS3 Menambahkan Sudut Bulat dan Gradien
Sebelum CSS3, pengembang Web perlu mendesain file gambar untuk menambahkan hal-hal seperti sudut membulat untuk batas struktural dan gradien gambar latar belakang; CSS3 menyertakan fitur yang sebanding yang dapat ditambahkan dengan beberapa baris kode. Di CSS, pengembang Web harus mendesain perbatasan atau gradien, mengunggahnya ke server gambar, menempatkan gambar di halaman dan menggunakan CSS untuk memposisikan perbatasan dengan benar. Di CSS3, pengembang Web dapat menyelesaikan sesuatu yang mirip dengan kode seperti ".roundBorder{border-radius: 10px;}". Gradien latar belakang sedikit lebih rumit dan memerlukan kode yang berbeda untuk browser yang berbeda. Misalnya, gradien putih-ke-hitam untuk Chrome dan IE menggunakan kode seperti ".gradBG{background: liner-gradient (putih, hitam);}".
CSS3 Menambahkan Fitur Animasi dan Efek Teks
CSS3 memiliki beberapa fitur yang tidak ada di CSS untuk meningkatkan tampilan elemen halaman Anda. Dengan CSS3, pengembang Web dapat menambahkan bayangan teks ke teks agar lebih mudah dibaca atau menambahkan bakat visual dan dapat memaksa jeda baris dalam kata-kata yang lebih panjang untuk membuatnya pas di dalam kolom dengan bungkus kata. Sebelum CSS3, pengembang Web perlu membuat kode animasi dalam bahasa skrip seperti JavaScript dan jQuery; CSS3 menambahkan beberapa fitur animasi ke lapisan desain. W3C masih mengerjakan standar animasi Web untuk mengatasi masalah kompatibilitas antara teknik animasi yang berbeda.
CSS3 Mendefinisikan Kolom Teks
CSS3 menambahkan kemampuan untuk membagi bagian teks menjadi beberapa kolom untuk dibaca seperti koran. Dalam spesifikasi CSS2, pengembang Web mengalami kesulitan membangun bagian teks multi-kolom karena standar tidak dilengkapi untuk memisahkan teks secara otomatis. Khususnya dengan situs yang menampilkan desain responsif, teknik pengembangan yang mengatur ulang dan mengubah ukuran konten berdasarkan melihat resolusi layar perangkat, orang dengan monitor yang lebih besar mungkin mengalami kesulitan membaca baris teks yang terbentang di layar.