CSS Shorthand vs. Longhand - Bila Menggunakan Yang

Shorthand dan Longhand - satu ringkas dan tepat lagi. Satu datang kepada kewujudan kehendak untuk keringkasan, sementara yang lain berdiri teguh untuk memelihara kejelasan. Sama ada, mereka mempunyai tujuan, kebaikan dan keburukan mereka, jadi untuk bercakap.

Siaran ini akan menyerlahkan beberapa cahaya pada kedua nota catur CSS dan notasi tangan, sementara menyimpulkan yang paling baik untuk digunakan untuk keadaan mana.

Apa itu Property Shorthand?

Harta shorthand adalah harta yang mengambil nilai untuk set ciri CSS lain. Sebagai contoh, kita boleh menetapkan nilai untuk lebar sempadan, gaya sempadan dan warna sempadan menggunakan sempadan harta sahaja.

Pada asasnya,

 sempadan: 1px pepejal biru; 

adalah sama seperti:

 lebar sempadan: 1px; gaya sempadan: pepejal; warna sempadan: biru;

Dengan ini, kita tidak perlu mengisytiharkan nilai harta individu secara berasingan (yang berlebihan, memakan masa dan ruang). Ia juga menetapkan semula sifat-sifat kiri dalam perisytiharan, sesuatu yang boleh diambil kesempatan.

Bagaimanakah ia berfungsi?

Seperti yang dinyatakan sebelum ini, kami menulis satu set nilai harta lain dalam singkatan, perintah itu tidak kira jika semua nilai harta dalam singkatan adalah jenis yang berbeza seperti dalam sempadan. Untuk hartanah dengan jenis nilai yang sama seperti margin, pesanan memang penting. Apabila ragu-ragu, ingat mengikut arah jam!

Sekarang, bagaimana jika kita kehilangan harta atau dua dalam deklarasi? Dalam contoh di atas, katakan kita tidak diendahkan gaya sempadan.

 sempadan: 1px biru; 

Kami tidak akan dapat melihat sempadan lagi, bukan kerana harta pendek tidak berfungsi tetapi kerana gaya sempadan yang kita ketinggalan, mendapat nilai lalai tiada. Ini adalah bagaimana harta tanah itu diturunkan.

 sempadan: 1px tiada biru; 

Sekarang mari kita jatuhkan 1px untuk lebar sempadan dan simpan yang lain dua:

 sempadan: biru pepejal;

Kami akan dapat melihat sempadan, hanya dengan lebar tebal dan itu kerana lebar sempadan harta mendapat nilai lalai sederhana.

 sempadan: sederhana pepejal biru; 

Ini menyimpulkan untuk kita itu apabila nilai hartanah ditinggalkan dalam perisytiharan pendek, bahawa harta itu mengambil nilai asalnya (walaupun ia perlu mengatasi sebarang nilai sebelumnya yang diberikan untuk yang sama).

Sekiranya ada lebar sempadan: 1px; untuk elemen di suatu tempat dahulu sempadan: biru pepejal; untuk yang sama, lebar sempadan akan menjadi sederhana (nilai lalai), tidak 1px.

Satu lagi perkara yang perlu disebutkan ialah kita tidak boleh menggunakan nilai-nilai seperti mewarisi, awal atau tidak disetkan, yang tersedia untuk semua sifat CSS, dalam nota ringkas. Sekiranya kita menggunakannya, penyemak imbas tidak akan dapat mengetahui dengan tepat mana harta yang sepatutnya mewakili dalam singkatan - keseluruhan deklarasi akan dijatuhkan.

The semua harta

Terdapat satu sifat tersendiri CSS yang boleh tetapkan nilai untuk semua sifat CSS. Nilai-lebar CSS mewarisi, awal dan tidak disetkan adalah terpakai kepada semua sifat dan oleh itu ini adalah satu-satunya nilai yang diterima oleh semua harta.

 div all: initial

Ini akan menjadikan div unsur parit SEMUA nilai harta CSS yang dimiliki, dan menetapkan semula nilai lalai dalam setiap daripada mereka.

⚠ Amaran

Jangan salah guna semua harta. Keperluan untuk itu mungkin timbul hanya dalam keadaan yang sangat jarang, apabila kita tidak dapat menyentuh sebarang kod CSS sebelumnya tentang elemen yang kami ingin memohon harta ini kepada.

Catatan: Harta CSS warna mengambil nilai heksadesimal dengan nota penekanan jika kedua-dua nilai hex dalam setiap saluran warna adalah sama. Sebagai contoh, latar belakang: # 445599; sama seperti latar belakang: # 459;.

Apa gunanya harta?

The sifat individu yang boleh dimasukkan ke dalam harta pendek dipanggil harta tanah. Beberapa contoh adalah; imej latar belakang, margin-left, tempoh masa animasi, dan lain-lain.

Mengapa kita perlu menggunakannya?

Walaupun terdapat alternatif alternatif yang mudah digunakan, mereka mempunyai kelemahan. Ingatlah pada mulanya kita melihat bagaimana kelengahan mengatasi apa-apa harta yang ditinggalkan dengan nilai lalai mereka? Ini boleh jadi masalah jika tetapan semula tidak diingini.

Ambil fon contohnya. Mari kita gunakannya di h4 elemen (yang mempunyai gaya penyemak imbas lalai font-weight: bold)

 fon: 20px "kurier baru"; 

Dalam kod ringkas itu, tiada nilai yang ada untuk berat badan harta, oleh itu yang font-weight: bold(gaya lalai pelayar) akan ditindih oleh nilai lalai font-weight: normal menyebabkannya h4 elemen untuk kehilangan gaya berani, yang mungkin tidak dimaksudkan.

Jadi, untuk contoh di atas, mudah dua sifat longhand, Saiz huruf dan keluarga font sempurna.

Juga, menggunakan trik untuk memberikan hanya satu atau dua nilai harta tidak sangat berguna. Kenapa memberikan kerja tambahan penyemak imbas untuk mentafsir setiap harta tunggal (termasuk orang yang ditinggalkan) dalam singkatan, apabila hanya diperlukan untuk bekerja?

Pengeluaran diketepikan, semasa peringkat pembangunan, sesetengah pemaju (terutamanya pemula) boleh mencari menggunakan notasi longgar lebih mudah untuk berfungsi dengan lebih cepat daripada pembacaan dan kejelasan yang lebih baik.

Kesimpulannya

Pada masa kini dengan kemungkinan pengekodan cepat (dengan bantuan alat seperti Emmet) dan pengurangan, kebolehpercayaan yang tinggi pada singkatan tidak diperlukan, tetapi pada masa yang sama, ia adalah sangat logik untuk mengetik margin: 0;. Konteks di mana kami memilih notasi CSS kami akan berbeza-beza dan apa yang perlu kita lakukan adalah memikirkan apa notasi yang akan berfungsi dengan baik untuk kita dan kapan.