Perbedaan Antara CSS2 dan CSS3

Perbedaan terbesar antara CSS2 dan CSS3 adalah bahwa CSS3 telah dipecah menjadi beberapa bagian, yang disebut modul. Masing-masing modul ini melalui W3C dalam berbagai tahap proses rekomendasi. Proses ini telah mempermudah berbagai bagian CSS3 untuk diterima dan diimplementasikan di browser oleh produsen yang berbeda.

Jika Anda membandingkan proses ini dengan apa yang terjadi dengan CSS2, di mana semuanya dikirimkan sebagai satu dokumen dengan semua Lembar Gaya Cascading informasi di dalamnya, Anda mulai melihat keuntungan memecah rekomendasi menjadi bagian-bagian yang lebih kecil dan individual. Karena setiap modul sedang dikerjakan secara individual, pengembang menikmati dukungan browser yang jauh lebih luas untuk modul CSS3.

Pemilih CSS3 Baru

CSS3 menawarkan beberapa cara baru untuk menulis aturan CSS dengan pemilih CSS baru, serta kombinator baru, dan beberapa elemen semu baru.

Ada tiga pemilih atribut baru:

• Awal atribut sama persis:

  elemen[foo^="bar"]

  Elemen memiliki atribut yang disebut foo yang dimulai dengan "bar" mis.
instagram viewer
• Akhiran atribut sama persis:

  elemen[foo$="bar"]

  Elemen memiliki atribut yang disebut foo yang diakhiri dengan "bar" mis.
• Atribut berisi kecocokan:

  elemen[foo*="bar"]

  Elemen tersebut memiliki atribut dipanggil foo yang berisi string "bar."

16 pseudo-class baru telah diperkenalkan:

• :akar
  • Elemen akar dokumen.
• :n-anak (n)
  • Gunakan ini untuk mencocokkan elemen anak yang tepat atau menggunakan variabel untuk mendapatkan kecocokan bergantian.
• :n-anak terakhir (n)
  • Mencocokkan elemen anak yang tepat menghitung dari yang terakhir.
• : tipe ke-n (n)
  • Cocokkan elemen saudara dengan nama yang sama sebelumnya di pohon dokumen.
• :n-tipe terakhir (n)
  • Cocokkan elemen saudara dengan nama yang sama dihitung dari bawah.
• :anak terakhir
  • Cocokkan yang terakhir elemen anak dari orang tua.
• :tipe pertama
  • Cocokkan elemen saudara pertama dari jenis itu.
• :tipe terakhir
  • Cocokkan elemen saudara terakhir dari jenis itu.
• :hanya anak
  • Cocokkan elemen yang merupakan anak tunggal dari induknya.
• :hanya-dari-jenis
  • Cocokkan elemen yang merupakan satu-satunya dari jenisnya.
• :kosong
  • Cocokkan elemen yang tidak memiliki anak (termasuk node teks).
• :target
  • Cocokkan elemen yang menjadi target URI pengarah.
• :diaktifkan
  • Cocokkan elemen saat diaktifkan.
• :dengan disabilitas
  • Cocokkan elemen saat dinonaktifkan.
• :diperiksa
  • Cocokkan elemen saat dicentang (tombol radio atau kotak centang).
• :tidak s)
  • Cocokkan saat elemen tidak cocok dengan yang sederhana pemilih.

Ada satu kombinator baru:

• elemenA ~ elemenB
  • Cocokkan saat elemenB mengikuti suatu tempat setelah elemenA, tidak harus segera.

Properti Baru

CSS3 juga memperkenalkan beberapa properti CSS baru. Banyak dari properti ini menciptakan gaya visual yang kemungkinan akan lebih dikaitkan dengan program grafis seperti Photoshop. Beberapa di antaranya, seperti border-radius atau box-shadow, telah ada sejak diperkenalkannya CSS3. Lainnya, seperti flexbox atau even CSS Grid, adalah gaya baru yang masih sering dianggap sebagai tambahan CSS3.

Di CSS3, model kotak tidak berubah. Tetapi ada banyak properti gaya baru yang dapat membantu Anda menata latar belakang dan batas kotak Anda.

Beberapa Gambar Latar Belakang

Dengan menggunakan gaya gambar latar belakang, posisi latar belakang, dan pengulangan latar belakang, Anda dapat menentukan beberapa gambar latar belakang untuk dilapiskan 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, itu 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 mendefinisikan bagaimana gambar latar belakang harus dipotong. Standarnya adalah kotak batas, tetapi dapat diubah menjadi kotak pengisi atau kotak konten.
• latar belakang-asal
• Properti ini menentukan apakah latar belakang harus ditempatkan di kotak padding, kotak perbatasan, atau kotak konten.
• ukuran latar belakang
• Properti ini menunjukkan ukuran gambar latar belakang. Ini memungkinkan Anda untuk meregangkan gambar yang lebih kecil agar sesuai dengan halaman.

Perubahan pada Properti Gaya Latar Belakang yang Ada

Ada juga beberapa perubahan pada properti gaya latar belakang yang ada:

• latar belakang-ulangi
  • Ada dua nilai baru untuk properti ini — ruang dan bulat. Ruang spasi gambar ubin secara merata di dalam kotak tanpa terpotong. Round menskala ulang gambar latar belakang sehingga akan dipetakan beberapa kali di dalam kotak.
• lampiran-latar belakang
  • Nilai baru "lokal" ditambahkan sehingga latar belakang akan menggulir dengan konten elemen ketika elemen tersebut memiliki bilah gulir.
• Latar Belakang
  • Properti singkatan latar belakang menambahkan properti ukuran dan asal.

Properti Perbatasan CSS3

Di CSS3, batas dapat berupa gaya yang biasa kita gunakan (padat, ganda, putus-putus, dll.) atau dapat berupa gambar. Plus, CSS3 mendukung sudut membulat. Gambar perbatasan menarik karena Anda membuat gambar keempat batas dan kemudian memberi tahu CSS cara menerapkan gambar itu ke batas Anda.

Properti Gaya Perbatasan Baru

Ada beberapa properti perbatasan baru di CSS3:

• radius batas
• radius batas-kanan-atas, radius batas-kanan-bawah, batas-bawah-kiri-radius, batas-atas-kiri-radius
• Properti ini memungkinkan Anda untuk membuat sudut membulat di perbatasan Anda.
• perbatasan-gambar-sumber
• Menentukan file sumber gambar yang akan digunakan sebagai ganti gaya batas yang sudah ditentukan.
• perbatasan-gambar-slice
• Mewakili offset ke dalam dari tepi gambar batas.
• batas-gambar-lebar
• Menentukan nilai lebar untuk gambar batas Anda.
• perbatasan-gambar-awal
• Menentukan jumlah area gambar batas yang melampaui kotak batas.
• batas-gambar-peregangan
• Mendefinisikan bagaimana sisi dan bagian tengah gambar perbatasan harus dipetakan atau diskalakan.
• gambar batas
• Properti singkatan untuk semua properti gambar batas.

Properti CSS3 Tambahan Terkait Perbatasan dan Latar Belakang

Saat sebuah kotak dipecah pada hentian halaman, hentian kolom, atau hentian baris (untuk elemen sebaris), kotak-dekorasi-break property mendefinisikan bagaimana kotak baru dibungkus dengan border dan padding. Latar belakang dibagi di antara beberapa kotak yang rusak menggunakan properti ini.

baru bayangan kotak properti menambahkan bayangan ke elemen kotak.

Dengan CSS3, sekarang Anda dapat dengan mudah mengatur halaman web dengan beberapa kolom tanpa tabel atau rumit div struktur tag. Anda cukup memberi tahu browser berapa banyak kolom yang harus dimiliki elemen tubuh dan seberapa lebar seharusnya. Plus Anda dapat menambahkan batas (aturan) dan warna latar belakang yang membentang tinggi kolom, dan teks Anda akan mengalir melalui semua kolom secara otomatis.

Tentukan Jumlah dan Lebar Kolom

Ada tiga yang baru properti yang memungkinkan Anda untuk menentukan jumlah dan lebar kolom Anda:

• lebar kolom
  • Menentukan lebar kolom Anda seharusnya. Browser kemudian akan mengalirkan teks untuk mengisi ruang dengan kolom-kolom yang lebar.
• jumlah kolom
  • Menentukan jumlah kolom pada halaman. Browser kemudian akan membuat kolom yang cukup lebar agar sesuai dengan ruang, tetapi hanya nomor yang Anda tentukan.
• kolom
  • Properti singkatan tempat Anda dapat menentukan lebar atau angka (atau keduanya, tetapi itu jarang masuk akal).

Kesenjangan dan Aturan Kolom CSS3

Kesenjangan dan aturan ditempatkan di antara kolom dalam skenario multi-kolom yang sama. Kesenjangan akan mendorong kolom, tetapi aturan tidak memakan tempat. Jika aturan kolom lebih lebar dari celahnya, itu akan tumpang tindih dengan kolom yang berdekatan. Ada lima properti baru untuk aturan dan celah kolom:

• celah kolom
  • Menentukan lebar celah antara kolom.
• kolom-aturan-warna
  • Mendefinisikan warna aturan.
• kolom-aturan-gaya
  • Mendefinisikan gaya aturan (padat, putus-putus, ganda, dll.).
• lebar aturan kolom
  • Menentukan lebar aturan.
• kolom-aturan
  • Properti singkatan yang mendefinisikan ketiga properti aturan kolom sekaligus.

Pemisahan Kolom CSS3, Kolom Rentang, dan Kolom Pengisian

Kolom jeda menggunakan opsi CSS2 yang sama yang digunakan untuk menentukan jeda dalam konten halaman, tetapi dengan tiga properti baru: istirahat-sebelum, istirahat setelah, dan pembobolan.

Seperti halnya tabel, Anda dapat mengatur elemen untuk merentangkan kolom dengan properti kolom-span. Ini memungkinkan Anda membuat tajuk utama yang menjangkau beberapa kolom lebih seperti surat kabar.

Mengisi kolom memutuskan berapa banyak konten yang akan ada di setiap kolom. Kolom seimbang mencoba menempatkan jumlah konten yang sama di setiap kolom sementara otomatis hanya mengalirkan konten hingga kolom penuh dan kemudian pergi ke yang berikutnya.

Lebih Banyak Fitur di CSS3 Yang Tidak Termasuk dalam CSS2

Ada banyak fitur tambahan di CSS3 yang tidak ada di CSS2, antara lain:

• Modul tata letak Template CSS dan modul pemosisian Grid CSS3: Membuat grid dengan CSS.
• Modul Teks CSS3: Garis besar teks dan bahkan buat drop-shadow dengan CSS.
• Modul Warna CSS3: Sekarang dengan opacity.
• Perubahan model kotak box: Termasuk tenda properti yang bertindak seperti tag IE.
• Modul Antarmuka Pengguna CSS3: Memberi Anda kursor baru, respons terhadap tindakan, bidang wajib, dan bahkan mengubah ukuran elemen.
• Pertanyaan Media Media: Pertanyaan media Media memungkinkan Anda lebih fleksibel saat menentukan bagaimana style sheet harus digunakan. Misalnya, Anda dapat menentukan style sheet yang hanya untuk perangkat genggam yang memiliki viewport lebih besar dari 20em.
• Modul CSS3 Ruby: Menyediakan dukungan untuk bahasa yang menggunakan ruby ​​tekstual untuk membubuhi keterangan pada dokumen.
• Modul Media Berhalaman CSS3: Untuk dukungan lebih banyak lagi untuk media halaman (kertas, transparansi, dll).
• Konten yang dihasilkan: Menjalankan header dan footer, catatan kaki, dan konten lain yang dihasilkan secara terprogram, terutama untuk media halaman.
• Modul Pidato CSS3: Perubahan pada CSS aural.