Kiat-kiat CSS yang tidak mungkin Anda temukan di tutorial

Ada aturan CSS tertentu yang dapat ditemukan dalam tutorial apa pun. Tetapi ada juga aturan CSS yang tidak akan Anda temukan di tutorial, tetapi Anda akan menabraknya segera setelah Anda mulai menulis kode. Saya yakin Anda sudah menemukan cara untuk menyelaraskan elemen secara vertikal atau membuat tata letak yang kompleks. Kami tidak akan membicarakan ini.

Terakhir, ada aturan CSS yang tidak mungkin Anda lihat di manual, dan yang mungkin tidak Anda sadari. Untuk beberapa waktu saya mengumpulkan tip-tip ini dan sekarang saya memutuskan untuk menulis artikel dengan harapan itu akan bermanfaat.



Di bawah ini adalah apa yang belum diajarkan oleh tutorial CSS kepada saya.

Properti padding-top relatif terhadap lebar elemen induk

Seberapa sering Anda menggunakan unit relatif di CSS? Saya penggemar mereka karena mereka memungkinkan Anda membuat situs web responsif tanpa terlalu jauh ke dalam pertanyaan media. Jika Anda ingin mengatur ketinggian elemen menjadi setengah tinggi induk, maka cukup tulis height: 50% .

Anda dapat menggunakan unit relatif di mana saja. Jika Anda ingin menambahkan jarak antara dua elemen vertikal, Anda dapat menulis margin-top: 15% dan indentasi luar akan muncul. Jaraknya 15% dari ketinggian aslinya. Saya pikir Anda semua tahu ini, dan saya tidak akan membuang waktu Anda. Tapi mungkin Anda tidak tahu bahwa semuanya tidak sesederhana itu.

Dalam beberapa situasi, lebih baik menggunakan bantalan daripada margin . Tetapi ketika Anda mengatur padding-top: 15% ... Apa-apaan ini? ..

Properti tidak berfungsi seperti yang kita harapkan. Itu tidak mengatur parameter relatif terhadap ketinggian induk. Apa yang sedang terjadi

Penjelasan

Ini mengatur parameter relatif terhadap lebar induk. Apakah Anda memerlukan demo? Di sini:


Mainkan saja mengubah lebar orangtua dan lihat bagaimana ini akan mempengaruhi indentasi batin anak. Pada pandangan pertama ini mungkin tampak aneh, tetapi sebenarnya ada alasan bagus mengapa ini terjadi. Anda akan menemukannya dengan membaca spesifikasi CSS ...

Tidak, saya bercanda - tidak ada penjelasan mengapa ini terjadi. Setidaknya saya tidak dapat menemukan penjelasan di mana pun. Itu terjadi begitu saja, ingatlah itu.

Meskipun kami tidak mengerti mengapa pengembang melakukannya, kami dapat menggunakan fitur ini untuk keuntungan kami. Untuk item kami, kami menetapkan yang berikut:

 .parent { height: auto; width: 100px; } .child { padding-top: 100%; } 

Maka tinggi elemen akan sama dengan tinggi anak, meskipun kami mengatur height: auto . Di sisi lain, ketinggian anak akan sama dengan lebar orang tua, karena kami mengatur padding-top: 100% . Hasilnya adalah kuadrat, dan elemen akan mempertahankan rasio ini pada ukuran berapa pun.

Berikut ini contoh kerjanya:


Jika Anda mengubah padding-top: 100% ke persentase lainnya, Anda mendapatkan persegi panjang. Jika Anda mengubah lebar, rasionya tetap dipertahankan.

Transformasi dapat mengakumulasi aturan

Jika Anda mempelajari ilmu komputer, maka Anda mungkin ingat kura-kura mengerikan ini dan gagangnya yang bergerak. Konsep pendidikan ini lebih dikenal sebagai grafis kura - kura , yang tujuannya adalah untuk membimbing kura-kura di sepanjang jalan dengan instruksi sederhana - "20 langkah maju", "rotasi 90 derajat" dan sejenisnya.

Bagaimana jika, menggunakan CSS, Anda dapat memberikan perintah "20 piksel yang benar" relatif terhadap posisi elemen saat ini, daripada posisi awalnya? Dan jika saya mengatakan bahwa Anda dapat melakukan ini menggunakan properti transform ?

Banyak pengembang tidak tahu bahwa properti transform dapat mengakumulasi aturan dan aturan n +1 akan merujuk ke posisi yang dicapai dalam aturan n , dan bukan ke posisi semula.

Apakah kamu bingung Mungkin contoh ini akan membantu Anda memulihkan:


Harap perhatikan bahwa kami tidak menggunakan variabel JavaScript apa pun untuk menyimpan posisi saat ini atau rotasi saat ini. Informasi ini tidak disimpan di mana pun! Solusinya sederhana jika Anda menulis:

 transform: translateX(20px); 

Dan kemudian tambahkan aturan berikut:

 transform: translateX(20px) translateX(40px) 

Aturan kedua tidak akan menggantikan yang pertama - mereka akan diterapkan secara berurutan. Fakta bahwa mereka diterapkan secara konsisten adalah penting. Saat Anda memutar elemen, Anda mengubah kerangka referensi, dan aturan lebih lanjut akan berlaku untuk kerangka referensi baru. Jadi entri ini:

 transform: rotateZ(20deg) translateX(30px) 

akan berbeda dari ini:

 transform: translateX(30px) rotateZ(20deg) 

Anda juga dapat menggabungkan unit yang berbeda. Misalnya, Anda dapat memusatkan elemen berukuran 600 sebagai berikut:

 transform: translateX(50vw) translateX(-300px) 

Tetapi jika Anda tidak akan menghidupkannya, maka mungkin calc () adalah alternatif terbaik.

Jika Anda khawatir tentang kura-kura, maka saya membuat fragmen lain yang menciptakan kembali dinamika:


Sayangnya, dia belum menggambar. Tetapi, jika Anda mau, Anda selalu bisa menerapkan fungsi menggambar.

Margin luar dan dalam dihitung searah jarum jam

Sangat mudah dan banyak orang berpikir bahwa saya menulis hal-hal yang dangkal, tetapi saya melihat begitu banyak orang berjuang dengan merangkak sehingga saya berhenti menerima begitu saja.

Banyak pengembang tidak menyadari bahwa hampir setiap properti CSS memiliki alternatif singkat. Pengembang lain mengetahui hal ini, tetapi terus menggunakan versi lengkap karena mereka tidak pernah ingat urutannya.

Biarkan saya memberi Anda petunjuk:
Indentasi dan batas mengikuti searah jarum jam

Saya akan menjelaskannya dengan lebih sederhana. Anda dapat menggunakannya dengan percaya diri:

 padding-top: 3px; padding-left: 6px; padding-right: 6px; padding-bottom: 3px; 

Tetapi dengan cara yang sama, Anda dapat menggunakan alternatif yang lebih pendek:

 padding: 3px 6px 3px 6px; 

Urutannya mudah diingat - lihat saja arloji ini:



Mulai pukul 12:00 dan lanjutkan searah jarum jam. Anda akan mendapatkan pesanan yang benar.

Jika Anda hanya menggunakan dua nilai:

 padding: 2px 4px; 

Browser akan mengembangkannya dengan mengulangi parameter:

 padding: 2px 4px 2px 4px; 

Jika Anda menggunakan tiga nilai:

 padding: 2px 4px 6px; 

Browser akan menggunakan rata-rata untuk tepi kiri dan kanan, seolah-olah Anda menulis:

 padding: 2px 4px 6px 4px; 

Latar belakang mendukung banyak gambar

Ini adalah salah satu properti yang paling tidak dikenal, meskipun didukung secara luas.

Anda tahu bahwa Anda dapat menentukan URL gambar di dalam properti background , tetapi jika perlu, Anda dapat memasukkan sebanyak mungkin gambar yang Anda inginkan. Yang harus Anda lakukan adalah memisahkannya dengan koma:

 background: url('first-image.jpeg') top left, url('second-image.jpeg') bottom right; 

Mengapa ini bisa membantu? Apa pendapat Anda tentang Linus Torvalds terhadap matahari terbit yang dihasilkan CSS?


Anda juga dapat menyusun gambar persegi panjang dengan menambahkan batas berbayang yang sangat populer di Instagram. Untuk melakukan ini, saya mengulangi gambar yang sama dua kali, meningkatkan gambar latar 5 kali:

Sentuh Deteksi Perangkat

Berkat pertanyaan media, kami dapat membuat situs web fleksibel, dan menyesuaikan tata letak ke layar dengan berbagai ukuran. Tetapi ini tidak cukup!

Ponsel pintar, tablet, dan komputer pribadi klasik berbeda sifatnya. Ini bukan tentang ukuran layar.

Anda menggunakan gerakan layar pada perangkat layar sentuh, dan alat-alat seperti HammerJS membantu. Dengan mouse, Anda hanya mengklik, tetapi dengan akurasi yang lebih besar. Jika Anda telah mengadaptasi situs Anda ke layar dengan ukuran yang berbeda, Anda mungkin berpikir tentang fleksibilitasnya di arah lain dan dukungan untuk berbagai jenis input!

Anda tidak perlu kode JavaScript yang rumit untuk mendefinisikan agen-pengguna. Semua yang Anda butuhkan ada di CSS:

 @media (any-pointer: fine) { /* These rules will be applied to not-touchscreen devices */ } @media (any-pointer: coarse) { /* These rules will be applied to touchscreen devices only */ } 

Berikut ini sebuah contoh:


Petunjuk : Anda tidak perlu memeriksa smartphone, Anda dapat mensimulasikan perangkat sentuh menggunakan alat Google Chrome hanya dengan mengklik ikon ini:



Ini sangat berguna, dan saya tidak tahu mengapa itu tidak umum, meskipun didukung dengan baik. Sebagai contoh, saya menggunakannya dalam korsel untuk menyembunyikan ikon chevron pada perangkat layar sentuh untuk tampilan yang lebih alami.

Pada akhirnya, Anda dapat memberikan file touchscreen.css dan mengimpornya jika perlu:

 @import url('touchscreen.css') screen and (any-pointer: coarse); 

Catatan : Firefox saat ini tidak didukung, seperti yang Anda lihat di caniuse.com .

Lekukan runtuh

^{"Dan awasi tangga. Mereka suka berubah. ”(Percy Weasley ke Harry Potter)}

Saya suka CSS - bahasa yang bersih, tepat dan elegan, memiliki semua yang dibutuhkan pengembang.

Anda menerapkan aturan dan itu berhasil. Tetapi ketika saya pikir saya tahu segalanya tentang CSS, ini terjadi:


Apa yang sedang terjadi? Anda mungkin mengharapkan teks berada di dalam bidang tajuk, tetapi judulnya ada di bawah. Saya tidak menginginkan situasi seperti itu. Kemudian, saya menemukan bahwa lekukan membingungkan.

Apa artinya ini? Misalkan kita ingin membuat tata letak seperti ini:



Kami membuat markup untuk tiga elemen dan menetapkan ketinggian yang berbeda untuk batas atas untuk masing-masing elemen. Semuanya sepertinya bekerja? Tidak.

Jika Anda melakukannya, browser akan melihat tiga bidang yang berdekatan dan ingin menggabungkannya menjadi satu blok besar.

Hasilnya akan terlihat seperti ini:



Apa yang terjadi Saya tidak tahu. Ini adalah fitur historis CSS. Saya pikir ketika CSS distandarisasi, bidang tidak menjadi masalah sama sekali, dan tata letak tidak serumit seperti sekarang. Karena itu, para pengembang memutuskan bahwa ini adalah fitur yang bermanfaat. Tapi sekarang itu tidak masuk akal.

Jika Anda telah bekerja dengan CSS selama bertahun-tahun dan tidak pernah mengalami masalah ini, ini karena indentasi hanya digabungkan ketika:

• bidangnya vertikal (ini tidak terjadi dengan bidang horizontal);
• elemen eksternal tidak mengandung teks atau konten lain;
• tidak ada lekukan atau batas yang ditetapkan;
• properti tampilan didefinisikan sebagai "blok";
• properti melimpah berbeda dari "awal";
• lekukan tidak negatif.

Dan daftarnya berlanjut. Jika Anda mengalami masalah ini, Anda dapat mengecualikan salah satu dari kondisi ini (kecuali yang pertama), dan lekukan akan kembali normal. Anda juga dapat menghindari penggunaan margin-top , dan gunakan top dan padding-top sebagai gantinya.

Harap perhatikan bahwa ini dapat terjadi untuk elemen dengan level yang sama. Jika Anda memiliki dua elemen terkait satu di atas yang lain dan Anda menetapkan margin-bottom: 30px untuk yang pertama dan margin-top: 60px untuk yang kedua, maka akan ada masalah dengan yang terkecil. Indentasi sebagai hasilnya tidak akan sama dengan 30 + 60 = 90 piksel, tetapi akan sama dengan nilai terbesar (30, 60) = 60 piksel.

Pikiran terakhir

Itu saja! Saya harap saya tidak membuang-buang waktu untuk artikel itu dan ternyata bermanfaat bagi Anda.

Lihatlah VPS.today , situs untuk mencari server virtual. 1500 tarif dari 130 host, antarmuka yang nyaman dan sejumlah besar kriteria untuk menemukan server virtual terbaik.