[Résolu] P:target:first-line et background font mauvais ménage.

Bonjour à tous .

Certains paragraphes dans mes pages HTML contiennent des @id. On peut alors pointer une ancre dessus. J'aimerais styliser ces paragraphes.
Voici ce qu'on a. HTML :

<p>Ceci est un magnifique paragraphe de démonstration</p>

, CSS :

p {
    text-align: justify;
    text-indent: 2em;
}

    p:target {
        background: #dbe4f5;
    }

    p:target:first-line {
        background: transparent url("../Image/PArrow.gif") 0 50%  no-repeat;
    }

L'effet escompté est le suivant : quand la paragraphe est une cible (donc qu'une ancre pointe dessus), le fond de tout le paragraphe change. Et une image (ici PArrow.gif) vient se loger dans l'indentation de la première ligne.

Le problème est le suivant : la flèche se place systématiquement derrière le texte, malgré sa position à 0. J'ai lu les spécifications W3C, et c'est un comportement normal. En effet, le navigateur va comprendre ça de la façon suivante :

<p><p:first-line>*ma première*</p:first-line>*le reste du paragraphe*</p>

L'indentation est active pour le premier paragraphe, et non pour p:first-line. Donc p:first-line commence après l'indentation. Mon image est donc derrière le texte, et impossible de la mettre dans l'indentation.

Une idée ?
Modifié par HyWaN (12 Jan 2008 - 14:06)

Bonjour,

Pourquoi passer par first-line? Appliquer ton image de fond directement à p:target me semble plus cohérent.
Tu pourrais également générer ta puce par un p:target:before en ayant préalablement annuler l'identation pour le paragraphe qui a le focus.

Je passe par :first-line car j'aimerais que la puce soit centré verticalement par rapport à la première ligne. Ma ligne fait 1.5em de hauteur. La moitié est donc .75em, mais mon image fait encore quelques pixels de hauteur, ce qui décale tout. Si je veux que la puce soit centré verticalement sur tous les navigateurs, je n'ai trouvé que cette solution (couplé au pourcentage).

J'avais tenté p:target:before, mais il ne m'annule pas l'indentation. J'ai résolu le problème avec une marge négative :

    p:target:before {
        content: url("../Image/PArrow.gif");
        margin: 0 1em 0 -1.5em;
    }

J'aurais préféré travailler avec :first-line pour que ce soit plus propre, et plus sémantiquement correct. Mais bon, c'est pas grave .

Merci .

HyWaN a écrit :
J'aurais préféré travailler avec :first-line pour que ce soit plus propre, et plus sémantiquement correct.

Plus propre? Non.
Plus sémantiquement correct? Ben non plus. Où est la sémantique en CSS?

Par contre, ça peut être techniquement plus pratique pour centrer verticalement l'image par rapport à la première ligne de texte, oui.

Question naïve: est-ce que :first-line (qui désigne je suppose une boite de ligne?) accepte du padding (ici un padding-left)?
Modifié par Florent V. (12 Jan 2008 - 18:50)

Pour commencer, je précise ma réponse de tout à l'heure:

- La notion de propreté est à oublier. Lorsqu'on dit d'une solution qu'elle est plus «propre», on ne dit pas grand chose de concret, et le plus souvent c'est un jugement lié à une impression personnelle plutôt qu'à quelque chose d'objectif. Bref, oublier les solutions «propres» ou «plus propres que...», et se concentrer sur les solutions efficaces, lisibles, sécurisées, maintenables, etc.
- Parler de sémantique pour distinguer deux solutions CSS est un non-sens. Il n'y a pas de sémantique en CSS. Point.

HyWaN a écrit :
Je n'ai pas réussi à définir des marges et pas pour :first-line, pourtant il est censé se comporter comme un paragraphe

Heu... non.
On pourra lire: http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo
(J'aurais pensé que les navigateurs passeraient par la première boite de ligne, mais la spécification suggère la création à la volée d'un pseudo-élément. Je ne connais pas assez la mécanique interne des navigateurs pour savoir comment ça marche au juste. Mais en tout cas p:first-line ne crée pas un paragraphe dans le paragraphe...)

Florent V. a écrit :
- La notion de propreté est à oublier. Lorsqu'on dit d'une solution qu'elle est plus «propre», on ne dit pas grand chose de concret, et le plus souvent c'est un jugement lié à une impression personnelle plutôt qu'à quelque chose d'objectif. Bref, oublier les solutions «propres» ou «plus propres que...», et se concentrer sur les solutions efficaces, lisibles, sécurisées, maintenables, etc.
- Parler de sémantique pour distinguer deux solutions CSS est un non-sens. Il n'y a pas de sémantique en CSS. Point.

Ok ok.

Florent V. a écrit :
On pourra lire: http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo
(J'aurais pensé que les navigateurs passeraient par la première boite de ligne, mais la spécification suggère la création à la volée d'un pseudo-élément. Je ne connais pas assez la mécanique interne des navigateurs pour savoir comment ça marche au juste. Mais en tout cas p:first-line ne crée pas un paragraphe dans le paragraphe...)

Merci pour le lien, c'est le même que mon poste .
La spécification suggère la création à la volée d'un pseudo-élément, c'est exact. Comme tous les navigateurs sont censés se baser sur la spéc, je suis parti du principe que ça fonctionnait comme ça. Mais visiblement non, sinon on pourrait y appliquer des margin et padding.

Florent V. a écrit :

Plus propre? Non.
Plus sémantiquement correct? Ben non plus. Où est la sémantique en CSS?

Oula. !

on se calme, on se fait une bouillote, un thé, tout ça.

J'aime d'autant plus le pragrmatisme que je crois bien te l'avoir appris ici, mais bon. Parler d'absence de sémantique en CSS est, comment dire, quelque-chose qui peut couvrir des racourcis terrifiants ?

Et qu'on pourrait détailler ? Je veux bien fournir le thé, mais vous me fournissez des réponses à tous ces terrifiants raccourcis .

Pour le thé, c'est fait.

Pour les raccourcis: ben là, je ne vois pas trop. Depuis quand les CSS se mêlent-ils de sémantique? Ils peuvent éventuellement se mêler de contenu, via la propriété content. Mais de sémantique?

À la rigueur, on peut jouer à détourner le marquage sémantique du code HTML (ou l'absence de marquage sémantique dans ce code) en stylant un paragraphe comme un titre, un titre comme du texte simple, en cachant du texte, etc. On pourrait peut-être parler de la propriété display également.

Mais je ne vois pas trop comment ces abus ou effets de bord possibles permettent de dire que, par ailleurs, telle solution CSS est plus sémantique qu'une autre.
À la rigueur, plus respectueuse de la sémantique existante (ou pas) dans le document, mais même là je le sens pas trop.

Ah la la, «It was a slippery slippery slippery slope», comme dit l'autre.

Au fait, pour l'aspect technique de la question de départ: d'après un «petit test rapide», on ne peut pas faire grand chose sur un :first-line.

Propriétés qui marchent apparemment (testé avec Firefox 2 et Opera 9):
- background;
- color;
- font-family;
- font-size (débordements possibles dans Opera 9);
- font-style;
- font-variant (débordements possibles dans Opera 9);
- font-weight (débordements possibles dans Opera 9);
- text-transform;
- letter-spacing (débordements possibles dans Firefox 2, et probables dans Opera 9);
- white-space:pre (marche dans Firefox et pas dans Opera... mais comportement un peu étrange...);
- word-spacing.

Propriétés non prises en compte (testé avec Firefox 2 et Opera 9):
- border;
- bottom;
- content;
- cursor;
- display;
- float;
- height;
- left;
- margin;
- outline;
- padding;
- position;
- quotes;
- right;
- text-align;
- vertical-align;
- width;
- ...

Quelque chose me dit que pour :first-letter ça pourrait être le même topo.

Edit: pour :first-letter, les propriétés suivantes marchent:
- clear;
- float;
- margin (partiellement sous IE);
- padding (pas sous IE).
Modifié par Florent V. (13 Jan 2008 - 01:59)

Pour ceux qui marchent : pareil sous safari 3.
Pas tester pour les autres, je le ferais peut être demain .

À propos de :first-letter, une exercice pratique (même si le résultat est un bidouillage pas vraiment utilisable en production):
http://web.covertprestige.info/test/37-test-lettrine-first-letter.html