Properti CSS yang kurang dikenal

Ada banyak properti CSS yang tidak diketahui oleh beberapa desainer. Atau - mereka tahu, tetapi mereka lupa untuk menggunakan properti ini di mana mereka bisa sangat bermanfaat. Beberapa properti ini dapat membantu Anda menghindari menggunakan JavaScript untuk mencapai beberapa hasil, sementara yang lain dapat menghemat waktu Anda dengan menulis lebih sedikit kode CSS. Saat melakukan pengembangan front-end, saya selalu menemukan properti serupa. Suatu hari saya berpikir tentang mengambil dan mendaftarkan properti CSS yang menarik tetapi jarang digunakan. Beginilah artikel ini lahir.



Di sini saya akan memperkenalkan beberapa properti CSS yang saya harap layak Anda pertimbangkan. Sementara berbicara tentang beberapa dari mereka yang tidak memiliki dukungan browser yang sempurna, saya akan berbicara tentang bagaimana menerapkannya menggunakan teknologi peningkatan progresif. Ini akan memungkinkan Anda untuk menikmati properti ini tanpa khawatir tentang dukungan browser.

Menggunakan properti place-items dengan CSS Grid

Contoh menggunakan properti tempat-item yang



saya pelajari tentang trik ini daritweet ini . Properti iniplace-itemsmemungkinkan Anda untuk memusatkan elemen secara horizontal dan vertikal, sambil melakukannya dengan jumlah minimum kode CSS.



Berikut ini HTML yang digunakan untuk membentuk halaman dari gambar sebelumnya:

<div class="hero">
    <div class="hero-wrapper">
        <h2><font color="#3AC1EF">CSS is awesome</font></h2>
        <p>Yes, this is a hero section made for fun.</p>
        <a href="#">See more</a>
    </div>
</div>

Berikut adalah kode gaya:

.hero {
    display: grid;
    place-items: center;
}

Sebelum masuk ke detail, saya pikir itu layak menyebutkan bahwa properti place-itemsadalah singkatan yang digunakan untuk mengatur properti justify-itemsdan align-items. Jika properti ini tidak digunakan, maka kode CSS di atas akan terlihat seperti ini:

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

Anda mungkin tertarik dengan detail tentang cara kerja properti ini. Biarkan saya memberi tahu Anda tentang mereka. Ketika properti place-itemsdigunakan, ini diterapkan ke setiap sel di kisi. Ini berarti bahwa itu akan meluruskan isi semua sel. Artinya, dapat digunakan untuk menata segala sesuatu yang ditempatkan di sel-sel grid. Untuk mendemonstrasikan ini, mari kita lihat merancang kisi multi-sel:

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

Menggunakan gaya seperti ini akan menghasilkan hasil yang ditunjukkan pada gambar berikut.





Isi semua sel terpusat

Menggunakan properti margin lama yang baik dengan CSS Flexbox

Menyelaraskan item ke tengah saat bekerja dengan tata letak Flexbox



Menggunakan desainmargin: autodalam tata letak Flexbox membuatnya sangat mudah untuk memusatkan, secara horizontal dan vertikal menyelaraskan item.



Inilah markupnya:

<div class="parent">
    <div class="child"></div>
</div>

Inilah gayanya:

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}

.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

Peluru daftar styling

Peluru Daftar Bergaya Pertama, izinkan saya mengakui bahwa saya tidak menyadari fakta bahwa lingkaran kecil di sebelah setiap item daftar berbutir disebut peluru. Sebelum saya tahu tentang keberadaan pseudo-elemen::marker, saya mendirikan kalangan ini dengan mengatur ulang gaya daftar dan menggunakan::beforeataupseudo-elemen::after. Tetapi ini sama sekali tidak praktis dan salah. Maksud saya yang berikut ini:

ul {
    list-style: none;
    padding: 0;
}

li {
    color: #222;
}

li::before {
    content: "•";
    color: #ccc;
    margin-right: 0.5em;
}

Seperti yang Anda lihat, di sini warna elemen <li>ditetapkan sebagai #222, dan warna elemen pseudo ::beforeadalah ini #ccc. Jika Anda ingin y <li>dan ::beforememiliki warna yang sama, maka karena marker mewarisi warna <li>, maka tidak perlu untuk elemen pseudo.



Dan inilah cara tugas yang sama diselesaikan menggunakan ::marker:

li {
    color: #222;
}

li::marker {
    color: #ccc;
}

Bagi saya, pendekatan ini jauh lebih sederhana dan lebih mudah daripada pendekatan yang menggunakan elemen pseudo ::before.



Elemen pseudo ::marker didukung di Firefox 68+ dan Safari 11.1+. Dan di Chrome dan Edge 80+ untuk mengaktifkan dukungannya, Anda harus mengaktifkan bendera yang sesuai.

Properti perataan teks

Seiring meningkatnya popularitas CSS Grid dan CSS Flexbox, beberapa pengembang yang baru mulai menggunakan CSS sering menggunakan mekanisme modern untuk memusatkan dan menyelaraskan konten, daripada properti lama text-align. Tetapi properti ini masih berfungsi dengan baik.



Penggunaan text-align: centermemungkinkan Anda untuk menyelaraskan materi halaman dengan cepat dan mudah. Pertimbangkan sebuah contoh.





Menyelaraskan konten di bagian atas halaman



Konten bagian ini harus di tengah. Apa yang akan digunakan untuk tata letak bagian ini? Flexbox atau Kotak? Bahkan, masalah ini dapat dengan mudah diselesaikan dengan hanya menggunakan propertitext-align.



Bagaimana dengan properti ini dengan dukungan browser? Saya sarankan Anda mencari tahu sendiri.

Nilai inline-flex dari properti tampilan

Menggunakan nilai properti tampilan inline-flex



Apakah Anda pernah perlu menampilkan beberapa ikon dalam wadah Flexbox yang merupakan elemen inline, menjadikan masing-masing ikon tersebut elemen Flexbox? Nilaiinline-flexpropertidimaksudkan untuk menyelesaikan masalah inidisplay.



Berikut ini markup yang menggambarkan sekumpulan elemen:

<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>

Berikut kode untuk menata elemen ini:

.badge {
    display: inline-flex; /*    */
    justify-content: center;
    align-items: center;
}

Lain kali Anda membutuhkan elemen sebaris dengan fungsi tata letak Flexbox, pastikan untuk menggunakannya inline-flex. Sangat nyaman.

Properti aturan-kolom

Menerapkan properti aturan-kolom



Pengaturan huruf berdasarkan kolom adalah teknik khusus untuk membuat tata letak halaman. Saat Anda menggunakannya, elemen-elemennya diatur dalam kolom. Biasanya teknik ini digunakan untuk menyelaraskan teks yang ditempatkan di elemen<p>. Tetapi tata letak multi-kolom memiliki satu fitur yang digunakan jauh lebih jarang daripada yang seharusnya. Ini tentang kemampuan untuk menambahkan pemisah kolom. Saya belajar tentang ini dariartikel ini .

p {
    columns: 3;
    column-rule: solid 2px #222;
}

Nama properti column-ruletampaknya tidak secara akurat mencerminkan tujuannya. Akan lebih logis untuk menamainya, misalnya, "border-right". Properti ini sangat didukung oleh semua browser saat ini (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).

Properti objek-fit

Menerapkan properti objek-fit



Properti CSSobject-fitadalah tongkat ajaib desainer web. Ketika saya mengetahuinya, menggunakannya, saya mulai bekerja dengan cara baru, yang membuat hidup saya jauh lebih mudah. Misalnya, saya baru-baru ini mengerjakan bagian dari satu situs yang menampilkan serangkaian logo. Bagian-bagian ini kadang-kadang cukup sulit untuk dibuat karena fakta bahwa logo memiliki ukuran yang berbeda. Beberapa dari mereka diregangkan secara horizontal, beberapa di antaranya vertikal.



Dengan menggunakan properti,object-fit: containsaya dapat memanipulasi propertiwidthdanheightlogo, yang memungkinkan saya menempatkan logo di area dengan lebar dan tinggi yang telah ditentukan.



Inilah markupnya:

<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!--   --> </li>
</ul>

Inilah gayanya:

img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

Dengan mengatur properti widthdan heightelemen <img>, kita dapat mengontrol area di mana logo akan ditempatkan. Sangat nyaman. Lebih baik lagi, kita dapat menempatkan kode di atas dalam arahan @supportsuntuk menghindari peregangan gambar di browser yang tidak mendukung object-fit.

@supports (object-fit: contain) {
  img {
    object-fit: contain;
    height: 75px;
  }
}

Apakah Anda tahu tentang beberapa properti CSS yang menarik tetapi kurang dikenal?