Guida introduttiva: Applicazione di stili ai controlli (HTML)

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Per personalizzare l'aspetto dei controlli della tua app di Windows Runtime in JavaScript, puoi usare i fogli di stile CSS (Cascading Style Sheet), proprio come faresti con un sito Web. Le app di Windows Store in JavaScript supportano anche alcune funzionalità avanzate per l'applicazione di stili ai controlli, mentre la libreria Windows per JavaScript offre un set completo di stili che consente di creare facilmente app in stile Windows 8.

In questa guida introduttiva ti mostriamo come includere i fogli di stile di WinJS, come creare controlli HTML (detti anche controlli intrinseci), come creare controlli WinJS e come usare le classi di tipografia disponibili in WinJS.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità delle app dall'inizio alla fine: Interfaccia utente delle app di Windows Store, dall'inizio alla fine

Prerequisiti

Partiamo dal presupposto che tu sappia come gestire eventi in un'app di Windows Runtime in JavaScript. Per sapere qual è il modo migliore per gestire gli eventi, vedi Guida introduttiva: Aggiunta di controlli HTML e gestione degli eventi.
Partiamo dal presupposto che tu sappia creare e usare controlli WinJS. Per saperne di più, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.
Devi inoltre avere familiarità con CSS. (Per altre info su CSS, vedi Nozioni di base su HTML/CSS/JavaScript.)

Vantaggi dell'uso dei fogli di stile della libreria Windows per JavaScript

I fogli di stile WinJS offrono:

Un set di stili per definire un aspetto ottimale per i controlli e fare in modo che interagiscano correttamente con gli schermi basati su tocco.
Supporto automatico delle modalità a contrasto elevato. I nostri stili sono stati progettati con una particolare attenzione al contrasto elevato, in modo da assicurare una corretta visualizzazione quando la tua app viene eseguita in un dispositivo in modalità a contrasto elevato.
Supporto automatico di altre lingue. I fogli di stile di WinJS selezionano automaticamente il tipo di carattere corretto per ogni lingua supportata da Windows 8. Puoi anche usare più lingue nella stessa app, con la certezza che verranno tutte visualizzate correttamente.
Supporto automatico di altri ordini di lettura. I controlli, i layout e gli stili HTML e WinJS vengono modificati automaticamente per le lingue che vengono lette da destra a sinistra.

Uso dei fogli di stile della libreria Windows per JavaScript più recenti

Per abilitare i fogli di stile WinJS più recenti:

Scarica la versione più recente dalla pagina per il download di WinJS e copiala nella directory della tua app o del tuo sito Web.
Aggiungi i riferimenti per gli script e gli stili CSS WinJS in ogni pagina dell'app o del sito Web che usa le funzionalità di WinJS.

Questo esempio mostra l'aspetto di questi riferimenti per un'app con i file di WinJS nella directory radice.

    <!-- WinJS style sheets (include one) -->
    <link href="/WinJS/css/ui-dark.css" rel="stylesheet">
    <link href="/WinJS/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="/WinJS/js/WinJS.js"></script>

WinJS ti offre due fogli di stile predefiniti che puoi usare per creare app in stile Windows: ui-dark.css e ui-light.css.

Per le app che visualizzano principalmente immagini o video, ti consigliamo di usare il foglio di stile scuro,
riservando invece il foglio di stile chiaro per le app che contengono molto testo.

Se usi una combinazione colori personalizzata, scegli il foglio di stile che meglio si addice all'aspetto della tua app.

Questi fogli di stile definiscono gli stili seguenti:

Stili di base

Stili per gli elementi html, body e iframe.
Stili dei controlli HTML intrinseci

Stili per i controlli HTML intrinseci, ad esempio button.
Altre classi di controlli HTML intrinseci

Classi CSS che puoi assegnare ai controlli HTML intrinseci per cambiarne l'aspetto. Per un elenco completo di queste classi, vedi Classi CSS per i controlli HTML.
Stili dei controlli WinJS

Classi CSS che rappresentano le parti dei controlli WinJS a cui è possibile applicare uno stile.
Stili tipografici

Stili per gli elementi tipografici, ad esempio gli elementi h1, dd e p.
Altre classi tipografiche

Classi CSS che puoi usare per applicare uno stile al testo. Ad esempio, puoi usare la classe win-type-large per ingrandire il testo di un elemento.

Personalizzazione dell'aspetto dell'app

Se desideri personalizzare l'aspetto dalla tua app, non hai bisogno di buttare via gli stili WinJS e ripartire da zero. Puoi infatti apportare modifiche incrementali semplicemente sovrascrivendo gli stili che vuoi modificare.

È molto meglio sovrascrivere gli stili WinJS piuttosto che crearne di nuovi. Quando l'app viene eseguita in modalità a contrasto elevato, le eventuali modifiche ai colori degli stili predefiniti vengono sovrascritte automaticamente da una combinazione colori che supporta il contrasto elevato.

Puoi sovrascrivere qualsiasi stile nel foglio di stile predefinito creando un foglio di stile personalizzato e includendolo dopo il foglio di stile di WinJS:


<!-- The WinJS style sheet. -->
<link href="/WinJS/css/ui-dark.css" rel="stylesheet">

<!-- Your style sheet for overriding portions of the default style sheet. -->
<link href="/css/mystylesheet.css" rel="stylesheet" />

Come specificare i colori

Puoi sovrascrivere i fogli di stile di WinJS oppure specificare fogli di stile personalizzati. Nel secondo caso la soluzione migliore è usare i colori di sistema CSS, poiché vengono visualizzati automaticamente nel modo corretto quando l'app è in modalità a contrasto elevato. Per l'elenco dei colori di sistema, vedi Colori di sistema definiti dall'utente.

Puoi anche non usare i colori di sistema definiti dall'utente e specificare invece un valore RGB, ma solo se stai sovrascrivendo uno stile WinJS esistente. Se sovrascrivi uno stile WinJS e il sistema passa in modalità a contrasto elevato, le informazioni sui colori personalizzati vengono ignorate e al loro posto viene usata una tavolozza compatibile con questa modalità.

Applicazione di stili ai controlli HTML

Puoi applicare stili ai controlli HTML (i controlli che fanno parte dello standard HTML5, come button, textarea e select) esattamente come lo faresti in una pagina HTML tipica mediante CSS. (Per informazioni su CSS e sul suo funzionamento, vedi l'argomento relativo alle nozioni di base su HTML/CSS/JavaScript. )

Ad esempio, per applicare uno stile a una casella di testo in modo che sia grande 400 pixel, scrivi il CSS seguente:

input[type=text]
{
    width: 400px;
}

Controllo di inserimento testo

Un controllo tipico è composto da diversi componenti o parti. Ad esempio, il controllo di inserimento testo dell'esempio precedente ha due parti: il valore di testo e il pulsante di chiusura.

Controllo di inserimento testo con componenti con etichetta

Le app di Windows Store in JavaScript offrono pseudoelementi CSS che consentono di applicare uno stile alle singole parti di numerosi controlli. Lo pseudoelemento per il valore di inserimento testo è -ms-value, mentre quello per il pulsante di chiusura è -ms-clear.

Controllo di inserimento testo con valori

Per applicare uno stile a una parte di un controllo, usa la sintassi seguente:

element selector::part name { /* Inserisci qui gli stili */ }

Ad esempio, per applicare uno stile al pulsante di chiusura della casella di inserimento, crea lo stile seguente:

input[type=text]::-ms-clear
{
            border: 2px solid orange
}

Controllo di inserimento testo con pulsante di chiusura con bordo arancione

Puoi combinare i selettori di pseudoelementi con altri selettori in modo da ottenere un controllo con un nome di classe o un ID specifico.

Ad esempio, per applicare uno stile al pulsante di chiusura di un controllo di inserimento testo che usa la classe "orangeButton", crea lo stile seguente:

input[type=text].orangeButton::-ms-clear
{
            border: 2px solid orange
}

Per altre info sui vari modi in cui puoi combinare pseudoelementi e altri selettori, vedi l'argomento relativo ai selettori CSS.

Ecco alcune delle parti disponibili per ogni controllo HTML.

Controllo	Parti
input type=checkbox	-ms-check
input type=radio	-ms-check
input type=password	-ms-reveal
input type=range	-ms-fill-lower, -ms-fill-upper, -ms-thumb, -ms-track, -ms-ticks-after, -ms-ticks-before, -ms-tooltip
input type=email, input type=number, input type=password, input type=search, input type=tel, input type=url	-ms-value,-ms-clear
input type=file	-ms-value, -ms-browse
progress	-ms-fill
select	-ms-value, -ms-expand

Gli elementi option del controllo Select offrono inoltre il supporto per gli stili CSS per assicurare un controllo di precisione sull'aspetto degli elementi degli elenchi a discesa, come il colore e gli stili dei caratteri. Questo consente scenari di modifica come un controllo di selezione del carattere, in cui gli utenti possono visualizzare in anteprima diversi stili dei caratteri prima di scegliere quello da usare, come in questo caso.


<select id="fontNameSelect" onChange="formatText('fontName')">
    <option style="font-family:Arial;">Arial</option>
    <option style="font-family:Comic Sans MS;">Comic Sans MS</option>
    <option style="font-family:Courier New;">Courier New</option>
    <option style="font-family:Cursive;">Cursive</option>
    <option style="font-family:Segoe Script;">Segoe Script</option>
</select>

Uso delle classi di controlli HTML

Il foglio di stile include classi CSS che puoi assegnare ai controlli HTML intrinseci per cambiarne l'aspetto. Ad esempio, puoi usare la classe win-backbutton per dare a un pulsante standard l'aspetto di un pulsante per l'esplorazione all'indietro.

<button class="win-backbutton"></button>

L'applicazione di questa classe dà al pulsante l'aspetto seguente:

Pulsante a cui è applicata la classe CSS win-backbutton

Applicazione di stili ai controlli della libreria Windows per JavaScript

Per applicare uno stile a un controllo WinJS, devi sovrascrivere le classi CSS di WinJS per quel controllo. Ad esempio, per applicare uno stile a un controllo AppBar, devi sovrascrivere la classe win-appbar.

L'esempio seguente crea uno stile che nasconde l'indicatore di stato di un controllo ListView.

.win-listView .win-progress {
    display: none;
}

Per un elenco completo delle classi disponibili, vedi l'argomento relativo alle classi CSS di WinJS. Per altre info sulle classi usate da un controllo specifico, vedi la pagina di riferimento di tale controllo.

Alcuni controlli, come ListView e FlipView, supportano anche i modelli di elementi. I modelli di elementi consentono un ottimo controllo dell'aspetto e del contenuto degli elementi di un elenco. Per altre info, vedi Guida introduttiva: Aggiunta di un controllo ListView e Guida introduttiva: Aggiunta di un controllo FlipView.

Uso delle classi di tipografia

Il foglio di stile contiene anche classi CSS per la tipografia che puoi applicare a qualsiasi elemento contenente testo. Ad esempio, puoi usare la classe win-title per applicare a un titolo lo stile dei titoli di Windows 8. L'esempio seguente usa le classi di tipografia per creare diversi tipi di titoli.


     <p class="win-type-xx-large">win-type-xx-large</p>
     <p class="win-type-medium">win-type-medium</p>
     <p class="win-type-xx-small">win-type-xx-small</p>

Elementi che usano le classi di tipografia

Per un elenco completo di queste classi di tipografia, vedi l'argomento relativo alle classi CSS per la tipografia.

Esempi

Per saperne di più sugli stili, vedi gli esempi seguenti:

Riepilogo

In questa guida introduttiva hai imparato ad usare i fogli di stile di WinJS, ad applicare stili ai controlli intrinseci e WinJS e a usare le altre classi CSS fornite da WinJS per la tipografia.