La differenza tra CSS2 e CSS3

La più grande differenza tra CSS2 e CSS3 è che CSS3 è stato diviso 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 i CSS2, dove tutto è stato inviato come un unico documento con tutte le Fogli di stile informazioni al suo interno, inizi a vedere i vantaggi di suddividere la raccomandazione in pezzi più piccoli e singoli. Poiché ciascuno dei moduli viene elaborato 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.

Ci sono tre nuovi selettori di attributi:

• Corrispondenze iniziali dell'attributo esattamente:
  instagram viewer

  elemento[pippo^="bar"]

  L'elemento ha un attributo chiamato foo che inizia con "bar", ad es.
• La fine dell'attributo corrisponde esattamente:

  elemento[pippo$="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 an attributo chiamato pippo che contiene la stringa "bar".

Sono state introdotte 16 nuove pseudo-classi:

• :radice
  • L'elemento radice del documento.
• :nesimo figlio (n)
  • Usalo per abbinare elementi figlio esatti o usa le variabili per ottenere corrispondenze alternate.
• :n-ultimo-figlio (n)
  • Abbina gli elementi figlio esatti a partire dall'ultimo.
• :ennesimo tipo (n)
  • Abbina gli elementi di pari livello con lo stesso nome prima di esso nell'albero del documento.
• :n-esimo-ultimo-tipo (n)
  • Abbina gli elementi fratelli con lo stesso nome contando dal basso.
• :ultimo bambino
  • Abbina l'ultimo elemento figlio del genitore.
• :primo del tipo
  • Abbina il primo elemento di pari livello di quel tipo.
• :ultimo tipo
  • Abbina l'ultimo elemento di pari livello di quel tipo.
• :figlio unico
  • Abbina l'elemento che è l'unico figlio del suo genitore.
• :solo-di-tipo
  • Abbina l'elemento che è l'unico del suo tipo.
• :vuoto
  • Trova la corrispondenza con l'elemento che non ha figli (inclusi i nodi di testo).
• :bersaglio
  • Corrisponde a un elemento che è la destinazione dell'URI di riferimento.
• :abilitato
  • Abbina l'elemento quando è abilitato.
• :Disabilitato
  • Abbina l'elemento quando è disabilitato.
• :controllato
  • Abbina l'elemento quando è selezionato (pulsante di opzione o casella di controllo).
• :non (s)
  • Abbina quando l'elemento non corrisponde al semplice selettori.

C'è un nuovo combinatore:

• elementoA ~ elementoB
  • Trova la corrispondenza quando l'elementoB segue da qualche parte dopo l'elementoA, non necessariamente immediatamente.

Nuove proprietà

I CSS3 hanno 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, sono in circolazione dall'introduzione dei CSS3. Altri, come flexbox o anche CSS Grid, sono stili più recenti che sono ancora spesso considerati aggiunte ai CSS3.

In CSS3, il modello della scatola non è cambiato. Ma ci sono un sacco di nuove proprietà di stile che possono aiutarti a modellare gli sfondi e i bordi delle tue caselle.

Immagini di sfondo multiple

Utilizzando gli stili di immagine di sfondo, posizione di sfondo e ripetizione di sfondo, puoi 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 c'è 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 nei CSS3:

• clip di sfondo
• 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.
• sfondo-origine
• Questa proprietà determina se lo sfondo deve essere posizionato nella casella di riempimento, nella casella del bordo o nella casella del contenuto.
• dimensione dello sfondo
• Questa proprietà indica il dimensione dell'immagine di sfondo. Ti permette di allunga le immagini più piccole per adattarle alla pagina.

Modifiche alle proprietà esistenti dello stile di sfondo

Ci sono anche alcune modifiche alle proprietà dello stile di sfondo esistenti:

• sfondo-ripetizione
  • Ci sono 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.
• sfondo-attaccamento
  • 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.
• sfondo
  • La proprietà abbreviata dello sfondo aggiunge le proprietà di dimensione e origine.

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:

• raggio di confine
• bordo-in alto-a destra-raggio, bordo-basso-destra-raggio, bordo-basso-sinistro-raggio, bordo-in alto-a-sinistra-raggio
• Queste proprietà ti consentono di creare angoli arrotondati sui bordi.
• border-image-source
• Specifica il file di origine dell'immagine da utilizzare al posto degli stili di bordo già definiti.
• bordo-immagine-fetta
• Rappresenta gli offset verso l'interno dai bordi dell'immagine del bordo.
• larghezza-immagine-bordo
• Definisce il valore della larghezza per l'immagine del bordo.
• confine-immagine-inizio
• Specifica la quantità di estensione dell'area dell'immagine del bordo oltre il riquadro del bordo.
• confine-immagine-stretch
• Definisce come devono essere affiancati o ridimensionati i lati e le parti centrali dell'immagine del bordo.
• bordo-immagine
• La proprietà abbreviata per tutte le proprietà dell'immagine del bordo.

Proprietà CSS3 aggiuntive 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 in linea), il scatola-decorazione-break La proprietà definisce come le nuove scatole sono avvolte con bordo e padding. Gli sfondi si dividono tra diverse scatole rotte usando questa proprietà.

Un nuovo scatola-ombra La proprietà aggiunge ombre agli elementi del riquadro.

Con CSS3, ora puoi facilmente impostare una pagina web con diverse colonne senza tabelle o complicate div strutture di tag. Dici semplicemente 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 novità proprietà che ti permettono di definire il numero e la larghezza delle tue colonne:

• larghezza della colonna
  • Definisce la larghezza che dovrebbero essere le tue colonne. Il browser quindi scorrerà il testo per riempire lo spazio con colonne così larghe.
• conteggio colonne
  • Definisce il numero di colonne nella pagina. Il browser creerà quindi colonne sufficientemente larghe da 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 delle colonne CSS3

Gli spazi e le regole vengono posizionati tra le colonne nello stesso scenario a più colonne. Gli spazi separano le colonne, ma le regole non occupano spazio. Se una regola di colonna è più larga del relativo spazio, si sovrapporrà alle colonne adiacenti. Sono disponibili cinque nuove proprietà per le regole e gli spazi delle colonne:

• gap di colonna
  • Definisce la larghezza degli spazi tra le colonne.
• colonna-regola-colore
  • Definisce il colore della regola.
• stile regola-colonna
  • Definisce lo stile della regola (pieno, punteggiato, doppio, ecc.).
• larghezza-regola-colonna
  • Definisce la larghezza della regola.
• regola-colonna
  • Una proprietà abbreviata che definisce contemporaneamente tutte e tre le proprietà delle regole di colonna.

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 impaginato, ma con tre nuove proprietà: pausa prima, pausa-dopo, e irruzione.

Come con le tabelle, puoi impostare gli elementi su colonne con la proprietà column-span. Ciò ti consente di creare titoli che si estendono su più colonne più come 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 ogni colonna mentre l'auto scorre semplicemente il contenuto fino a quando la colonna è piena e poi passa a quella successiva.

Altre funzionalità in CSS3 che non sono incluse in CSS2

Ci sono molte funzionalità aggiuntive nei CSS3 che non esistevano nei CSS2, tra cui:

• Modulo layout modello CSS e modulo posizionamento griglia CSS3: Creazione di griglie con CSS.
• Modulo di testo CSS3: delinea il testo e crea persino ombre esterne con i CSS.
• Modulo colore CSS3: Ora con opacità.
• Modifiche al modello della scatola: Compreso a tendone proprietà che agisce come il tag IE.
• Modulo interfaccia utente CSS3: Fornisce nuovi cursori, risposte alle azioni, campi obbligatori e persino ridimensionamento degli elementi.
• Media query: Query sui media consentono una maggiore flessibilità nella definizione di come dovrebbe essere utilizzato un foglio di stile. Ad esempio, potresti definire un foglio di stile che sia solo per dispositivi palmari che hanno una finestra più grande di 20em.
• Modulo CSS3 Ruby: Fornisce supporto per le lingue che utilizzano il rubino testuale per annotare i documenti.
• Modulo multimediale paginato CSS3: Per un supporto ancora maggiore per i supporti impaginati (carta, lucidi, ecc.).
• Contenuti generati: esecuzione di intestazioni e piè di pagina, note a piè di pagina e altri contenuti generati in modo programmatico, in particolare per i media paginati.
• Modulo vocale CSS3: Modifiche al CSS sonoro.