La communauté ALL HTML c'est 60188 membres à ce jour dont 0 inscrits aujourd'hui et 19 depuis une semaine.

Un laboratoire d'expérimentation des CSS en ligne

Photo de lutrin Article publié le mercredi 29 novembre 2006 par lutrin.
Cet article est classé dans les catégories « CSS, web 2.0 »

Voici un outil d'expérimentation en live des sélecteurs et propriétés CSS, initialement développé à destination des é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 et pseudos-éléments et toute combinaisons de ces derniers. Une expérimentation valant mille discours, allez consulter la page http://lutrin.free.fr/LaboCSS et laissez-vous guider !

Plus d'informations :


VOS COMMENTAIRES ...

Commenter cette publication

Photo de georgebaroud Commentaire publié le mercredi 29 novembre 2006 à 18 h 06 par georgebaroud
ben c'est catastrophique comme site, j'ai abandonné. Un site qui parle de css si peu accessible, ça laisse songeur.
Photo de lutrin Commentaire publié le mercredi 29 novembre 2006 à 18 h 29 par lutrin
Dommage que georgebaroud n'ai pas pris le temps de bien se conformer au mode d'emploi qui, bien respecté, ouvre une interface simple d'utilisation permettant l'expérimentation et la génération dynamique de CSS.
Photo de georgebaroud Commentaire publié le mercredi 29 novembre 2006 à 19 h 26 par georgebaroud
oui ben je fais des efforts pourtant mais désolé.
Est ce que tu as déjà mit un débutant face à ton logiciel?
*S'aura t'il activer les popups? (en passant, popup et xhtml???)
*ma page se réduit sans cesse de moitié du coup je ne vois plus rien, pourquoi?
*un debutant sait t'il ce qu'est un body, un #conteneur ou même un sélecteur?
*imposer un navigateur à un internaute et une aberration ?
*j'ai firefox2, je ne peux pas voir les pages que je crée, pourquoi? Je dois tout copier coller moi même? En fait on peut mais je sais plus par ou?-)
*quand au code, on ne sait pas trop ce qu'on fait. HTML4.0...XHTML..?
*pas de doctype
*beaucoup d'erreurs dans les balises genre
<IMG border="0" src="http:/..."></IMG> <br></br>toujours par deux

enfin bref pris le temps de regarder, le plus gros défaut, c'est que c'est anti-ergonomique
Photo de boulaneige Commentaire publié le mercredi 29 novembre 2006 à 21 h 09 par boulaneige modérateur
Salut,

Quand j'ai vu ton message, j'ai immédiatement cliqué en me disant "Génial !!!". J'ai lu le mode d'emploi et j'ai... fermé. Oui je sais, ce n'est pourtant pas compliqué de faire les modifs nécessaires, mais j'étais en train de bosser et ton affaire allait foutre du désordre dans mes fenêtres, religieusement classées ;-)

En lisant le message de georgebaroud, la curiosité a été la plus forte, et comme j'avais fini de bosser, hop. Désactivation de l'anti pop-up, ouverture dans une nouvelle fenêtre, et zou.

Argh, pourquoi ça me réduit Firefox si petit ??? Le contenu ne passe pas, il faut l'agrandir manuellement ! Je clique et ça m'ouvre un nouvel... onglet ! Et au passage, ça me réduit à nouveau le navigateur. Franchement, là déjà ça m'énerve. Comme indiqué dans le mode d'emploi je clique sur le premier menu et... punaise, j'comprends rien ! Je regarde les autres liens et... c'est quoi le but du jeu ???

Tel que tu as présenté l'outil dans ton premier post, ça paraît terriblement intéressant, mais franchement, j'ai toujours pas compris à quoi ça servait, ce que ça faisait, etc. :-((

En tout cas, le projet mérite d'être amélioré, j'ai hâte de voir quand ça sera plus accessible.

Bonne continuation.
Photo de lutrin Commentaire publié le mercredi 29 novembre 2006 à 21 h 18 par lutrin
Le principe est qu'il faille deux fenêtres à l'écran. L'une pour créer les CSS via l'interface LaboCSS et l'autre pour voir la mise ne page qui en résulte (la page modele).
Si deux fenêtres n'aparaissent pas, c'est que soit les popus ne sont pas acceptés, soit qu'ils s'ouvrent dans un nouvel onglet au lieu d'une nouvelle fenêtre (à modifier dans les paramètres du navigateur).
Le redimensionnement a pour but de rendre visible les deux fenêtres.

Encore un petit effort, il sera récompensé !!!
Photo de georgebaroud Commentaire publié le mercredi 29 novembre 2006 à 22 h 08 par georgebaroud
bon j'ai re regardé avec mes noeils et j'ai reussi a m'en servir ouaaaaiss. Avec firefox 2, il faut activer les popups et cocher l'option, les pages doivent s'ouvrir dans une nouvelle fenêtre pour que ça marche.

J'avoue c'est bien ton truc (mise à part les fenêtre qui bougent de partout ;-))
et simple une fois que ça marche. Manque plus qu'à pouvoir importer des images de fonds et a rajouter la possibilité d'intervenir sur le code html, pour avoir le meilleur des wysiwyg.
Photo de boulaneige Commentaire publié le mercredi 29 novembre 2006 à 22 h 40 par boulaneige modérateur
Autant pour moi, j'avais bien mis l'ouverture dans une nouvelle fenêtre mais j'avais oublié de décocher "forcer les liens ouvrant...". Toutes mes confuses.

Effectivement, ça va mieux ! Ca reste tout de même à mon goût un peu compliqué, ou plutôt, on se sent perdu. Ce qui m'a le plus géné, c'est, après avoir choisi un modèle, avoir une fenêtre à droite pour agir dessus (pas de souci), mais en plus avoir des liens dans la fenêtre de visualisation avec également la possibilité de voir d'autres types de modifs. En regardant ces 2 fenêtres, je me suis demandée sur laquelle il fallait d'abord agir. C'est peut-être à revoir, ou mieux expliquer les choses.

Comme le disait très justement georgebaroud, le code généré n'est pas valide : pas de doctype, 2 fois le même id, balises en capitales (invalide selon le doctype).

Pour les débutants ça pourrait être très pratique, mais j'ai peur que l'outil soit trop compliqué, dans sa manipulation et par son contenu : les balises devraient être un minimun expliquées.

Pour les habitués c'est un peu frustrant, ça manque de sélecteurs (il n'y a pas que les id ou class pour styler une balise !). Sinon ça pourrait être pas mal du tout pour dégrossir un gabarit.

Mes efforts ont effectivement été récompensés ! Merci, et bonne continuation. Je bookmarke.
Photo de lutrin Commentaire publié le mercredi 29 novembre 2006 à 22 h 57 par lutrin
LaboCSS gère tous les sélecteurs. Seuls les ids sont répertoriés initialement dans le menu.
Il suffit de saisir un sélecteur pour qu'il s'intègre au menu et pouvoir lui appliquer des propriétés.
Les éléments sélectionnés par le sélecteurs sont mis en évidence dans l'onglet code ou arbre.

Sont reconnus :

- les noms d'éléments
- éléments descendants
- élements enfants
- éléments adjacents
- pseudo-classes
- pseudo éléments
- selecteurs d'attributs

Il y a de quoi réaliser une mise ne page integrale.

Je vais revoir mon mode d'emploi
Photo de boulaneige Commentaire publié le mercredi 29 novembre 2006 à 23 h 45 par boulaneige modérateur
Ah ben tu vois, j'ai raté ça aussi ! Oui, faut absolument revoir le mode d'emploi, ça le mérite vraiment ! Je retournerai faire des essais demain.

Au fait, ça ne serait pas faisable un truc du genre : cliquez ici pour ouvrir la fenêtre de visualisation, puis cliquez maintenant ici pour ouvrir l'outil.

En précisant que les fenêtres s'ouvriront côte à côte pour visionner les 2 en même temps.

Bon allez, bonne nuit ;-)
Photo de lutrin Commentaire publié le jeudi 30 novembre 2006 à 00 h 54 par lutrin
Compte tenu des difficultés que semble poser l'interface, le mode d'emploi du LaboCSS a été modifié, en espérant que la compréhension en sera facilité.
Photo de Legacy33 Commentaire publié le samedi 03 mars 2007 à 08 h 24 par Legacy33
Salut,

Ton idée est très bonne, à améliorer mais cependant, je suis débutant en CSS et je ne m'y retrouve absolument pas sur ton Labo. Désolé.

En plus, un reproche que j'y ferait est simplement le redimensionnement forcé du navigateur qui oblige ensuite à jongler avec les ascenseurs pour se balader.

Enfin, dommage qu'il n'en existe pas une version hors-ligne. Je n'ai pas toujours le net quand je développe, du coup ça ne me sert à rien.

Par contre, au passage, j'ai cherché un moment un ide qui me fasse la complétion HTML PHP et CSS et suis tombé sur notepad++, libre, qui fonctionne à merveille. Si ça peut en intéresser certains.

Bonne journée
Photo de lutrin Commentaire publié le mercredi 10 septembre 2008 à 14 h 52 par lutrin
Bonjour à tous,

Une nouvelle version du laboCSS plus ergonomique est désormais en ligne à l'adresse :
http://gabrielbraun.free.fr/TechWeb/LaboCSS/laboCSS.php?rubrique=LaboCSS&css=0

Tour se passe à présent dans une seule fenêtre donc plus besoin d'utiliser les popups.
Quelques nouveautés :
Code HTML éditable
Edition de plusieurs feuilles de style
Possibilité de travailler sur une page quelconque, chargée depuis le web
Outil de nettoyage du code des attributs et balises de présentation (séparation contenu présentation)

Développement en cours : compatibilité avec IE

Bonnes expérimentations

Commenter cette publication

Vous devez obligatoirement vous identifier en tant que membre pour participer à cette discussion.

Forums de discussions associés

Discutez et échangez sur ce thème dans notre forum XHTML - HTML - CSS.

Liens sponsorisés

ACCÉS COMMUNAUTÉ

Rejoignez ALL HTML

Publiez vos articles, actualités, communiqués ... Donnez votre avis, partagez votre réseau, rencontrez d'autres membres et participez à la vie de la communauté.