Editor CSS con anteprima in tempo reale e localizzazione dei selettori


9

Il titolo dice tutto su ciò che sto cercando. Fondamentalmente dovrebbe essere un software che raccoglie tutti gli stili di un sito Web in modo che io possa modificarli e salvarli.

Si prega di leggere attentamente la domanda, perché desidero soddisfare tutte le condizioni menzionate.

EDIT: voglio essere più chiaro qui o piuttosto descrivere il flusso di lavoro desiderato. La situazione iniziale sarà che hai le fonti del sito Web sul tuo computer locale.
Ora voglio aprire le semplici fonti (HTML / CSS) nel mio editor / IDE / qualunque cosa (no WYSIWYG!). E voglio un'anteprima dal vivo proprio accanto ad essa o in un'altra finestra (non in un'altra scheda!), Voglio vederlo mentre modifico la fonte. L'anteprima dovrebbe essere aggiornata automaticamente (o quando salvo il file, che sostanzialmente sarebbe lo stesso perché CTRL + S è una specie di riflesso: P).
Inoltre dovrebbe avere un ispettore che funziona come quelli di Firebug o Chrom (e | ium). Quando faccio clic su un selettore CSS in quella finestra di ispezione, il cursore dovrebbe passare direttamente ad esso nel rispettivo file di origine.

ALTRO EDIT: trovato questo https://stackoverflow.com/q/4680109/220652 . Quasi lo stesso problema.


2
Firebug e la barra degli strumenti dello sviluppatore Web possono sia modificare direttamente i CSS, sia quest'ultimo può salvarlo.
Lekensteyn,

1
@Lekensteyn: Sì, ma Firebug non è in grado di salvare e Web Developer non è in grado di individuare i selettori. Quindi non sono quello che sto cercando. Scusate.
dAnjou,

Risposte:


12

Ci sono alcune opzioni

Attualmente utilizzo semplicemente gli strumenti per sviluppatori di Google Chrome ( Action Video ) in quanto consentono un'ampia gamma di ispezioni, report dettagliati e over-riding. Dopo aver apportato le modifiche, copio semplicemente il CSS aggiornato e scrivo le sezioni pertinenti del file CSS, aggiorno, continuo a collegarmi.

Qui ho modificato una definizione nello Strumento per gli sviluppatori di Chrome

inserisci qui la descrizione dell'immagine

Posso seguire il nome del file e il numero di riga (dopo aver copiato le modifiche) e incollarle nell'editor

inserisci qui la descrizione dell'immagine

Oltre a ciò c'è uno strumento lanciato di recente chiamato WebPutty che è progettato per alleviare il problema descritto. Anche se non l'ho usato personalmente, è stato sviluppato dalla società Fog Creek Software di Joel Spolsky (Joel è anche co-fondatore di StackOverflow) Quindi sarei disposto a scommettere che è un prodotto relativamente stabile, semplice ed efficace.


Come copi esattamente il CSS? E puoi farlo per file? WebPutty non sembra essere in grado di gestire siti Web locali, ma grazie per il suggerimento.
dAnjou,

1
@jAnjou Ho provato a fornire alcuni screenshot per mostrarti come sarebbe andato il flusso di lavoro.
Marco Ceppi

Ah ok. Quindi questo flusso di lavoro è quasi lo stesso di Stylebot. La differenza più grande: Stylebot salva il CSS in modo da poter ricaricare la pagina o andare ad altre pagine su quel sito Web. Comunque, questo è un voto positivo.
dAnjou,

5

Questa domanda sembra essere già stata discussa ma stai parlando più specificamente di un editor CSS. E sono sicuro che è per questo che non hanno contrassegnato la tua domanda come duplicata.

Tuttavia, ciò che posso suggerirti è l'uso di diversi strumenti che ho pubblicato in risposta ad altre domande, come questa: alternativa a Dreamweaver in Ubuntu? e anche quando posso scommettere che l'hai già visto, lo trascrivo qui per tua comodità:

La tua domanda sembra essere un po 'ambigua.

Prima di tutto e in relazione all'alternativa a Dreamweaver, ho trovato eccellenti tutti i suggerimenti di tutte le altre risposte, ma quando cercavo un'alternativa a Dreamweaver, l'applicazione più vicina - per me - era il Progetto Amaya . Che sembra essere il più ricco di altre alternative e un po 'più sofisticato del Kompozer.

Uno screenshot dal web ufficiale è qui per vederlo in azione:

inserisci qui la descrizione dell'immagine

Ulteriori schermate sono raggiungibili facendo clic sul collegamento successivo: http://www.w3.org/Amaya/screenshots/Overview.html

Potresti trovarlo un po 'instabile, o almeno lo era per me, ma potrebbe anche adattarsi alle tue esigenze.

Dopo aver giocato con gli editor WYSIWYG, ho preferito la codifica diretta con BlueFish ma non è un editor WYSIWYG.

E riguardo ai suggerimenti per il tuo problema con il firebug non posso dire nulla, scusa.

Facci sapere come hai fatto se hai dato ad Amaya la possibilità.

In bocca al lupo!

Modifica == Dopo aver installato Amaya, lo trovo tutt'altro che stabile ma in qualche modo sembra avere caratteristiche migliori rispetto ad altre applicazioni, se si considera che altri software sono semplici editor di testo e Amaya è come un editor WYSIWYG.

Ho testato quello che hai detto nel tuo commento e ho scoperto che Amaya non si è nemmeno accorta che qualcosa è cambiato nella struttura / nome dei file / cartelle. Che non si adatta alle tue esigenze legate a questo.

Nella schermata successiva puoi vedere che ho rinominato la cartella "risorse" in "risorse1" e Amaya la sta ancora mostrando come "risorse" e non c'è modo di forzare l'aggiornamento. Anche dopo aver riavviato il software e aver caricato nuovamente il progetto, Amaya non lo noterà.

inserisci qui la descrizione dell'immagine

Seguirò da vicino la tua domanda sperando che qualcuno venga e lasci cadere una buona alternativa.

In bocca al lupo!

Inoltre, nelle risposte di altri utenti alle stesse domande ho trovato il " Blue Griffon Web Editor " che sembra essere l'unico editor web stabile che presenta una finestra di anteprima in tempo reale, che -btw- non può essere visto in modalità divisa . Puoi vedere solo il codice o l'anteprima di WYSIWYG, non entrambi contemporaneamente.

Schermate inserite qui per comodità:

Schermata di anteprima: inserisci qui la descrizione dell'immagine

Schermata del codice: inserisci qui la descrizione dell'immagine

Questo strumento include molti strumenti utili ma alcuni dei componenti aggiuntivi o plug-in potrebbero non essere gratuiti (a pagamento). Il che riduce l'attrazione ad esso.

L'Aptana Studio 3 , che mi raccomando in questa risposta: di base per lo sviluppo Web IDE / editor come Dreamweaver? è -per me- lo strumento migliore per la programmazione, dal momento che posso vivere l'anteprima usando un browser web nel mio desktop esteso a doppia vista. Quale potrebbe non essere il tuo caso.

Questo è quello che posso suggerire. Scusa se questo non soddisfa le tue esigenze e ...

In bocca al lupo!


5

Ok, ascoltate tutti! Geany è semplicemente FANTASTICO! Ha un plugin che aggiunge un'anteprima del browser. Puoi posizionarlo nella barra laterale, nella "bottombar" o in una finestra aggiuntiva. E ora le due funzionalità extra bonus killer del culo cattivo. 1. Questo browser utilizza WebKit. Ciò significa che ha questo fantastico ispettore! 2. Il browser si ricarica quando si salva un documento aperto.

Oltre a questo ha tante altre fantastiche funzionalità ma dovresti provarlo tu stesso. Io per primo mi sono innamorato. Ecco uno screenshot:

Geany


Vorrei solo che si aprisse che consentiva la finestra del browser in una nuova "Scheda". Ciò renderebbe i test non css molto migliori.
Nemo,

Non sono sicuro di averti capito, ma puoi avere un'anteprima del browser in un'altra scheda in quasi tutti gli altri IDE. Ma è esattamente quello che non volevo.
dAnjou,


Ah ... hmm. Sfortunatamente non è possibile in Geany avere l'anteprima del browser (che è un browser completo) in una scheda accanto alle schede dell'editor. Ma puoi averlo in un'altra finestra. Quindi potresti usarlo con più monitor o con un monitor widescreen (metà browser, metà editor).
dAnjou,

4

Mi dispiace gente, ma risponderò alla mia domanda. Ho appena trovato Stylebot . Soddisfa quasi tutte le condizioni che ho. Non ha alcun completamento automatico ma posso conviverci.

Ecco uno screenshot. La barra laterale è Stylebot. Hai una modalità di modifica di base in cui puoi modificare rapidamente alcune semplici proprietà, una modalità avanzata in cui puoi modificare il CSS semplice per l'elemento selezionato e con "Modifica CSS" puoi modificare l'intero CSS per la pagina.

inserisci qui la descrizione dell'immagine


2

Prova il componente aggiuntivo di Firefox Firediff . Si integra con Firebug aggiungendo la scheda "Modifiche", che, come suggerisce il nome simile a zen, mostra tutte le modifiche apportate al CSS o al DOM.

Fare clic con il tasto destro del mouse su una modifica CSS nella scheda "Modifiche" per salvare una diff o un'istantanea delle modifiche.

screenshot di firediff

C'è anche cssUpdater , anche se non l'ho usato.

Per quanto riguarda la "localizzazione dei selettori", non sono del tutto sicuro di cosa tu voglia dire, ma c'è selectBug , che puoi scaricare qui .


Firediff non sembra funzionare qui su Natty e Fx 6.0.2. Ho apportato alcune modifiche qua e là ma non ci sono modifiche nella scheda "Modifiche". Sono quasi sicuro che cssUpdater sarebbe quello che sto cercando, ma non è disponibile per Linux. Per "posizione del selettore" intendo i selettori CSS. Quando faccio clic con il pulsante destro del mouse da qualche parte sul sito Web e faccio clic su "Inspect Element", Firebug o Chrom (e | ium) Inspector mi mostrano il rispettivo elemento e il suo CSS.
dAnjou,

Funziona, lo sto usando in Natty e nell'ultimo Firefox in questo momento. Assicurati che tutte le modifiche vengano visualizzate (fai clic sulla piccola freccia rivolta verso il basso nella scheda delle modifiche).
Scott

Ok, ora Firediff funziona all'improvviso ma è un po 'disordinato e il flusso di lavoro con esso non è davvero bello.
dAnjou,

0

Aptana Studio è un ottimo IDE ma se non sbaglio, non ha l'anteprima in tempo reale. Ad ogni modo, se sei interessato: http://www.aptana.com/products/studio3

PS: ha un tasto di scelta rapida impostato per l'anteprima, quindi non è un grosso problema.


Non vedo come Aptana soddisfi una delle mie condizioni (?).
dAnjou,

0

Non un software di per sé, ma Stylish Addon (chrome e firefox) aggiorna automaticamente una pagina quando si salva un foglio di stile di sostituzione. A differenza di FireBug, lo salva in modo da poterlo copiare e incollare in un .cssfile corretto quando sei soddisfatto.


Non capisco. Può localizzare i selettori?
dAnjou,

0

solo un paio di settimane fa un nuovo giocatore cresciuto in questo campo. Sto parlando delle parentesi dell'editor di codice open source di Adobe. Tutte le informazioni necessarie, qui: https://github.com/adobe/brackets/wiki/Linux-Version

La versione spring30 è stata appena rilasciata un paio di giorni fa :) Buona fortuna!

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.