28172 sujets

CSS et mise en forme, CSS3

::first-line, transition

Hello,

Ça fait un moment que n'avais posté, je reviens vers vous avec un bug qui me semble étrange et qui a attisé ma curiosité.

Quand je combine ::first-line, inline-block et transitions (à titre expérimental), je n'obtiens pas un comportement consistant entre FF et Chrome.

Un bout de code d'abord : 

<!DOCTYPE html>

<html lang="fr">
<head>
	<meta charset="UTF-8">

	<style>
	
article {
	display: inline-block;
	border: solid 1px black;
	
	-moz-transition-duration: 2s;
	-moz-transition-property: border-width;

	-webkit-transition-duration: 2s;
	-webkit-transition-property: border-width;
}

article:hover {border-width: 10px;}	


section::first-line {color: red}	
	</style>

</head>
<body><div id="main">
	<section>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
		<article>lorem ipsum</article>
	</section>
</div></body>	
</html>



En gros:

1.Sous FF, première ligne de blocs rouge, pas de transitions au hover.
2.Sous Chrome, première ligne de blocs noire, mais transitions au hover.

J'ai crée un jsFiddle pour ceux qui veulent voir le souci en action.

J'ai rejeté un œil sur la spec de ::first-line, je n'ai pas vu de précisons sur le comportement des boîtes en lignes dans la fameuse première ligne.

Si quelqu'un a plus d'infos.

Merci d'avance!
ptitvincent a écrit :
mais c'est pas :first-line normalement (et non ::first-line) ?


Pas en CSS3, désormais les pseudo-éléments s'écrivent avec deux ":"

::first-line
::first-letter
::after (je ne suis pas certain pour ce dernier toutefois)
etc

Et les pseudo-classes avec un seul

:hover
:nth-child()
:first-child
etc
Vaxilart a écrit :

::after (je ne suis pas certain pour ce dernier toutefois)


Je confirme pour ::before et ::after. Souci : IE8 ne connait pas cette syntaxe.
On dirait que Chrome n'utilise pas first-line pour des éléments en display inline-block.

Car si tu passe tes articles en inline tout court, la couleur rouge s'applique.
Sujet clos
Aller à