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

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.

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

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

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.

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:

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.

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:

Écran de code:

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!

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:

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.

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.

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 .

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.

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.

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!