CSS3 & JavaScript
Panoramica: In questo articolo parlerò di Cascading Style Sheet Version 3.0 e come usarlo in JavaScript. Foglio di stile CSS è un linguaggio di stile utilizzato per definire la semantica presentazione di un documento scritto in un linguaggio di markup ad es. HTML, XHTML, XML, e SVG & XUL. Cascading Style Sheet separa in primo luogo il contenuto del documento dalla sua presentazione. Questo fornisce un miglior controllo mantenendo il documento e anche un facile accesso per modificare la presentazione del documento.
Introduzione:
CSS3 è l'ultima versione di Cascading Style Sheet che ha moduli separati per diversi documenti. Ciascuno di questi moduli aggiunge alcuni o altre caratteristiche. Alcune delle importanti moduli aggiunti in CSS3 sono:
- I selettori
- box model
- sfondi & frontiere
- valori dell'immagine & contenuti sostituiti
- effetti di testo
- 2trasformazioni D / 3D
- animazioni
- layout di colonna multipla
- Interfaccia utente
proprietà CSS3:
Le proprietà più comunemente usate di CSS3 sono elencati come sotto:
- border-radius: border-radius è la proprietà CSS3 più popolare tra tutti. Usando questo possiamo creare circoli.
Listing 1: Codice per creare un cerchio
[Code]
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
[/Code]
- box-shadow: box-shadow ci permette di applicare la profondità ai nostri elementi. box-shadow accetta quattro parametri :
- x-offset
- y-offset
- sfocatura
- colore dell'ombra
- text-shadow: Simile al box-shadow questo si applica anche sul testo e accetta gli stessi quattro parametri.
- sfondi multipli: In CSS3 la proprietà background è revisionato da più sfondi. Il frammento di codice seguente mostra come implementare sfondi multipli.
Listing 2: Codice di avere più sfondi
[Code]
.scatola {
sfondo: URL(image / path.jpg) 0 0 no-repeat,
URL(image2 / path.jpg) 100% 0 no-repeat;
}
[/Code]
- background-size: Questa struttura ci permette di mettere l'immagine di sfondo in una dimensione fissa. Questa proprietà accetta due parametri :
- xwidth &
- ywidth
Impostazione di proprietà CSS3:
L'impostazione della proprietà CSS tramite JavaScript è abbastanza semplice. Dobbiamo prima accedere al “stile” oggetto di un elemento, e poi seguire con il CSS nome della proprietà desiderata per impostarla. Se il nome della proprietà CSS è un trattino, ad esempio “colore di sfondo”, il trattino dovrebbe essere eliminato e il carattere che segue dovrebbe essere capitalizzata facendo riferimento ad esso in JavaScript. Questo è abbastanza semplice. Con l'impostazione proprietà CSS3, tecnicamente non cambia nulla; il problema sa quali proprietà per impostare! Vedi, come i browser hanno corso per supportare le proprietà CSS3 prima che siano finalizzati, l'uso di prefissi vendor era quello che i browser trasformato per offrire un “provvisorio” soluzione mentre i dettagli delle proprietà ufficiali sono hash fuori. Tutti i browser principali hanno un proprio prefisso vendor, quali sono:
| Prefisso | Descrizione |
| -ms- | prefissi Microsoft CSS, quali -ms filtro, -ms-comportamento, e -ms-zoom. |
| -moz- | prefissi Mozilla CSS, come ad esempio -moz-box-shadow, -moz-border-radius, e -moz-trasformare. |
| -il- | prefissi Opera CSS, quali -o-transizione, -o-text-trabocco, -O-trasformare. |
| -webkit- | prefissi Webkit CSS (Safari, chome ecc), come ad esempio -webkit-box-shadow, -webkit-border-radius, e -webkit-trasformare. |
| -khtml- | prefissi Konqueror CSS,come ad esempio -khtml-user-select e -khtml-border-radius |
tavolo 1: prefisso CSS fornitore e le loro estensioni
Impostazione delle proprietà CSS vendor in CSS è semplicemente un esercizio di pazienza, ma quando si tratta di JavaScript, possiamo aggiungere logistica allo stesso tempo. Mentre le normali regole di impostazione CSS utilizzando JavaScript ancora applicare per l'impostazione del fornitore specifico proprietà CSS, come facciamo a sapere quale proprietà per impostare? For example, in Firefox 3.5, -moz-box-shadow è la proprietà supportato, mentre in IE9, è la proprietà box-shadow ufficiale che è riconosciuta. Sicuramente possiamo solo impostare tutte le possibili proprietà. Un più efficiente, modo elegante è quello di sondare il browser per vedere quale proprietà CSS supporta, quindi impostare solo la proprietà.
Quindi, esattamente come possiamo fare per impostare una proprietà CSS3 quando browser diversi possono supportare una variazione delle proprietà? La chiave sta nel fatto che se un browser supporta una particolare proprietà CSS, verrà restituito un valore stringa (stringa vuota se non ancora impostato) quando lo si richiede da un elemento della pagina. In altre parole, la proprietà esiste sull'elemento. Se non lo fa, il valore undefined viene restituito invece. Con quello in mente, siamo in grado di eseguire un controllo di una volta prima di impostare una proprietà CSS3 quale variante della proprietà supporta, e girare sempre a quella nel nostro codice. Detto, lascia costruire una funzione che accetta un array di proprietà CSS e restituisce quella che il browser supporta come una stringa:
Listing 3: Codice di esempio per ottenere la proprietà supportato
[Code]
funzione getsupportedprop(proparray){
var root = document.documentElement // elemento principale di riferimento del documento
per (var i = 0; i<proparray.length; i ){ //loop through possibili proprietà
se (proparray[i] in root.style){ //Se la proprietà esiste elemento (valore sarà di stringa, stringa vuota se non impostato)
tornare proparray[i] //restituire la stringa
}
}
}
//CAMPIONE D'USO
era boxshadowprop = getsupportedprop(['BoxShadow', 'MozBoxShadow', 'WebkitBoxShadow']) //ottenere CSS3 opportuno, la proprietà box-shadow
document.getElementById(“mydiv”).stile[boxshadowprop]=”5px 5px 1px # 818.181″ //insieme ombra CSS per “mydiv”
[/Code]
Il seguente frammento di codice utilizza il getsupportedprop() funzione per controllare che proprietà CSS box-shadow è supportato dal browser – “boxShadow”, “MozBoxShadow”, or “WebKitBoxShadow” quando il pulsante viene cliccato:
Listing 4: Frammento di codice utilizzando la getsupportedprop()
[Code]
funzione alertboxshadow(){ mettere in guardia(getsupportedprop(['BoxShadow', 'MozBoxShadow', 'WebkitBoxShadow']))}
[/Code]
Utilizzando la funzione di cui sopra, possiamo ora andare sull'impostazione delle proprietà CSS3 in JavaScript più facilmente, passando nella funzione un elenco di possibili varianti di una particolare proprietà CSS3, e lasciando la figura funzione controllate qual è il browser supporta e dovrebbe essere adottato. Per guidare questo punto a casa, cerchiamo di impostare una demo in cui 3 diverse proprietà CSS3 possono essere aggiunti o rimossi in modo dinamico a un pulsante di collegamento con relativa facilità, grazie alla funzione summenzionata:
Listing 5: frammento di codice finale
[Code]
<copione>var = shadowprop getsupportedprop(['BoxShadow', 'MozBoxShadow', 'WebkitBoxShadow'])var = roundborderprop getsupportedprop(['BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius'])era csstransform = getsupportedprop(['trasformare', 'MozTransform', 'WebkitTransform', 'MsTransform', 'OTransform']) funzione changecssproperty(bersaglio, puntello, valore, azione){ se (typeof prop!=”non definito”) target.style[puntello]=(azione ==”Rimuovere”)? “” : valore}</copione> <corpo> <un id =”cfbutton” href =”http://www.codingforums.com”>Coding Forum</un> <copione>var z = document.getElementById(“cfbutton”)</copione> <a href =”javascript:changecssproperty(da, shadowprop, '6px 6px 8px RGBA(0,0,0,.5)’)”>Aggiungere Ombra</un> <a href =”javascript:changecssproperty(da, shadowprop, ”, 'Rimuovere')”>rimuovere Ombra</un> <a href =”javascript:changecssproperty(da, roundborderprop, '15px')”>Aggiungere rotonda bordo</un> <a href =”javascript:changecssproperty(da, roundborderprop, ”, 'Rimuovere')”>Rimuovere rotonda bordo</un> <a href =”javascript:changecssproperty(da, csstransform, 'ruotare(25voi)’)”>Aggiungere Trasforma Ruota</un> <a href =”javascript:changecssproperty(da, csstransform, ”, 'Rimuovere')”>rimuovere Transform</un>
[/Code]
Conclusione: Finora abbiamo visto che i CSS è parte integrante di qualsiasi sito web / design del portale. Il foglio di stile dà l'aspetto di qualsiasi sito web e rende la prima impressione. Imparare la CSS3 ci aiuta a comprendere correttamente i dettagli tecnici e implementare con successo. Per concludere la nostra discussione, Devo dire che, anche se CSS3 è un accessorio di design del sito web, ma deve essere appresa con cura per creare la prima impressione. Hope you have enjoyed the article. Keep reading.
