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.
Ottimizzare il codice
L'ultimo strumento che analizzeremo è lo StyleSweeper. Il mio suggerimento è di usarlo solo alla fine, quando insomma il CSS è pronto e va solo ottimizzato nella sua forma. Si tratta, in pratica, di un lavoro di rifinitura sul codice, di post-produzione si direbbe.
Lo StyleSweeper interviene sul modo in cui il codice è scritto. Per configurarlo si parte da una finestra a pannelli attivata dalla combinazione SHIFT + F7. In ciascun pannello possiamo impostare i modi in cui vogliamo che agisca.
Si parte dall'impostazione delle singole regole [Figura 5]. Come vogliamo organizzarle? Una per riga? Tutte sulla stessa riga? Oppure, come nell'esempio, fare in modo di forzare l'andata a capo se la regola supera i 60 caratteri?
Si prosegue con i selettori [Figura 6]. Possiamo intanto stabilire se li vogliamo lasciare intatti, se li vogliamo tutti in maiuscolo o tutti in minuscolo. Quindi i criteri di ordinamento. Qui la scelta è personale. Ognuno ha il suo ordine mentale e il suo schema di riferimento. L'importante è scegliere un'opzione che ci consenta di tornare sul foglio di stile senza giramenti di testa alla ricerca di quella regola o di quella proprietà. Nell'esempio abbiamo usato l'ordinamento per specificità: colloca all'inizio i selettori generici di elemento (body, h1, p, etc...). Quindi gli id. Infine le classi.
Con il pannello succesivo si passa dai selettori alle proprietà [Figura 7]. Anche qui si definisce prima l'uso di maiuscolo o minuscolo, e quindi i criteri di ordinamento.
Il quarto pannello riguarda le shorthand properties, ovvero la definizione abbreviata per proprietà come background, font, margin e padding: il mio consiglio è di usarle sempre quando è possibile già in fase di scrittura. Se non lo si è fatto TopStyle potrà farlo per noi selezionando tutte caselle mostrate nell'immagine.
Per finire [Figura 9], possiamo impostare quale codice usare per i colori e se eliminare righe vuote e spazi bianchi presenti nel foglio di stile.
Una volta conclusa questa operazione, si può procedere alla 'ripulitura'. Il confronto tra questa immagine [Figura 10] e la prima vista nell'articolo, può dare conto delle modifiche avvenute nel nostro CSS di esempio.
