Lain -lain melihat helah radius sempadan bersyarat

Ingatlah Ahmad Shadeed Facebook CSS Sempadan Radius "togol"? Saya sebelum ini meliputi teknik pintar ini. Artikel seterusnya menawarkan analisis yang lebih mendalam.

Michelle Barker's "Evaluating Clever CSS Solutions" mempersoalkan kebijaksanaan kod yang terlalu pandai:

Walaupun tidak dapat dinafikan dan menarik, saya bersetuju dengan surat berita CSS-Tricks Robin Rendle: "Rasanya agak pandai."

Sentimen ini bergema. Teknik sedemikian mempunyai tempat mereka, mungkin dalam sumber Facebook. Walau bagaimanapun, mengutamakan kebolehbacaan (misalnya, menggunakan pertanyaan media) lebih bijak tetapi berpotensi kurang dapat diselenggarakan secara umumnya lebih baik.

Stefan Judis meneroka mencapai kesan "radius sempadan bersyarat" yang sama menggunakan pertanyaan kontena yang akan datang:

 /* Sekiranya lebar bekas adalah sama dengan atau lebih besar daripada 
   lebar viewport, keluarkan radius sempadan */
@Container (width> = 100vw) {
  .Conditional-Sorder-Radius {
    Sempadan-radius: 0;
  }
}

Pendekatan ini jauh lebih jelas. Stefan juga mencadangkan potensi manfaat hipotesis @when ciri:

 @When container (width> = 100vw) {
  .Conditional-Sorder-Radius {
    Sempadan-radius: 0;
  }
}
@else {
  .Conditional-Sorder-Radius {
    Radius sempadan: 1em;
  }
}

Kelayakan @when ini masih tidak menentu. Walau bagaimanapun, kemasukannya akan meningkatkan kebolehbacaan CSS dan konsistensi logik.

Artikel sebelumnya secara ringkas menyebut peranan pendaraban dalam mencegah nilai pertengahan: hasilnya adalah sama ada 8px atau 0px. Untuk menjelaskan ini, demonstrasi video dimasukkan di bawah. (Nota: video akan dimasukkan di sini dalam penerbitan sebenar.)

Atas ialah kandungan terperinci Lain -lain melihat helah radius sempadan bersyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!