Wie gehe ich mit JSF-generierten Doppelpunkten in CSS-Selektoren um?

JSF-generierte HTML-Element-IDs: Escape-Doppelpunkte in CSS-Selektoren

Bei der Arbeit mit JSF (JavaServer Faces) können Sie auf HTML-Element-IDs stoßen wird mit Doppelpunkten (:) generiert. Dies kann bei der Verwendung von CSS-Selektoren zu Problemen führen, bei denen Doppelpunkte den Beginn von Pseudo-Selektoren anzeigen.

Ursprung kolonisierter IDs:

JSF generiert Client-IDs für HTML-Elemente durch Standardmäßig in der Form „FormID:ElementID“. Dies ist eine bequeme Möglichkeit, mit widersprüchlichen IDs in einer JSF-Anwendung umzugehen.

Problem mit CSS-Selektoren:

Leider stellen Doppelpunkte in CSS-Selektoren den Anfang von Pseudo-Selektoren dar , wie zum Beispiel :hover oder :first-child. Der Versuch, Selektoren wie #FormID:ElementID zu verwenden, führt zu einem Fehler.

Lösungen:

1. Entkomme dem Doppelpunkt mit „" oder „3A“:

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

#FormIDA ElementID {
  /* CSS styles */
}

2. Verwenden Sie einen HTML-Wrapper mit einer einfachen ID:

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

3. Ändern Sie das UINamingContainer-Trennzeichen:

In JSF 2.x können Sie das Standardtrennzeichen im Abschnitt context-param von web.xml ändern:

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

Dies wird sich ändern Die generierten IDs werden in „FormID-ElementID“ umgewandelt, wodurch sie besser mit CSS-Selektoren kompatibel sind.

4. Voranstellen der Formular-ID deaktivieren:

In JSF 1.2 oder höher können Sie das Voranstellen der Formular-ID deaktivieren, indem Sie prependId="false" zum h:form-Tag hinzufügen:

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

Dieser Ansatz wird jedoch nicht empfohlen, da er die AJAX-Funktionalität beeinträchtigen kann.

5. Verwenden Sie CSS-Klassen:

<datatable></datatable>

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

Empfehlung:

In den meisten Fällen wird empfohlen, den Doppelpunkt mit dem Zeichen „“ zu maskieren. Dies ist eine einfache und browserübergreifende kompatible Lösung.