CSS3 vs CSS - I fogli di stile CSS o CSS sono un elemento chiave del web design. Come sviluppatore o designer web, devi avere una profonda conoscenza dei CSS, in particolare la differenza tra CSS3 e CSS.

Potresti aver sentito o trovato il termine CSS3 se hai letto dello sviluppo web o del web design. Se hai mai pensato a cosa potrebbe essere la differenza tra CSS3 vs CSS, ecco dove tutti i tuoi dubbi verranno messi a tacere: sono entrambi uguali.

Esatto: CSS3 vs CSS sono diversi l'uno dall'altro come HTML e HTML5. CSS3 è semplicemente l'ultima iterazione di CSS. Le persone che parlano del codice CSS in questo momento in realtà si riferiscono solo a CSS3.

Sia HTML5 che CSS3 sono generalmente diventati parole d'ordine, con significati che vanno oltre le loro attuali tecnologie. Simboleggiano l'adesione ad alcuni standard fondamentali nello sviluppo web invece di utilizzare software proprietario. Per la maggior parte, l'hype intorno a queste parole d'ordine è già diminuito. La maggior parte delle aziende, anche quelle che giurano mantenendo tutto internamente, concordano sul fatto che attenersi a questi standard fondamentali rende la vita molto più facile per tutti.

Ora, è passato un bel po 'da quando CSS3 è stato lanciato e accettato da tutti. Ha portato molte cose straordinarie al settore e ha segnato un grande passo avanti per lo sviluppo web in generale. La versione precedente, CSS2, è stata lanciata nel 1998. Quasi 20 anni fa. L'unica revisione ricevuta dopo il suo lancio è stata nel 2011, denominata CSS2.1. Anche con la revisione, la maggior parte degli esperti aveva già iniziato a dire che CSS3 era inevitabile. CSS3 è venuto con una serie di caratteristiche e capacità che erano diventate completamente necessarie da allora.

Quello che potresti non sapere su CSS3 è che ha iniziato lo sviluppo solo un anno dopo l'invio della sua versione precedente. Ciò significa che il W3C stava lavorando alla versione migliorata dal 1999. Sono stati necessari più di 12 anni per rilasciare la prima versione stabile di CSS3.

Ci sono enormi differenze tra CSS3 e CSS (che vedremo presto). Ma il fatto è che i browser Web erano già pronti per le aggiunte a CSS3 al momento del rilascio. Di conseguenza, si sono adattati piuttosto rapidamente alla nuova versione. Tutti i principali browser Web ora supportano CSS3, persino Internet Explorer!

Naturalmente, il W3C continua a sviluppare CSS3 e HTML5, quindi è improbabile una versione finale. Ad essere onesti, al momento non è nemmeno necessaria una versione finale, data la velocità con cui Internet sta progredendo. Con i requisiti del web e l'industria stessa che cresce e cambia così rapidamente, la codifica deve andare avanti altrettanto rapidamente, se non di più.

CSS3 vs CSS Infographics

Definite differenze CSS3 vs CSS

Ora che conosci un po 'lo sfondo dietro CSS3, diamo un'occhiata più da vicino a cosa è cambiato. Forse la più grande differenza tra CSS3 e la versione precedente che ha sostituito è la separazione dei moduli. In CSS2, tutto era un'unica specifica di grandi dimensioni che definiva caratteristiche diverse. Tuttavia, CSS3 ha cambiato questo portando diversi documenti chiamati moduli. Ogni modulo ha le sue nuove funzionalità che non influiscono sulla compatibilità della precedente versione CSS stabile.

Media query

Ci sono molti moduli disponibili, ma solo quattro sono pubblicati come raccomandazioni formali dal W3C. Questi quattro grandi moduli sono i seguenti:

  1. Colore, pubblicato nel 2011
  2. Selettori livello 3, pubblicato 2011
  3. Namespace, pubblicato 201
  4. Media query, pubblicato 2012

Tra questi, il modulo più importante sono le query multimediali. In effetti, questo modulo potrebbe essere probabilmente l'aggiunta più importante che CSS3 ha apportato ai CSS in generale. Le query multimediali sono piuttosto semplici: consentono l'applicazione di determinate condizioni a fogli di stile diversi. Ciò consente ai siti Web di essere fluidi o "sensibili" alle diverse dimensioni dello schermo. In altre parole, i siti Web possono adattare dimensioni e elementi per adattarsi a dispositivi diversi. Oggi, il web design reattivo è probabilmente la parola d'ordine più grande. Dato che la maggior parte dell'utilizzo di Internet è ora su dispositivi mobili, la progettazione reattiva è assolutamente essenziale e le query multimediali aiutano a raggiungere questo obiettivo. Il modulo consente inoltre agli sviluppatori di adattare i siti Web a varie risoluzioni senza modificare o rimuovere il contenuto.

Le query multimediali sono anche abbastanza facili da capire e aggiungere. Una volta che li usi alcune volte, puoi praticamente capire il resto. Ecco alcune righe di codice di esempio:

schermo @media e (larghezza massima: 600px) (

sfondo: #FFF;

)

Sembra abbastanza semplice, vero? Con queste due righe di codice, puoi abilitare lo stile per schermi con una larghezza massima di 600 pixel. Ciò significa che tutti gli schermi con una larghezza massima di 600 pixel mostreranno uno sfondo bianco. La larghezza massima è solo una delle diverse condizioni che potresti applicare a un foglio di stile su CSS3. Un altro è la larghezza massima del dispositivo. Questa è la risoluzione dello schermo e non l'area di visualizzazione. Inoltre, è possibile indicare un valore minimo anziché massimo; usa 'min' invece di 'max'. Puoi anche combinare i due, come di seguito:

schermo @media e (larghezza minima: 600px) e (larghezza massima: 900px) (

sfondo: #FFF;

)

Qui, lo stile si applica solo per schermi con una larghezza di visualizzazione di 600-900 pixel. CSS3 viene fornito con alcuni fogli di stile predefiniti per i dispositivi mobili più diffusi, come Apple iPad e iPhone. Ecco qui alcuni di loro:

Ormai dovrebbe essere abbastanza chiaro quanto siano importanti le query sui media. Questo modulo è molto utile per gli sviluppatori che vogliono creare un design web reattivo con la minor quantità possibile di codifica.

Bordi arrotondati

CSS3 include anche alcune considerazioni chiave sul web design. Ad esempio, i bordi possono essere arrotondati senza hack con CSS3 che introduce bordi arrotondati. Questo è stato un grande vantaggio per gli sviluppatori web e i designer che prima avevano lottato con i confini CSS. Non sorprende che alcune di queste funzionalità non funzionino ancora nelle vecchie versioni di Internet Explorer. L'unico codice aggiuntivo che è necessario aggiungere alla classe specifica all'interno del foglio di stile è, ad esempio:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

bordo: solido 2px # 897048;

Pertanto, CSS3 rende la vita molto più semplice per lo sviluppatore e il designer web. La versione è arrivata anche con sfumature, che era sorprendentemente non disponibile nelle versioni precedenti.

Corsi consigliati

  • Formazione online sui servizi Web in Java
  • Sviluppo di giochi professionali in formazione C ++
  • Programma di hacking etico
  • Pacchetto di formazione Vegas Pro 13

Immagini dei bordi, ombre di testo

Altri elementi aggiunti con CSS3 ma mancanti nelle versioni precedenti includevano immagini di bordi e ombre di casella / testo. CSS3 ha reso le cose molto più semplici, eliminando la necessità di aggiungere hack per uno dei suddetti elementi di stile comuni. Ad esempio, ecco la riga di codice solitaria da aggiungere per le ombre di testo:

text-shadow: 2px 2px 2px # ddccb5;

colonne

CSS3 ha anche semplificato come aggiungere colonne al contenuto. Tutto quello che devi fare ora è aggiungere quattro righe di codice:

  1. column-count
  2. larghezza della colonna
  3. column-gap
  4. column-rule

Sfondi multipli

L'ultima versione CSS ha anche aggiunto la possibilità di inserire direttamente più sfondi da CSS piuttosto che utilizzare hack rotondi come prima. Il codice è incredibilmente semplice da ricordare e scrivere ed è anche estremamente importante per la creazione di elementi di web design moderni. Ecco un esempio:

.multiplebackgrounds (

altezza: 100 px;

larghezza: 200px;

imbottitura: 20px;

sfondo: url (top.gif) in alto a destra nessuna ripetizione,

url (bottom.gif) in alto a sinistra ripetizione-y,

url (middle.gif) bottom repeat-z;

)

Prefissi del fornitore

I prefissi del fornitore venivano spesso utilizzati durante il periodo in cui CSS3 era appena stato rilasciato. Hanno aiutato i browser a interpretare il codice CSS. Sono abituati fino ad oggi, nel caso in cui il tuo browser non sia in grado di leggere il codice. Ecco i prefissi dei fornitori per i principali browser:

  • -moz- : Firefox
  • -webkit- : browser Webkit come Apple Safari e Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Il prefisso di Opera è inoltre diventato ridondante da quando la società ha spostato il proprio browser mobile e desktop sulla piattaforma Webkit dal suo motore di rendering Presto. Sebbene il prefisso del fornitore continui a essere utilizzato in una certa misura, a questo punto è in gran parte scomparso.

Aggiunte pseudo-classi

Con l'aggiunta di CSS3, abbiamo anche ottenuto molte altre pseudo-classi, comprese quelle strutturali per il targeting di elementi in base alla posizione del loro documento e alla relazione con altri elementi diversi. Ecco qui alcuni di loro:

  • : root ha come target l'elemento radice del documento
  • : not (s) bersaglia elementi non corrispondenti ai selettori specificati in (s)
  • : first-child ha come target il primo child in un contenitore indipendentemente dal tipo di elemento
  • : first-of-type ha come target il primo tipo specificato di elemento all'interno di un genitore
  • : nth-child (n) utilizza valori numerici all'interno di (n) per indirizzare gli elementi figlio rispetto alla loro posizione nel genitore. Ad esempio, è possibile utilizzare questo per aggiungere colori di sfondo alternati ai commenti del blog
  • : svuota gli elementi target che non hanno testo o elementi secondari, come elementi vuoti come
  • : only-child ha come target elementi in una struttura di documenti che è l'unico elemento child all'interno del genitore

Nuovi selettori CSS3

CSS3 offre una serie di modi per scrivere regole CSS attraverso i nuovi selettori, una nuova combinazione e pseudo-elementi: ecco i tre nuovi selettori di attributi:

  • Per corrispondenze esatte, elemento (foo = "bar")
  • Per abbinare un elemento con un attributo chiamato foo che inizia con 'bar', element (foo $ = "bar")
  • Per abbinare un elemento con un attributo chiamato foo che termina con 'bar', element (foo * = "bar")

CSS3 viene fornito con diverse nuove pseudo-classi, alcune delle quali sono state discusse sopra. Eccone alcuni di più:

  • : nth-last-child (n) corrisponde agli elementi figlio esatti dell'ultimo
  • : nth-of-type (n) corrisponde agli elementi di pari livello che hanno lo stesso nome prima di loro nell'albero del documento
  • : nth-last-of-type (n) corrisponde a elementi di pari livello con lo stesso nome dal basso
  • : last-of-type ha come target l'ultimo tipo specificato di elemento all'interno di un genitore
  • : only-of-type ha come target l'elemento di cui è l'unico tipo
  • : target target elements targetizzato dall'URI di riferimento
  • : enabled corrisponde all'elemento quando è abilitato
  • : disabled corrisponde all'elemento quando è disabilitato
  • : spuntato prende di mira l'elemento quando è spuntato tramite una casella di controllo o un pulsante di opzione

Un nuovo combinatore

CSS3 è inoltre dotato di un nuovissimo combinatore: elementA ~ elementB

Questo nuovo combinatore corrisponde quando elementA è seguito da qualche parte in seguito da elementB, ma non immediatamente dopo.

Nuove proprietà dello stile della scatola

CSS3 presenta lo stesso modello di scatola della versione precedente, ma con alcune nuove proprietà di stile che ti aiutano a definire bordi e sfondi delle tue scatole. Le nuove proprietà di sfondo in CSS3 sono:

  • background-clip di

Questa proprietà viene utilizzata per definire come tagliare un'immagine di sfondo. Le dimensioni di ritaglio predefinite sono la casella del bordo, ma puoi cambiarla nella casella del contenuto o nella casella di riempimento.

  • background-origine

Questa particolare proprietà viene utilizzata per determinare se lo sfondo deve essere inserito nella casella del bordo, nella casella del contenuto o nella casella di riempimento.

  • background-size

Questa proprietà consente allo sviluppatore di indicare le dimensioni dell'immagine di sfondo e di allungare le immagini più piccole per adattarle alla pagina.

CSS3 ha anche modificato alcune delle proprietà dello stile di sfondo esistenti. Ecco uno sguardo alle modifiche:

  • background-repeat

Questa proprietà ora presenta due nuovi valori: round e spazio. Round ridimensiona l'immagine per affiancarla più volte in una scatola. Lo spazio posiziona uniformemente l'immagine piastrellata all'interno del riquadro senza ritagli.

  • background-attachment

La proprietà no include un valore 'locale' in modo che lo sfondo scorra con il contenuto dell'elemento nel caso in cui l'elemento abbia una barra di scorrimento.

Nuove proprietà del bordo

CSS3 consente di definire i bordi come doppio, solido, tratteggiato o addirittura come immagine. Le immagini dei bordi sono un'aggiunta interessante: ti consentono di creare un'immagine di tutti e quattro i bordi e quindi dire al CSS di applicare l'immagine ai bordi. Ecco alcune delle nuove proprietà del bordo fornite con CSS3:

  • border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius consentono di creare bordi arrotondati
  • border-image-source ti permette di specificare un file sorgente immagine invece di usare stili di bordo predefiniti
  • border-image-slice rappresenta gli offset interni dai bordi delle immagini dei bordi
  • border-image-width definisce il valore della larghezza per l'immagine del bordo
  • border-image-outset specifica la quantità oltre il riquadro a cui l'immagine si estende
  • border-image-stretch definisce la piastrellatura o il ridimensionamento delle parti centrali e laterali dell'immagine del bordo

Conclusione - CSS3 vs CSS

Imparerai molto di più su CSS3 man mano che codifichi di più. Ma c'è un avvertimento: non puoi padroneggiare CSS3 se non conosci CSS. L'apprendimento dei CSS3 implica il potenziamento della comprensione e dell'esperienza con i CSS. Se non conosci i CSS, devi impararli dall'alto insieme ai CSS3. La cosa buona è che se non si ha familiarità con i CSS, dovrebbe essere più semplice associare sia l'apprendimento CSS3 che CSS insieme per renderlo più facile e veloce.

Articoli consigliati

Ecco alcuni articoli che ti aiuteranno a ottenere maggiori dettagli su CSS3 vs CSS, quindi passa attraverso il link.

  1. CSS vs HTML
  2. Entusiasmante conoscere i CSS Flexbox Essentials per principianti
  3. HTML5 vs JavaScript La cosa migliore da imparare
  4. CSS vs CSS3: differenze

Categoria:

Sviluppo software