28112 sujets

CSS et mise en forme, CSS3

Bonjour,

Je voulais placer une image dans le :before d'un div.
J'ai donc écrit

div.Ma_classe:before {
content: url(chemin_de_l'image)


L'image n'apparaît pas ! Smiley decu
Je cherche sur plusieurs sites explicatifs, tous indiquent url(chemin)

A un moment, j'ai essayé de mettre le chemin entre guillemets. Et là, ça a marché : l'image est apparue. Smiley smile

Vous pouvez m'expliquer pourquoi les sites n'indiquent pas qu'il faut mettre le chemin de l'image entre guillemets ?

Merci d'avance
Borcade a écrit :
Vous pouvez m'expliquer pourquoi les sites n'indiquent pas qu'il faut mettre le chemin de l'image entre guillemets ?

Tout simplement parce qu'ils ne sont pas obligatoires...
Cf. documentation MDN sur la valeur d'attribut URL().
Le type de donnée CSS <url> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle url(). Il est utilisé avec de nombreuses propriétés telles que background-image, cursor, list-style, etc.
L'URL peut être indiquée telle quelle comme argument de la fonction url()et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).
Merci sepecat pour ta réponse.

Pourquoi alors l'image ne s'affiche pas lorsque je ne mets pas de guillemets et s'affiche quand j'en mets ?
(J'utilise Chrome, mais j'ai essayé avec Firefox avec le même résultat.)
Borcade a écrit :
Merci sepecat pour ta réponse.
Pourquoi alors l'image ne s'affiche pas lorsque je ne mets pas de guillemets et s'affiche quand j'en mets ?
(J'utilise Chrome, mais j'ai essayé avec Firefox avec le même résultat.)

Probablement parce que les navigateurs ont une vision plus restrictive de la valeur à passer comme URL et considèrent qu'il faut l'encadrer par des délimiteurs (apostrophe ou guillemet).
Perso, j'avoue n'avoir pas croisé jusqu'à présent de valeur de ce type sans délimiteurs, mais il semble bien que cette forme soit autorisée.
Au cas où, mieux vaut les mettre systématiquement Smiley smile
Bonjour Borcade,

Perso, j'ai jamais mis de quote et jamais eu de problème.
Tu peux me donner l'url que tu as mis a la place de chemin_de_l'image
Modérateur
Bonjour,

A noter que les guillemets deviennent obligatoires dès lors que l'uri contient au moins un espace.

Smiley smile
Meilleure solution
Greg_Lumiere a écrit :
Bonjour,
A noter que les guillemets deviennent obligatoires dès lors que l'uri contient au moins un espace.
Smiley smile

En complément des réponses précédentes, cf. méthode d'analyse d'un url_token telle que décrite par le W3C pour la spécification CSS3 :
 Execute the following steps in order:
    1 - Initially create a <url-token> with its value set to the empty string.
    2 - Consume as much whitespace as possible.
    3 - If the next input code point is EOF, return the <url-token>.
    4 - If the next input code point is a U+0022 QUOTATION MARK (") or U+0027 APOSTROPHE (‘), then:
        1 - Consume a string token with the current input code point as the ending code point.
        2 - If a <bad-string-token> was returned, consume the remnants of a bad url, create a <bad-url-token>, and return it.
        3 - Set the <url-token>’s value to the returned <string-token>’s value.
        4 - Consume as much whitespace as possible.
        5 - If the next input code point is U+0029 RIGHT PARENTHESIS ()) or EOF, consume it and return the <url-token>; otherwise, consume the remnants of a bad url, create a <bad-url-token>, and return it. 
    5 - Repeatedly consume the next input code point from the stream:
    U+0029 RIGHT PARENTHESIS ())
    EOF
        Return the <url-token>. 
    whitespace
        Consume as much whitespace as possible. If the next input code point is U+0029 RIGHT PARENTHESIS ()) or EOF, consume it and return the <url-token>; otherwise, consume the remnants of a bad url, create a <bad-url-token>, and return it. 
    U+0022 QUOTATION MARK (")
    U+0027 APOSTROPHE (’)
    U+0028 LEFT PARENTHESIS (()
    non-printable code point
        This is a parse error. Consume the remnants of a bad url, create a <bad-url-token>, and return it. 
    U+005C REVERSE SOLIDUS
        If the stream starts with a valid escape, consume an escaped code point and append the returned code point to the <url-token>’s value.
        Otherwise, this is a parse error. Consume the remnants of a bad url, create a <bad-url-token>, and return it. 
    anything else
        Append the current input code point to the <url-token>’s value. 
Greg_Lumiere a écrit :
Bonjour,
A noter que les guillemets deviennent obligatoires dès lors que l'uri contient au moins un espace.
Smiley smile


Bonjour Greg
Merci de cette indication.
Effectivement le nom de mon fichier contient des espaces !
Modérateur
Olivier C a écrit :
Notez que cette règle est aussi valable en html.
On peut d'ailleurs en noter bien plus comme par exemple en ligne de commande Windows, en php etc etc

En fait considérer cette règle comme une règle générale me semble être la meilleure chose à faire.

Donc si mon url ou chemin de fichier est susceptible d'avoir des espaces: guillemets doubles sinon guillemets simple.

Voir même carrément plus simple à retenir:
Si url ou chemin de fichier ===>>>>> guillemets doubles !
Et là c'est tranquillité d'esprit assurée.
Smiley ravi
Modifié par Greg_Lumiere (29 May 2018 - 12:14)