Un outil d'expérimentation des sélecteurs et propriétés CSS en live

Bonjour,

Voici un outil d'expérimentation en live des sélecteurs et propriétés CSS, initialement développé à destination de mes étudiants CAWEB (Conception et Administration de sites Web).
Cet outil est susceptible d'intéresser aussi bien les personnes s'initiant aux CSS qu'aux concepteurs plus avertis.
L'ensemble des propriétés et sélecteurs sont gérés : descendant, enfant, adjacence, classe, id, pseudo-classes pseudos-éléments, sélecteur d'attribut et toute combinaisons de ces derniers.

Une expérimentation valant mille discours, je vous invite à consulter la page http://lutrin.free.fr/LaboCSS et à vous laisser guider !!!
Bien suivre les recommandations du mode d'emploi.

Je suis à l'écoute de toute suggestion ou critique en vue d'améliorer cet outil.

Bonnes expérimentations

lutrin a écrit :
Bien suivre les recommandations du mode d'emploi.

Hello,

En effet, j'ai trouvé l'outil assez complexe à l'usage et peu intuitif au départ.
Par contre, ensuite, cela devient fort intéressant.

Hello,

ça à l'air intéressant cette affaire, dommage que je comprenne rien arrivé sur la page...

Faut cliquer où en fait ?

Je suis fatigué mais dans le texte y'a pas de liens et en dessous je vois que des pubs c'est dommage.

...frustration...
Modifié par Hum (29 Nov 2006 - 20:02)

Hum a écrit :
Hello,

ça à l'air intéressant cette affaire, dommage que je comprenne rien arrivé sur la page...

Faut cliquer où en fait ?

Je suis fatigué mais dans le texte y'a pas de liens et en dessous je vois que des pubs c'est dommage.

...frustration...

En fait, la première instruction du mode d'emploi, c'est d'autoriser les popups dans ton navigateur. L'outils s'ouvre en popup... je me demande bien pourquoi d'ailleurs.

Raphael a écrit :
j'ai trouvé l'outil assez complexe à l'usage et peu intuitif au départ.

Le déroulement de l'application est loin d'être évident à saisir ...
Mais ça vaut le coup d'y jeter un oeil
(même les deux )

Merci Tony,

j'y ai pensé mais comme je n'ai eu aucun message ni rien, ben......

Il va falloir maintenant que je me fasse violence à farfouiller dans les menus du broswer pour trouver l'option pour accepter les pop up.
Parceque je sais même pas où c'est ! ! !



Modifié par Hum (29 Nov 2006 - 20:26)

Quel navigateur utilise-tu ?

Labo CSS fonctionne sur Mozilla Firefox et Safari.
Il est indispensable d'autoriser provisoirement les popups pour permettre de visualiser la mise en page dans une fenêtre distincte. Faire attention à ce que les popups ne s'ouvrent pas dans un nouvel onglet.

Si quelqu'un a une idée pour rendre l'interface plus intuitive, je suis preneur.

Tony Monast a écrit :
Quel navigateur utilise-tu ?

Firefox 2

Edit :

Ayé j'ai réussi !

Bon. Je vais pouvoir tester cette chose.
Modifié par Hum (29 Nov 2006 - 20:56)

Salut,

Dans l'arbre, ca met bien une arborescence des blocs, mais ca m'indique quand je les "ouvre", mais pas quand je les "ferme"...

<div un tel> est indiqué, mais pas </div un tel>
et pourquoi des majuscules?

A+

Pour répondre à la question sur les balises de fermeture dans un arbre :

L'intéret de l'arbre est bien de proposer une lecture simplifiée du code. Le contenu des blocs imbriqués est mis en retrait par rapport a leur parent. Ainsi la fin d'un bloc n'a pas besoin d'être marquée par une balise de fermeture.
C'est classique en informatique. Toute expression parenthesée (balisée) peut être mise sous forme d'un arbre syntaxique.

Salut Lutrin,

Donc comme je te l'ai exposé en MP, pour que tout le monde en profitte , ce que je voulais dire c'est que dans le cas d'un truc comme

<div1><div2></div2></div1>

c'est pratique de savoir qu'on a bien clos par </div1>, que celà n'a pas été oublié, que tout a bien été mis correctement... on sait qui est dans quoi jusqu'à où...

On peut passer mécaniqment (par programme) donc de façon non ambigüe de l'arbre au code et inversement. Deux divs qui se suivent apparaissent consécutivement au même niveau de retrait. Lorsqu'ils sont imbriqués, l'un est en retrait par rapport à l'autre.
Si l'arbre ne parait pas suffisament explicite (bien qu'il le soit), LaboCSS permet de voir le code sous l'onglet "code" ou "code abrégé".

Salut,
a l'heure où je poste, l'accès à la page ne se fait pas....

Ce que je voulais te dire Lutrin, c'est que si c'était possible d'implémenter dans l'arborescence le code </div> j'aurais trouvé cela sympa... mais je ne sais pas ce que cela implique de ton côté comme charge de travail pour cela...
Disons que, pour moi, çela "parlerait" plus vite... ça "sauterait aux yeux"... à ce propos quid d'une lecture vocale?

a+

Vajra a écrit :
à ce propos quid d'une lecture vocale?

Quel en serait l'intérêt ?

Eldebaran a écrit :
Quel en serait l'intérêt ?

Justement, j'en sais rien, je demande...