Implémentation CSS3 :
testez votre navigateur !


Cette page pour navigateurs visuels teste seulement quelques sélecteurs CSS3 (et CSS2).


Pourquoi cette page aujourd'hui ?


Des pages de tests ou indiquant les implémentations des navigateurs :


Pour connaître la signification des sélecteurs, voir les liens :

Pour les autres modules CSS3, voir :


Grâce à un jeu de display:none; / display:inline; les résultats des tests du navigateur s'affichent directement en clair dans la plupart des cas.

Remarque : mes tests ne marchent pas avec Amaya 8.3 :-(

Vous pouvez participer !


Indiquez les résultats des tests (boutons à cocher sous les tests)
et la version de votre navigateur (formulaire en bas de page // access key : 9)
puis envoyez.
Vos résultats viendront compléter ceux qui sont déjà affichés.

Déjà
testés		 IE Gecko KHTML Opera
IE 5.0 (win)
 - 5.5 (win)
 - 6.0
Maxthon 1.2.3		 Mozilla 1.4 (win)
- - - - 1.6 (Linux)
- - - - 1.7.3 (win)
Firefox 0.8 (win)
- - - - 0.9.3 (Linux)
- - - - 1.0 (W + L)
- - - - 1.0.1 (Linux)
- - - - 1.0.2 (Win)
- - - - 1.0.3 (Win)
- - - - 1.0.4 (Win)
- - - - 1.5.1 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
- - - - - - 3.4.0
- - - - - - 3.4.2
Safari 1.2 Mac OS X
 - - - 1.3.1 - - -		 Opera 6.05 (win)
 - - - 7.51 (win)
 - - - 8.54 (win)

Il manque quelques résultats pour les Safari et Camino testés (suite à des corrections ou ajouts de tests).

NB : Dans les résultats ci-dessous, seule la version la plus ancienne (connue) implémentant un sélecteur est notée (FF 1.0 n'est pas noté si FF 0.8 l'est déjà). De même seule la plus récente n'implémentant pas figure.

Tests préalables de quelques CSS2

(standard de 1998)
Sélecteur d'enfant E1 > E2
= Combinateur filial (CSS2 5.6 - CSS3 8.2)

Test : non implémenté implémenté

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.2 Mac OS X		 Opera 6.05 (win)
Non IE 6.0
Maxthon 1.2.3
Sélecteurs d'enfants adjacents E1 + E2
= Combinateur d'adjacence directe (CSS2 5.7 - CSS3 8.3.1)

Test :  non implémenté  implémenté

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.2 Mac OS X		 Opera 6.05 (win)
Non IE 6.0
Maxthon 1.2.3
Sélecteur d'attribut E[attribut]
(CSS2 5.11.4 - CSS3 6.3.1)

Test [id]: non implémenté implémenté Test [class~=""]: non implémenté implémenté Test [lang|=""]: not implemented implémenté

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.2 Mac OS X		 Opera 6.05 (win)
Non IE 6.0
Maxthon 1.2.3
Pseudo-classe :lang()
(CSS2 5.11.4 - CSS3 6.6.3)

Test : implemented not implemented

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.4.0 Opera 7.51 (win)
Non IE 6.0
Maxthon 1.2.3		 Konqueror 3.2.0
Safari 1.3.1		 Opera 6.05 (win)
Pseudo-élément :first-line
(CSS2 5.12.1 - CSS3 7.1)

Test : Si implémenté, la première ligne doit être en vert et en gras. "Le pseudo élément :first-line ne peut s'attacher qu'à un élément de type bloc." bla-bla bla-bla bla-bla bla-bla bla-bla bla-bla

Votre navigateur :

Implémenté IE (win) 5.5 Mozilla 1.6 (Linux)
FireFox 0.8 (win)
Galeon 1.3.12 *
Epiphany 1.0.7 *
Camino 1.0b2 MacOSx		 Konqueror 3.2.0 *
Safari 1.3.1		 Opera 6.05 (win)
Non IE 5.0 (win)
Maxthon 1.2.3

* Commentaire : Dans le test ci-dessus un élément <cite> débute dans la première ligne et se prolonge dans la deuxième. Certains navigateurs ont alors un comportement particulier : Konqueror s'arrête de styler avant cet élément (sauf si cet élément est entièrement dans la 1e ligne). Galeon et Epiphany stylent le <cite> jusqu'à sa fin, sur la 2e ligne...

Pseudo-élément :first-letter
!! Changement d'écriture en CSS 3 !!

Test 1 <p> : Si implémenté, la première lettre (T) doit être en vert, en grand et gras. "Le pseudo-élément :first-letter ne peut correspondre qu'avec une partie d'un élément de type bloc." (CSS2 5.12.2)

Votre navigateur :

Implémenté IE (win) 5.5 Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.2 Mac OS X		 Opera 6.05 (win)
Non IE 5.0 (win)
Maxthon 1.2.3

- IE (win) 5.5 : la bordure héritée du parent est reproduite autour de la lettre.
- Opera 6.05 (win) : 1) style non appliqué à la liste imbriquée. 2) marche même avec un élément in-line (test 4) à condition qu'il ne soit pas dans un bloc (li...) déjà stylé par un :first-letter. (La version 7.51 est différente sur ces 2 points.)

  • Test 2 additionnel li:first-letter stylé en gros et vert. Pour voir si le Pseudo-élément :first-letter est appliqué aux éléments de liste. (+ test span)
    • li:first-letter / liste imbriquée (+ test span)

Style non appliqué à la première lettre d'un élément ul (test 3) : IE 5.5 (win), Mozilla 1.4 (win), FireFox 0.8 (win), Opera 7.51.

  • Test 3 additionnel ul:first-letter.

Test 4 additionnel <span> : un style (couleur rouge et grand) est ici appliqué à la première lettre d'éléments in-line : <em>, <strong>, <cite>. Opera 6.05 affiche ce style. Il "dépasse" donc les spécifications CSS2.

Pseudo-éléments :before et :after
(CSS2 5.12.3 - CSS3 7.4)

Test : non implémentés sauf mentions contraires

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.2 Mac OS X		 Opera 6.05 (win)
Non IE 6.0
Maxthon 1.2.3


Si votre navigateur n'implémente aucun des sélecteurs CSS2 ci-dessus, inutile de voir la suite !

Tests de quelques sélecteurs CSS3



Sélecteur de sous-chaîne d'attribut [att^=""]
(CSS3 6.3.2)

Test [class^=""]: non implémenté implémenté Test [class$=""] non implémenté implémenté Test [class*=""]: non implémenté implémenté

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.2 Mac OS X
Non IE 6.0 Opera 8.54 (win)
Test 1 à corriger...
Pseudo-classe :target
(CSS3 6.6.2)

Test : Si implémenté, vous verrez ce texte en italique, vert sur jaune, après avoir cliqué ici. Test2.

Avec :target on peut aussi
faire afficher un sous menu :
:first-letter
:target
:checked
Le problème est qu'aller à
une ancre déplace la page
(sauf si elle tient entièrement
dans la hauteur de l'écran)
(et sauf en position:fixed).

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Netscape 7.1
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.4.0
Safari 1.2 Mac OS X
Non IE 6.0 Konqueror 3.2.0 Opera 8.54 (win)
Pseudo-classe d'état :checked
(CSS3 6.6.4)

Test :

Votre navigateur :

Commentaire : Théoriquement c'est le bouton lui-même qui devrait-être stylé, input:checked {} conformément au test officiel du W3C. Comme il ne se style pas toujours (voir test 2) et ne voulant pas être trop exigeant, j'applique un style aussi au texte associé : input:checked + span {...} Là, ça marche. J'en conclu que :checked est reconnu et donc implémenté. Mon test utilise le Sélecteurs d'enfants adjacents (CSS2).

Commentaire 2 : Avec certains navigateurs, lorsqu'on coche un autre bouton, la couleur ne change pas dynamiquement. Elle ne change qu'après actualisation de la page.

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Futur Safari*
Non IE 6.0 Camino 0.7 Mac OS X Konqueror 3.4.0
Safari 1.3.1		 Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

Test 2 complémentaire : [Attention : ne teste pas :checked.]

Stylable IE 5.5 (win) Konqueror 3.2.0 Opera 6.05 (win)
Non Mozilla 1.6 (Linux)
Firefox 1.0 (L + W)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Pseudo-classe d'état :enabled et :disabled
(CSS3 6.6.4)

Test :

Test :

Votre navigateur :

Implémenté Firefox 1.5
Camino 1.0b2 MacOSx		 Konqueror 3.4.0
Futur Safari*
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.0.4 (Win)
Galeon 1.3.12
Epiphany 1.0.7		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

Pseudo-classe d'état :indeterminate
(CSS3 6.6.4)

Commentaire : Voir le test du W3C

Votre navigateur :

Implémenté
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.0.4 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0 Opera 8.54 (win)
Pseudo-classe structurelle :first-child
(CSS3 6.6.5)

Test :   non implémenté implémenté

Votre navigateur :

Implémenté Mozilla 1.6 (Lin)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 7.51 (win)
Non IE 6.0 Opera 6.05 (win)

:only-child donne un résultat inattendu pour Gecko.

Pseudo-classe structurelle :last-child
(CSS3 6.6.5)

Test :  non implémenté implémenté

Votre navigateur :

Implémenté Mozilla 1.4 (win)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.2 Mac OS X
Non IE 6.0 Opera 8.54 (win)
pseudo-classe structurelle :only-child
(CSS3 6.6.5)

Test2 : 111 - Nombre en vert et en gras

Votre navigateur :

Implémenté Firefox 1.5
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.2
Non IE 6.0 Mozilla 1.6 (Linux)
Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.0.4 (Win)
Galeon 1.3.12
Epiphany 1.0.7		 Opera 8.54 (win)

Ci-dessous, est testé pour comparaison :first-child:last-child qui est normalement équivalent mais qui est positif pour Gecko contrairement à :only-child. Le test est-il fautif ?

Test3 : 111 - Nombre en vert et en gras

pseudo-classe structurelle :nth-child()
(CSS3 6.6.5)

Test : non implémenté implémenté

Test2 : 1 2 3 4 5 6 - Un chiffre sur 2 en vert et en gras ?

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
pseudo-classe structurelle :nth-last-child()
(CSS3 6.6.5)

Test2 : 1 2 3 4 5 6

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
pseudo-classe structurelle :nth-of-type()
(CSS3 6.6.5)

Test2 : 1 2 3 4 5 6

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
pseudo-classe structurelle :nth-last-of-type()
(CSS3 6.6.5)

Test2 : 1 2 3 4 5 6

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
Pseudo-classe structurelle :first-of-type
(CSS3 6.6.5)

Test : non implémenté implémenté 

Votre navigateur :

Implémenté Konqueror 3.4.0
Futur Safari*
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

pseudo-classe structurelle :last-of-type
(CSS3 6.6.5)

Test2 : 1 2 3 4 5 6 - dernier en vert et en gras

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
pseudo-classe structurelle :only-of-type
(CSS3 6.6.5)

Test2 : 111 - Nombre en vert et en gras

Votre navigateur :

Implémenté Konqueror 3.4.0
Futur Safari*
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

Pseudo-classe de contenu :contains("")
(CSS3 6.6.6)

Test : non implémenté est implémenté

Votre navigateur :

Implémenté Konqueror 3.4.0
Non
implémenté		 IE 6.0 Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)
Pseudo-classe de negation :not()
(CSS3 6.6.7)

Test : span:not([class*=non]) non implémenté implémenté

Test 2 additionnel : *:not(em) non implémenté implémenté

Test 3 additionnel *:not(em):not(code):not(.cla){color:green} :
(em) (code.aaa) (cite.cla) (strong) (b) (i) (cite) etc.

Votre navigateur :

Implémenté Mozilla 1.4
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0 *
Safari 1.2
Non IE 6.0 Opera 7.51 (win)

Konqueror est implémenté, d'après le test 3. (Tests 1 et 2 négatifs !!??)

Pseudo-élément ::first-letter
(CSS2 5.12.2 - CSS3 7.2)

Test 1 <p> : Si implémenté, la première lettre (T) doit être en vert, en grand et gras. Test 2 <cite> : Le pseudo-élément ::first-letter peut être attaché à tout élément.

Commentaire : Nouvelle écriture CSS3 des pseudo éléments avec "::"

Votre navigateur :

Implémenté IE (win) 5.5 FireFox 0.8 (win)
Mozilla 1.7.3 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Konqueror 3.2.0
Safari 1.3.1		 Opera 7.51 (win)
Non Opera 6.05 (win)
Pseudo-élément ::selection
(CSS3 7.3)

Test2 : si implémenté, le texte sélectionné ici deviend rouge sur vert.

Votre navigateur :

Implémenté Konqueror 3.2.0
Futur Safari*
Non IE 6.0 Mozilla 1.6 (Linux)
Mozilla 1.7.3 (win)
Firefox 1.0 (Linux)
Firefox 1.5 (Win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 1.0b2 MacOSx		 Safari 1.3.1 (?) Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

Rappel : On ne peut pas appliquer à ce sélecteur les propriétés qui changeraient la mise en page (ex : font-size, font-weight).

Combinateur d'adjacence indirecte E1 ~ E2
(CSS3 8.3.2)

Test :   non implémenté implémenté

Votre navigateur :

Implémenté Mozilla 1.7.3 (win)
Firefox 0.9.3 (Linux)
Firefox 1.0 (win)
Nvu 0.1
Camino 1.0b2 MacOSx		 Konqueror 3.4.0
Futur Safari*
Non IE 6.0 Mozilla 1.6 (Linux)
FireFox 0.8 (win)
Galeon 1.3.12
Epiphany 1.0.7
Camino 0.7 Mac OS X		 Konqueror 3.2.0
Safari 1.3.1		 Opera 8.54 (win)

* : D'après la version du webkit d'Apple disponible sur http://nightly.webkit.org/builds/ (07-12-2005)

Pour participer :




- Cochez les boutons sous chaque test.




Merci !

(Votre adresse ne sera pas utilisée, ni transmise. Les résultats seront publiés anonymement, ici.) Pascal

web-jardin, Haut