La differenza tra CSS2 e CSS3
Comprendere le principali modifiche apportate ai CSS3
SommarioEspandere- Introdotti i nuovi selettori CSS3
- Nuove proprietà CSS in CSS3
- Più immagini di sfondo
- Nuove proprietà dello stile di sfondo
- Modifiche alle proprietà dello stile di sfondo esistenti
- CSS3 Nuove proprietà e stili del bordo
- Nuove proprietà dello stile del bordo
- Altre proprietà di bordo e sfondo
- Nuove proprietà per la definizione del numero e della larghezza della colonna
- Lacune e regole delle colonne CSS3
- CSS3 Nuove opzioni di rottura delle colonne
- Altre nuove funzionalità in CSS3
La più grande differenza tra CSS2 e CSS3 è che CSS3 è stato suddiviso in diverse sezioni, chiamate moduli . Ciascuno di questi moduli si sta facendo strada attraverso il W3C in varie fasi del processo di raccomandazione. Questo processo ha reso molto più semplice l'accettazione e l'implementazione nel browser di vari pezzi di CSS3 da parte di diversi produttori.
Se confronti questo processo con quello che è successo con CSS2, dove tutto è stato inviato come un unico documento con tutti i Fogli di stile informazioni al suo interno, inizi a vedere i vantaggi di suddividere la raccomandazione in pezzi più piccoli e individuali. Poiché ciascuno dei moduli viene lavorato individualmente, gli sviluppatori godono di una gamma molto più ampia di supporto del browser per i moduli CSS3.
Nuovi selettori CSS3
CSS3 offre diversi nuovi modi per scrivere regole CSS con nuovi selettori CSS, nonché un nuovo combinatore e alcuni nuovi pseudo-elementi.
Sono disponibili tre nuovi selettori di attributi:
- L'elemento radice del documento.
- Usalo per abbinare gli elementi figlio esatti o usa le variabili per ottenere corrispondenze alternate.
- Abbina gli elementi figlio esatti contando dall'ultimo.
- Abbina elementi di pari livello con lo stesso nome prima di esso nell'albero del documento.
- Abbina elementi fratelli con lo stesso nome contando dal basso.
- Abbina l'ultimo elemento figlio del genitore.
- Abbina il primo elemento di pari livello di quel tipo.
- Abbina l'ultimo elemento di pari livello di quel tipo.
- Abbina l'elemento che è l'unico figlio del suo genitore.
- Abbina l'elemento che è l'unico del suo tipo.
- Abbina l'elemento che non ha figli (inclusi i nodi di testo).
- Abbina un elemento che è la destinazione dell'URI di riferimento.
- Abbina l'elemento quando è abilitato.
- Abbina l'elemento quando è disabilitato.
- Abbina l'elemento quando è selezionato (pulsante di opzione o casella di controllo).
- Abbina quando l'elemento non corrisponde al semplice selettori .
- Abbina quando l'elementoB segue da qualche parte dopo l'elementoA, non necessariamente immediatamente.
- Questa proprietà definisce come ritagliare l'immagine di sfondo. L'impostazione predefinita è il riquadro del bordo, ma può essere modificato nel riquadro del riempimento o nel riquadro del contenuto.
- Questa proprietà determina se lo sfondo deve essere posizionato nella casella di riempimento, nella casella di bordo o nella casella del contenuto.
- Questa proprietà indica il dimensione dell'immagine di sfondo . Ti permette di farlo allunga le immagini più piccole per adattarle alla pagina .
- Sono disponibili due nuovi valori per questa proprietà: spazio e il giro . Lo spazio distanzia l'immagine affiancata in modo uniforme all'interno della casella senza essere ritagliata. Round ridimensiona l'immagine di sfondo in modo che venga affiancata un numero intero di volte nella casella.
- Viene aggiunto un nuovo valore 'local' in modo che lo sfondo scorra con il contenuto dell'elemento quando quell'elemento ha una barra di scorrimento.
- La proprietà della scorciatoia di sfondo aggiunge le proprietà di dimensione e origine.
- bordo-alto-destra-raggio , bordo-basso-destra-raggio , bordo-basso-sinistra-raggio , raggio di confine in alto a sinistra
- Queste proprietà ti consentono di creare angoli arrotondati sui bordi.
- Specifica il file di origine dell'immagine da utilizzare al posto degli stili di bordo già definiti.
- Rappresenta gli offset interni dai bordi dell'immagine del bordo.
- Definisce il valore della larghezza per l'immagine del bordo.
- Specifica la quantità di estensione dell'area dell'immagine del bordo oltre il riquadro del bordo.
- Definisce come affiancare o ridimensionare i lati e le parti centrali dell'immagine del bordo.
- La proprietà abbreviata per tutte le proprietà dell'immagine del bordo.
- Definisce la larghezza delle tue colonne. Il browser scorrerà quindi il testo per riempire lo spazio con colonne così larghe.
- Definisce il numero di colonne nella pagina. Il browser creerà quindi colonne sufficientemente larghe da adattarsi allo spazio, ma solo il numero specificato.
- Proprietà abbreviata in cui puoi definire la larghezza o il numero (o entrambi, ma raramente ha senso).
- Definisce la larghezza degli spazi tra le colonne.
- Definisce il colore della regola.
- Definisce lo stile della regola (tinta, punteggiata, doppia, ecc.).
- Definisce la larghezza della regola.
- Una proprietà abbreviata che definisce tutte e tre le proprietà delle regole di colonna contemporaneamente.
Sono state introdotte 16 nuove pseudo-classi:
C'è un nuovo combinatore:
Nuove proprietà
CSS3 ha anche introdotto diverse nuove proprietà CSS. Molte di queste proprietà creano stili visivi che probabilmente si assocerebbero di più a un programma di grafica come Photoshop . Alcuni di questi, come border-radius o box-shadow, esistono dall'introduzione dei CSS3. Altri, come flexbox o addirittura CSS Grid, sono stili più recenti che sono ancora spesso considerati aggiunte CSS3.
In CSS3, il modello box non è cambiato. Ma ci sono un sacco di nuove proprietà di stile che possono aiutarti a modellare gli sfondi e i bordi delle tue scatole.
Più immagini di sfondo
Utilizzando gli stili immagine di sfondo, posizione sfondo e ripetizione sfondo, è possibile specificare più immagini di sfondo da sovrapporre l'una all'altra nella casella. La prima immagine è il livello più vicino all'utente, con i successivi dipinti dietro. Se è presente un colore di sfondo, viene dipinto sotto tutti i livelli dell'immagine.
Nuove proprietà dello stile di sfondo
Ci sono anche alcune nuove proprietà di sfondo in CSS3:
Modifiche alle proprietà dello stile di sfondo esistenti
Ci sono anche alcune modifiche alle proprietà dello stile di sfondo esistenti:
Proprietà del bordo CSS3
In CSS3, i bordi possono essere gli stili a cui siamo abituati (solido, doppio, tratteggiato, ecc.) oppure possono essere un'immagine. Inoltre, CSS3 supporta gli angoli arrotondati. Le immagini dei bordi sono interessanti perché crei un'immagine di tutti e quattro i bordi e poi dici al CSS come applicare quell'immagine ai tuoi bordi.
Nuove proprietà dello stile del bordo
Ci sono alcune nuove proprietà del bordo in CSS3:
Ulteriori proprietà CSS3 relative a bordi e sfondi
Quando una casella viene interrotta in corrispondenza di un'interruzione di pagina, di colonna o di riga (per gli elementi inline), il scatola-decorazione-pausa la proprietà definisce il modo in cui le nuove scatole vengono avvolte con bordo e riempimento. Gli sfondi si dividono tra diverse scatole rotte utilizzando questa proprietà.
Una nuova scatola-ombra la proprietà aggiunge ombre agli elementi box.
Con CSS3, ora puoi impostare facilmente una pagina web con più colonne senza tabelle o complicate div strutture di tag. Devi semplicemente dire al browser quante colonne dovrebbe avere l'elemento body e quanto dovrebbero essere larghe. Inoltre puoi aggiungere bordi (regole) e colori di sfondo che coprono l'altezza della colonna e il tuo testo scorrerà automaticamente attraverso tutte le colonne.
Definisci il numero e la larghezza delle colonne
Ci sono tre nuovi proprietà che ti permettono di definire il numero e la larghezza delle tue colonne:
Lacune e regole delle colonne CSS3
Lacune e regole vengono posizionate tra le colonne nello stesso scenario a più colonne. Gli spazi vuoti allontaneranno le colonne, ma le regole non occupano spazio. Se una regola di colonna è più larga del suo spazio, si sovrapporrà alle colonne adiacenti. Sono disponibili cinque nuove proprietà per le regole di colonna e gli spazi vuoti:
Interruzioni di colonna CSS3, colonne estese e colonne di riempimento
Colonna le interruzioni utilizzano le stesse opzioni CSS2 utilizzate per definire le interruzioni nel contenuto paginato, ma con tre nuove proprietà: pausa prima , rottura dopo , e irruzione .
Come con le tabelle, puoi impostare gli elementi in modo che si estendano su colonne con la proprietà column-span. Ciò ti consente di creare titoli che si estendono su più colonne più simili a un giornale.
Il riempimento delle colonne determina la quantità di contenuto in ciascuna colonna. Le colonne bilanciate cercano di inserire la stessa quantità di contenuto in ciascuna colonna mentre l'auto scorre semplicemente il contenuto fino a quando la colonna è piena e quindi passa a quella successiva.
Altre funzionalità in CSS3 che non sono incluse in CSS2
Ci sono molte funzionalità aggiuntive in CSS3 che non esistevano in CSS2, tra cui: