Ciri CSS yang anda patut tahu

Hari ini saya ingin bercakap dengan anda tentang lima ciri CSS hebat yang mungkin akan mengubah cara anda menulis gaya. Jika anda belajar CSS, ciri ini akan menjadikan hidup anda lebih mudah. Mari kita lihat satu persatu, dengan contoh yang menunjukkan cara kita melakukan sesuatu "dengan tangan" dan cara kita boleh memudahkannya dengan alatan ini.

1. calc(): Lakukan pengiraan terus dalam CSS anda?

Adakah anda mendapati diri anda menambah atau menolak nilai secara manual untuk melaraskan saiz elemen? Dengan calc(), anda boleh melakukannya terus dalam helaian gaya anda, tanpa memerlukan pengiraan terlebih dahulu.

Contoh tanpa calc():

.container {
  width: 70%;
  margin: 20px;
}

Contoh dengan calc():

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

Dengan calc(), anda boleh menggabungkan unit ukuran yang berbeza, seperti peratusan dan piksel, untuk mencapai reka bentuk yang lebih fleksibel dan boleh disesuaikan.

---

2. repeat(): Memudahkan penciptaan grid?

Jika anda menggunakan Tata Letak Grid, anda mungkin mendapati diri anda menulis lajur atau baris berulang. Dengan repeat(), anda boleh mengelakkan kod berlebihan dan meningkatkan kebolehbacaan.

Contoh tanpa ulangan():

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

Contoh dengan repeat():

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() sesuai untuk grid kompleks atau grid dengan corak yang ditetapkan

---

3. min(): Mengawal saiz dinamik maksimum?

min() membolehkan anda menentukan saiz terkecil antara beberapa nilai, sesuai untuk reka bentuk responsif.

Contoh tanpa min():

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

Contoh dengan min():

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

Dengan min(), anda mengurangkan peraturan pertanyaan media dan mencapai reka bentuk yang lebih lancar.

---

4. clamp(): Kawalan saiz penuh dalam susun atur responsif

clamp() membolehkan anda menentukan julat saiz minimum dan maksimum, sesuai untuk fon dan elemen yang perlu skala mengikut saiz skrin.

Contoh tanpa pengapit():

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

Contoh dengan pengapit():

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

Dengan clamp(), anda menghapuskan beberapa peraturan pertanyaan media dan mendapatkan reka letak yang lebih fleksibel.

---

5. fit-content(): Muatkan lebar pada kandungan

fit-content() membolehkan anda menyesuaikan lebar elemen dengan saiz kandungannya, tetapi tanpa ia berkembang melebihi nilai maksimum yang anda tentukan. Ini sangat berguna untuk mencipta butang atau elemen yang menyesuaikan secara dinamik kepada teks yang terkandung di dalamnya, tetapi tidak menjadi terlalu besar pada skrin lebar.

Contoh tanpa fit-content():

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(Dalam kes ini, jika teks butang sangat panjang, butang akan diregangkan terlalu lama.)

Contoh dengan fit-content():

.container {
  width: 70%;
  margin: 20px;
}

Dengan fit-content(), butang akan muat dengan saiz teks, tetapi tidak akan melebihi 200px lebarnya. Jika teks lebih pendek, butang akan menjadi lebih kecil.

Atas ialah kandungan terperinci Ciri CSS yang anda patut tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!