Éditeur CSS avec prévisualisation en temps réel et localisation du sélecteur


9

Le titre dit tout sur ce que je recherche. Fondamentalement, il devrait s'agir d'un logiciel qui collecte tous les styles d'un site Web afin que je puisse les modifier et les enregistrer.

Veuillez lire attentivement la question, car je souhaite que toutes les conditions mentionnées soient remplies.

EDIT: Je veux être plus clair ici ou plutôt décrire mon flux de travail souhaité. La situation de départ sera que vous avez les sources du site Web sur votre machine locale.
Maintenant, je veux ouvrir les sources simples (HTML / CSS) dans mon éditeur / IDE / peu importe (pas de WYSIWYG!). Et je veux un aperçu en direct juste à côté ou dans une fenêtre différente (pas dans un autre onglet!), Je veux le voir lorsque je modifie la source. L'aperçu doit être mis à jour automatiquement (ou lorsque j'enregistre le fichier qui serait essentiellement le même car CTRL + S est une sorte de réflexe: P).
De plus, il devrait avoir un inspecteur qui fonctionne comme ceux de Firebug ou Chrom (e | ium). Lorsque je clique sur un sélecteur CSS dans cet inspecteur, le curseur doit y accéder directement dans le fichier source respectif.

UNE AUTRE MODIFICATION: Trouvé ce https://stackoverflow.com/q/4680109/220652 . Presque le même problème.


2
Firebug et la barre d'outils des développeurs Web peuvent tous deux modifier directement le CSS, ce dernier peut également l'enregistrer.
Lekensteyn

1
@Lekensteyn: Oui, mais Firebug ne peut pas enregistrer et Web Developer ne peut pas localiser les sélecteurs. Ils ne sont donc pas ce que je recherche. Désolé.
dAnjou

Réponses:


12

Il y a quelques options.

Actuellement, j'utilise simplement les outils de développement de Google Chrome ( vidéo d'action ) car cela permet une large gamme d'inspection, de rapports détaillés et de substitution. Après avoir apporté mes modifications, je copie simplement le CSS mis à jour et écrase les sections pertinentes du fichier CSS, actualise, continue de brancher.

Ici, j'ai modifié une définition dans l'outil de développement de Chrome

entrez la description de l'image ici

Je peux suivre le nom du fichier et le numéro de ligne (après avoir copié les modifications) et les coller dans l'éditeur

entrez la description de l'image ici

Au-delà de cela, il existe un outil récemment lancé appelé WebPutty qui est conçu pour atténuer le problème décrit. Bien que je ne l'ait pas encore utilisé personnellement, il est développé par la société Fog Creek Software de Joel Spolsky (Joel est également co-fondateur de StackOverflow), donc je serais prêt à parier que c'est un produit relativement stable, simple et efficace.


Comment copiez-vous exactement le CSS? Et pouvez-vous le faire par fichier? WebPutty ne semble pas être en mesure de gérer les sites Web locaux, mais merci pour l'astuce.
dAnjou

1
@jAnjou J'ai essayé de fournir quelques captures d'écran pour vous montrer comment se déroulerait le flux de travail.
Marco Ceppi

Ah ok. Ce flux de travail est donc presque le même qu'avec Stylebot. Plus grande différence: Stylebot enregistre le CSS afin que vous puissiez recharger la page ou accéder à d'autres pages de ce site Web. Quoi qu'il en soit, c'est un vote positif.
dAnjou

5

Cette question semble avoir déjà été discutée mais vous parlez plus spécifiquement d'un éditeur CSS. Et je suis sûr que c'est pourquoi ils n'ont pas marqué votre question comme dupliquée.

Cependant, ce que je peux vous suggérer, c'est l'utilisation de plusieurs outils que j'ai postés dans les réponses à d'autres questions, comme ceci: Dreamweaver alternative in ubuntu? , et même quand je peux parier que vous l'avez déjà vu, je le transcris ici pour votre commodité:

Votre question semble un peu ambiguë.

Tout d'abord et concernant l'alternative à Dreamweaver, j'ai trouvé toutes les suggestions de toutes les autres réponses excellentes, mais lorsque je cherchais une alternative à Dreamweaver, l'application la plus proche - pour moi - c'était le projet Amaya . Ce qui semble être plus riche que les autres alternatives et un peu plus sophistiqué que le Kompozer.

Une capture d'écran du site officiel est là pour vous de la voir en action:

entrez la description de l'image ici

Des captures d'écran supplémentaires peuvent être atteintes en cliquant sur le lien suivant: http://www.w3.org/Amaya/screenshots/Overview.html

Vous le trouverez peut-être un peu instable, ou du moins c'était pour moi, mais cela peut aussi répondre à vos besoins.

Après avoir joué avec les éditeurs WYSIWYG, j'ai préféré l'encodage direct avec BlueFish mais ce n'est pas un éditeur WYSIWYG.

Et à propos des suggestions pour votre problème avec le Firebug, je ne peux rien dire, désolé.

Veuillez nous faire savoir comment vous avez fait si vous donnez une chance à Amaya.

Bonne chance!

Edit == Après avoir installé Amaya, je le trouve encore loin d'être stable mais il semble en quelque sorte avoir de meilleures fonctionnalités que d'autres applications, si vous considérez que d'autres logiciels sont de simples éditeurs de texte et Amaya est comme un éditeur WYSIWYG.

J'ai testé ce que vous avez dit dans votre commentaire et j'ai constaté qu'Amaya ne se faisait même pas remarquer que quelque chose avait changé dans la structure / le nom des fichiers / dossiers. Qui ne correspondra pas à vos besoins liés à cela.

Dans la capture d'écran suivante, vous pouvez voir que j'ai renommé le dossier "resources" en "resources1" et Amaya le montre encore comme "resources" et il n'y a aucun moyen de le forcer à se rafraîchir. Même après avoir redémarré le logiciel et chargé à nouveau le projet, Amaya ne le remarquera pas.

entrez la description de l'image ici

Je vais suivre votre question de près en espérant que quelqu'un vienne déposer une bonne alternative.

Bonne chance!

De plus, dans les réponses des autres utilisateurs aux mêmes questions, j'ai trouvé le " Blue Griffon Web Editor " qui semble être le seul éditeur Web stable qui dispose d'une fenêtre de prévisualisation en temps réel, que -btw- ne peut pas être vu en mode partagé . Vous ne pouvez voir que le code ou l'aperçu WYSIWYG, pas les deux en même temps.

Captures d'écran placées ici pour votre commodité:

Écran d'aperçu: entrez la description de l'image ici

Écran de code: entrez la description de l'image ici

Cet outil comprend de nombreux outils utiles, mais certains des modules complémentaires ou plugins peuvent être non gratuits (payants). Ce qui réduit l'attrait pour elle.

L' Aptana Studio 3 , que je recommande dans cette réponse: IDE / Editor de développement Web de base comme Dreamweaver? est -pour moi- le meilleur outil de programmation, car je peux prévisualiser en direct à l'aide d'un navigateur Web dans mon bureau étendu à double vue. Ce qui n'est peut-être pas votre cas.

Voilà ce que je peux suggérer. Désolé si cela ne correspond pas à vos besoins et ...

Bonne chance!


5

Ok, tout le monde écoute! Geany est tout simplement génial! Il a un plugin qui ajoute un aperçu du navigateur. Vous pouvez le placer dans la barre latérale, dans la "barre de fond" ou dans une fenêtre supplémentaire. Et maintenant, les deux fonctionnalités bonus supplémentaires de tueur de mauvais cul. 1. Ce navigateur utilise WebKit. Cela signifie qu'il a cet inspecteur génial! 2. Le navigateur se recharge lorsque vous enregistrez un document ouvert.

En plus de cela, il a tellement d'autres fonctionnalités impressionnantes, mais vous devriez l'essayer vous-même. Pour ma part, je suis juste tombé amoureux. Voici une capture d'écran:

Geany


Je souhaite seulement qu'il ouvre qu'il autorise la fenêtre du navigateur dans un nouvel "onglet". Cela rendrait les tests non CSS bien meilleurs.
Nemo

Je ne sais pas si je vous comprends, mais vous pouvez avoir un aperçu du navigateur dans un autre onglet dans presque tous les autres IDE. Mais c'est exactement ce que je ne voulais pas.
dAnjou


Ah ... hmm. Malheureusement, il n'est pas possible dans Geany d'avoir l'aperçu du navigateur (qui est un navigateur complet) dans un onglet à côté des onglets de l'éditeur. Mais vous pouvez l'avoir dans une fenêtre supplémentaire. Vous pouvez donc l'utiliser avec plusieurs moniteurs ou avec un moniteur grand écran (un demi navigateur, un demi éditeur).
dAnjou

4

Désolé, je répondrai à ma propre question. Je viens de trouver Stylebot . Il remplit presque toutes les conditions que j'ai. Il n'a pas de complétion automatique mais je peux vivre avec ça.

Voici une capture d'écran. La barre latérale est Stylebot. Vous avez un mode d'édition basique où vous pouvez éditer rapidement quelques propriétés simples, un mode avancé où vous pouvez éditer le CSS simple pour l'élément sélectionné et avec "Editer CSS" vous pouvez éditer tout le CSS pour la page.

entrez la description de l'image ici


2

Essayez l'addon Firefox Firediff . Il s'intègre à Firebug en ajoutant l'onglet "Modifications", qui, comme son nom le suggère, montre toutes les modifications que vous apportez au CSS ou au DOM.

Cliquez avec le bouton droit sur une modification CSS dans l'onglet "Modifications" pour enregistrer un diff ou un instantané de vos modifications.

capture d'écran de firediff

Il y a aussi cssUpdater , même si je ne l'ai pas utilisé.

Quant à la "localisation du sélecteur", je ne suis pas totalement sûr de ce que vous voulez dire mais il y a selectBug , que vous pouvez télécharger ici .


Firediff ne semble pas fonctionner ici sur Natty et Fx 6.0.2. J'ai fait quelques changements ici et là mais il n'y a aucun changement dans l'onglet "Changements". Je suis presque sûr que cssUpdater serait ce que je recherche, mais il n'est pas disponible pour Linux. Par "emplacement du sélecteur", j'entends les sélecteurs CSS. Lorsque je fais un clic droit quelque part sur le site Web et que je clique sur "Inspecter l'élément", Firebug ou l'inspecteur Chrom (e | ium) me montre l'élément respectif et son CSS.
dAnjou

Cela fonctionne, je l'utilise dans Natty et le dernier Firefox en ce moment. Assurez-vous que toutes les modifications sont affichées (cliquez sur la petite flèche vers le bas dans l'onglet des modifications).
scottl

Ok, maintenant Firediff fonctionne soudainement mais c'est un peu compliqué et le flux de travail avec n'est pas vraiment sympa.
dAnjou

0

Aptana Studio est un excellent IDE mais si je ne me trompe pas, il n'a pas d'aperçu en temps réel. Quoi qu'il en soit, si vous êtes intéressé: http://www.aptana.com/products/studio3

PS: Il dispose d'un raccourci clavier pour l'aperçu, donc ce n'est pas si grave.


Je ne vois pas comment Aptana remplit mes conditions (?).
dAnjou

0

Pas un logiciel en soi, mais le module complémentaire élégant (Chrome et Firefox) met automatiquement à jour une page lorsque vous enregistrez une feuille de style de remplacement. Contrairement à FireBug, il l'enregistre afin que vous puissiez le copier et le coller dans un .cssfichier approprié lorsque vous êtes satisfait.


Je ne comprends pas. Peut-il localiser les sélecteurs?
dAnjou

0

Il y a quelques semaines à peine, un nouveau joueur a grandi sur ce terrain. Je parle des supports de l'éditeur de code open source d'Adobe. Toutes les informations dont vous avez besoin, ici: https://github.com/adobe/brackets/wiki/Linux-Version

La version spring30 vient de sortir il y a quelques jours :) Bonne chance!

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.