Memahami perubahan besar pada CSS3
Perbedaan terbesar antara CSS2 dan CSS3 adalah bahwa CSS3 telah dipisah menjadi bagian-bagian yang berbeda, yang disebut modul. Masing-masing modul ini berjalan melalui W3C dalam berbagai tahap proses rekomendasi. Proses ini telah membuatnya lebih mudah untuk berbagai potongan CSS3 untuk diterima dan diterapkan di browser oleh produsen yang berbeda.
Jika Anda membandingkan proses ini dengan apa yang terjadi dengan CSS2, di mana semuanya diserahkan sebagai dokumen tunggal dengan semua informasi Lembar Gaya Cascading di dalamnya, Anda mulai melihat keuntungan dari melanggar rekomendasi menjadi lebih kecil, setiap bagian. Karena masing-masing modul sedang dikerjakan secara individu, kami memiliki jangkauan dukungan browser yang lebih luas untuk modul CSS3.
Seperti halnya spesifikasi baru dan perubahan, pastikan untuk menguji halaman CSS3 Anda secara menyeluruh di banyak browser dan sistem operasi yang Anda bisa. Ingat tujuannya bukan untuk membuat halaman web yang terlihat persis sama di setiap browser, tetapi untuk memastikan bahwa setiap gaya yang Anda gunakan, termasuk gaya CSS3, tampak hebat di browser yang mendukung mereka dan bahwa mereka kembali dengan anggun untuk browser lama yang tidak.
Pemilih CSS3 Baru
CSS3 menawarkan banyak cara baru Anda dapat menulis aturan CSS dengan pemilih CSS baru, serta kombinator baru, dan beberapa elemen pseudo baru.
Tiga pemilih atribut baru:
- Atribut awal cocok persis dengan elemen [foo ^ = "bar"] Elemen memiliki atribut yang disebut foo yang diawali dengan "bar" mis.
- Atribut yang diakhiri cocok dengan elemen [foo $ = "bar"] Elemen memiliki atribut bernama foo yang diakhiri dengan "bar" mis.
- Atribut berisi elemen pertandingan [foo * = "bar"] Elemen ini memiliki atribut bernama foo yang berisi string "bar" mis.
16 pseudo-kelas baru:
- :akar
- Elemen root dari dokumen. Dalam HTML ini selalu.
- : nth-child (n)
- Gunakan ini untuk mencocokkan elemen anak yang tepat atau gunakan variabel untuk mendapatkan kecocokan bergantian.
- : nth-last-child (n)
- Cocokkan elemen anak yang tepat dengan menghitung dari yang terakhir.
- : nth-of-type (n)
- Cocokkan elemen saudara dengan nama yang sama sebelum di pohon dokumen.
- : nth-last-of-type (n)
- Cocokkan elemen saudara dengan nama yang sama dengan menghitung dari bawah.
- :anak terakhir
- Cocokkan elemen anak terakhir dari orang tua.
- : first-of-type
- Cocokkan elemen saudara kandung pertama dari tipe itu.
- : last-of-type
- Cocokkan elemen saudara terakhir dari tipe itu.
- :hanya anak
- Cocokkan elemen yang merupakan satu-satunya anak dari induknya.
- : hanya tipe saja
- Cocokkan elemen yang merupakan satu-satunya dari jenisnya.
- :kosong
- Cocokkan elemen yang tidak memiliki anak (termasuk simpul teks).
- :target
- Cocokkan elemen yang merupakan target dari URI pengarah.
- :diaktifkan
- Cocokkan elemen saat diaktifkan.
- :cacat
- Cocokkan elemen saat dinonaktifkan.
- : diperiksa
- Cocokkan elemen saat dicentang (tombol radio atau kotak centang).
- :bukan s)
- Cocokkan saat elemen tidak cocok dengan pemilih sederhana.
Satu kombinator baru:
- elementA ~ elementB
- Cocok saat elementB mengikuti suatu tempat setelah elemenA, tidak harus segera.
Properti Baru
CSS3 juga memperkenalkan sejumlah properti CSS baru. Banyak dari properti ini adalah untuk menciptakan gaya visual yang kemungkinan besar akan lebih berhubungan dengan program grafis seperti Photoshop. Beberapa di antaranya, seperti border-radius atau box-shadow, telah ada sejak pengenalan jika CSS3. Lainnya, seperti flexbox atau bahkan CSS Grid adalah gaya baru yang masih sering dianggap penambahan CSS3.
Di CSS3, model kotak belum berubah. Tetapi ada banyak properti gaya baru yang dapat membantu Anda mengatur latar belakang dan batas kotak Anda.
Multiple Background I mages
Menggunakan latar belakang-gambar, latar belakang-posisi, dan latar belakang-ulang gaya Anda dapat menentukan beberapa gambar latar belakang untuk berlapis-lapis di atas satu sama lain di dalam kotak. Gambar pertama adalah lapisan yang paling dekat dengan pengguna, dengan yang berikut dicat di belakang. Jika ada warna latar belakang, dicat di bawah semua lapisan gambar.
Properti Gaya Latar Belakang Baru
Ada juga beberapa properti latar belakang baru di CSS3.
- klip latar belakang
- Properti ini menentukan bagaimana gambar latar belakang harus dipotong. Defaultnya adalah kotak batas, tetapi dapat diubah ke kotak padding atau kotak konten.
- asal latar belakang
- Properti ini menentukan apakah latar belakang harus tempat di kotak padding, kotak batas, atau kotak konten.
- ukuran latar belakang
- Properti ini memungkinkan Anda untuk menunjukkan ukuran gambar latar belakang. Ini memungkinkan Anda untuk meregangkan gambar yang lebih kecil agar sesuai dengan halaman.
Mengubah ke Properti Gaya Latar Belakang yang Ada
Ada juga beberapa perubahan pada properti gaya latar belakang yang ada:
- background-repeat
- Ada dua nilai baru untuk properti ini: ruang dan putaran. Ruang spasi gambar ubin secara merata di dalam kotak tanpa terpotong. Round rescales gambar latar belakang sehingga akan ubin seluruh jumlah kali di dalam kotak.
- background-attachment
- Nilai baru "lokal" ditambahkan sehingga latar belakang akan bergulir dengan konten elemen ketika elemen tersebut memiliki bilah gulir.
- Latar Belakang
- Latar belakang properti singkatan menambahkan dalam ukuran dan asal properti.
Properti Perbatasan CSS3
Dalam batas-batas CSS3 dapat menjadi gaya yang biasa kita gunakan (solid, double, dashed, dll.) Atau mereka dapat berupa gambar. Plus, CSS3 membawa kemampuan untuk membuat sudut bulat. Gambar perbatasan menarik karena Anda membuat gambar dari empat perbatasan dan kemudian memberi tahu CSS cara menerapkan gambar itu ke perbatasan Anda.
Properti Gaya Perbatasan Baru
Ada beberapa properti perbatasan baru di CSS3:
- border-radius
- border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
- Properti ini memungkinkan Anda untuk membuat sudut membulat di perbatasan Anda.
- border-image-source
- Menentukan file sumber gambar yang akan digunakan sebagai ganti gaya perbatasan yang sudah ditentukan.
- slice-border-slice
- Mewakili offset internal dari tepi gambar perbatasan
- border-gambar-lebar
- Menentukan nilai lebar untuk gambar perbatasan Anda.
- border-image-outset
- Menentukan jumlah area gambar perbatasan yang melampaui kotak batas.
- border-image-stretch
- Menentukan bagaimana bagian sisi dan bagian tengah gambar perbatasan harus digiling atau diskalakan.
- border-image
- Properti singkatan untuk semua properti gambar perbatasan.
Properti CSS3 Tambahan Terkait Perbatasan dan Latar Belakang
Ketika sebuah kotak rusak pada istirahat halaman, kolom istirahat untuk line break (untuk elemen inline) properti box-decoration-break mendefinisikan bagaimana kotak-kotak baru dibungkus dengan border dan padding. Latar belakang dapat dibagi di antara beberapa kotak yang rusak menggunakan properti ini.
Ada juga properti kotak-bayangan yang dapat digunakan untuk menambahkan bayangan ke elemen kotak.
Dengan CSS3, Anda sekarang dapat dengan mudah mengatur halaman Web dengan beberapa kolom tanpa tabel atau struktur tag div yang rumit. Anda cukup memberi tahu browser berapa banyak kolom yang harus dimiliki elemen tubuh dan seberapa lebar seharusnya. Plus Anda dapat menambahkan batas (aturan), warna latar belakang yang menjangkau tinggi kolom, dan teks Anda akan mengalir melalui semua kolom secara otomatis.
Kolom CSS3 - Menentukan Jumlah dan Luas Kolom
Ada tiga properti baru yang memungkinkan Anda untuk menentukan jumlah dan lebar kolom Anda:
- lebar kolom
- Tentukan lebar kolom Anda seharusnya. Browser kemudian akan mengalirkan teks untuk mengisi ruang dengan kolom yang lebar.
- hitungan kolom
- Menentukan jumlah kolom di halaman. Browser kemudian akan membuat kolom yang cukup lebar agar muat di ruang, tetapi hanya nomor yang Anda tentukan.
- kolom
- Properti singkatan tempat Anda dapat menentukan lebar atau nomor (atau keduanya, tetapi itu jarang masuk akal).
Celah dan Aturan Kolom CSS3
Kesenjangan dan aturan ditempatkan di antara kolom dalam skenario multicolumn yang sama. Kesenjangan akan memisahkan kolom, tetapi aturan tidak mengambil ruang apa pun. Jika aturan kolom lebih lebar daripada jeda, kolom akan tumpang tindih dengan kolom yang berdekatan. ada lima properti baru untuk aturan dan celah kolom:
- celah-kolom
- Menentukan lebar celah antara kolom.
- warna-aturan kolom
- Menentukan warna aturan.
- gaya kolom-aturan
- Menentukan gaya aturan (padat, putus-putus, ganda, dll.).
- kolom-lebar aturan
- Menentukan lebar aturan.
- kolom-aturan
- Sebuah properti singkatan mendefinisikan ketiga properti aturan kolom sekaligus.
Pecahan Kolom CSS3, Spanning Columns, dan Filling Columns
Istirahat kolom menggunakan opsi CSS2 yang sama yang digunakan untuk menentukan jeda dalam konten paged, tetapi dengan tiga properti baru: break-before , break-after , dan break-inside .
Seperti dengan tabel, Anda dapat mengatur elemen untuk menjangkau kolom dengan properti rentang-kolom. Ini memungkinkan Anda untuk membuat judul yang menjangkau banyak kolom lebih seperti surat kabar.
Mengisi kolom menentukan berapa banyak konten di setiap kolom. Kolom yang seimbang mencoba untuk menempatkan jumlah konten yang sama di setiap kolom sementara otomatis hanya mengalir konten di dalam sampai kolom penuh dan kemudian pergi ke yang berikutnya.
Lebih Banyak Fitur di CSS3 Yang Tidak Diikutsertakan dalam CSS2
Ada banyak fitur tambahan di CSS3 yang tidak ada di CSS2, termasuk:
- CSS Template layout module dan CSS3 Modul pemosisian grid : Membuat grid dengan CSS.
- Modul teks CSS3 : Buat garis besar teks dan bahkan buat bayangan-jatuh dengan CSS.
- Modul warna CSS3 : Sekarang dengan opasitas.
- Perubahan pada model kotak : Termasuk properti marquee yang berfungsi seperti tag IE.
- Modul Antarmuka Pengguna CSS3 : Memberi Anda kursor baru, respons terhadap tindakan, bidang wajib, dan bahkan mengubah ukuran elemen .
- Kueri Media : Kueri media memungkinkan Anda lebih fleksibel saat menentukan bagaimana style sheet harus digunakan. Misalnya, Anda dapat menentukan lembar gaya yang hanya untuk perangkat genggam yang memiliki area pandang lebih besar dari 20em.
- Modul Ruby CSS3 : Menyediakan dukungan untuk bahasa yang menggunakan ruby tekstual untuk membubuhi keterangan dokumen.
- Modul Media Paged CSS3 : Untuk dukungan yang lebih banyak lagi untuk media paged (kertas, transparansi, dll).
- Konten yang dihasilkan : L menjalankan tajuk dan footer, catatan kaki, dan konten lain yang dihasilkan secara terprogram, terutama untuk media paged.
- Modul Ucapan CSS3 : Perubahan pada CSS aural.