La più grande differenza tra CSS2 e CSS3 è che CSS3 è stato suddiviso in diverse sezioni, chiamate moduli. Ognuno di questi moduli si sta facendo strada attraverso il W3C in varie fasi del processo di raccomandazione. Questo processo ha reso molto più facile l'accettazione e l'implementazione nel browser di vari pezzi di CSS3 da parte di diversi produttori.
Se si confronta questo processo con quello che è successo con i CSS2, dove tutto è stato presentato come un singolo documento con tutte le informazioni Cascading Style Sheets al suo interno, si iniziano a vedere i vantaggi di suddividere la raccomandazione in parti più piccole e individuali. Poiché ciascuno dei moduli viene lavorato singolarmente, abbiamo una gamma molto più ampia di supporto per browser per i moduli CSS3.
Come con qualsiasi altra specifica nuova e mutevole, assicurati di testare accuratamente le pagine CSS3 nel maggior numero possibile di browser e sistemi operativi. Ricorda che l'obiettivo non è creare pagine web che abbiano lo stesso aspetto in tutti i browser, ma garantire che tutti gli stili che usi, compresi gli stili CSS3, abbiano un bell'aspetto nei browser che li supportano e che ricadano con garbo per i browser più vecchi che non.
Nuovi selettori CSS3
CSS3 offre un sacco di nuovi modi per scrivere regole CSS con nuovi selettori CSS, oltre a un nuovo combinatore e alcuni nuovi pseudo-elementi.
Tre nuovi selettori di attributi:
- L'inizio dell'attributo corrisponde esattamente
elemento foo ^ = "bar" L'elemento ha un attributo chiamato foo che inizia con "bar", ad es.
- La fine dell'attributo corrisponde esattamente
elemento foo $ = "bar" L'elemento ha un attributo chiamato foo che termina con "bar", ad es.
- L'attributo contiene la corrispondenza
elemento pippo * = "bar" L'elemento ha un attributo chiamato foo che contiene la stringa "bar", ad es.
16 nuove pseudo-classi:
- :radice
- L'elemento principale del documento. In HTML questo è sempre.
- : Nth-child (n)
- Usalo per abbinare elementi esatti del bambino o usare le variabili per ottenere corrispondenze alternate.
- : Nth-last-child (n)
- Abbina gli elementi figlio esatti contando dall'ultimo.
- : Nth-of-type (n)
- Abbina elementi di pari livello con lo stesso nome prima nell'albero del documento.
- : Nth-last-of-type (n)
- Abbina elementi di pari livello con lo stesso nome contando dal basso.
- :ultimo bambino
- Abbina l'ultimo elemento figlio del genitore.
- : First-of-type
- Abbina il primo elemento fratello di quel tipo.
- : Last-of-type
- Abbina l'ultimo elemento fratello di quel tipo.
- :figlio unico
- Abbina l'elemento che è l'unico figlio del suo genitore.
- : Only-of-type
- Abbina l'elemento che è l'unico del suo tipo.
- :vuoto
- Abbina l'elemento che non ha figli (inclusi i nodi di testo).
- :bersaglio
- Abbina un elemento che è il bersaglio dell'URI di riferimento.
- :abilitato
- Abbina l'elemento quando è abilitato.
- :Disabilitato
- Abbina l'elemento quando è disabilitato.
- : selezionata
- Abbina l'elemento quando è selezionato (pulsante di opzione o casella di controllo).
- : Non (s)
- Corrisponde quando l'elemento non corrisponde al selettore semplice s.
Un nuovo combinatore:
- elementoA ~ elementoB
- Corrisponde quando elementB segue da qualche parte dopo elementA, non necessariamente immediatamente.
Nuove proprietà
CSS3 ha anche introdotto una serie di nuove proprietà CSS. Molte di queste proprietà dovevano creare stili visivi che probabilmente associassero di più a un programma di grafica come Photoshop. Alcuni di questi, come border-radius o box-shadow, sono presenti sin dall'introduzione se CSS3. Altri, come la flexbox o anche la griglia CSS, sono nuovi stili che sono spesso considerati aggiunte CSS3.
Nei CSS3, il modello di box non è cambiato. Ma ci sono un sacco di nuove proprietà di stile che possono aiutarti a definire gli sfondi e i bordi delle tue scatole.
Più sfondo I mago
Usando l'immagine di sfondo, la posizione di sfondo e gli stili di ripetizione dello sfondo è possibile specificare più immagini di sfondo sovrapposte l'una sull'altra nella casella. La prima immagine è il livello più vicino all'utente, con i seguenti dipinti dietro. Se c'è un colore di sfondo, è dipinto sotto tutti i livelli dell'immagine.
Nuove proprietà di stile di sfondo
Ci sono anche alcune nuove proprietà di background in CSS3.
- background-clip di
- Questa proprietà definisce come deve essere ritagliata l'immagine di sfondo. L'impostazione predefinita è la casella del bordo, ma può essere modificata nella casella di riempimento o nella casella del contenuto.
- background-origine
- Questa proprietà determina se lo sfondo deve essere posizionato nella casella di riempimento, nella casella di bordo o nella casella di contenuto.
- background-size
- Questa proprietà ti consente di indicare la dimensione dell'immagine di sfondo. Ti consente di allungare le immagini più piccole per adattarle alla pagina.
Modifiche alle proprietà dello stile di sfondo esistenti
Ci sono anche alcune modifiche alle proprietà esistenti dello stile di sfondo:
- background-repeat
- Ci sono due nuovi valori per questa proprietà: spazio e rotondo. Lo spazio distende l'immagine affiancata in modo uniforme all'interno della finestra senza essere troncata. Arrotonda l'immagine di sfondo in modo che toccherà un numero intero di volte nella casella.
- background-attachment
- Viene aggiunto un nuovo valore "locale" in modo che lo sfondo scorrerà con il contenuto dell'elemento quando quell'elemento ha una barra di scorrimento.
- sfondo
- La proprietà abbreviata di sfondo aggiunge la dimensione e le proprietà di origine.
Proprietà del bordo CSS3
Nei bordi di CSS3 possono essere gli stili a cui siamo abituati (solido, doppio, tratteggiato, ecc.) O possono essere un'immagine. Inoltre, CSS3 offre la possibilità di creare 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 confini.
Nuove proprietà di stile del bordo
Ci sono alcune nuove proprietà del bordo in CSS3:
- border-radius
- border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
- Queste proprietà ti consentono di creare angoli arrotondati sui tuoi bordi.
- border-image-source
- Specifica il file di origine dell'immagine da utilizzare al posto degli stili di confine già definiti.
- border-image-slice
- Rappresenta gli offset interni dai bordi dell'immagine del bordo
- border-image-width
- Definisce il valore della larghezza per l'immagine del bordo.
- border-image-fin
- Specifica la quantità che l'area dell'immagine del bordo si estende oltre la casella del bordo.
- border-image-stirata
- Definisce come i lati e le parti centrali dell'immagine del bordo debbano essere affiancate o ridimensionate.
- border-immagine
- La proprietà abbreviata per tutte le proprietà dell'immagine del bordo.
Ulteriori proprietà CSS3 relative a bordi e sfondi
Quando una casella viene interrotta in un'interruzione di pagina, interruzione di colonna per interruzione di riga (per elementi in linea) la proprietà di interruzione della decorazione della scatola definisce in che modo le nuove caselle vengono avvolte con bordo e riempimento. Gli sfondi possono essere divisi tra più caselle rotte usando questa proprietà.
Esiste anche una proprietà box-shadow che può essere utilizzata per aggiungere ombre agli elementi box.
Con CSS3, ora puoi facilmente configurare una pagina Web con più colonne senza tabelle o complicate strutture di tag div. Devi semplicemente dire al browser quante colonne dovrebbe avere l'elemento del corpo e quanto dovrebbero essere ampie. Inoltre, puoi aggiungere bordi (regole), colori di sfondo che coprono l'altezza della colonna e il testo scorrerà automaticamente attraverso tutte le colonne.
Colonne CSS3: definisci il numero e la larghezza delle colonne
Ci sono tre nuove proprietà che ti permettono di definire il numero e la larghezza delle tue colonne:
- larghezza della colonna
- Definisce la larghezza delle colonne. Il browser quindi scorre il testo per riempire lo spazio con colonne così ampie.
- column-count
- Definisce il numero di colonne sulla pagina. Il browser creerà quindi le colonne abbastanza larghe per adattarsi allo spazio, ma solo il numero specificato.
- colonne
- Proprietà abbreviata in cui è possibile definire la larghezza o il numero (o entrambi, ma raramente ha senso).
Lacune e regole della colonna CSS3
Gli spazi e le regole vengono posizionati tra le colonne nello stesso scenario a più colonne. Gli spazi separeranno le colonne, ma le regole non occupano spazio. Se una regola di colonna è più ampia della sua distanza, si sovrapporrà alle colonne adiacenti. ci sono cinque nuove proprietà per le regole e gli spazi tra colonne:
- column-gap
- Definisce la larghezza degli spazi tra le colonne.
- column-rule-color
- Definisce il colore della regola.
- column-rule-style
- Definisce lo stile della regola (solido, punteggiato, doppio, ecc.).
- column-rule-width
- Definisce la larghezza della regola.
- column-rule
- Una proprietà abbreviata che definisce tutte e tre le proprietà delle regole di colonna contemporaneamente.
Colonne CSS3, colonne spanning e colonne di riempimento
Le interruzioni di colonna utilizzano le stesse opzioni CSS2 utilizzate per definire le interruzioni nel contenuto di paging, ma con tre nuove proprietà: break-before, break-after, e break-inside.
Come con le tabelle, puoi impostare gli elementi per estendere le colonne con la proprietà column-span. Questo ti permette di creare titoli che si estendono su più colonne più come un giornale.
Le colonne di riempimento decidono quanto contenuto sarà in ogni colonna. Le colonne bilanciate cercano di inserire la stessa quantità di contenuto in ogni colonna mentre l'auto scorre semplicemente il contenuto fino a quando la colonna non è piena e quindi passa a quella successiva.
Altre funzionalità in CSS3 che non sono incluse nei CSS2
Ci sono molte funzionalità aggiuntive in CSS3 che non esistevano nei CSS2, tra cui:
- Modulo di layout modello CSS e modulo di posizionamento griglia CSS3: Creazione di griglie con CSS.
- Modulo di testo CSS3: Struttura il testo e persino crea drop-shadows con i CSS.
- Modulo colore CSS3: Ora con opacità.
- Modifiche al modello di scatola: Include una proprietà di selezione che si comporta come il tag IE.
- Modulo di interfaccia utente CSS3: Offre nuovi cursori, risposte alle azioni, campi obbligatori e persino ridimensionamento degli elementi.
- Media Queries: Le query multimediali consentono maggiore flessibilità quando si definisce come utilizzare un foglio di stile. Ad esempio, è possibile definire un foglio di stile che è solo per dispositivi palmari che hanno un viewport più grande di 20em.
- Modulo CSS3 Ruby: Fornisce supporto per le lingue che utilizzano ruby testuale per annotare i documenti.
- Modulo media paginato CSS3: Per un ulteriore supporto per i media a pagine (carta, lucidi, ecc.).
- Contenuto generato: L esegue intestazioni e piè di pagina, note a piè di pagina e altri contenuti generati a livello di codice, in particolare per i media a pagine.
- Modulo vocale CSS3: Modifiche al CSS auricolare.
