Visionneuse / testeur de style CSS

Y a-t-il un site qui a un tas de HTML typique pour voir à quoi ressemble le CSS une fois appliqué?

Je veux dire, quelque chose de plein table, a, div, span, p, peu importe. Vous allez là-bas, collez votre CSS et voyez les résultats.

Wow, quelqu'un vient de publier ceci sur SO.

C'EST exactement ce que le médecin a ordonné: http://jsfiddle.net/

Vous pouvez écrire html, css et javascript et l'exécuter directement là !! De plus, ils ont déjà des références à Jquery et à d'autres trucs!

Je pense que la règle Internet 33 est si vous voulez / imaginez, c'est là-bas! ;)

Je suis juste tombé sur http://colorschemedesigner.com/ .

Il est idéal pour choisir des couleurs et vous montrera des exemples de pages pour voir à quoi ressemblerait le schéma de couleurs appliqué à une page typique.

Mise à jour: le site est désormais http://paletton.com

Je n'en connais aucun, mais c'est simple à mettre en place. Créez simplement un document HTML de base avec tous les éléments que vous décrivez. (Vous pouvez générer du texte si nécessaire à partir de Lipsum.com .) Ensuite, créez un lien vers un fichier CSS dans la tête du document pour voir vos styles attachés. La prochaine fois que vous souhaitez tester, modifiez-le pour pointer vers un autre fichier CSS.

Pas exactement ce que vous avez demandé, mais j'aime le mode montre en direct de less.js .

En général, je mock juste tous les éléments / combinaisons dans n'importe quelle saveur HTML ou XHTML requise manuellement, mais vous pouvez créer votre propre document maître d'éléments. Si vous branchez un deuxième moniteur (ou deux, trois, etc.) pour ouvrir tous les navigateurs (ou utilisez un deuxième ordinateur), toutes les modifications que vous enregistrez sont appliquées en direct à chacun d'eux en même temps.

La syntaxe LessCSS peut être utilisée avec le CSS ordinaire, mais elle est plus rapide à utiliser et facile à comprendre (les résultats peuvent être convertis en CSS normal par la suite).

Des outils tels que Aviary vous permettent de prendre facilement des captures d'écran (y compris l'automatisation du défilement vers le bas et de l'assemblage), qui peuvent être rapidement annotées (en ligne avec des liens partageables) ou enregistrées et comparées dans un autre outil (comme Photoshop , GIMP , Paint .NET , etc.) en les superposant en tant que couches et en modifiant la transparence de celle du dessus.

Éditer:

Si vous souhaitez automatiser le processus de capture d'écran (lors de l'enregistrement du fichier) afin que:

• lorsqu'un problème survient, vous avez déjà tout sous la main
• une image peut être ajoutée au contrôle de version (qui peut également être automatisé lors de l'enregistrement du fichier)
• vous pouvez vous concentrer sur les activités CSS à la place

alors vous pouvez utiliser quelque chose comme un observateur de fichiers (veuillez excuser l'orientation Python, il existe de nombreuses autres solutions) avec un écran de capture . Le post-traitement peut également être automatisé et si vous utilisez des positions de fenêtre cohérentes (un environnement de programme / bureau peut aider cela) le "chrome" autour des navigateurs peut être coupé dans le cadre du script.

w3schools vous permet de jouer avec les règles HTML et CSS. Il suffit de trouver le CSS / HTML avec lequel vous voulez jouer et de chercher où il est dit "Essayez-le par vous-même". Voici leur border CSSpage et leur terrain de jeu .

Je crée toutes mes pages en html / css, puis j'utilise des outils pour webmasters firebug ou chrome pour ajouter / changer / expérimenter avec des styles. C'est rapide, simple et temporaire, ce qui est idéal pour l'expérimentation. De plus, vous pouvez travailler avec votre propre code sur vos propres serveurs, ce qui est un autre bonus.

Buzzkill: la partie développeur de l'interface utilisateur en moi vous prévient qu'il vaut mieux concevoir dans un véritable outil de conception, puis coder pour imiter en raison des différences dans les navigateurs .... juste dire ...

Note latérale - Je suis un grand fan de l'interface utilisateur de Jquery Themeroller. Un tel outil existe pour Themeroller pour changer de style sur le côté. Il est possible de entièrement thématiser un site via le CSS de Themeroller, puis de basculer simplement entre différents thèmes. Si vous ne l'avez jamais essayé, cela peut vraiment accélérer le déploiement, surtout si vous recherchez ce look "brillant" qui est si populaire en ce moment.

Vous y allez, collez votre css et voyez les résultats.

C'est parti: http://www.oswt.co.uk/developments/style_sheet_viewer/

Exactement ce qui est requis dans la question!

Je ne sais pas si c'est ce que vous avez demandé, mais le CSS Zen Garden a une telle page HTML avec de nombreuses conceptions CSS. Vous pouvez écrire votre propre CSS pour ce site, les exemples sont très inspirants.