7 Fitur Baru Untuk Membuat Website Responsif

CSS modern mengambil kendali penuh dari penataan situs web dengan bantuan JavaScript yang diperlukan. Dalam artikel ini, kami akan menyoroti tujuh pembaruan CSS baru untuk menyederhanakan masa depan gaya. Selain itu, kami mempertimbangkan dukungan browser Chrome, Edge, dan Firefox. Terakhir, kita akan membahas masalah, solusi, dan hampir semua yang Anda perlukan untuk segera memulai.

Mempertimbangkan semua trik dan teknik, berikut adalah beberapa fitur CSS yang dipilih sendiri yang sepadan dengan waktu Anda. Jadi, tanpa basa-basi lagi, mari kita langsung masuk ke dalamnya.

1. Subgrid CSS

Tidak seperti kemampuan CSS flexbox untuk bergerak hanya dalam satu arah, Anda dapat menentukan kedua dimensi dalam kisi. Saat mereka mulai menjadi kuat dan populer dalam beberapa dekade mendatang, perubahan luar biasa terlihat dalam desain web. Grid bersarang digunakan untuk menggambar grid di dalam grid. Tapi, apa kelemahan utama yang memunculkan panggilan untuk subgrid CSS?

• Kisi bersarang setelah level 2 digunakan untuk meluapkan konten di luar kisi yang lebih besar yang sangat memengaruhi responsivitas situs web.
  instagram viewer
• Grid bersarang bertindak sebagai elemen independen di dalam wadah grid yang lebih besar. Sama sekali tidak ada referensi ke wadah induk untuk perubahan apa pun.

Tanpa subgrid:

Setelah subgrid:

Berikut cara mengimplementasikan subgrid:

.wadah {
lebar: 700 piksel;
tinggi: 500 piksel;
latar belakang: rgb (214, 255, 139);
tampilan: kisi;
grid-templat-kolom: 1fr 1fr 1fr 1fr;
grid-templat-baris: 1fr 1fr 1fr 1fr;
}
.wadah div {
latar belakang: rgb (72, 170, 137);
grid-baris: 2/ 3;
kisi-kolom: 2 / 5;
tampilan: kisi;
grid-templat-kolom: subgrid;
grid-templat-baris: subgrid;
}

Anda dapat menempatkan beberapa subgrid. Pengecualian penting adalah bahwa subgrid mewarisi properti parent grid-gap. Ini akan menghasilkan pembuatan semua subgrid dengan properti celah yang sama di dalam setiap grid induk.

Hal terbaik tentang subgrid adalah bahwa mereka sangat responsif, dapat disesuaikan, dan dapat diskalakan.

Kompatibilitas peramban: Firefox

2. Properti rasio aspek

Anda dapat menghilangkan semua penyesuaian dan masalah kalkulatif dengan mengubah rasio aspek wadah tertentu. Jika Anda ingin menyisipkan video, yang perlu Anda lakukan hanyalah memperbaiki rasio aspek relatif terhadap ukuran layar yang bervariasi. Namun, saat bekerja dengan kisi ganda dua dimensi, ada kemungkinan tampilan meluap dan default.

Anda dapat memperbaikinya dengan mendukung properti rasio aspek dengan atribut lebar. Ini menjadi berguna untuk gambar responsif karena Anda dapat menentukan tinggi atau lebar.

Inilah cara Anda dapat menerapkan properti rasio aspek:

.wadah {
lebar: 700 piksel;
rasio aspek: 16 / 9;
latar belakang: rgb (72, 170, 137);
}

Anda juga dapat memasukkan rasio aspek: otomatis alih-alih menentukan rasio. Kelemahan dari nilai otomatis default adalah browser akan memilih dimensi asli gambar. Tidak diragukan lagi, itu menghambat respons situs.

Kompatibilitas browser: Chrome, Edge, Firefox (sebagian)

3. Celah Flexbox

Grid-gap cukup populer untuk menciptakan ruang yang sama antara setiap grid. Namun, Anda seharusnya menerapkan margin negatif, pemilih kelas semu, dan pemilih kompleks untuk menangani ruang di antara setiap item fleksibel. Dengan demikian, celah Flexbox menghasilkan baris kode yang lebih sedikit dengan skalabilitas yang lebih tinggi.

Inilah cara Anda dapat menerapkan celah flexbox:

.wadah {
lebar: 700 piksel;
tinggi: 500 piksel;
tampilan: fleksibel;
align-item: tengah;
justify-content: pusat;
celah: 1em;
}

Keluaran:

Kompatibilitas browser: Semua browser utama, termasuk Chrome, Edge, dan Firefox.

Menggulir membantu dalam berbagi lebih banyak informasi tentang satu situs web tanpa mengacaukan salinan web. Namun, kelemahan utama dari pengguliran adalah mungkin berhenti di setengah dari para atau gambar. Terkadang, kontrol konten yang diberi paginasi dibiarkan di tengah jalan. JavaScript digunakan dengan cermat untuk menghindari kustomisasi gulir. Tapi, itu bukan hasil yang sepenuhnya memuaskan sampai CSS Scroll Snap datang.

Menggunakan Scroll Snap, Anda dapat menentukan batasan tertentu untuk memperbaiki tata letak dan visibilitas wadah tertentu. Misalnya, ini berfungsi luar biasa untuk membuat komidi putar dan bagian situs web tertentu. Perhatikan bahwa Anda tidak memerlukan JS untuk penyesuaian apa pun.

Inilah cara Anda dapat menerapkan snap gulir:

.wadah {
lebar: 100%;
tinggi: 100%;
tampilan: fleksibel;
overflow-x: gulir;
scroll-snap-type: x wajib;
}
bagian {
fleksibel: tidak ada;
tampilan: fleksibel;
align-item: tengah;
justify-content: pusat;
ukuran font: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: akhir;
lebar: 100%;
tinggi: 100%;
}

Keluaran:

Snap gulir CSS memiliki properti induk dan anak. Properti induk atau wadah memutuskan arah gulir (x atau y) dan perilaku snap gulir. Misalnya, Anda dapat mengatur scroll-snap-type: x wajib. Ini akan memberikan kontrol pengguna untuk memutuskan titik gulir tanpa mempertimbangkan posisi gulir.

Di sisi lain, scroll-snap-type: y proximity hanya berfungsi ketika pengunjung situs web lebih dekat ke titik scrolling.

Properti anak adalah scroll-snap-align untuk menyelaraskan elemen selama snap scroll CSS. Ini memasukkan nilai awal, akhir, dan tengah untuk menyelaraskan elemen yang sesuai.

5. Pertanyaan Fitur

Kueri fitur digunakan untuk menangani degradasi yang anggun. Misalnya, grid CSS cukup populer saat ini. Namun, perlu disebutkan bahwa browser lama tidak dapat merendernya.

Di sini, kueri fitur memeriksa apakah browser tertentu mendukung properti tertentu atau tidak dan memberikan sistem pendukung yang mendorong merujuk ke properti CSS hanya jika didukung pada itu peramban. Jika tidak, nilai default akan dipertimbangkan. Dalam hal ini, Anda dapat menempatkan blok alih-alih kisi untuk setiap fallback yang diprediksi.

Berikut cara menerapkan kueri fitur:

@supports (visibilitas konten: otomatis) {
tubuh{
latar belakang: teal;
lebar: 100%;
tinggi: 100%;
}
}

Oleh karena itu, hanya browser yang merender properti visibilitas konten yang akan memiliki warna latar belakang teal; jika tidak, nilai default akan dipertimbangkan. Perhatikan bahwa @ mirip dengan @media kueri media, di mana Anda seharusnya mengatur max-width atau min-width untuk penyesuaian darurat. Ini menyederhanakan mengingat kueri fitur @supports.

Baca selengkapnya: Cara Menggunakan Kueri Media dalam HTML dan CSS

Kompatibilitas browser: Semua browser utama, termasuk Chrome, Edge, dan Firefox.

6. Properti visibilitas konten

Render cepat berfungsi sebagai tulang punggung untuk situs web interaktif pengguna. Dengan meningkatnya popularitas perangkat seluler, kinerja rendering situs web menjadi penghambat untuk mendapatkan situs web yang menarik.

Di sini, properti visibilitas konten memainkan peran penting. Karena, secara default, browser merender semua elemen situs web sekaligus. Ini mengurangi waktu buka dan kinerja situs secara keseluruhan, terutama jika situs web Anda memiliki banyak animasi berat. Di sisi lain, properti content-visibility hanya merender elemen viewport dan menampilkan elemen lain saat Anda menggulir seluruh halaman.

#utama {
visibilitas konten: otomatis;
/* berisi-ukuran-intrinsik: 0 500px; */
}

Properti visibilitas konten memasukkan tiga nilai. content-visibility: visible tidak menunjukkan efek sementara content-visibility: hidden mirip dengan display: tidak ada elemen yang melewatkan konten yang tidak dapat diakses. Visibilitas konten: otomatis melompati konten yang tidak relevan, tetapi tersedia sebagai halaman normal untuk fitur agen pengguna.

Mari kita ukur kekuatan visibilitas konten. Berikut hasilnya:

7. Transisi, Transformasi, dan Animasi

Di CSS, kami memiliki dua cara untuk menerapkan animasi. Transisi digunakan untuk membuat perubahan halus pada properti visual elemen. Di sisi lain, tanpa transisi, transformasi akan tiba-tiba memanipulasi dari satu keadaan ke keadaan lain.

Animasi digunakan dengan @keyframes yang mengatur gaya di beberapa titik selama durasi animasi. Hal yang menarik adalah @keyframes menentukan kapan perubahan akan terjadi, transformasi, dan animasi mengontrol perubahan, dan transisi menangani bagaimana perubahan akan terjadi (mis., efek hover).

.anak {
latar belakang: teal;
tinggi: 150 piksel;
lebar: 150 piksel;
warna putih;
transisi: mengubah 0.2s ease-in-out;
animasi: myAnimation 2s tak terbatas;
}
.anak: arahkan {
mengubah: skala (2, 2) memutar (45deg);
}
@keyframes myAnimation {
0% {
}
50% {
mengubah: translateX(400px)
}
100% {
mengubah: translateX(0px)
}
}

Kompatibilitas browser: Semua browser utama, termasuk Chrome, Edge, dan Firefox.

Membungkus

Markup stylesheet bertingkat terus berkembang dengan fitur yang lebih baik. Sejauh ini, Anda telah mengetahui tentang tujuh fitur luar biasa yang mencakup subgrid CSS, properti rasio aspek, celah flexbox, snap gulir, kueri fitur, properti visibilitas konten, transisi, transformasi, dan animasi.

Pada akhirnya, Anda harus memastikan fitur mana yang menyederhanakan gaya situs web Anda.

7 Fitur Baru yang Harus Diperhatikan di Bootstrap 5

Jika Anda mengembangkan situs web dan aplikasi menggunakan kerangka kerja CSS Bootstrap, inilah yang baru di Bootstrap 5.

Baca Selanjutnya

Tentang Penulis