CSS dan JavaScript bekerja sama dengan baik, yang masing-masing memiliki kekuatannya sendiri, tetapi saya yakin bahwa semakin banyak CSS digunakan untuk mengontrol tampilan dan nuansa antarmuka, aplikasi web akan semakin tangguh dan dapat diandalkan. Intinya di sini adalah sebagai berikut:
- CSS, pada dasarnya, adalah teknologi yang tahan kegagalan. Ini berarti bahwa ketika pengurai CSS menemukan properti yang tidak dipahami, ia akan mengabaikannya dan melanjutkan. Dengan kata lain, dengan menggunakan CSS, pemrogram menerapkan gaya dan mengharapkannya berfungsi.
- JavaScript bukanlah teknologi yang toleran terhadap kesalahan. Kesalahan sintaks tunggal dalam kode JS dapat merusak seluruh aplikasi. Artinya, saat mengelola gaya situs menggunakan JS, sangatlah penting untuk memeriksa fungsionalitas struktur yang sesuai.
Ada banyak pertimbangan lain yang perlu dipertimbangkan saat menjawab pertanyaan kapan harus menggunakan CSS di atas JS .
CSS memberi kita cara baru untuk merancang solusi fantastis yang jauh lebih mudah daripada solusi JS yang sesuai, dan lebih mudah dibuat. Ini mengacu pada banyak fitur CSS: transisi, properti khusus, animasi, filter, matematika.
Dalam posting ini, saya akan membahas beberapa fitur keren dari CSS (beberapa di antaranya sangat baru) yang mungkin belum Anda ketahui. Yaitu, kita akan berbicara tentang pengguliran halus, tentang properti
position: sticky, dan tentang kemungkinan lain, yang implementasinya sebelumnya diperlukan untuk menulis banyak baris kode JS yang cerdik.
1. Pengguliran halus
Di masa lalu, melengkapi halaman dengan pengguliran mulus membutuhkan beberapa baris kode JS. Sekarang tugas ini dapat diselesaikan secara eksklusif dengan menggunakan CSS. Bukankah itu bagus? Sekarang Anda dapat memanfaatkan pengguliran halus dengan menggunakan properti CSS
scroll-behavior.
Beginilah tampilannya:
html {
scroll-behavior: smooth;
}
Menerapkan scrolling mulus
→ Berikut adalah contoh di CodePen
Pada saat penulisan ini, properti
scroll-behaviorini hanya didukung di Chrome dan Firefox. Ini belum didukung oleh Edge, IE dan Safari (desktop dan seluler). Lihat Can I Use untuk detail tentang mendukung properti ini.
2. Menjepit elemen
Elemen pin adalah salah satu fitur CSS favorit saya. Intinya adalah bahwa elemen terkait tidak hilang dari viewport saat menggulir halaman. Sekarang untuk memperbaiki elemen pada halaman tidak perlu menggunakan
offsetTodan window.scrollYdi JS. Saat ini, Anda bisa memanfaatkan properti CSS position: sticky:
header {
position: sticky;
top: 0;
}
Blok navigasi "terletak" di tepi atas area pandang dan tidak hilang saat menggulir halaman
→ Berikut adalah proyek CodePen yang menunjukkan contoh penggunaan properti.
position: sticky
Untuk menggunakan properti ini dengan benar, Anda perlu mempertimbangkan kekhasan pengaruhnya pada elemen. Saat diterapkan, struktur halaman HTML berperan. Ngomong-ngomong, justru fakta bahwa fitur-fitur ini tidak diperhitungkan, dan alasannya adalah properti ini terkadang tidak berfungsi.
Mari kita lihat kode HTML berikut ini:
<main class="container">
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="main-content">Main Content</div>
<footer class="footer">Footer</footer>
</main>
Menu (item
navdari contoh ini) hanya dapat diperbaiki di area yang tumpang tindih dengan item induknya ( maindalam contoh kita). Hasilnya, saat menggunakan properti position: sticky, dua kelas utama elemen dapat dibedakan:
- Elemen Dockable: Ini adalah elemen tempat kami menerapkan properti
position: sticky(navdalam kasus kami). Elemen ini akan bergerak di dalam elemen induk hingga mencapai posisi yang ditentukan. Misalnya - bisa jaditop: 0px. - Penampung elemen yang dapat dipasang di dok: Ini adalah elemen HTML yang berisi elemen yang dapat dipasang ke dok. Ini adalah area di mana item yang berlabuh dapat bergerak. "Penampung" ini menentukan batas-batas tempat item yang dapat dipasang-dok dapat berada.
Menggunakan fitur ini secara signifikan dapat meningkatkan kegunaan situs. Ini terutama berlaku untuk proyek-proyek yang penggunanya harus sering menggulir halaman.
Fitur ini memiliki hampir 100% dukungan browser .
3. Memangkas teks
CSS memberi kita dua properti luar biasa:
text-overflowdan line-clamp. Mereka memungkinkan Anda untuk memangkas teks, menangani kata-kata dengan hati-hati, dan pada saat yang sama menyelamatkan kita dari kebutuhan untuk menggunakan JavaScript atau beberapa metode kompleks lainnya untuk menyelesaikan masalah semacam itu. Kedua properti tersebut bukanlah hal baru, tetapi sangat berguna.
Memangkas teks
→ Berikut adalah contoh di CodePen.
Mari kita bicara lebih banyak tentang properti
text-overflowdanline-clamp.
Properti propertyText-overflow
Properti ini mengontrol bagaimana teks ditampilkan dalam situasi di mana ia harus dipotong jika tidak pas dalam satu baris. Contoh situasi seperti ini ditunjukkan pada gambar di atas, di header kartu. Di sini Anda dapat menggunakan konstruksi
text-overflow: ellipsis, yang akan mengarah pada fakta bahwa karakter Unicode ( …) akan ditambahkan ke akhir teks yang dipotong .
Agar properti
text-overflow: ellipsismelakukan tugasnya, perlu menggunakan properti yang sama white-space: nowrapdan overflow: hidden.
.card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Fitur ini hampir sepenuhnya didukung di semua browser modern.
▍ Properti penjepit garis
Properti ini membantu kami dalam kasus di mana kami perlu bekerja tidak dengan satu baris, tetapi dengan teks multi-baris (contoh teks semacam itu adalah isi kartu dari gambar di atas). Meskipun ini adalah bagian dari standar CSS Overflow Module Level 3 , yang sekarang berstatus "Working Draft", properti ini sudah didukung oleh sekitar 95% browser, meskipun dengan prefiks
-webkit-. Sebelum menggunakannya, penting untuk diperhatikan bahwa ini tidak memberikan kemampuan untuk mengontrol jumlah karakter yang ditampilkan. Tapi itu sangat berguna.
Untuk menggunakannya, kita perlu menggunakan implementasi flexbox lama, menggunakan properti
display: -webkit-boxdan -webkit-box-orient: vertical. Beginilah tampilannya:
.card-description {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
4. Properti CSS Khusus: Variabel CSS
Di dunia JavaScript, praprosesor CSS (seperti Sass, Less, dan Stylus) adalah teknologi yang sangat berguna dan populer. Praprosesor memperluas kemampuan CSS, memungkinkan Anda menggunakan, misalnya, variabel dan fungsi. Tetapi perancang web modern memiliki akses ke fitur CSS standar yang kuat yang dikenal sebagai properti CSS khusus atau variabel CSS.
Variabel CSS membantu menjaga aplikasi tetap konsisten dan membantu menerapkan KERING. Mereka memfasilitasi pengembangan dan pemeliharaan tema aplikasi. Kemampuan ini adalah salah satu alasan utama kesuksesan preprocessor. Anda dapat membaca lebih lanjut tentang ini di sini .
Menggunakan fitur CSS standar berarti Anda tidak lagi memerlukan preprocessor untuk membuat variabel. Variabel, seperti fitur CSS standar lainnya yang kami sukai, bekerja secara berjenjang.
Sangat mudah untuk membuat variabel CSS. Yaitu, untuk mendeklarasikan variabel, cukup dengan meletakkan dua tanda hubung (
--) di depan namanya. Setelah itu, di mana nilai variabel diperlukan, fungsi dipanggil var(), meneruskan variabel yang dibuat sebelumnya sebagai argumen. Seperti yang Anda lihat, semuanya sangat sederhana.
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
Variabel CSS dapat dimanipulasi dari JavaScript.
Menggunakan variabel-CSS
→ Berikut adalah contoh di CodePen, yang menunjukkan penggunaan variabel-CSS dan pengelolaan kode-JS
5. Memberikan dukungan untuk tema gelap
Sejak Apple memperkenalkan tema gelap untuk macOS tahun lalu, dan berkat cara CSS memberi kami kemampuan untuk mendeteksi penggunaan tema ini menggunakan kueri media, banyak proyek web besar (seperti Twitter dan Google Maps) telah memperoleh tema seperti itu. ( berikut adalah daftar proyek yang mendukung tema gelap).
Tema gelap bukan hanya cara untuk menghias halaman web. Dia benar-benar dapat membantu beberapa orang untuk bekerja di Internet.
Berikut beberapa kutipannya.
Dan kemudian ada orang yang, karena alasan obyektif, membutuhkan mode gelap. Mereka menggunakan mode ini sebagai salah satu alat bantu bagi penyandang disabilitas. Misalnya, kita berbicara tentang orang dengan penglihatan rendah.
Thomas Steiner, Teknisi Solusi Pelanggan, Google, Jerman.
Molly mengidap sindrom Usher. Karena itu, dia tidak mendengar apa-apa, dan bidang pandang salah satu matanya dibatasi hingga 5 derajat. (…) Melihat halaman dalam mode gelap akan berada dalam kekuasaannya. Mode ini juga dapat berguna untuk orang lain, memperluas kemungkinan penggunaan Internet bagi mereka yang sakit kepala, atau bagi mereka yang harus duduk di depan komputer di ruangan yang kurang cahaya. Jika, saat mengembangkan sesuatu, fokus hanya pada beberapa pengguna khusus, itu akan berguna tidak hanya untuk mereka.
Charles Reynolds , Desainer, Pemerintah Inggris.
Juga terbuat dari bahanThomas Steiner dapat mempelajari bahwa penggunaan mode gelap membantu menghemat energi: “(...) seperti yang Anda ketahui, menggunakan mode gelap pada layar AMOLED akan menghemat banyak energi. Penelitian Android, yang menargetkan aplikasi Google populer seperti YouTube, telah menunjukkan penghematan energi hingga 60% dalam beberapa kasus. ”
Fitur CSS baru yang memberi tahu kami jika pengguna mengaktifkan tema gelap diwakili oleh fungsi media
prefers-color-scheme. Ini sudah kompatibel dengan Chrome, Firefox, Safari dan Opera.
Jika digabungkan dengan Variabel CSS, sangat mudah bagi pengembang web untuk memudahkan pengunjungnya memanfaatkan mode dinamis terang dan gelap.
:root {
--color: #222;
--background: #eee;
--text: 'default';
}
body {
color: var(--color);
background: var(--background);
}
body:after {
content: var(--text);
display: block;
text-align: center;
font-size: 3rem;
}
@media (prefers-color-scheme: light) {
:root {
--color: #222;
--background: #eee;
--text: 'light';
}
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--background: #222;
--text: 'dark';
}
}
Deteksi otomatis tema yang digunakan oleh perangkat
→ Dalam hal ini proyek CodePen, desain halaman tergantung pada tema penampil menggunakan
6. Arahan mendukung
Untuk waktu yang lama, pengembang web harus menggunakan solusi pihak ketiga (seperti alat Modernizr JS ) untuk mengetahui apakah fitur CSS tertentu didukung oleh browser saat ini. Misalnya, dengan mengonfigurasi properti elemen
-webkit-line-clamp, Anda dapat memeriksa apakah properti tersebut didukung di browser, dan jika tidak, Anda dapat menggunakan beberapa fallback.
Setelah arahan muncul di CSS
@supports, menjadi mungkin untuk memeriksa kapabilitas browser langsung dari kode CSS.
Arahannya
@supportssangat mirip dengan kueri media. Ini mendukung berbagai ekspresi kombinasi yang dibangun menggunakan pernyataan bersyarat AND, ORdan NOT:
@supports (-webkit-line-clamp: 2) {
.el {
...
}
}
Ini memeriksa apakah browser mendukung properti
-webkit-line-clamp. Jika demikian, artinya, jika kondisinya benar, gaya yang dideklarasikan di dalam direktif akan diterapkan @supports. Semua browser modern mendukung
fitur ini .
Hasil
Dalam posting ini, saya telah membahas beberapa fitur CSS yang berguna. Jika Anda dapat melakukan sesuatu tanpa menggunakan JS, tetapi hanya menggunakan CSS, lakukanlah.
Dunia modern di bagian depan berubah dengan cepat, kami terus memiliki peluang baru yang membantu kami melakukan bisnis dengan lebih cepat dan lebih baik. Bereksperimen dengan CSS dan mempelajari hal-hal baru tidak hanya sangat bermanfaat, tetapi juga sangat menarik. Saya menyarankan Anda untuk mencoba sesuatu yang baru yang Anda pelajari hari ini.
Apakah Anda mengetahui fitur CSS terbaru yang memungkinkan Anda memecahkan masalah yang sama yang sebelumnya Anda selesaikan hanya dengan menggunakan JavaScript?
