CSS (Cascading Style Sheets) o Cascading Style Sheets, sono usati per descrivere aspetto esteriore un documento scritto in un linguaggio di markup. In genere, gli stili CSS vengono utilizzati per creare e modificare lo stile degli elementi delle pagine Web e delle interfacce utente scritte Linguaggi HTML e XHTML, ma può anche essere applicato a qualsiasi tipo di documento XML, inclusi XML, SVG e XUL.

I fogli di stile sovrapposti descrivono le regole per la formattazione degli elementi utilizzando le proprietà e valori consentiti queste proprietà. Per ogni elemento è possibile utilizzare un insieme limitato di proprietà, le altre proprietà non avranno alcun effetto su di esso.

La dichiarazione di stile è composta da due parti: l'elemento della pagina web − selettore e comandi di formattazione - blocco degli annunci. Il selettore dice al browser quale elemento formattare e nel blocco di dichiarazione (il codice in parentesi graffe) elenca i comandi di formattazione - proprietà e relativi valori.

Tipi di fogli di stile a cascata e loro specifiche

1. Tipi di fogli di stile

1.1. Foglio di stile esterno

Foglio di stile esterno rappresenta file di testo con l'estensione .css, che contiene un insieme di stili CSS per gli elementi. Il file viene creato nell'editor di codice, proprio come una pagina HTML. Il file può contenere solo stili, nessun markup HTML. Un foglio di stile esterno viene allegato a una pagina Web tramite un tag situato all'interno della sezione . Questi stili funzionano per tutte le pagine del sito.

Puoi allegare più fogli di stile a ciascuna pagina web aggiungendo più tag in sequenza , specificando lo scopo di questo foglio di stile nell'attributo del tag multimediale. rel="stylesheet" indica il tipo di collegamento (link al foglio di stile).

L'attributo type="text/css" non è richiesto dallo standard HTML5, quindi può essere omesso. Se l'attributo è mancante, il valore predefinito è type="text/css" .

1.2. Stili interni

Stili interni incorporato nella sezione documento HTML e sono definiti all'interno del tag. Gli stili interni hanno la precedenza sugli stili esterni, ma sostituiscono gli stili in linea (specificati tramite l'attributo style).

...

1.3. Stili in linea

Quando scriviamo stili in linea, scriviamo il codice CSS nel file HTML, direttamente all'interno del tag dell'elemento utilizzando l'attributo style:

Presta attenzione a questo testo.

Tali stili influiscono solo sull'elemento per cui sono impostati.

1.4. @regola di importazione

@regola di importazione consente di caricare fogli di stile esterni. Affinché la direttiva @import funzioni, deve essere inserita nel foglio di stile (esterno o interno) prima di tutte le altre regole:

La regola @import viene utilizzata anche per includere i caratteri Web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipi di selettori

Selettori rappresentano la struttura di una pagina web. Sono usati per creare regole per la formattazione degli elementi di una pagina web. I selettori possono essere elementi, le loro classi e identificatori, nonché pseudo-classi e pseudo-elementi.

2.1. Selettore universale

Corrisponde a qualsiasi elemento HTML. Ad esempio, * (margine: 0;) ripristinerà i margini per tutti gli elementi del sito. Un selettore può essere utilizzato anche in combinazione con una pseudo-classe o uno pseudo-elemento: *:after (Stili CSS) , *:checked (Stili CSS) .

2.2. Selettore di elementi

I selettori di elementi consentono di formattare tutti gli elementi di questo tipo in tutte le pagine del sito. Ad esempio, h1 (font-family: Lobster, cursive;) imposterà lo stile di formattazione generale per tutte le intestazioni h1.

2.3. selettore di classe

I selettori di classe ti consentono di modellare uno o più elementi con lo stesso nome classe collocata in punti diversi della pagina o sopra pagine diverse luogo. Ad esempio, per creare un'intestazione con la classe del titolo, aggiungi l'attributo classe con il titolo del valore al tag di apertura

e imposta lo stile per la classe specificata. Gli stili creati con una classe possono essere applicati ad altri elementi, non necessariamente di quel tipo.

Manuale d'uso personal computer

2.4. Selettore ID

Il selettore ID consente la formattazione uno elemento specifico. L'identificatore id deve essere univoco e può verificarsi solo una volta su una pagina.

2.5. Selettore discendente

I selettori discendenti applicano gli stili agli elementi che si trovano all'interno di un elemento contenitore. Ad esempio, ul li (trasformazione del testo: maiuscolo;) selezionerà tutti gli elementi li che sono figli di tutti gli elementi ul.

Se vuoi formattare i figli di un particolare elemento, devi assegnare a quell'elemento una classe di stile:

p.first a (colore: verde;) - dato stile verrà applicato a tutti i link, discendenti del paragrafo con la classe prima;

p .first a (colore: verde;) - se aggiungi uno spazio, i link che si trovano all'interno di qualsiasi tag di classe .first che è figlio dell'elemento avranno uno stile

First a (colore: verde;) - questo stile verrà applicato a qualsiasi collegamento situato all'interno di un altro elemento, indicato dalla classe .first.

2.6. Selettore figlio

Un elemento figlio è un figlio diretto del suo elemento contenitore. Un elemento può averne diversi elementi figlio e ogni elemento può avere un solo elemento padre. Il selettore figlio consente l'applicazione di stili solo se l'elemento figlio viene immediatamente dopo l'elemento padre e non ci sono altri elementi intermedi, ovvero l'elemento figlio non è nidificato in nient'altro.
Ad esempio, p > strong selezionerà tutti gli elementi forti che sono figli dell'elemento p.

2.7. Sorella selezionatrice

Le relazioni tra fratelli si verificano tra elementi che hanno un genitore comune. I selettori di elementi di pari livello consentono di selezionare elementi da un gruppo di elementi di pari livello.

h1 + p - seleziona tutti i primi paragrafi immediatamente successivi a qualsiasi tag

senza pregiudicare il resto dei paragrafi;

h1 ~ p selezionerà tutti i paragrafi che sono fratelli di qualsiasi intestazione h1 e immediatamente dopo di essa.

2.8. Selettore attributi

I selettori di attributo selezionano gli elementi in base al nome dell'attributo o al valore dell'attributo:

[attributo] - tutti gli elementi contenenti l'attributo specificato, - tutti gli elementi per i quali è impostato l'attributo alt;

selector[attributo] - elementi di questo tipo che contengono l'attributo specificato, img - solo le immagini per le quali è impostato l'attributo alt;

selector[attribute="value"] — elementi di questo tipo che contengono l'attributo specificato con un valore specifico, img — tutte le immagini i cui nomi contengono la parola flower ;

selector[attribute~="value"] - elementi che contengono parzialmente dato valore, ad esempio, se un elemento ha più classi separate da uno spazio, p sono paragrafi il cui nome di classe contiene feature ;

selector[attribute|="value"] - elementi il ​​cui elenco di valori di attributo inizia con la parola specificata, p - paragrafi il cui nome di classe è caratterizzato o inizia con caratteristica;

selector[attribute^="value"] - elementi il ​​cui valore di attributo inizia con il valore specificato, a - tutti i collegamenti che iniziano con http:// ;

selector[attribute$="value"] - elementi il ​​cui valore di attributo termina con valore specificato, img — tutte le immagini in formato png;

selector[attribute*="value"] - elementi il ​​cui valore di attributo contiene la parola specificata ovunque, a - tutti i collegamenti il ​​cui nome contiene book .

2.9. Selettore di pseudoclassi

Le pseudo-classi sono classi non effettivamente associate a tag HTML. Consentono di applicare le regole CSS agli elementi quando si verifica o obbedisce a un evento. certa regola. Le pseudo-classi caratterizzano elementi con le seguenti proprietà:

:hover - qualsiasi elemento su cui si passa con il cursore del mouse;

:focus - un elemento interattivo che è stato navigato con la tastiera o attivato con il mouse;

:active - l'elemento che è stato attivato dall'utente;

:valid - campi modulo il cui contenuto è stato convalidato nel browser per la conformità con il tipo di dati specificato;

:invalid - campi modulo il cui contenuto non corrisponde al tipo di dati specificato;

:enabled - tutti i campi del modulo attivi;

:disabled - campi modulo disabilitati, ovvero in uno stato inattivo;

:in-range - campi del modulo i cui valori sono nell'intervallo specificato;

:out-of-range - campi del modulo i cui valori non sono inclusi nell'intervallo impostato;

:lang() - elementi con testo nella lingua specificata;

:not(selettore) - elementi che non contengono il selettore specificato - classe, identificatore, nome o tipo di campo modulo - :not() ;

:target è l'elemento # a cui si fa riferimento nel documento;

:checked - elementi del modulo selezionati (selezionati dall'utente).

2.10. Selettore di pseudoclasse strutturale

Le pseudo-classi strutturali selezionano gli elementi figlio in base al parametro specificato tra parentesi:

:nth-child(odd) - elementi figlio dispari;

:nth-child(even) - anche elementi figlio;

:nth-child(3n) - ogni terzo elemento tra i bambini;

:nth-child(3n+2) - seleziona ogni terzo elemento, a partire dal secondo elemento figlio (+2) ;

:nth-child(n+2) - seleziona tutti gli elementi, a partire dal secondo;

:nth-child(3) - seleziona il terzo elemento figlio;

:nth-last-child() - nell'elenco degli elementi figlio, seleziona l'elemento con posizione specificata, simile a :nth-child() , ma indietro rispetto all'ultimo;

:first-child - ti permette di dare uno stile solo al primo elemento figlio del tag;

:last-child - ti permette di formattare l'ultimo elemento figlio del tag;

:only-child - seleziona un elemento che è l'unico figlio;

:empty - seleziona gli elementi che non hanno figli;

:root - seleziona l'elemento che è la radice del documento - elemento html.

2.11. Selettore di pseudoclassi di tipo strutturale

Punta a un tipo specifico di tag figlio:

:nth-of-type() - seleziona gli elementi per analogia con :nth-child() , tenendo conto solo del tipo dell'elemento;

:first-of-type - seleziona il primo figlio del tipo specificato;

:ultimo tipo - seleziona ultimo elemento di questo tipo;

:nth-last-of-type() - seleziona un elemento dato tipo nell'elenco degli elementi in base alla posizione specificata, a partire dalla fine;

:only-of-type - seleziona l'unico elemento del tipo specificato tra i figli dell'elemento padre.

2.12. Selettore di pseudo elementi

Gli pseudo-elementi vengono utilizzati per aggiungere contenuto generato utilizzando la proprietà del contenuto:

:first-letter - seleziona la prima lettera di ogni paragrafo, si applica solo agli elementi di blocco;

:first-line - seleziona la prima riga del testo dell'elemento, si applica solo agli elementi del blocco;

:before - inserisce il contenuto generato prima dell'elemento;

:after - Aggiunge contenuto generato dopo l'elemento.

3. Combinazione di selettori

Per una selezione più precisa degli elementi per la formattazione, puoi utilizzare combinazioni di selettori:

img:nth-of-type(even) - seleziona tutte le immagini pari, testo alternativo che contiene css parola.

4. Selettori di raggruppamento

Lo stesso stile può essere applicato a più elementi contemporaneamente. Per fare ciò, sul lato sinistro della dichiarazione, elenca i selettori necessari separati da virgole:

H1, h2, p, span ( colore: pomodoro; sfondo: bianco; )

5. Ereditarietà e cascata

Ereditarietà e cascata sono due concetti fondamentali nei CSS strettamente correlati. Ereditarietà significa che gli elementi ereditano le proprietà dal loro genitore (l'elemento che li contiene). La cascata si manifesta nel modo tipi diversi i fogli di stile vengono applicati al documento e come le regole in conflitto si prevalgono a vicenda.

5.1. Eredità

Ereditàè il meccanismo mediante il quale alcune proprietà vengono trasmesse da un antenato ai suoi discendenti. La specifica CSS prevede l'ereditarietà delle proprietà relative al contenuto testuale di una pagina, come color , font , letter-spacing , line-height , list-style , text-align , text-indent , text-transform , visibilità , white-space e la spaziatura delle parole. In molti casi, questo è conveniente perché non è necessario impostare la dimensione del carattere e la famiglia di caratteri per ogni elemento della pagina web.

Le proprietà di formattazione del blocco non vengono ereditate. Questi sono sfondo , bordo , display , float e clear , height e width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align e z-index .

Eredità forzata

Usando parola chiave inherit può forzare un elemento a ereditare qualsiasi valore di proprietà del suo elemento padre. Funziona anche per le proprietà che non vengono ereditate per impostazione predefinita.

Come vengono impostati e funzionano gli stili CSS

1) Gli stili possono essere ereditati dall'elemento padre (proprietà ereditate o utilizzando il valore inherit);

2) Gli stili nel foglio di stile sottostante sovrascrivono gli stili nel foglio di stile sopra;

3) È possibile applicare uno stile a un elemento fonti diverse. Puoi controllare quali stili vengono applicati nella modalità sviluppatore del browser. Per fare ciò, fare clic sull'elemento. fare clic con il tasto destro mouse e seleziona "Visualizza codice" (o qualcosa di simile). La colonna di destra elencherà tutte le proprietà che sono impostate per questo elemento o ereditate dall'elemento padre, così come i file di stile in cui sono specificati, e numero di serie righe di codice.

4) Quando si definisce uno stile, è possibile utilizzare qualsiasi combinazione di selettori: un selettore di elemento, una pseudo-classe di elemento, una classe o un identificatore di elemento.

5.2. Cascata

a cascataè un meccanismo che controlla il risultato finale in una situazione in cui diverse regole CSS vengono applicate allo stesso elemento. Esistono tre criteri che determinano l'ordine in cui vengono applicate le proprietà: la regola !important, la specificità e l'ordine in cui sono inclusi i fogli di stile.

Regola! importante

Il peso di una regola può essere specificato utilizzando la parola chiave !important, che viene aggiunta immediatamente dopo il valore della proprietà, ad esempio span (font-weight: bold!important;) . La regola va posta alla fine della dichiarazione prima della parentesi di chiusura, senza spazio. Tale dichiarazione avrà la precedenza su tutte le altre regole. Questa regola consente di annullare il valore della proprietà e di impostarne uno nuovo per un elemento di un gruppo di elementi nel caso in cui non ci sia accesso diretto al file di stile.

Specificità

Per ogni regola, il browser calcola specificità del selettore, e se l'elemento ha dichiarazioni di proprietà in conflitto, viene presa in considerazione la regola con la specificità più alta. Il valore di specificità ha quattro parti: 0, 0, 0, 0 . La specificità del selettore è definita come segue:

0, 1, 0, 0 vengono aggiunti per id;
per la classe 0, 0, 1, 0 viene aggiunto;
0, 0, 0, 1 vengono aggiunti per ogni elemento e pseudoelemento;
per uno stile in linea aggiunto direttamente a un elemento, 1, 0, 0, 0 ;
il selettore universale non ha specificità.

H1 (colore: azzurro;) /*specificità 0, 0, 0, 1*/ em (colore: argento;) /*specificità 0, 0, 0, 1*/ h1 em (colore: oro;) /*specificità: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (colore: blu;) /*specificità: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .barra laterale (colore: grigio;) /*specificità 0, 0, 1, 0 */ #barra laterale (colore: arancione;) /*specificità 0, 1, 0, 0*/ li#barra laterale (colore: acqua;) /*specificità: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Di conseguenza, quelle regole, la cui specificità è maggiore, verranno applicate all'elemento. Ad esempio, se un elemento ha due specificità con valori 0, 0, 0, 2 e 0, 1, 0, 1 , vincerà la seconda regola.

Ordine delle tabelle collegate

Puoi creare più fogli di stile esterni e collegarli alla stessa pagina web. Se dentro tabelle diverse si incontreranno significati diversi proprietà di un elemento, quindi, di conseguenza, la regola che si trova nel foglio di stile nell'elenco seguente verrà applicata all'elemento.

Anche prima del 1998, che introduceva la specifica CSS di livello 2, gli elementi dei moduli avevano già un ampio supporto in tutti i principali browser. La specifica CSS 2 non ha mai risposto alla domanda su come gli elementi del modulo dovrebbero essere presentati agli utenti. Perché gli elementi del modulo fanno parte di interfaccia utente in ogni documento web, gli autori del disciplinare hanno scelto di andarsene presentazione visiva elementi del modulo html per impostazione predefinita per ogni browser.

Nel corso degli anni, la mancanza di dettagli nelle specifiche relative agli elementi del modulo ha costretto gli sviluppatori a creare un gran numero di test ed esempi, il cui compito principale era portare i componenti visivi di tutti gli elementi del modulo in una vista cross-browser. In questo articolo, ne vedremo alcuni modelli CSS, che ti permetterà di portare gli elementi delle forme a un denominatore comune.

Test di Roger Johansson per lo styling degli elementi dei moduli

Nel 2004 e di nuovo nel 2007, Roger Johansson ha creato suite di test speciali per elementi di modulo e CSS. Da questi test è emersa una conclusione che ha sconvolto Roger:

Allora, cosa ha mostrato l'esperimento? Come ho già notato, i test lo hanno dimostrato con usando CSS non è possibile controllare gli stili dei moduli per visualizzare gli elementi dei moduli nello stesso modo su tutti i browser e piattaforme. I test hanno anche dimostrato che la maggior parte dei browser ignora molte proprietà CSS quando vengono utilizzate per lo stile degli elementi dei moduli.

Nonostante l'innegabile verità di questi risultati, gli sviluppatori web continuano a sperimentare Elementi CSS forme alla ricerca del Santo Graal, o almeno un ragionevole compromesso tra il rendering del browser predefinito e lo stile personalizzato.

Modello di visualizzazione degli elementi del modulo predefinito

Per impostazione predefinita, la specifica CSS 2.1 per HTML4 imposta elementi del modulo come textarea, input e select da rendere inline-block:

Textarea, input, select ( display: inline-block; )

Al contrario, gli elementi form e fieldset hanno una modalità di visualizzazione a blocchi:

Fieldset, modulo ( display: blocco; )

Il modello di specifica CSS per lo stile degli elementi sui moduli termina in questo passaggio. Tutti gli altri aspetti della visualizzazione visiva degli elementi del modulo dipendono dal foglio di stile predefinito del browser. Tuttavia, le regole di cui sopra significano quanto segue:

• Gli elementi di blocco in linea possono essere stilizzati utilizzando il contesto di formattazione in linea. Ciò implica Utilizzo CSS proprietà come line-height e vertical-align per controllare l'altezza dell'elemento e l'allineamento verticale. Le proprietà di riempimento e margine possono essere utilizzate anche per controllare il riempimento e margine per gli elementi del modulo. Vale la pena notare che gli elementi inline-block possono essere controllati anche utilizzando larghezza e altezza, il loro comportamento a questo proposito non è diverso dai normali elementi block.
• È possibile applicare uno stile agli elementi del blocco in modo standard, utilizzando un normale contesto di formattazione a blocchi. Tuttavia, ci sono problemi con gli elementi fieldset e legend form perché si basano interamente sugli stili del browser stesso.

Sorge la domanda, come risolvere questi problemi per gli sviluppatori?

Risoluzione dei problemi di dimensionamento degli elementi del modulo

Gli sviluppatori Web hanno presto visto che i browser trattavano gli elementi inline-block in modo piuttosto strano quando si trattava di ridimensionarli. Determinare l'altezza abbastanza spesso porta a risultati inaspettati:

Input, seleziona (larghezza: 120px; altezza: 32px; )

Gli sviluppatori hanno cercato di risolvere questo problema con inline-block:

Input, seleziona ( larghezza: 120px; altezza: 32px; display: blocco; )

I risultati lasciano ancora molto a desiderare ad eccezione dell'elemento textarea. Per risolvere questo problema, devi prima normalizzare il carattere e la dimensione del carattere per gli elementi del modulo:

Input, seleziona (larghezza: 120px; carattere: 1em Arial, sans-serif; )

Una volta impostato il carattere, puoi aggiungere il riempimento:

Input, seleziona (larghezza: 120px; carattere: 1em Arial, sans-serif; riempimento: 3px 6px; )

Agli elementi input e textarea può anche essere assegnato un bordo, che influenzerà il loro dimensionamento in base al box-model:

Input, input, textarea ( bordo: 1px solido #ccc; )

elementi di input i tipi di pulsante e di invio possono avere un riempimento aggiuntivo aggiunto dal browser. Una pratica comune è normalizzarli:

Input, input (padding: 2px; )

Il problema con questo approccio è che i browser spesso applicano i prefissi del fornitore alle proprietà degli elementi, quindi non è sempre possibile normalizzare il riempimento. Ad esempio, per il web-kit, puoi normalizzare in questo modo:

Input, input, input, input::-webkit-file-upload-button, button ( -webkit-box-align: center; text-align: center; cursor: default; color: buttontext; padding: 2px 6px 3px; bordo : 2px di inizio pulsante; immagine del bordo: iniziale; colore di sfondo: faccia del pulsante; dimensioni del riquadro: riquadro del bordo; ) input, input, input ( -aspetto-webkit: pulsante; spazio bianco: pre; )

Il riempimento funziona anche su elementi fieldset e legend, ma con risultati diversi:

• L'impostazione del riempimento del fieldset su 0 ripristina il riempimento ai valori predefiniti solo in alcuni browser (non IE)
• L'impostazione del riempimento per la legenda su 0 riduce tale elemento

Gli elementi select, checkbox, radio possono essere normalizzati con buoni risultati solo per alcune proprietà:

• famiglia di font
• dimensione del font
• Larghezza (per selezionare)
• Imbottitura

L'applicazione di altre proprietà a questi elementi del modulo produce risultati incoerenti.

Allineamento degli elementi nelle forme

Gli elementi del modulo possono essere allineati verticalmente e orizzontalmente. Possono trovarsi sulla stessa linea o in un gruppo. Per allinearli sulla stessa linea, puoi usare float o il contesto standard inline-block.

Quando si utilizzano elementi mobili, gli elementi vengono automaticamente trasformati in elementi di blocco. Ciò significa che altre nove regole del modello a scatola ora forniscono il controllo su questi elementi.

con elementi fluttuanti compito principaleè quello di ottenere un buon allineamento verticale linea corrente. In questo caso, è prassi comune utilizzare margini verticali o padding:

Input, seleziona ( width: 120px; float: left; margin-top: 0.4em; )

Questo approccio funziona quando non è necessario allineare i blocchi con il testo, ad esempio un elemento di etichetta. In questo caso, puoi utilizzare il posizionamento relativo, il riempimento o il margine su un elemento che contiene solo testo:

Un altro problema sorge con i pulsanti. In questo caso, quando hai un pulsante più grande degli altri elementi, puoi impostare allineamento verticale utilizzando il posizionamento relativo:

Input ( float: sinistra; larghezza: 90px; posizione: relativa; in alto: 0.4em; )

Questo approccio di posizionamento relativo funziona anche per caselle di controllo e pulsanti di opzione. Posizionamento relativo può anche essere utilizzato per normalizzare il riempimento sinistro dell'elemento legenda in un fieldset.

Se stai utilizzando elementi in un contesto di formattazione in linea, puoi utilizzare la proprietà vertical-align per allineare verticalmente:

Etichetta, input ( allineamento verticale: medio; margine destro: 1em; )

Bei risultati può essere ottenuto combinando questa proprietà con la proprietà line-height. Tuttavia, questa proprietà deve essere impostata sull'elemento padre. Se impostata direttamente sull'elemento del form stesso, verrà utilizzata l'altezza dell'elemento:

Riga modulo ( altezza riga: 1,4; )

Anche l'utilizzo della dichiarazione di altezza di un elemento padre abbinata allo stesso valore di altezza della riga è una buona pratica:

Riga del modulo ( altezza della linea: 1,8; altezza: 1,8 em; )

Nel contesto della formattazione in linea, puoi usare proprietà di allineamento del testo sull'elemento padre per allineare il contenuto dell'elemento del modulo a sinistra, al centro o a destra.

Strano comportamento degli input di file

Elemento tipo di ingresso file è occasione speciale. Tale elemento dovrebbe essere sempre visibile e riconoscibile nell'interfaccia del browser per motivi di sicurezza. Ciò significa che i browser ignorano deliberatamente alcune regole di stile (come quelle relative alla visibilità) e tendono ad applicare i propri algoritmi definiti dal foglio di stile predefinito.

Inoltre, alcuni browser visualizzano un solo pulsante, mentre altri aggiungono un campo per il percorso del file.

Tuttavia, gli sviluppatori web hanno trovato il modo di aggirare questa limitazione. Per prima cosa, hanno avvolto l'elemento con un contenitore.