Bagaimana untuk Mengendalikan Kolon Dijana JSF dalam Pemilih CSS?

ID Elemen HTML Dijana JSF: Escape Colons dalam CSS Selectors

Apabila bekerja dengan JSF (JavaServer Faces), anda mungkin menghadapi ID elemen HTML dijana dengan titik bertindih (:). Ini boleh menyebabkan isu apabila menggunakan pemilih CSS, di mana titik bertindih menunjukkan permulaan pemilih pseudo.

Asal usul ID Dijajah:

JSF menjana ID klien untuk elemen HTML dengan lalai dalam bentuk "FormID:ElementID". Ini ialah cara mudah untuk mengendalikan ID yang bercanggah dalam aplikasi JSF.

Isu dengan Pemilih CSS:

Malangnya, titik bertindih dalam pemilih CSS mewakili permulaan pemilih pseudo , seperti :hover atau :first-child. Percubaan untuk menggunakan pemilih seperti #FormID:ElementID akan mengakibatkan ralat.

Penyelesaian:

1. Melarikan diri dari Colon dengan "" atau "3A":

#FormID\:ElementID {
  /* CSS styles */
}

#FormIDA ElementID {
  /* CSS styles */
}

2. Gunakan Pembungkus HTML dengan ID Biasa:

<div>
<pre class="brush:php;toolbar:false">#phoneWrapper table {
  /* CSS styles */
}

3. Tukar UINamingContainer Separator:

Dalam JSF 2.x, anda boleh mengubah suai aksara pemisah lalai dalam bahagian konteks-param web.xml:

<context-param>
  <param-name>javax.faces.SEPARATOR_CHAR</param-name>
  <param-value>-</param-value>
</context-param>

Ini akan berubah ID yang dijana kepada "FormID-ElementID", menjadikannya lebih serasi dengan CSS pemilih.

4. Lumpuhkan Prapending ID Borang:

Dalam JSF 1.2 atau lebih baru, anda boleh melumpuhkan pendahuluan ID borang dengan menambahkan prependId="false" pada teg h:form:

<form prependid="false">
  <datatable></datatable>
</form>

Walau bagaimanapun, pendekatan ini tidak disyorkan kerana ia boleh memberi kesan kepada fungsi AJAX.

5. Gunakan Kelas CSS:

<datatable></datatable>

.phone-table {
  /* CSS styles */
}

Pengesyoran:

Untuk kebanyakan kes, disyorkan untuk melarikan diri dari kolon menggunakan aksara "". Ini ialah penyelesaian yang mudah dan serasi merentas penyemak imbas.