Tutte le personalizzazioni visive e la maggior parte delle personalizzazioni del comportamento vengono effettuate creando un CSS personalizzato.
Il flusso di lavoro consigliato consiste nell’accettare il file CSS predefinito per il visualizzatore appropriato, copiarlo in un percorso diverso, personalizzarlo e specificare il percorso del file personalizzato nella style=
comando.
I file CSS predefiniti si trovano nel seguente percorso:
<s7_viewers_root>/html5/FlyoutViewer.css
Il file CSS personalizzato deve contenere le stesse dichiarazioni di classe di quella predefinita. Se una dichiarazione di classe viene omessa, il visualizzatore non funziona correttamente perché non fornisce stili predefiniti incorporati per gli elementi dell’interfaccia utente.
Il modo alternativo per fornire regole CSS personalizzate consiste nell’utilizzare stili incorporati direttamente sulla pagina web o in una delle regole CSS esterne collegate.
Quando crei CSS personalizzati, ricorda che il visualizzatore assegna .s7flyoutviewer
all'elemento DOM contenitore. Se utilizzi un file CSS esterno passato con style=
comando, utilizza .s7flyoutviewer
Classe come classe padre nel selettore discendente per le regole CSS. Se esegui stili incorporati nella pagina web, qualifica anche questo selettore con un ID dell’elemento DOM contenitore come segue:
#<containerId>.s7flyoutviewer
È possibile indirizzare diversi dispositivi e dimensioni di incorporamento in CSS per rendere diversa la visualizzazione del contenuto, a seconda del dispositivo di un utente o di un particolare layout di pagina web. Questa funzionalità include, ma non è limitata a, diversi layout di pagine web, dimensioni degli elementi dell’interfaccia utente e risoluzione dell’immagine.
Il visualizzatore supporta due metodi per creare CSS adattabili: Marcatori CSS e query multimediali CSS standard. È possibile utilizzare questi metodi in modo indipendente o insieme.
Marcatori CSS
Per aiutare a creare CSS reattivi, il visualizzatore supporta marcatori CSS che assegnano in modo dinamico classi CSS speciali all’elemento contenitore di visualizzatori di livello principale. L'assegnazione si basa sulle dimensioni del visualizzatore in fase di esecuzione e sul tipo di input utilizzato sul dispositivo corrente.
Il primo gruppo di Marcatori CSS include .s7size_large
, .s7size_medium
e .s7size_small
classi. Vengono applicati in base all’area di runtime del contenitore del visualizzatore. Se l'area di visualizzazione è uguale o maggiore delle dimensioni di un monitor desktop comune .s7size_large
è utilizzato; se l'area è vicina alle dimensioni di un dispositivo tablet comune .s7size_medium
è assegnato. per aree simili agli schermi dei telefoni cellulari, .s7size_small
è impostato. Lo scopo principale di questi marcatori CSS è quello di creare layout di interfaccia utente diversi per schermi e dimensioni di visualizzatore diversi.
Il secondo gruppo di Marcatori CSS include .s7mouseinput
e .s7touchinput
. Il marcatore .s7touchinput
è impostato se il dispositivo corrente dispone di capacità di input touch; altrimenti, .s7mouseinput
viene utilizzato. Questi marcatori sono destinati a creare elementi di input dell'interfaccia utente con diverse dimensioni dello schermo per diversi tipi di input, perché normalmente l'input touch richiede elementi più grandi. Nei casi in cui il dispositivo dispone sia di input del mouse che di funzionalità touch, .s7touchinput
è impostato e il visualizzatore esegue il rendering di un’interfaccia utente touch.
Il seguente esempio CSS imposta le dimensioni del pulsante zoom in su 28 x 28 pixel sui sistemi con input del mouse e 56 x 56 pixel sui dispositivi touch. Inoltre, nasconde completamente il pulsante se le dimensioni del visualizzatore diventano piccole:
.s7flyoutviewer.s7mouseinput .s7swatches .s7thumb {
width: 28px;
height: 28px;
}
.s7flyoutviewer.s7touchinput .s7swatches .s7thumb {
width: 56px;
height: 56px;
}
.s7flyoutviewer.s7size_small .s7swatches {
visibility: hidden;
}
Per eseguire il targeting dei dispositivi con una densità di pixel diversa, utilizza le query multimediali CSS. Il seguente blocco di query per contenuti multimediali conterrebbe un CSS specifico per le schermate ad alta densità:
@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}
L’utilizzo dei marcatori CSS è il modo più flessibile per creare CSS adattabili. Il motivo è che ti consente di eseguire il targeting non solo delle dimensioni dello schermo del dispositivo, ma anche di quelle effettive del visualizzatore, il che può essere utile per i layout reattivi di pagine web progettate.
Query multimediali CSS
Il rilevamento dei dispositivi può essere eseguito anche utilizzando semplici query multimediali CSS. Tutto ciò che è racchiuso in un determinato blocco di query multimediale viene applicato solo quando viene eseguito su un dispositivo corrispondente.
Quando vengono applicati ai visualizzatori mobili, utilizza quattro query multimediali CSS, definite nel CSS nel seguente ordine:
Contiene solo regole specifiche per tutti i dispositivi touch.
@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px)
{
}
Contiene solo regole specifiche per tablet con schermi ad alta risoluzione.
@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}
Contiene solo regole specifiche per tutti i telefoni cellulari.
@media only screen and (max-device-width:9in) and (max-device-height:9in)
{
}
Contiene solo regole specifiche per i telefoni cellulari con schermi ad alta risoluzione.
@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}
Utilizzando un approccio alle query multimediali, è necessario organizzare i CSS con rilevamento del dispositivo come segue:
Non è necessario duplicare l’intero CSS del visualizzatore in ogni query multimediale. Solo le proprietà specifiche per determinati dispositivi vengono ridefinite all'interno di una query multimediale.
Molti elementi dell’interfaccia utente del visualizzatore sono formattati utilizzando immagini bitmap e hanno più di un diverso stato visivo. Un buon esempio è un pulsante che normalmente ha almeno tre stati diversi: "su", "sopra" e "giù". Ogni stato richiede l'assegnazione di una propria immagine bitmap.
Con un approccio classico allo stile, il CSS avrebbe un riferimento separato al singolo file di immagine sul server per ogni stato dell’elemento dell’interfaccia utente. Di seguito è riportato un esempio di CSS per lo stile del pulsante di scorrimento:
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-image:url(images/v2/ScrollLeftButton_up.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-image:url(images/v2/ScrollLeftButton_over.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-image:url(images/v2/ScrollLeftButton_down.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-image:url(images/v2/ScrollLeftButton_disabled.png);
}
L’inconveniente di questo approccio è che l’utente finale si trova in una situazione di sfarfallio o di ritardo nella risposta dell’interfaccia utente quando l’elemento viene interagito per la prima volta. Questa azione si verifica perché l’immagine per il nuovo stato elemento non è ancora stata scaricata. Inoltre, questo approccio può avere un leggero impatto negativo sulle prestazioni a causa di un aumento del numero di chiamate HTTP al server.
Gli spriti CSS è un approccio diverso in cui l’immagine per tutti gli stati degli elementi viene combinata in un singolo file PNG denominato "sprite". Tale "sprite" ha tutti gli stati visivi per l'elemento specificato posizionato uno dopo l'altro. Quando si crea lo stile di un elemento dell’interfaccia utente con sprites, viene fatto riferimento alla stessa immagine sprite per tutti gli stati diversi del CSS. Inoltre, il background-position
viene utilizzata per ogni stato per specificare quale parte dell'immagine "sprite" viene utilizzata. È possibile strutturare un'immagine "sprite" in qualsiasi modo appropriato. In genere, i visualizzatori lo dispongono di una sovrapposizione verticale. Di seguito è riportato un esempio basato su "sprite" di stile dello stesso pulsante di scorrimento dall’alto:
.s7flyoutviewer .s7scrollleftbutton[state] {
background-image: url(images/v2/ScrollLeftButton_light_sprite.png);
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="up"]{
background-position: -56px -504px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="over"]{
background-position: -0px -504px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="down"]{
background-position: -56px -448px;
}
.s7flyoutviewer .s7swatches .s7scrollleftbutton[state="disabled"]{
background-position: -0px -448px;
}
!IMPORTANT
La regola non è supportata per gli elementi del visualizzatore di stili. In particolare, !IMPORTANT
Questa regola non deve essere utilizzata per sostituire uno stile predefinito o di esecuzione fornito dal visualizzatore o dall’SDK del visualizzatore. Il motivo è che può influenzare il comportamento dei componenti appropriati. Invece, utilizza i selettori CSS con la specificità appropriata per impostare le proprietà CSS documentate in questa guida di riferimento.background-image
proprietà.width
e height
le proprietà di un elemento dell’interfaccia utente ne definiscono la dimensione logica. Dimensione della bitmap passata a background-image
non influisce sulle dimensioni logiche.-webkit-background-size:contain
per ridimensionare lo sfondo fino alle dimensioni dell'elemento dell'interfaccia utente logica.display:none
alla relativa classe CSS.rgba(R,G,B,A)
. In caso contrario, è possibile utilizzare il formato #RRGGBB
.Di seguito è riportata la documentazione di riferimento relativa agli elementi dell’interfaccia utente per il visualizzatore a comparsa: