web-dev-qa-db-fra.com

Comment utiliser l'ID d'élément HTML généré par JSF avec deux points ":" dans les sélecteurs CSS?

J'ai travaillé avec un simple projet Java EE utilisant JSF.

<h:form id="phoneForm">
    <h:dataTable id="phoneTable">

    </h:dataTable>
</h:form>

J'ai essayé de définir CSS via #phoneTable { ... }, mais cela ne fonctionne pas. Lors de l'inspection de la source HTML côté client, il apparaît que la table HTML générée par JSF obtient un ID client sous la forme de id="phoneForm:phoneTable". Je ne peux pas appliquer CSS via #phoneForm:phoneTable { ... }, car les deux points indiquent le début d'un pseudosélecteur et provoquent une erreur.

Comment puis-je l'utiliser de toute façon dans les sélecteurs CSS?

cssjsfcss-selectorsfaceletsclientid
46
Dzung Nguyen

Le : est un caractère spécial dans les identificateurs CSS, il représente le début d'un sélecteur de pseudo-classe comme :hover, :first-child, etc. Il faudrait y échapper.

#phoneForm\:phoneTable {
    background: pink;
}

Cela ne fonctionne pas uniquement dans IE6/7. Si vous souhaitez également prendre en charge ces utilisateurs, utilisez \3A à la place (avec un espace derrière!)

#phoneForm\3A phoneTable {
    background: pink;
}

Ci-dessus fonctionne dans tous les navigateurs.

Il existe plusieurs autres façons de résoudre ce problème:

  1. Enveloppez-le simplement dans un élément HTML simple et stylisez-le à la place.

    <h:form id="phoneForm">
    <div id="phoneField">
        <h:dataTable id="phoneTable">

    avec

    #phoneField table {
    background: pink;
}

  2. Utilisez class au lieu de id. Par exemple.

    <h:dataTable id="phoneTable" styleClass="pink">

    avec

    .pink {
    background: pink;
}

    ou

    table.pink {
    background: pink;
}

    L'avantage supplémentaire est que cela permet une plus grande liberté d'abstraction. Le CSS est réutilisable sur plusieurs éléments sans avoir besoin d'ajouter des sélecteurs et/ou des propriétés copypaste lorsque vous souhaitez réutiliser les mêmes propriétés sur un ou plusieurs autres éléments.

  3. Depuis JSF 2.x uniquement: modifiez le séparateur JSF par défaut UINamingContainer par le paramètre de contexte suivant dans web.xml. Par exemple.

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

    Pour que le caractère séparateur devienne - au lieu de :.

    #phoneForm-phoneTable {
    background: pink;
}

    L'inconvénient est que vous devez vous assurer que vous n'utilisez pas ce personnage vous-même n'importe où dans les identifiants et c'est donc une approche très fragile.

  4. Depuis JSF 1.2 uniquement: désactivez le préfixe du formulaire id.

    <h:form prependId="false">
    <h:dataTable id="phoneTable">

    afin que vous puissiez utiliser

    #phoneTable {
    background: pink;
}

    L'inconvénient est que <f:ajax> ne pourra pas le trouver et qu'il est considéré comme une mauvaise pratique: IForm avec prependId = "false" casse <f: ajax render> . Cet attribut n'existe pas dans tous les autres composants UINamingContainer, vous devez donc toujours les traiter correctement (# 1 et/ou # 2 ci-dessus).

Dans votre cas spécifique, je pense que le transformer en une classe CSS comme décrit dans # 2 est la solution la plus appropriée. Une "table téléphonique" ne semble pas représenter un élément unique à l'échelle du site Web. Les éléments uniques réels à l'échelle du site Web tels que l'en-tête, le menu, le contenu, le pied de page, etc. ne sont généralement pas enveloppés dans des formulaires JSF ou d'autres conteneurs de nommage JSF, de sorte que leurs ID ne seraient pas préfixés de toute façon.

Voir également:

77
BalusC
<h:form prependId="false">

Ne fonctionne pas si vous utilisez un

<h:commandButton>
tag
0
Swarne27