Ottimizzare i CSS con TopStyle

20 marzo 2006

Per scrivere un buon CSS basta il Blocco Note o qualsiasi altro editor di testo. Ma poter contare su un buon programma dedicato semplifica enormemente la vita. Oltre a velocizzare la scrittura del codice, questo genere di applicazione mette a disposizione dello sviluppatore una serie di fondamentali strumenti di controllo e ottimizzazione. In questo brevissimo articolo valuteremo quelli forniti da TopStyle 3.10. Il software di Bradbury Soft è da anni una sorta di modello di riferimento: il set di funzioni è completo, gli ausilii alla compilazione del codice eccellenti. Nato come editor di fogli di stile, si è trasformato con le ultime versioni in un ambiente di sviluppo completo anche per la parte (x)HTML.

Affronteremo in altri articoli l’analisi degli strumenti di scrittura. In questo ci soffermeremo esclusivamente sui tool di verifica e ottimizzazione del codice.

Validazione

Quando si scrive un CSS, è sempre opportuno verificare l’aderenza di quanto prodotto rispetto alle specifiche ufficiali del W3C. TopStyle consente di validare il foglio di stile su cui si sta lavorando senza dover abbandonare il programma, mettendo mano ad un browser che ci porterà sulla pagina del validatore: un indubbio risparmio di tempo.

L’interfaccia del programma [Figura 1], infatti, presenta nella parte inferiore un’area destinata all’anteprima: non è altro che una finestra di browser integrata. Quando si seleziona l’opzione W3C CSS Validator dal menu Tools, TopStyle si collega al validatore, che in pochi secondi restituisce il responso [Figura 2].

Supporto dei browser

Uno delle caratteristiche più interessanti di TopStyle, è quella che consente di verificare quasi ‘in diretta’ il supporto delle varie regole create nel foglio di stile per i principali browser. Chi scrive CSS sa quanto la questione del supporto cross-browser sia cruciale. Quasi sempre il processo prevede la scrittura del codice e quindi il test nei browser per cui si vuole garantire il supporto. Spesso si fatica tanto per poi scoprire che in uno di essi i risultati sono ben lontani dalle nostre aspettative. E magari non si sa bene quale sia l’origine del problema. L’ideale è effettuare una prima verifica in fase di produzione.

Lo strumento che TopStyle ci mette a disposizione si chiama StyleCheker. Prima di sottoporre un CSS a verifica, dobbiamo però configurarlo secondo le nostre esigenze. E prima di configurarlo dobbiamo avere ben chiaro qual è l’insieme di browser per cui vogliamo garantire il supporto.

Per accedere alla finestra di configurazione dello StyleChecker, è sufficiente usare la combinazione di tasti SHIFT + F6. Si aprirà questa finestra [Figura 3]. Come si vede, subito dopo l’indicazione delle specifiche ufficiali del W3C, presenta una lista di browser nelle loro varie versioni. Qui selezioneremo quelli che ci interessa testare.

Effettuata la scelta e chiusa la finestra di configurazione, basterà premere il tasto F6 per far partire la verifica. Il verdetto di TopStyle lo possiamo leggere, ancora una volta, nell’area inferiore dello schermo [Figura 4].

Come vanno intepretati i risultati? Intanto questi ultimi sono organizzati e raggruppati in base alle singole specifiche che abbiamo deciso di testare, un modo eccellente per isolare i problemi di ciascun browser. Nella lettura, poi, dobbiamo tenere presente che non tutte le segnalazioni hanno lo stesso valore.

Quelle ‘gravi’, di cui non si può non tenere conto, sono gli errori, contraddistinti da simboli in rosso. Si tratta di punti del CSS che possono compromettere gravemente la corretta visualizzazione della pagina in quello specifico browser. Può trattarsi di proprietà non supportate, di errori nella scrittura del codice, di regole non corrette. Cliccando sull’indicazione dell’errore segnalato, viene automaticamente selezionato nel codice il punto problematico e, per certi tipi di errore, viene fornita una spiegazione, con il suggerimento della possibile soluzione.

I simboli in giallo, invece, segnalano gli avvisi (Warnings). Con essi TopStyle ci segnala dei punti problematici che potrebbero influire negativamente sulla visualizzazione della pagina. Nell’esempio mostrato in figura 4, l’avviso ci avverte che abbiamo omesso di segnalare una famiglia di font generica e ci suggerisce di usare, ad esempio, ‘sans-serif’.

La piccola lampadina verde contraddistingue invece i cosiddetti ‘browser tips’. Si tratta di segnali d’allarme relativi a specifici bug di ciascun browser. Non indicano necessariamente un errore. Sono un modo per dire: “Stai attento, questo browser ha problemi con questa proprietà. Cerca di usarla consapevolmente”. Per esempio, se si usano indicazioni di width e height su un box, TopStyle segnala per Internet Explorer che questo browser ha problemi nell’implementazione di queste proprietà (errata interpretazione del box model).

In blue, infine, sono evidenziati in forma di suggerimenti quei punti che si discostano dalle pratiche comunemente riconosciute come ottimali. Se userete il programma, vedrete che esso segnala sempre i casi in cui, definito un colore di primo piano per un elemento, non si specifica anche un colore di sfondo.

Se vuoi aggiornamenti su Ottimizzare i CSS con TopStyle inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Ottimizzare i CSS con TopStyle

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy