5 fitur CSS baru panas dan cara menggunakannya

Dalam artikel ini kita akan menjelajahi lima properti baru yang datang ke CSS, lihat apa yang mereka lakukan dan bagaimana cara menggunakannya secara praktis dalam proyek Anda. Kita akan membuat a Tata Letak Situs Web Untuk halaman yang mencakup umpan berita dan kotak obrolan kecil di sudut. Untuk lebih banyak trik CSS, lihat artikel kami yang mengeksplorasi berbeda CSS Animasi Contoh. . Jika Anda membuat situs baru, coba a Pembangun Situs Web dan pastikan untuk menelusuri hosting web. Opsi di sini.

Untuk tutorial ini, Anda akan memerlukan Chrome 65+ atau Firefox 59+. Melihat menemani repo github untuk kode langkah demi langkah. Kami akan memanfaatkan fitur-fitur berikut untuk menciptakan pengalaman yang lebih baik dan mengatasi beberapa masalah. Dan jika Anda merancang di sepanjang tim, memanfaatkan yang terbaik penyimpanan awan untuk menjaga hal-hal yang kohesif.

Modul Tampilan CSS (Level 3)

• Tampilan: konten;
• Status W3C. - Working Draft.
• Dukungan Browser

Modul Aturan Bersyarat CSS (Level 3)

• @dukung(...) {...}
• Status W3C. - Rekomendasi kandidat
• Bacaan lebih lanjut: MDN Web Docs.

Modul Perilaku Overscroll CSS (Level 1)

• Overcroll-Behavior: Berisi;
• Status W3C. - tidak resmi
• Dukungan Browser
• Bacaan lebih lanjut: Kendalikan gulungan Anda

Modul Pemilih CSS (Level 4)

• : fokus-dalam
• Status W3C. - Working Draft.
• Dukungan Browser
• BACAAN LEBIH LANJUT: MDN Web Documents : fokus-dalam , : Placeholder-ditampilkan

Modul penahanan CSS (Level 1)

• berisi: cat;
• Status W3C. - Rekomendasi kandidat
• Dukungan Browser
• Bacaan lebih lanjut: Penahanan CSS di Chrome 52

01. Siapkan HTML untuk umpan berita

Pertama, kita perlu mengatur beberapa markup yang super sederhana dan berulang untuk koran kami. Mari kita buat .wadah div dengan daftar tidak terurut di dalam. Berikan & lt; ul & gt; kelas .makan , lalu buat 10 item daftar masing-masing berisi div dengan .kartu kelas dan kartu teks 1, kartu 2 dll.

Akhirnya buat yang lain Daftar barang di antara 5 dan 6 dengan kelas .nested - Ini akan membantu nanti - dan tambahkan a & lt; ul & gt; Di dalam dengan tiga item daftar menggunakan kartu teks A, kartu b dll.

 & lt; body & gt;
 & lt; div class = "wadah" & gt;
 & lt; ul class = "feed" & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 1 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 2 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 3 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 4 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 5 & lt; / div & gt; & li & gt;
    & lt; Li Class = "bersarang" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu a & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu b & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu c & lt; / div & gt; & li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 6 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 7 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 8 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 9 & lt; / div & gt; & li & gt;
 & lt; li & gt; & lt; div class = "kartu" & gt; kartu 10 & lt; / div & gt; & li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Gaya Newsfeed

Sekarang kita perlu menambahkan beberapa gaya cepat sehingga ini mulai terlihat lebih seperti koran. Pertama yang bisa kita berikan & lt; tubuh & gt; warna latar belakang abu-abu halus. Kemudian berikan .wadah Lebar maksimal 800px dan gunakan MARGIN: 0 AUTO; ke tengah sejajarkan.

Mari kita berikan .kartu latar belakang putih, 10px bantalan dan margin dan akhirnya a min-tinggi 300px - Ini harus memberi kita cukup untuk membuat halaman bergulir. Terakhir kami akan menaburkan beberapa keajaiban flexbox pada .makan Untuk membuat barang mengalir dengan baik, dengan dua kartu per baris.

 .feed {
Tampilan: Flex;
Flex-Wrap: Bungkus;
}
.feed li {
Flex: 1 0 50%;
} 

03. Perbaiki masalah tata letak

Jika Anda menggulir ke bawah daftar, Anda akan melihat bahwa kartu kami di daftar bersarang, kartu A - C, menyebabkan beberapa masalah tata letak. Idealnya kami ingin mereka mengalir dengan sisa kartu tetapi semuanya terjebak bersama dalam satu blok. Alasan untuk ini adalah wadah fleksibel - yang dibuat menggunakan Tampilan: Flex. - Hanya membuat anak-anak langsung (I.E. item daftar) menjadi item Flex.

Sekarang, biasanya satu-satunya cara memperbaiki ini adalah mengubah markup, tetapi mari kita berpura-pura bahwa Anda tidak memiliki kemewahan itu. Mungkin markup umpan berita dihasilkan oleh skrip pihak ketiga atau kode warisan yang hanya Anda coba reskin. Jadi bagaimana kita bisa memperbaikinya?

Memenuhi Tampilan: Isi. . Satu-liner kecil ini pada dasarnya membuat elemen berperilaku seolah-olah itu tidak ada di sana. Anda masih melihat keturunan elemen tetapi elemen itu sendiri tidak mempengaruhi tata letak.

Karena kita berpura-pura kita tidak bisa mengubah markup (hanya untuk langkah ini) kita bisa sedikit pintar tentang ini dan membuatnya .kartu elemen item flex dan hampir seluruhnya mengabaikan markup daftar.

Pertama-tama hapus yang ada .feed Li. kelas dan kemudian gunakan Tampilan: Isi. untuk berdua & lt; ul & gt; dan & lt; li & gt; Elemen:

 .feed ul,
.feed li {
Tampilan: konten;
} 

Sekarang Anda harus melihat kartu mengalir secara berurutan, tetapi kami kehilangan ukuran. Perbaiki dengan menambahkan properti Flex ke .kartu sebagai gantinya:

 .card {
Flex: 1 0 40%;
} 

TA-DA! Kartu kami sekarang menggunakan keajaiban FlexBox seolah-olah markup daftar struktural tidak terurut mereka tidak ada.

Sebagai catatan samping Anda mungkin bertanya-tanya mengapa Flex-basis Nilai diatur ke 40%. Ini karena .kartu kelas memiliki margin, yang tidak termasuk dalam perhitungan lebar seperti yang Anda harapkan saat menggunakan Ukuran kotak: Border-Box . Untuk mengatasi ini kita hanya perlu mengatur Flex-basis Cukup tinggi untuk memicu pembungkus pada titik yang diperlukan dan flexbox akan mengisi sisa ruang secara otomatis.

04. Jelajahi kueri fitur

Meskipun Tampilan: Isi. Apakah persis apa yang kita butuhkan, itu masih hanya pada status konsep kerja dengan W3C. Dan dalam dukungan Chrome baru tiba di versi 65 dirilis pada Maret 2018. Firefox yang luar biasa telah mendapat dukungan sejak April 2015!

Jika Anda menonaktifkan gaya di DevTools Anda akan melihat bahwa perubahan kami telah membuat sedikit kekacauan dengan tata letak kapan Tampilan: Isi. tidak diterapkan. Jadi apa yang bisa kita lakukan tentang ini? Waktu untuk fitur baru kami berikutnya - permintaan fitur.

Pekerjaan ini seperti permintaan media tetapi mereka memungkinkan Anda untuk meminta browser - menggunakan CSS saja - jika ekspresi properti dan nilai didukung. Jika mereka, gaya yang terkandung di dalam kueri akan diterapkan. Sekarang, mari kita pindahkan Tampilan: Isi. gaya menjadi kueri fitur.

 @Support (tampilan: konten) {
.feed ul,
.feed li {
  Tampilan: konten;
}
.card {
  Flex: 1 0 40%;
}
} 

05. Gunakan 'Tidak' untuk hasil pembersih

Biasanya dalam skenario peningkatan progresif semacam ini, kami akan menggunakan kueri untuk menambahkan gaya baru, tetapi juga harus menonaktifkan beberapa gaya asli yang diperlukan untuk tata letak fallback.

Namun Anda mungkin memutuskan bahwa karena dukungan untuk permintaan fitur cukup bagus (jika Anda mengabaikan IE) Anda benar-benar ingin menggunakan kueri fitur tidak operator. Ini berfungsi seperti yang Anda harapkan, jadi kami dapat menerapkan kembali asli kami melenturkan properti ke daftar-item saat Tampilan: Isi. tidak didukung:

 @Support tidak (tampilan: konten) {
.feed li {
  Flex: 1 0 50%;
}
} 

Di dalam tidak kueri kita dapat menambahkan beberapa gaya sehingga .nested item pada dasarnya menerapkan kembali apa yang diwarisi dengan menggunakan Tampilan: Isi. .

 pakan Li.Nestested {
Flex-Basis: 100%;
}
.feed li.Nested ul {
 Tampilan: Flex;
 Flex-Wrap: Bungkus;
} 

06. Membawa satu langkah lebih jauh

Anda sudah dapat melihat potensi kueri fitur, tetapi yang sangat keren adalah Anda dapat menggabungkan ekspresi menggunakan tiga operator yang tersedia: dan , atau dan tidak . Mungkin kita juga bisa memeriksa Tampilan: Flex. mendukung dan kemudian menambahkan fallback berbasis float.

Kita tidak akan melakukan itu di sini, tetapi jika kita pertama-tama kita memodifikasi kedua permintaan fitur seperti itu:

 @Supports (Display: Flex) dan (Display: Contents) {
...
}
@Support (Tampilan: Flex) dan (tidak (tampilan: konten)) {
...
} 

Sebagai bonus Anda juga dapat menguji dukungan properti khusus seperti ini:

 @supports (--foo: Green) {
...
} 

07. Tambahkan kotak obrolan

Sekarang kami memiliki umpan berita yang indah di tempatnya, mari kita tambahkan kotak obrolan kecil yang diperbaiki ke kanan bawah layar. Kami akan memerlukan daftar pesan dan bidang teks agar pengguna memasukkan pesan mereka. Tambahkan blok ini tepat setelah pembukaan & lt; tubuh & gt; menandai:

 & lt; Div Class = "Chat" & gt;
 & lt; div class = "Pesan" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 1 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 2 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 3 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 4 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 5 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "Pesan" & gt; pesan 6 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 7 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 8 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 9 & lt; / div & gt; & li & gt;
& lt; li & gt; & lt; div class = "pesan" & gt; pesan 10 & lt; / div & gt; & li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; input type = "text" class = "input" & gt;
& lt; / div & gt; 

08. Gaya kotak obrolan

Saatnya untuk dengan cepat menambahkan styling sehingga terlihat setengah layak.

 .CHAT {
 latar belakang: #fff;
 Perbatasan: 10px solid # 000;
 Bawah: 0;
 Ukuran font: 10px;
 Posisi: Tetap;
 Kanan: 0;
 Lebar: 300px;
 Z-index: 10;
}
.messages {
 Border-bottom: 5px solid # 000;
 Overflow: AUTO;
 Padding: 10px;
 Tinggi Maks: 300px;
}
.message {
 Latar Belakang: # 000;
 Border-Radius: 5px;
 Warna: #fff;
 MARGIN: 0 20% 10px 0;
 Padding: 10px;
}
.messages Li: anak-anak terakhir .message {
 margin-bottom: 0;
}
.memasukkan {
 Perbatasan: Tidak ada;
 Tampilan: blok;
 Padding: 10px;
 Lebar: 100%;
} 

09. Scroll Chaining.

Semoga sekarang Anda akan memiliki kotak obrolan kecil dengan daftar pesan yang dapat digulir yang duduk di atas umpan berita Anda. Bagus. Tetapi apakah Anda memperhatikan apa yang terjadi ketika Anda menggulir ke dalam area bersarang dan Anda mencapai akhir rentang yang dapat digulir? Cobalah. Gulir ke akhir pesan dan Anda akan melihat halaman itu sendiri akan mulai menggulir sebagai gantinya. Ini disebut rantai gulir.

Ini bukan masalah besar dalam contoh kami tetapi dalam beberapa kasus mungkin. Kami harus mengatasi fitur ini sebelumnya ketika membuat area yang dapat digulir di dalam modal atau konteks menu.

Perbaikan kotor adalah mengatur & lt; tubuh & gt; untuk Overflow: Hidden. , tetapi ada properti CSS baru yang bagus dan mengkilap yang memperbaiki semua ini dan ini adalah satu-liner sederhana. Katakan halo ke Overcroll-Behavior. . Ada tiga nilai yang mungkin:

• mobil - Default, yang memungkinkan rantai gulir
• berisi - Menonaktifkan rantai gulir
• Tidak ada - Menonaktifkan rantai gulir dan efek overcroll lainnya (mis. Rubbanding)

Kita bisa menggunakan singkatan Overcroll-Behavior. atau kita dapat menargetkan arah tertentu dengan Overcroll-Behavior-X (atau -y. ). Mari kita tambahkan ke kita .mentilah kelas:

 .ages {
...
Overcroll-Behavior-Y: Berisi;
...} 

Sekarang coba gulir lagi dan Anda akan melihat bahwa itu tidak lagi mempengaruhi gulir halaman ketika Anda mencapai akhir konten.

Properti ini juga cukup praktis jika Anda ingin menerapkan fitur pull-to-refresh di PWA Anda, katakan untuk menyegarkan berita. Beberapa browser, seperti Chrome untuk Android, secara otomatis menambahkannya sendiri dan sampai sekarang belum ada cara mudah untuk menonaktifkannya tanpa menggunakan JS untuk membatalkan peristiwa menggunakan penangan non-pasif yang berdampak pada kinerja.

Sekarang Anda hanya perlu menambahkan Overcroll-Behavior: Berisi ke elemen yang berisi viewport, mungkin & lt; tubuh & gt; atau & lt; html & gt; .

Perlu dicatat bahwa properti ini bukan standar W3C, lebih tepatnya proposal oleh Web Incubator Group (WICG). Proposal WICG yang populer, stabil dan dewasa dipertimbangkan untuk migrasi ke kelompok kerja W3C pada tahap selanjutnya.

10. Perkecil kotak obrolan saat tidak digunakan

Saat ini kotak obrolan membutuhkan sedikit ruang, yang kecuali jika kita berinteraksi dengan itu agak mengganggu. Untungnya kita dapat melakukan sesuatu tentang ini dengan sihir CSS kecil.

Tetapi pertama-tama kita perlu memodifikasi gaya kita yang sudah ada. Secara default kami ingin kotak obrolan akan runtuh, jadi kita perlu mengurangi tinggi maksimal nilai di .mentilah kelas. Sementara kita di sana kita juga dapat menambahkan transisi ke tinggi maksimal Properti:

 .ages {
 ...
 Tinggi Maks: 25px;
Transisi: tinggi-tinggi 500 ms; } 

Halaman berikutnya: Lanjutkan Menjelajahi Fitur CSS Baru di Langkah 11-20

• 1
• 2.

Halaman saat ini: Jelajahi 5 Fitur CSS Baru: Langkah 01-10