diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/it/web/css | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/it/web/css')
50 files changed, 7031 insertions, 0 deletions
diff --git a/files/it/web/css/-moz-border-bottom-colors/index.html b/files/it/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..ea9b59f24a --- /dev/null +++ b/files/it/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,89 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p> </p> + +<p>Nelle applicazioni di Mozilla come Firefox, la proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.</p> + +<pre class="brush:css no-line-numbers">/* Single <color> value */ +-moz-border-bottom-colors: #f0f0f0; + +/* Multiple <color> values */ +-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; + +/* Global values */ +-moz-border-bottom-colors: inherit; +-moz-border-bottom-colors: initial; +-moz-border-bottom-colors: unset; +</pre> + +<p>Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. </p> + +<p>{{cssinfo}}</p> + +<p>It does not apply</p> + +<ol> + <li>if {{Cssxref("border-style")}} is <code>dashed</code> or <code>dotted</code>.</li> + <li>to tables with <code>border-collapse: collapse</code>.</li> +</ol> + +<h2 id="Sintassi">Sintassi</h2> + +<h3 id="Valori">Valori</h3> + +<p>Accetta una lista di colori separati dallo spazio.</p> + +<dl> + <dt><color></dt> + <dd> + <p class="syntaxbox">Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("<color>")}} per le unità possibili.</p> + </dd> + <dt>none</dt> + <dd>Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.</dd> +</dl> + +<h3 id="Sintassi_2">Sintassi</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush:html"><div id="example">Example</div> +</pre> + +<pre class="brush:css">#example { + padding: 20px; + background-color: gray; + border: 10px solid black; + -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; + -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; + -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; +} +</pre> + +<p>{{EmbedLiveSample("Example", 120, 90)}}</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<p>QUesta proprietà non è parte di nessun specificazione.</p> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + + + +<p>{{Compat("css.properties.-moz-border-bottom-colors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("border-color")}}</li> + <li>{{Cssxref("-moz-border-right-colors")}}</li> + <li>{{Cssxref("-moz-border-top-colors")}}</li> + <li>{{Cssxref("-moz-border-left-colors")}}</li> +</ul> diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..981b6e4d3b --- /dev/null +++ b/files/it/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +<h2 id="*_html_body_div_p_font-Zawgyi-One_!_important">* , html, body, div, p { font-Zawgyi-One ! important; }</h2> diff --git a/files/it/web/css/-webkit-overflow-scrolling/index.html b/files/it/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..0c74ee6850 --- /dev/null +++ b/files/it/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,52 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - Safari + - WebKit +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <code>-webkit-overflow-scrolling</code> controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Parametri">Parametri</h2> + +<dl> + <dt><code>auto</code></dt> + <dd>Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.</dd> + <dt><code>touch</code></dt> + <dd>Usa il momentum scrolling, dove il contenuto continua a scorrere per un pò dopo che la gesture di scroll è completata ed il dito è sollevato dal touchscreen.<br> + La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.<br> + Inoltre viene creato un nuovo stacking context.</dd> +</dl> + +<h3 id="Sintassi_formale">Sintassi formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush: css">-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */ + +-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */ +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<p>Non è parte di nessuna specifica.<br> + Apple ne ha <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling">una descrizione nella reference CSS di Safari.</a></p> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + + + +<p>{{Compat("css.properties.-webkit-overflow-scrolling")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li><a href="http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/">CSS-Tricks article with demo</a></li> +</ul> diff --git a/files/it/web/css/@document/index.html b/files/it/web/css/@document/index.html new file mode 100644 index 0000000000..deea20d4cc --- /dev/null +++ b/files/it/web/css/@document/index.html @@ -0,0 +1,47 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule + - Reference +translation_of: Web/CSS/@document +--- +<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>La regola <code>@-moz-document</code> è una at-rule che restringe il campo di funzionamento, delle regole al suo interno, a degli specifici URL. Il suo utilizzo risulta importante quando si vuole creare un solo file CSS per molte pagine web o si vuole modificare il CSS di base del FireFox.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre>@document url|url-prefix|domain(URL){ regole }</pre> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<p>Puoi usarlo nel file <a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css</a>:</p> + +<pre>@document url(http://www.w3.org/), + url-prefix(http://www.w3.org/Style/), + domain(mozilla.org) +{ + /* le regole CSS quì dentro verranno applicate a: + + La pagina "http://www.w3.org/". + + Tutte le pagine che cominciano per "http://www.w3.org/Style/" + + Tutte le pagine con dominio uguale a "mozilla.org" o che finisce con + ".mozilla.org" + */ + + /* esempio di codice che si applicherebbe a tali pagine */ + body { color: purple; background: yellow; } +}</pre> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Sviluppo del codice</a>.</li> +</ul> + +<h2 id="Compatibilit.C3.A0_Browser" name="Compatibilit.C3.A0_Browser">Compatibilità Browser</h2> + +<p>Disponibile da Mozilla 1.8 / <a href="it/Firefox_1.5">Firefox 1.5</a>.</p> diff --git a/files/it/web/css/_colon_-moz-first-node/index.html b/files/it/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..9336079308 --- /dev/null +++ b/files/it/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>La pseudo-classe <code>:-moz-first-node</code> applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal <code>:first-child</code> in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">elemento:-moz-first-node {<em>proprietà di stile</em> } +</pre> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<pre>span:-moz-first-node{ + background-color: lime; +} +</pre> + +<p>...applicato a...</p> + +<pre><div> + <span>Testo dello Span</span> + <span>Testo dello Span</span> +</div> +<div> + lettere<span>Testo dello Span</span> + <span>Testo dello Span</span> +</div> +</pre> + +<p>...risultato con <code>:-moz-first-node</code>...</p> + +<p><img alt="Immagine:fchild1.jpg"></p> + +<p>...e con il <code>:first-child</code>...</p> + +<p><img alt="Immagine:fchild2.jpg"></p> diff --git a/files/it/web/css/_colon_-moz-last-node/index.html b/files/it/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..d064110bcc --- /dev/null +++ b/files/it/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>La pseudo-classe <code>:-moz-last-node</code> applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal <code>:last-child</code> in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">elemento:-moz-last-node {<em>proprietà di stile</em> } +</pre> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<pre>span:-moz-last-node{ + background-color: lime; +} +</pre> + +<p>...applicato a...</p> + +<pre><div> + <span>Testo dello Span</span> + <span>Testo dello Span</span> +</div> +<div> + <span>Testo dello Span</span> + <span>Testo dello Span</span>lettere +</div> +</pre> + +<p>...risultato con <code>:-moz-last-node</code>...</p> + +<p><img alt="Immagine:lchild1.jpg"></p> + +<p>...e con il <code>:last-child</code>...</p> + +<p><img alt="Immagine:lchild2.jpg"></p> diff --git a/files/it/web/css/_colon_-moz-list-bullet/index.html b/files/it/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..cc383ff3ef --- /dev/null +++ b/files/it/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +<p>{{Non-standard_header}}{{CSSRef}}</p> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>La pseudo-classe <code>:-moz-list-bullet</code> è usata per modificare il pallino degli elementi lista.</p> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="eval">li::-moz-list-bullet {<em>proprietà di stile</em> } +</pre> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<pre>.liste li::-moz-list-bullet{ font-size:36px } +</pre> + +<p>...applicato a...</p> + +<pre><ul> +<li>Number 1</li> +<li>Number 2</li> +<li>Number 3</li> +</ul> +<ul class="liste"> +<li>Number 1</li> +<li>Number 2</li> +<li>Number 3</li> +</ul> +</pre> + +<p>...risultato..</p> + +<p>. <img alt="Image:liug3.jpg" src="/@api/deki/files/745/=Liug3.jpg"></p> diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html new file mode 100644 index 0000000000..450e457c4a --- /dev/null +++ b/files/it/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:active' +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:active</code></strong> rappresenta un elemento (come un bottone) che viene attivato dall'utente.</span> Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.</p> + +<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi <a> che viene attivato */ +a:active { + color: red; +}</pre> + +<p>La pseudo-class <code>:active</code> è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che <em>contengono</em> un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.</p> + +<p>Gli stili definiti dalla pseudo-class <code>:active</code> saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola <code>:active</code> dopo tutte le altre regole relative ai link, così come definito dall'ordine <em>LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota:</strong> Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class <code>:active</code> deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Link_attivi">Link attivi</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Questo paragrafo contiene un link: + <a href="#">Questo link diventerà rosso quando viene cliccato.</a> + Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link. +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a:link { color: blue; } /* links non visitati */ +a:visited { color: purple; } /* links visitati */ +a:hover { background: yellow; } /* links su cui si passa sopra */ +a:active { color: red; } /* links attivi */ + +p:active { background: #eee; } /* paragrafi attivi */</pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample('Active_links')}}</p> + +<h3 id="Elementi_form_attivi">Elementi form attivi</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><form> + <label for="my-button">Mio bottone: </label> + <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">form:active { + color: red; +} + +form button { + background: white; +}</pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{EmbedLiveSample('Active_form_elements')}}</p> + +<h2 id="Specifiche"><span>Specifiche</span></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Nessun Cambiamento.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div> + +<p>{{Compat("css.selectors.active")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Link-related pseudo-classes: {{cssxref(":link")}}, {{cssxref(":visited")}}, and {{cssxref(":hover")}}</li> +</ul> diff --git a/files/it/web/css/_colon_focus/index.html b/files/it/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3540c46539 --- /dev/null +++ b/files/it/web/css/_colon_focus/index.html @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - ':focus' + - CSS + - Layout + - Pseudo-class + - Reference + - Riferimento + - Web +translation_of: 'Web/CSS/:focus' +--- +<div>{{CSSRef}}</div> + +<p>La <a href="/it/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/it/docs/Web/CSS">CSS</a> <strong><code>:focus</code></strong> rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.</p> + +<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi <input> che ha ricevuto focus */ +input:focus { + color: red; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento <em>che contiene</em> un elemento che ha ricevuto il focus.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">{{CSSSyntax}}</pre> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html no-line-numbers"><input class="red-input" value="I'll be red when focused."><br> +<input class="blue-input" value="I'll be blue when focused."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css highlight[1, 6]">.red-input:focus { + background: yellow; + color: red; +} + +.blue-input:focus { + background: yellow; + color: blue; +}</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Interessi_per_lAccessibilità">Interessi per l'Accessibilità</h2> + +<p>Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a> richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.</p> + +<ul> + <li>Indicatori visivi di focus accessibili: <a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators</a></li> +</ul> + +<h3 id="focus_outline_none"><code>:focus { outline: none; }</code></h3> + +<p>Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">standard di contrasto non testuale WCAG 2.1 SC 1.4.11</a></p> + +<ul> + <li>Suggerimento veloce: <a href="https://a11yproject.com/posts/never-remove-css-outlines/">Never remove CSS outlines</a></li> +</ul> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definisce semantiche specifiche HTML.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Nessun cambiamento.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Nessun cambiamento.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se volete contribuire ai dati, per piacere controllate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e mandateci una pull request.</div> + +<p>{{Compat("css.selectors.focus")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus-within")}}</li> +</ul> diff --git a/files/it/web/css/_colon_hover/index.html b/files/it/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..3409a3d188 --- /dev/null +++ b/files/it/web/css/_colon_hover/index.html @@ -0,0 +1,99 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +<div>{{ CSSRef }}</div> + +<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-classe</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:hover</code></strong> corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).</p> + +<pre class="brush: css no-line-numbers">/* Seleziona qualsiasi elemento <a> quando "hovered" */ +a:hover { + color: orange; +}</pre> + +<p>Gli stili definiti dalla pseudo-classe <code>:active</code> saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola <code>:hover</code> dopo le regole <code>:link</code> e <code>:visited</code> ma prima di quella <code>:active</code>, così come definito nell'<em>ordine LVHA</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> + +<div class="note"><strong>Nota</strong>: La pseudo-classe <code>:hover</code> è problematica sugli schermo touch. A seconda del browser, la pseudo-classe <code>:hover</code> potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempio_base">Esempio base</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><a href="#">Try hovering over this link.</a></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + background-color: powderblue; + transition: background-color .5s; +} + +a:hover { + background-color: gold; +}</pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample("Basic_example")}}</p> + +<h3 id="Gallery_di_immagini">Gallery di immagini</h3> + +<p>Potete usare la pseudo-classe <code>:hover</code> per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">questa demo</a> per una possibile indicazione.</p> + +<div class="note"><strong>Nota:</strong> Per un effetto analogo, ma basato sulla pseudo-classe <a class="internal" href="/en-US/docs/Web/CSS/%3Achecked"><code>:checked</code></a> (applicata a radiobox nascosti), vedete <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">questa demo</a>, presa dalla pagina di riferimento di <a class="internal" href="/en-US/docs/Web/CSS/:checked">:checked</a>.</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifican</th> + <th scope="col">Commento</th> + <th scope="col">Feedback</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}</td> + <td></td> + <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td> + </tr> + <tr> + <td>{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}</td> + <td>Permete che <code>:hover</code> venga applicato ad ogni pseudo-elemento.</td> + <td><a href="https://github.com/w3c/csswg-drafts/issues">CSS Working Group drafts GitHub issues</a></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td> + <td>Definizione iniziale.</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div> +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se si vuole contribuire ai dati, per piacere verificate <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e inviate una pull request.</div> + +<p>{{Compat("css.selectors.hover")}}</p> +</div> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li> + <li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li> +</ul> diff --git a/files/it/web/css/_doublecolon_selection/index.html b/files/it/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..f6b264012b --- /dev/null +++ b/files/it/web/css/_doublecolon_selection/index.html @@ -0,0 +1,134 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +<div>{{CSSRef}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>Lo pseudo-elemento CSS <code>::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.</code></p> + +<p>Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa <code>::selection nel suo selettore:</code> {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.</p> + +<div class="note"> +<p><code>text-shadow</code> in <code>::selection</code> è supportato da Chrome, Safari e Firefox 17+.</p> +</div> + +<div class="note">Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html">(based on discussion in the W3C Style mailing list)</a>.<br> +<br> +Lo pseudo-elemento <code>::selection</code> venne in seguito riaggiunto in <a href="http://dev.w3.org/csswg/css-pseudo-4/">Pseudo-Elements Level 4</a>.</div> + +<h2 id="Esempio">Esempio</h2> + +<p>Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: <code>::-moz-selection, ::selection {...}</code>. La regola verrà eliminata sui browser non-Gecko in quanto <code>::-moz-selection</code> non è valido per questi ultimi.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div> +<p>Prova anche questo testo per <em><p></em></p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* rende giallo qualsiasi testo selezionato, su sfondo rosso */ +::-moz-selection { + color: gold; background: red; +} + +::selection { + color: gold; background: red; +} + +/* rende bianco il testo selezionato, su sfondo nero */ +p::-moz-selection { + color: white; + background: black; +} + +p::selection { + color: white; + background: black; +}</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}</p> + +<h2 id="Specificazioni">Specificazioni</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificazione</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}</td> + <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>Lo pseudo-elemento <code>::selection </code>ma questo venne rimosso prima di poter raggiungere lo status di <em>Recommendation</em>. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.</p> + +<h2 id="Compatibilità_nei_Browser">Compatibilità nei Browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 {{property_prefix("-moz")}}<sup>[1]</sup></td> + <td>9</td> + <td>9.5</td> + <td>1.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caratteristica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Attualmente Gecko supporta solamente la versione <em>prefissata</em> ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.</p> diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..05617722a3 --- /dev/null +++ b/files/it/web/css/attribute_selectors/index.html @@ -0,0 +1,239 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selettori + - Selettori di attributo +translation_of: Web/CSS/Attribute_selectors +--- +<div>{{CSSRef}}</div> + +<p>Il <strong>selettore di attributo</strong> CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.</p> + +<pre class="brush: css no-line-numbers">/* Elemento <a> con un attributo title */ +a[title] { + color: purple; +} + +/* Elemento <a> con un href uguale a "https://example.org" */ +a[href="https://example.org"] { + color: green; +} + +/* Elemento <a> con un href contenente "example" */ +a[href*="example"] { + font-size: 2em; +} + +/* Elemento <a> con un href che finisce con ".org" */ +a[href$=".org"] { + font-style: italic; +} + +/* Elemento <a> il cui attributo classe contiene la parola "logo" */ +a[class~="logo"] { + padding: 2px; +}</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<dl> + <dt><code>[<em>attr</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em>.</dd> + <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è esattamente <em>value</em>.</dd> + <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è una lista di parole separate da spazi, una delle quali è esattamente <em>value</em>.</dd> + <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore può essere esattamente <em>value</em> o può iniziare con <em>value</em> immediatamente seguito da un trattino, <code>-</code> (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.</dd> + <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il prefisso (è preceduto da) di <em>value</em>.</dd> + <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore è il suffisso (è seguito da) di <em>value</em>.</dd> + <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> + <dd>Rappresenta elementi con un nome di attributo <em>attr</em> il cui valore contiene almeno una presenza di <em>value</em> all'interno della stringa.</dd> + <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> + <dd>Aggiungere una <code>i</code> (o <code>I</code>) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).</dd> + <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> + <dd>Aggiungere una <code>s</code> (o <code>S</code>) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Links">Links</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">a { + color: blue; +} + +/* Link interni che iniziano con "#" */ +a[href^="#"] { + background-color: gold; +} + +/* Link con "example" in qualsiasi punto dell'URL */ +a[href*="example"] { + background-color: silver; +} + +/* Link con "insensitive" in qualsiasi punto dell'URL, + a prescindere dalla capitalizzazione*/ +a[href*="insensitive" i] { + color: cyan; +} + +/* Link con "cAsE" in qualsiasi punto dell'URL, +con precisa capitalizzazione */ +a[href*="cAsE" s] { + color: pink; +} + +/* Link che finiscono con ".org" */ +a[href$=".org"] { + color: red; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> +</ul></pre> + +<h4 id="Risultato">Risultato</h4> + +<p>{{EmbedLiveSample("Links")}}</p> + +<h3 id="Linguaggi">Linguaggi</h3> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">/* Tutti i div con attributo `lang` sono bold. */ +div[lang] { + font-weight: bold; +} + +/* Tutti i div senza un attributo `lang` sono italicized. */ +div:not([lang]) { + <span class="st">font-style: italic;</span> +} + +/* Tutti i div in Inglese US sono blu. */ +div[lang~="en-us"] { + color: blue; +} + +/* Tutti i div in Portoghese sono verdi. */ +div[lang="pt"] { + color: green; +} + +/* Tutti i div in Cinese sono rossi, sia che siano + in cinese semplificato (zh-CN) o tradizionale (zh-TW). */ +div[lang|="zh"] { + color: red; +} + +/* Tutti i div con un + `data-lang` in Cinese tradizionale sono viola. */ +/* Nota: Gli attributi con trattino possono essere usati + senza virgolette */ +div[data-lang="zh-TW"] { + color: purple; +} +</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +</pre> + +<h4 id="Risultati">Risultati</h4> + +<p>{{EmbedLiveSample("Languages")}}</p> + +<h3 id="Liste_ordinate_HTML">Liste ordinate HTML</h3> + +<p>La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore <a href="#case-sensitive">case-sensitive</a>.</p> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */ +ol[type="a"] { + list-style-type: lower-alpha; + background: red; +} + +ol[type="a" s] { + list-style-type: lower-alpha; + background: lime; +} + +ol[type="A" s] { + list-style-type: upper-alpha; + background: lime; +}</pre> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><ol type="A"> + <li>Example list</li> +</ol></pre> + +<h4 id="Risultato_2">Risultato</h4> + +<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div> + +<p>{{Compat("css.selectors.attribute")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>{{CSSxRef("attr")}}</li> + <li>Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}</li> + <li>Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}</li> + <li>The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}</li> +</ul> diff --git a/files/it/web/css/background-attachment/index.html b/files/it/web/css/background-attachment/index.html new file mode 100644 index 0000000000..2f4615c65c --- /dev/null +++ b/files/it/web/css/background-attachment/index.html @@ -0,0 +1,135 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +translation_of: Web/CSS/background-attachment +--- +<p><< <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>Se è stata specificata una <code><a href="it/CSS/background-image">background-image</a></code>, la proprietà <code>background-attachment</code> determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.</p> + +<ul> + <li>Valore iniziale: scroll</li> + <li>Si applica a: tutti gli elementi</li> + <li>Eredità: no</li> + <li>valori percentuali: non applicabile</li> + <li>Media: <code><a href="it/CSS/Media/Visual">visual</a></code></li> + <li>Valore calcolato: come specificato</li> +</ul> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">background-attachment: scroll | fixed | inherit +</pre> + +<h3 id="Valori" name="Valori">Valori</h3> + +<dl> + <dt>scroll </dt> + <dd>Se <code>scroll</code> viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata</dd> + <dt>fixed </dt> + <dd>Se <code>fixed</code> viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Simple_example">Simple example</h3> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); + background-attachment: fixed; +} +</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. +</p></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Simple_example")}}</p> + +<h3 id="Multiple_background_image_support">Multiple background image support</h3> + +<p>This property supports multiple background images. You can specify a different <code><attachment></code> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css; highlight:[3];">p { + background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); + background-attachment: fixed, scroll; + background-repeat: no-repeat, repeat-y; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + There were doors all round the hall, but they were all locked; and when + Alice had been all the way down one side and up the other, trying every + door, she walked sadly down the middle, wondering how she was ever to + get out again. + + Suddenly she came upon a little three-legged table, all made of solid + glass; there was nothing on it except a tiny golden key, and Alice's + first thought was that it might belong to one of the doors of the hall; + but, alas! either the locks were too large, or the key was too small, + but at any rate it would not open any of them. However, on the second + time round, she came upon a low curtain she had not noticed before, and + behind it was a little door about fifteen inches high: she tried the + little golden key in the lock, and to her great delight it fitted! +</p></pre> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Multiple_background_image_support")}}</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-attachment">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-attachment">CSS 3</a></li> +</ul> + +<h3 id="Compatibilit.C3.A0_con_i_browser" name="Compatibilit.C3.A0_con_i_browser">Compatibilità con i browser</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione minima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3> + +<p><code><a href="it/CSS/background">background</a></code>, <code><a href="it/CSS/background-color">background-color</a></code>, <code><a href="it/CSS/background-image">background-image</a></code>, <code><a href="it/CSS/background-position">background-position</a></code>, <code><a href="it/CSS/background-repeat">background-repeat</a></code></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}</p> diff --git a/files/it/web/css/background-color/index.html b/files/it/web/css/background-color/index.html new file mode 100644 index 0000000000..536eb0b3f1 --- /dev/null +++ b/files/it/web/css/background-color/index.html @@ -0,0 +1,86 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +<p><< <a href="/it/Guida_di_riferimento_ai_CSS" title="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>La proprietà <code>background-color</code> imposta il colore di sfondo di un elemento tramite un valore esadecimale, tramite un nome di colore valido in inglese, oppure tramite la parola chiave <code>transparent</code> o <code>inherit</code>.</p> + +<ul> + <li>Valore iniziale: transparent</li> + <li>Si applica a: tutti gli elementi</li> + <li>Eredità: no</li> + <li>Valori percentuali: non applicabile</li> + <li>Media: <code><a href="/it/CSS/Media/Visual" title="it/CSS/Media/Visual">visual</a></code></li> + <li>Valore calcolato: come specificato</li> +</ul> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">background-color: <em>color</em> | transparent | inherit +</pre> + +<h3 id="Valori" name="Valori">Valori</h3> + +<dl> + <dt>color </dt> + <dd>Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.</dd> + <dt>transparent </dt> + <dd>Il valore iniziale di <code>background-color</code> è <code>transparent</code>, il che significa che l'elemento non ha un proprio colore, ma è trasparente.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="exampleone"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="exampletwo"> + Lorem ipsum dolor sit amet, consectetuer +</div> + +<div class="examplethree"> + Lorem ipsum dolor sit amet, consectetuer +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[2,7,12,17];">.exampleone { + background-color: teal; + color: white; +} + +.exampletwo { + background-color: rgb(153,102,153); + color: rgb(255,255,204); +} + +.examplethree { + background-color: #777799; + color: #FFFFFF; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Esempi","200","150")}}</p> + + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-color">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-color">CSS 3</a></li> +</ul> + +<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3> + +<p><code><a href="/it/CSS/background" title="it/CSS/background">background</a></code>, <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code></p> + +<p>{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}</p> diff --git a/files/it/web/css/background-image/index.html b/files/it/web/css/background-image/index.html new file mode 100644 index 0000000000..f07e6d72f7 --- /dev/null +++ b/files/it/web/css/background-image/index.html @@ -0,0 +1,126 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS_1 + - CSS_2.1 + - CSS_3 +translation_of: Web/CSS/background-image +--- +<p><< <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>La proprietà <code>background-image</code> imposta l'immagine di sfondo di un elemento.</p> + +<ul> + <li>Valore iniziale: none</li> + <li>Si applica a: tutti gli elementi</li> + <li>Eredità: no</li> + <li>Percentuali: N/A</li> + <li>Media: <a href="it/CSS/Media/Visual">visual</a></li> + <li>Valore calcolato: URI assoluto o none</li> +</ul> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">background-image:<em>uri</em> | none | inherit +</pre> + +<h3 id="Valori" name="Valori">Valori</h3> + +<dl> + <dt>uri </dt> + <dd>L'indirizzo dell'immagine da utilizzare come sfondo</dd> + <dt>none </dt> + <dd>Specifica che l'elemento non ha alcuna immagina di sfondo</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>Note that the star image is partially transparent and is layered over the cat image.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p class="catsandstars"> + This paragraph is full of cats<br />and stars. + </p> + <p>This paragraph is not.</p> + <p class="catsandstars"> + Here are more cats for you.<br />Look at them! + </p> + <p>And no more.</p> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">pre, p { + font-size: 1.5em; + color: #FE7F88; + background-color: transparent; +} + +div { + background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); +} + +p { + background-image: none; +} + +.catsandstars { + background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), + url("https://mdn.mozillademos.org/files/7693/catfront.png"); + background-color: transparent; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Esempi')}}</p> + +<h3 id="Note" name="Note">Note</h3> + +<p>Gli sviluppatori dovrebbero specificare la proprietà <a href="it/CSS/background-color">background-color</a>, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-image">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background-image">CSS 3</a></li> +</ul> + +<h3 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione minima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Vedi_Anche" name="Vedi_Anche">Vedi Anche</h3> + +<p><code><a href="it/CSS/background">background</a></code></p> + +<p>{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p> diff --git a/files/it/web/css/background-position/index.html b/files/it/web/css/background-position/index.html new file mode 100644 index 0000000000..2709f4f1b8 --- /dev/null +++ b/files/it/web/css/background-position/index.html @@ -0,0 +1,158 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +<p> </p> + +<div id="section_1"> +<h3 class="editable" id="Sommario"><span>Sommario</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<p><code>background-position</code> imposta la posizione iniziale dell'immagine di sfondo impostata.</p> + +<ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: 0% 0%</li> + <li>Si applica a: tutti gli elementi</li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li> + <li>Percentuali: si riferiscono alle dimensioni del blocco stesso</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a></span>: per <lunghezza> il valore assoluto o la percentuale.</li> +</ul> +</div> + +<div id="section_2"> +<h3 class="editable" id="Sintassi"><span>Sintassi </span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<pre class="eval">background-position: [ <percentuale> | <lunghezza> | left | center | right ] + [ <percentuale> | <lunghezza> | top | center | bottom ] ? ; +</pre> + +<pre class="eval">background-position: [ top | center | bottom ]; +</pre> + +<pre class="eval">background-position: inherit; +</pre> +</div> + +<div id="section_3"> +<h3 class="editable" id="Valori"><span>Valori</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<dl> + <dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/percentage" rel="internal"><percentuale></a></code></span> </span></dt> + <dd>Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.</dd> + <dt><span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span></dt> + <dd>Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.</dd> + <dt>top left e left top</dt> + <dd>Come '0% 0%'.</dd> + <dt>top, top center, e center top</dt> + <dd>Come '50% 0%'.</dd> + <dt>right top e top right</dt> + <dd>Come '100% 0%'.</dd> + <dt>left, left center, e center left</dt> + <dd>Come '0% 50%'.</dd> + <dt>center e center center</dt> + <dd>Come '50% 50%'.</dd> + <dt>right, right center, e center right</dt> + <dd>Come '100% 50%'.</dd> + <dt>bottom left e left bottom</dt> + <dd>Come '0% 100%'.</dd> + <dt>bottom, bottom center, e center bottom</dt> + <dd>Come '50% 100%'.</dd> + <dt>bottom right e right bottom</dt> + <dd>Come '100% 100%'.</dd> +</dl> + +<p>Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).</p> +</div> + +<div id="section_4"> +<h3 class="editable" id="Esempi"><span>Esempi</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<pre>.exampleone { + background-image: url("logo.png"); + background-position: top center; +} + +.exampletwo { + background-image: url("logo.png"); + background-position: 25% 75%; +} + +.examplethree { + background-image: url("logo.png"); + background-position: 2cm bottom; +} + +.examplefour { + background-image: url("logo.png"); + background-position: center 10%; +} + +.examplefive { + background-image: url("logo.png"); + background-position: 2cm 50%; +} + +</pre> +</div> + +<div id="section_5"> +<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS1#background-position">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position" rel="external nofollow" title="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-position">CSS 3</a></li> +</ul> +</div> + +<div id="section_6"> +<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione più vecchia</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> +</div> + +<div id="section_7"> +<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3> + +<div class="editIcon"><a href="/../../../../en/CSS/background-position#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<p><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background" rel="internal" title="../../it/CSS/background">background</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-attachment" rel="internal" title="../../it/CSS/background-attachment">background-attachment</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-color" rel="internal" title="../../it/CSS/background-color">background-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-image" rel="internal" title="../../it/CSS/background-image">background-image</a></code></span> , <span class="lang lang-en"><code><strong>background-position</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-repeat" rel="internal" title="../../it/CSS/background-repeat">background-repeat</a></code></span> </span></p> +</div> + +<p> </p> diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html new file mode 100644 index 0000000000..b8d0a25fd7 --- /dev/null +++ b/files/it/web/css/background-repeat/index.html @@ -0,0 +1,165 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +translation_of: Web/CSS/background-repeat +--- +<p> </p> + +<div id="section_1"> +<h3 class="editable" id="Sommario"><span>Sommario</span></h3> + +<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<p><code>background-repeat</code> specifica se e come lo sfondo deve essere ripetuto.</p> + +<ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: repeat</li> + <li>Si applica a: tutti gli elementi</li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li> + <li>Percentuali: no</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: come specificato</li> +</ul> +</div> + +<div id="section_2"> +<h3 class="editable" id="Sintassi"><span>Sintassi</span></h3> + +<pre class="eval">background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit +</pre> +</div> + +<div id="section_3"> +<h3 class="editable" id="Valori"><span>Valori </span></h3> + +<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<dl> + <dt>repeat</dt> + <dd>L'immagine viene ripetuta sia orizzontalmente che verticalmente</dd> + <dt>repeat-x</dt> + <dd>L'immagine viene ripetuta solo orizzontalmente</dd> + <dt>repeat-y</dt> + <dd>L'immagine viene ripetuta solo verticalmente</dd> + <dt>no-repeat</dt> + <dd>L'immagine non viene ripetuta: viene visualizzata una sola volta.</dd> +</dl> + +<p> </p> +</div> +<h2 id="Esempi">Esempi</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ol> + <li>no-repeat + <div class="one">&nbsp;</div> + </li> + <li>repeat + <div class="two">&nbsp;</div> + </li> + <li>repeat-x + <div class="three">&nbsp;</div> + </li> + <li>repeat-y + <div class="four">&nbsp;</div> + </li> + <li>repeat-x, repeat-y (multiple images) + <div class="five">&nbsp;</div> + </li> +</ol></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* Shared for all DIVS in example */ +li {margin-bottom: 12px;} +div { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); + width: 144px; + height: 84px; +} + +/* background repeat CSS */ +.one { + background-repeat: no-repeat; +} +.two { + background-repeat: repeat; +} +.three { + background-repeat: repeat-x; +} +.four { + background-repeat: repeat-y; +} + +/* Multiple images */ +.five { + background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), + url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); + background-repeat: repeat-x, + repeat-y; + height: 144px; +}</pre> + +<h3 id="Result">Result</h3> + +<p>In this example, each list item is matched with a different value of <code>background-repeat</code>.</p> + +<p>{{EmbedLiveSample('Esempi', 240, 360)}}</p> +<div id="section_5"> +<h3 class="editable" id="Specifiche"><span>Specifiche</span></h3> + +<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background-repeat" rel="external nofollow" title="http://www.w3.org/TR/CSS1#background-repeat">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-repeat">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat" rel="external nofollow" title="http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-repeat">CSS 3</a></li> +</ul> +</div> + +<div id="section_6"> +<h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3> + + +<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th> + <p>Versione più vecchia</p> + </th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> +</div> + +<div id="section_7"> +<h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3> + + +<div class="editIcon"><a href="../../../../en/CSS/background-repeat#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + +<p><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background" rel="internal" title="../../it/CSS/background">background</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-attachment" rel="internal" title="../../it/CSS/background-attachment">background-attachment</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-color" rel="internal" title="../../it/CSS/background-color">background-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-image" rel="internal" title="../../it/CSS/background-image">background-image</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/background-position" rel="internal" title="../../it/CSS/background-position">background-position</a></code></span> , <span class="lang lang-en"><code><strong>background-repeat</strong></code></span> </span></p> +</div> + +<p> </p> diff --git a/files/it/web/css/background/index.html b/files/it/web/css/background/index.html new file mode 100644 index 0000000000..c76b5ad59b --- /dev/null +++ b/files/it/web/css/background/index.html @@ -0,0 +1,116 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +<p><< <a href="/it/Guida_di_riferimento_ai_CSS" title="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p> + +<h3 id="Sommario" name="Sommario">Sommario</h3> + +<p>La proprietà <code>background</code> è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. <code>background</code> può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code>.</p> + +<ul> + <li>Valore iniziale: si vedano le singole proprietà</li> + <li>Si applica a: tutti gli elementi</li> + <li>Eredità: no</li> + <li>Valori percentuali: permessi per <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code></li> + <li>Media: <code><a href="/it/CSS/Media/Visual" title="it/CSS/Media/Visual">visual</a></code></li> + <li>Valore calcolato: si vedano le singole proprietà</li> +</ul> + +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> + +<pre class="eval">background: [<em>background-color</em> || <em>background-image</em> || + <em>background-repeat</em> || <em>background-attachment</em> || + <em>background-position</em>] | <em>inherit</em>] +</pre> + +<h3 id="Valori" name="Valori">Valori</h3> + +<dl> + <dt>background-color</dt> + <dd>si veda <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>.</dd> + <dt>background-image </dt> + <dd>si veda <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>.</dd> + <dt>background-repeat </dt> + <dd>si veda <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code>.</dd> + <dt>background-attachment </dt> + <dd>si veda <code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>.</dd> + <dt>background-position </dt> + <dd>si veda <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush:css' highlight:[2,6];">.warning { + background: red; +} + +.topbanner { + background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Esempi")}}</p> + +<h3 id="Note" name="Note">Note</h3> + +<p>Data una dichiarazione valida, la proprietà <code>background</code> prima imposta le singole proprietà relative al background ai loro valori iniziali, poi assegna i valori esplicitamente indicati nella dichiarazione. Non occorre quindi definire un valore per ognuna delle singole proprietà, ma solo per quelle a cui si desidera assegnare un valore diverso da quello predefinito.</p> + +<h3 id="Specifiche" name="Specifiche">Specifiche</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#background">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background">CSS 3</a></li> +</ul> + +<h3 id="Compatibilit.C3.A0_con_i_browser" name="Compatibilit.C3.A0_con_i_browser">Compatibilità con i browser</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione minima</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>6</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h3 id="Si_veda_anche" name="Si_veda_anche">Si veda anche</h3> + +<p><code><a href="/it/CSS/background-attachment" title="it/CSS/background-attachment">background-attachment</a></code>, <code><a href="/it/CSS/background-color" title="it/CSS/background-color">background-color</a></code>, <code><a href="/it/CSS/background-image" title="it/CSS/background-image">background-image</a></code>, <code><a href="/it/CSS/background-position" title="it/CSS/background-position">background-position</a></code>, <code><a href="/it/CSS/background-repeat" title="it/CSS/background-repeat">background-repeat</a></code></p> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p> </p> + +<p>{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}</p> diff --git a/files/it/web/css/border-bottom/index.html b/files/it/web/css/border-bottom/index.html new file mode 100644 index 0000000000..af2c2a213d --- /dev/null +++ b/files/it/web/css/border-bottom/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +translation_of: Web/CSS/border-bottom +--- +<p> </p> +<div id="section_1"> + <h3 class="editable" id="Sommario">Sommario</h3> + <p>La proprietà <code>border-bottom</code> è una abbreviazione che imposta il valore di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> , and <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> . These properties describe the bottom border of elements.</p> + <ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: per i dettagli vedi le singole proprietà</li> + <li>Si applica: a tutti gli elementi</li> + <li>Percentuali: no</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: vedi le singole proprietà</li> + </ul> +</div> +<div id="section_2"> + <h3 class="editable" id="Sintassi">Sintassi</h3> + <pre class="eval">border-bottom: [ <border-width> || <border-style> || <border-color> ] | <em>inherit</em> +</pre> +</div> +<div id="section_3"> + <h3 class="editable" id="Values">Values</h3> + <dl> + <dt> + <border-width> </dt> + <dd> + Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> .</dd> + <dt> + <border-style> </dt> + <dd> + Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> .</dd> + <dt> + <border-color> </dt> + <dd> + Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> .</dd> + </dl> +</div> +<div id="section_4"> + <h3 class="editable" id="Esempi">Esempi</h3> + <p><span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/cssref/border.html" rel="external nofollow" title="http://developer.mozilla.org/samples/cssref/border.html">Guarda gli esempi dal vivo</a> </span></p> + <pre>element { + border-bottom-width: 1px solid #000; +} +</pre> +</div> +<div id="section_5"> + <h3 class="editable" id="Note">Note</h3> + <p>I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.</p> + <p>Come per tutte le abbreviazioni, <code>border-bottom</code> imposta sempre il valore di tutte le proprietà che può impostare, anche se non sono specificate. Imposta quelle non specificate al loro valore predefinito. Questo vuol dire che:</p> + <pre> border-bottom-style: dotted; + border-bottom: thick green;</pre> + <p>è attualmente uguale a:</p> + <pre> border-bottom-style: dotted; + border-bottom: none thick green;</pre> + <p>e il valore di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> dato prima di <code>border-bottom</code> viene ignorato.</p> + <p>Siccome il valore predefinito di <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> è <code>none</code>, se non si specifica la parte <border-style> del valore allora la proprietà non specifica nessun bordo.</p> +</div> +<div id="section_6"> + <h3 class="editable" id="Specifiche">Specifiche</h3> + <ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border-bottom" rel="external nofollow" title="http://www.w3.org/TR/CSS1#border-bottom">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" rel="external nofollow" title="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" rel="external nofollow" title="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3</a></li> + </ul> +</div> +<div id="section_7"> + <h3 class="editable" id="Compatibilità_tra_browser">Compatibilità tra browser</h3> + <table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione più vecchia</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4</td> + </tr> + <tr> + <td>Firefox</td> + <td>1</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> + </table> +</div> +<div id="section_8"> + <h3 class="editable" id="Vedere_anche">Vedere anche</h3> + <p><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border" rel="internal" title="../../it/CSS/border">border</a></code></span> , <span class="lang lang-en"><code><strong>border-bottom</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-width" rel="internal" title="../../it/CSS/border-bottom-width">border-bottom-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-style" rel="internal" title="../../it/CSS/border-bottom-style">border-bottom-style</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-bottom-color" rel="internal" title="../../it/CSS/border-bottom-color">border-bottom-color</a></code></span> .</p> +</div> +<p> </p> diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html new file mode 100644 index 0000000000..6776c16da4 --- /dev/null +++ b/files/it/web/css/border-style/index.html @@ -0,0 +1,229 @@ +--- +title: border-style +slug: Web/CSS/border-style +translation_of: Web/CSS/border-style +--- +<div>{{CSSRef}}</div> + +<div>La proprietà <strong><code>border-style</code></strong> è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.</div> + +<div></div> + +<pre class="brush: css no-line-numbers">/* Applicato a tutti 4 i lati */ +border-style: dashed; + +/* verticale | orrizzontale */ +border-style: dotted solid; + +/* superiore | orizzontale | inferiore */ +border-style: hidden double dashed; + +/* superiore | destra | inferiore | sinistra */ +border-style: none solid dotted dashed; + +/* Valori globali */ +border-style: inherit; +border-style: initial; +border-style: unset; +</pre> + +<div class="note"><strong>Nota:</strong> Il valore di default di <code>border-style</code> è <code>none</code>. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il <span style="white-space: nowrap;">{{ Cssxref("border-color") }},</span> non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia <code>none</code> o <code>hidden</code>.</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<p>La proprietà <code>border-style</code> può essere specificata usando uno, due, tre o quattro valori.</p> + +<ul> + <li><strong>Un solo</strong> valore viene applicato a tutti e quattro i bordi.</li> + <li>Specificando<strong> due </strong>valori, il primo verrà applicato <strong>top e bottom</strong>, il secondo come <strong>left e right</strong>.</li> + <li>Con <strong>tre</strong> valori, il primo verrà applicato come <strong>top</strong>, il secondo a <strong>left e right</strong> e il terzo al <strong>bottom</strong>.</li> + <li>Specificando <strong>quattro</strong> valori si applicheranno <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong> e <strong>left</strong> in questo ordine (orario).</li> +</ul> + +<p>Ogni valore è una keyword scelta dalla seguente lista.</p> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><code><br-style></code></dt> + <dd>E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + <table class="standard-table"> + <tbody> + <tr> + <td style="vertical-align: middle;"><code>none</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore <code>none</code> ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>hidden</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: hidden; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Come per la keyword <code>hidden</code>, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dotted</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dotted; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>dashed</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: dashed; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>solid</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: solid; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra una singola dritta e solida linea.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>double</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: double; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>groove</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: groove; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto intagliato. È l'opposto di <code>ridge</code>. </td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>ridge</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: ridge; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>inset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: inset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;">Mostra un bordo che fa apparire il box incassato.<br> + E' l'opposto di <code>outset.</code> Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>groove</code>.</td> + </tr> + <tr> + <td style="vertical-align: middle;"><code>outset</code></td> + <td style="vertical-align: middle;"> + <div style="border-width: 3px; border-style: outset; margin: 0.5em; width: 3em; height: 3em; background-color: palegreen;"></div> + </td> + <td style="vertical-align: middle;"> + <p>Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di <code>inset</code>. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come <code>collapsed</code>, questo valore si comporta come <code>ridge</code>.</p> + </td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h3 id="Sintassi_Formale">Sintassi Formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabella con tutti i valori della proprietà</h3> + +<p>Ecco un esempio con tutti i valori che la proprietà può assumere</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><table> + <tr> + <td class="b1">none</td> + <td class="b2">hidden</td> + <td class="b3">dotted</td> + <td class="b4">dashed</td> + </tr> + <tr> + <td class="b5">solid</td> + <td class="b6">double</td> + <td class="b7">groove</td> + <td class="b8">ridge</td> + </tr> + <tr> + <td class="b9">inset</td> + <td class="b10">outset</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">/* Definizione stile tabella */ +table { + border-width: 3px; + background-color: #52E396; +} +tr, td { + padding: 2px; +} + +/* border-style classi di esempio */ +.b1 {border-style:none;} +.b2 {border-style:hidden;} +.b3 {border-style:dotted;} +.b4 {border-style:dashed;} +.b5 {border-style:solid;} +.b6 {border-style:double;} +.b7 {border-style:groove;} +.b8 {border-style:ridge;} +.b9 {border-style:inset;} +.b10 {border-style:outset;}</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td>No change</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Added <code>hidden</code></td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.border-style")}}</p> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li>Le proprietà shorthand CSS relative al bordo: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li> +</ul> diff --git a/files/it/web/css/border/index.html b/files/it/web/css/border/index.html new file mode 100644 index 0000000000..2e903b8520 --- /dev/null +++ b/files/it/web/css/border/index.html @@ -0,0 +1,109 @@ +--- +title: border +slug: Web/CSS/border +translation_of: Web/CSS/border +--- +<p> </p> +<div id="section_1"> + <h3 class="editable" id="Sommario"><span>Sommario</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>La proprietà <code>border</code> è una abbreviazione per impostare in una sola volta i valori individuali di border. <code>border</code> può essere usata per impostare uno o più dei seguenti valori: <span class="lang lang-en"><code><a href="../../../../en/CSS/border-width" rel="internal">border-width</a></code></span> , <span class="lang lang-en"><code><a href="../../../../en/CSS/border-style" rel="internal">border-style</a></code></span> , <span class="lang lang-en"><code><a href="../../../../en/CSS/border-color" rel="internal">border-color</a></code></span> .</p> + <ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: per i dettagli, guarda le singole proprietà</li> + <li>Si applica a:tutti gli elementi</li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: no</li> + <li>Percentuali: no</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: guarda le singole proprietà</li> + </ul> +</div> +<div id="section_2"> + <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <pre class="eval">border: [ <border-width> || <border-style> || <border-color> ] | inherit +</pre> +</div> +<div id="section_3"> + <h3 class="editable" id="Valori"><span>Valori</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <dl> + <dt> + border-width</dt> + <dd> + <em>Opzionale</em>, se è assente viene usato il valore di default<code> medium</code>. Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> .</dd> + <dt> + border-style </dt> + <dd> + <em>Richiesto</em>, se è assente viene usato il valore di default<code> none</code>. Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> .</dd> + <dt> + border-color </dt> + <dd> + <em>Opzionale</em>, se è assente il valore di default è la proprietà <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color" rel="internal" title="../../it/CSS/color">color</a></code></span> (colore di primo piano). Vedi <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> .</dd> + </dl> +</div> +<div id="section_4"> + <h3 class="editable" id="Esempi"><span>Esempi</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p><span class="lang lang-en"><a class="external" href="http://developer.mozilla.org/samples/cssref/border.html" rel="external nofollow" title="http://developer.mozilla.org/samples/cssref/border.html">Guarda gli esempi dal vivo</a> </span></p> + <pre>element { border: dashed } /* bordo tratteggiato di medio spessore, lo stesso colore del testo */ +element { border: dotted 1.5em } /* bordo spesso 1.5em a punti, lo stesso colore del testo */ +element { border: solid red } /* bordo rosso continuo di medio spessore */ +element { border: solid blue 10px } /* bordo continuo blu spesso 10px */ +</pre> +</div> +<div id="section_5"> + <h3 class="editable" id="Note"><span>Note </span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>Mentre le proprietà <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> , e <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.</p> +</div> +<div id="section_6"> + <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#border" rel="external nofollow" title="http://www.w3.org/TR/CSS1#border">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties" rel="external nofollow" title="http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties">CSS 2.1 Box #border-shorthand</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-border-shorthands" rel="external nofollow" title="http://www.w3.org/TR/css3-background/#the-border-shorthands">CSS 3 Backgrounds and Borders #border-shorthand</a></li> + </ul> +</div> +<div id="section_7"> + <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione più vecchia</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>4.0</td> + </tr> + <tr> + <td>Firefox</td> + <td>1.0</td> + </tr> + <tr> + <td>Safari</td> + <td>1.0</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> + </table> +</div> +<div id="section_8"> + <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/border#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p><span class="lang lang-en"><span class="lang lang-en"><code><strong>border</strong></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-width" rel="internal" title="../../it/CSS/border-width">border-width</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-style" rel="internal" title="../../it/CSS/border-style">border-style</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/border-color" rel="internal" title="../../it/CSS/border-color">border-color</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/margin" rel="internal" title="../../it/CSS/margin">margin</a></code></span> , <span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/padding" rel="internal" title="../../it/CSS/padding">padding</a></code></span> </span></p> +</div> +<p> </p> diff --git a/files/it/web/css/cascade/index.html b/files/it/web/css/cascade/index.html new file mode 100644 index 0000000000..8ce2e4dafc --- /dev/null +++ b/files/it/web/css/cascade/index.html @@ -0,0 +1,149 @@ +--- +title: Cascade +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +<p>{{ CSSRef() }}</p> + +<p><span class="seoSummary">The <em>cascade</em> is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: <em>Cascading</em> Style Sheets.</span></p> + +<h2 id="What_CSS_entities_participate_in_the_cascade">What CSS entities participate in the cascade</h2> + +<p>Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like {{ cssxref("@font-face")}} containing <em>descriptors</em> don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its <code>font-family</code> descriptor. If several <code>@font-face</code> with the same descriptor are defined, only the most adequate <code>@font-face</code>, as a whole, is considered.</p> + +<p>If the declarations contained in most <a href="/en-US/docs/CSS/At-rule" title="/en-US/docs/CSS/At-rule">at-rules</a> participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.</p> + +<p>Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.</p> + +<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> + +<p>The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:</p> + +<ul> + <li>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.</li> + <li>The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.</li> + <li>The <em>reader</em>, the user of the browser, may have a custom style sheet to tailor its experience.</li> +</ul> + +<p>Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.</p> + +<h2 id="Cascading_order">Cascading order</h2> + +<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> + +<ol> + <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> + <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + <table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">Origin</th> + <th scope="col">Importance</th> + </tr> + </thead> + <tbody> + <tr> + <td>1</td> + <td>user agent</td> + <td>normal</td> + </tr> + <tr> + <td>2</td> + <td>user agent</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>3</td> + <td>user</td> + <td>normal</td> + </tr> + <tr> + <td>4</td> + <td>author</td> + <td>normal</td> + </tr> + <tr> + <td>5</td> + <td>CSS Animations</td> + <td><em>see below</em></td> + </tr> + <tr> + <td>6</td> + <td>author</td> + <td><code>!important</code></td> + </tr> + <tr> + <td>7</td> + <td>user</td> + <td><code>!important</code></td> + </tr> + </tbody> + </table> + </li> + <li>In case of equality, the <a href="/en-US/docs/CSS/Specificity" title="/en-US/docs/CSS/Specificity">specificity</a> of a value is considered to choose one or the other.</li> +</ol> + +<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> + +<p><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">CSS Animations</a>, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single <code>@keyframes</code> and never mixes several of them.</p> + +<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> + +<p>Also note that values within <code>@keyframes</code> at-rules overwrite all normal values but are overwritten by <code>!important</code> values.</p> + +<h2 id="Example">Example</h2> + +<p><strong>User-agent CSS:</strong></p> + +<pre class="brush:css;">li { margin-left: 10px }</pre> + +<p><strong class="brush:css;">Author CSS 1:</strong></p> + +<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> + +<p><strong class="brush:css;">Author CSS 2:</strong></p> + +<pre class="brush:css;">@media screen { + li { margin-left: 3px } +} + +@media print { + li { margin-left: 1px } +} +</pre> + +<p><strong class="brush:css;">User CSS:</strong></p> + +<pre class="brush:css;">.specific { margin-left: 1em }</pre> + +<p><strong>HTML:</strong></p> + +<pre class="brush:html;"><ul> + <li class="specific">1<sup>st</sup></li> + <li>2<sup>nd</sup></li> +</ul> +</pre> + +<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code> so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> + +<p>So three declarations are in competition:</p> + +<pre class="brush:css;">margin-left: 0</pre> + +<pre class="brush:css;">margin-left: 3px</pre> + +<pre class="brush:css;">margin-left: 1px</pre> + +<p>The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:</p> + +<pre class="brush:css;">margin-left: 3px</pre> + +<p>Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The very simple <a href="https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/">introduction</a> of cascading in the CSS Tutorial.</li> + <li>{{CSS_Key_Concepts()}}</li> +</ul> diff --git a/files/it/web/css/color/index.html b/files/it/web/css/color/index.html new file mode 100644 index 0000000000..04a15799cc --- /dev/null +++ b/files/it/web/css/color/index.html @@ -0,0 +1,81 @@ +--- +title: color +slug: Web/CSS/color +translation_of: Web/CSS/color +--- +<p> </p> +<div id="section_1"> + <h3 class="editable" id="Sommario"><span>Sommario</span></h3> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>La proprietà CSS<code> color </code>imposta il colore di primo piano del contenuto testuale di un elemento.</p> + <ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: dipende dal browser in uso</li> + <li>Si applica a: tutti gli elementi</li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: sì</li> + <li>Percentuali: no</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: come speficato</li> + </ul> +</div> +<div id="section_2"> + <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <pre>color: <color> | inherit</pre> +</div> +<div id="section_3"> + <h3 class="editable" id="Valori"><span>Valori</span></h3> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <dl> + <dt> + <color></dt> + <dd> + La proprietà color accetta varie parole chiave e valori numerici. <strong>Vedi i valori di <span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color_value" rel="internal" title="../../it/CSS/color value"><color></a></code></span> </span></strong>per maggiori dettagli.</dd> + </dl> +</div> +<div id="section_4"> + <h3 class="editable" id="Esempi"><span>Esempi</span></h3> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>Tutti gli esempi seguenti rendono il testo rosso.</p> + <pre>element { color: red } +element { color: #f00 } +element { color: #ff0000 } +element { color: rgb(255,0,0) } +element { color: rgb(100%, 0%, 0%) } +element { color: hsl(0, 100%, 50%) } + +/* 50% translucent, support since Firefox 3 */ +element { color: rgba(255, 0, 0, 0.5) } +element { color: hsla(0, 100%, 50%, 0.5) }</pre> +</div> +<div id="section_5"> + <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <ul> + <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-color" rel="external nofollow" title="http://www.w3.org/TR/CSS21/colors.html#propdef-color">CSS 2.1</a></li> + <li><a class="external" href="http://www.w3.org/TR/css3-color/#color" rel="external nofollow" title="http://www.w3.org/TR/css3-color/#color">CSS 3 Color #color</a> Bozza</li> + </ul> +</div> +<div id="section_6"> + <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3> + <br> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>La proprietà<code> color </code>è supportata molto bene da tutti i browser più comuni.<br> + Una tabella di compatibilità tra browser è qui: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/color_value" rel="internal"><color></a></code></span> </span>.</p> +</div> +<div id="section_7"> + <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3> + <br> + <div class="editIcon"> + <a href="../../../../en/CSS/color#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <ul> + <li><span class="lang lang-en"><span class="lang lang-en"><code><a class="internal" href="/../../it/CSS/color_value" rel="internal" title="../../it/CSS/color value">Valori di <color></a></code></span></span></li> + <li><a class="external" href="http://html-color-codes.com/" rel="external nofollow" title="http://html-color-codes.com/">Color Chart by VisiBone</a></li> + </ul> +</div> +<p> </p> diff --git a/files/it/web/css/css_box_model/index.html b/files/it/web/css/css_box_model/index.html new file mode 100644 index 0000000000..65d01c1965 --- /dev/null +++ b/files/it/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Box Model</strong> is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the <a href="/en-US/docs/Web/CSS/Visual_formatting_model">visual formatting model</a>.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="Properties">Properties</h3> + +<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4> + +<div class="index"> +<ul> + <li>{{cssxref("box-sizing")}}</li> + <li>{{cssxref("overflow")}}</li> + <li>{{cssxref("overflow-x")}}</li> + <li>{{cssxref("overflow-y")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4> + +<div class="index"> +<ul> + <li>{{cssxref("height")}}</li> + <li>{{cssxref("width")}}</li> + <li>{{cssxref("max-height")}}</li> + <li>{{cssxref("max-width")}}</li> + <li>{{cssxref("min-height")}}</li> + <li>{{cssxref("min-width")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4> + +<div class="index"> +<ul> + <li>{{cssxref("margin")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-top")}}</li> +</ul> +</div> + +<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4> + +<div class="index"> +<ul> + <li>{{cssxref("padding")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-top")}}</li> +</ul> +</div> + +<h4 id="Other_properties">Other properties</h4> + +<div class="index"> +<ul> + <li>{{cssxref("visibility")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt> + <dd>Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt> + <dd>Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.</dd> + <dt><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual formatting model</a></dt> + <dd>Explains the visual formatting model.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box")}}</td> + <td>{{Spec2("CSS3 Box")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS2.1", "box.html")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..6aa8f3ae9e --- /dev/null +++ b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,68 @@ +--- +title: Introduzione al box model in CSS +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guida +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +<div>{{CSSRef}}</div> + +<div>Quando un browser presenta un documento HTML all'utente, il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del <strong>box model di CSS</strong>. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.</div> + +<div> </div> + +<p>Ogni box è composto da quattro parti (o <em>aree</em>), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.</p> + +<p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/15585/boxmodel-(3_ita).png" style="height: 384px; width: 548px;"></p> + +<p><a name="content-area"></a>L'<strong>area del contenuto</strong>, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate <em>content width</em> (o <em>content-box width</em>) e <em>content height</em> (o <em>content-box height</em>). Spesso ha un colore o una immagine di background.</p> + +<p>Se la proprietà {{cssxref("box-sizing")}} è impostata su <code>content-box</code> ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.</p> + +<p><a name="padding-area"></a>L'<strong>area del padding</strong>, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate <em>padding-box width</em> e <em>padding-box height</em>. Se l'area del contenuto ha un background, il background si estende all'area del padding.</p> + +<p>lo spessore del padding è determinato tramite le proprietà {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, o usando la forma abbreviata {{cssxref("padding")}}.</p> + +<p><a name="border-area"></a>L'<strong>area del bordo</strong>, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate <em>border-box width</em> e <em>border-box height</em>.</p> + +<p>Lo spessore dei bordi è determinato tramite la proprietà {{cssxref("border-width")}}, o usando la forma abbreviata {{cssxref("border")}}. Se la proprietà {{cssxref("box-sizing")}} è impostata su <code>border-box</code>, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.</p> + +<p><a name="margin-area"></a>L'<strong>area del margine</strong>, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate <em>margin-box width e</em> <em>margin-box height</em>.</p> + +<p>Le dimensioni dell'area del margine sono determinate tramite le proprietà {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, o usando la forma abbreviata {{cssxref("margin")}}. Quando si verifica un caso di margini che collassano (<a href="/en/CSS/margin_collapsing" title="en/CSS/margin_collapsing">margin collapsing</a>), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.</p> + +<p>Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <code><span>contenuto</span></code> anziché derivare il contenuto da una fonte esterna come <code>src </code>per le etichette <code><img></code>) e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà {{cssxref('line-height')}}, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Descrizione più precisa, ma nessun cambio a livello pratico.</td> + </tr> + <tr> + <td>{{ SpecName("CSS1","#formatting-model")}}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/it/docs/Web/CSS/Guida_di_riferimento_ai_CSS" title="CSS Reference">Guida di riferimento CSS</a></li> + <li>{{ CSS_key_concepts() }}</li> + <li>Proprietà CSS relazionate: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}</li> +</ul> diff --git a/files/it/web/css/css_flexible_box_layout/index.html b/files/it/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..fadc582c86 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p><strong>CSS Flexible</strong> is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_Properties">CSS Properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt> + <dd>Step-by-step tutorial about how to build layouts using this feature.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt> + <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}}<br> + 11.0</td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..9acef6a218 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,394 @@ +--- +title: Using CSS flexible boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">Il CSS3 <strong>Flexible Box</strong>, o <strong>flexbox</strong>, è un <a href="/en-US/docs/Web/CSS/Layout_mode">layout mode</a> che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo .</span> Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.</p> + +<p>Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox <span id="result_box" lang="it"><span class="hps">possono essere</span> <span class="hps">disposti in</span> <span class="hps">qualsiasi direzione</span> <span class="hps">e possono </span><span class="hps">avere dimensioni</span> <span class="hps">flessibili per</span> <span class="hps">adattarsi</span> <span class="hps">allo spazio</span> <span class="hps">dello schermo</span></span>. <span id="result_box" lang="it"><span class="hps">Il posizionamento degli elementi</span> <span class="hps">figli </span><span class="hps">è quindi</span> <span class="hps">molto più facile</span><span>,</span> <span class="hps">e</span> i <span class="hps">layout complessi</span> <span class="hps">possono essere realizzati</span> <span class="hps">più semplicemente</span> <span class="hps">e</span> <span class="hps">con</span> <span class="hps">codice più pulito</span><span>,</span> anche <span class="hps">l'ordine di visualizzazione</span> <span class="hps">degli elementi</span> <span class="hps">è indipendente</span> <span class="hps">dal loro ordine</span> <span class="hps">nel codice sorgente</span><span>.</span></span> Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.</p> + +<div class="note"><strong>Nota:</strong> Anche <a href="http://www.w3.org/TR/css3-flexbox/">CSS Flexible Boxes Layout specification</a> è in fase Last Call Working Draft stage (vedi anche <a href="http://dev.w3.org/csswg/css-flexbox/">Latest Editor draft</a>), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">tabella delle compatibilità</a> su ogni proprietà per aggiornarti sullo stato di compatibilità.</div> + +<h2 id="Caratteristiche_del_flexible_boxes">Caratteristiche del flexible boxes</h2> + +<p>L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.</p> + +<p>L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, <span id="result_box" lang="it"><span class="hps">non è sufficientemente adatto</span><span class="hps"> per sostenere</span> <span class="hps">componenti applicativi</span> <span class="hps">che devono</span> <span class="hps">modificare l'orientamento</span></span>, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo) è destinato ai layout di scala più ampia. <span id="result_box" lang="it"><span class="hps">Entrambi fanno parte di</span> <span class="hps">uno sforzo più ampio</span> <span class="hps">del</span> <span class="hps">CSS Working Group</span> <span class="hps">per fornire</span> <span class="hps">una maggiore</span> <span class="hps">interoperabilità delle</span> <span class="hps">applicazioni web</span> <span class="hps">con diversi</span> user agents<span>,</span> <span class="hps">diverse modalità</span> <span class="hps">di scrittura</span><span>,</span> <span class="hps">e altre richieste</span> <span class="hps">di flessibilità</span><span>.</span></span></p> + +<h2 id="Vocabolario_del_flexible_boxes">Vocabolario del flexible boxes</h2> + +<p>Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. <span id="result_box" lang="it"><span class="hps">Si consideri il seguente</span> <span class="hps">schema</span> <span class="hps">al momento di rivedere</span> <span class="hps">gli elementi</span> <span class="hps">di vocabolario</span> <span class="hps">qui sotto</span></span>. <span id="result_box" lang="it"><span class="hps">Essa mostra</span> <span class="hps">un contenitore</span> <span class="hps">flessibile</span> <span class="hps">che</span> <span class="hps">ha un</span> </span><code>flex-direction</code> <span lang="it"><span> di</span> </span><code>row</code><span lang="it"><span>,</span> <span class="hps">il che significa che</span> <span class="hps">gli elementi</span> <span class="hps">flessibili</span> <span class="hps">susseguono</span> <span class="hps">orizzontalmente attraverso</span> <span class="hps">l'asse principale</span> <span class="hps">secondo</span> <span class="hps">la modalità di scrittura</span> <span class="hps">stabilita</span><span>,</span> <span class="hps">la direzione in cui</span> <span class="hps">il testo dell'elemento</span> <span class="hps">scorre</span><span>,</span> <span class="hps">in</span> <span class="hps">questo caso</span> <span class="hps">da sinistra a</span> <span class="hps">destra.</span></span></p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Flex container</dt> + <dd><span id="result_box" lang="it"><span class="atn hps">L'</span><span>elemento principale</span> <span class="hps">in cui gli elementi</span> <span class="hps">di flessione</span> <span class="hps">sono contenuti</span><span>.</span> <span class="hps">Un contenitore</span> <span class="hps">flex</span> <span class="hps">viene definito utilizzando i</span> <span class="hps">valori di</span> </span><code>flex</code> <span lang="it"><span class="hps">o</span> </span><code>inline-flex</code><span lang="it"> <span class="atn hps">della </span><span class="alt-edited hps">proprietà</span><span class="atn hps"> {</span><span class="atn">{</span><span>Cssxref</span> <span class="atn hps">(</span><span class="atn hps">"</span><span>visualizzazione</span><span>"</span><span>)}</span><span>}</span> <span>.</span></span></dd> + <dt>Flex item</dt> + <dd> + <p><span id="result_box" lang="it"><span class="alt-edited hps">Ciascun figlio</span> <span class="hps">di un contenitore</span> <span class="hps">flessibile</span> <span class="hps">diventa</span> <span class="hps">un elemento</span> <span class="hps">flessibile</span><span>.</span> <span class="alt-edited hps">Del testo</span> <span class="hps">direttamente</span> <span class="hps">contenuto in un contenitore</span> <span class="hps">flessibile</span> <span class="hps">è avvolto in</span> <span class="hps">un elemento</span> <span class="hps">flex</span> <span class="hps">anonimo</span><span>.</span></span></p> + </dd> + <dt>Axes</dt> + <dd> + <p><span id="result_box" lang="it"><span class="hps">Ogni</span> </span> flexible box <span lang="it"> <span class="hps">di layout</span> <span class="hps">flessibile</span> <span class="hps">segue due</span> <span class="hps">assi</span><span>.</span> <span class="hps">L'<strong>asse principale</strong></span> <span class="hps">è l'asse</span> <span class="hps">lungo il quale</span> <span class="hps">gli elementi</span> <span class="hps">flessibili</span> <span class="hps">susseguono</span><span>.</span> <span class="hps">L'<strong>asse</strong></span><strong> <span class="hps">trasversale</span></strong> <span class="hps">è l'asse</span> <span class="hps">perpendicolare all'<strong>asse</strong></span><strong> </strong><span class="hps"><strong>principale</strong>.</span></span></p> + + <ul> + <li><code>Il <a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> proprietà che stabilisce l'asse principale.</li> + <li><code>Il </code><a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> <span id="result_box" lang="it"><span class="hps">proprietà definisce</span> <span class="hps">come gli elementi</span> <span class="hps">flessibili</span> <span class="hps">siano</span> <span class="hps">disposti</span> <span class="hps">lungo l'asse principale</span> <span class="hps">sulla riga corrente</span><span>.</span></span></li> + <li>La <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.</li> + <li>La <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da <code>align-items.</code></li> + </ul> + </dd> + <dt>Directions</dt> + <dd> + <p>La <strong>main start</strong>/<strong>main end </strong>e <strong>cross start</strong>/<strong>cross end</strong> <span id="result_box" lang="it"><span class="hps">lati del contenitore</span> <span class="hps">flex</span> <span class="hps">descrivono</span> <span class="hps">l'origine e</span> la fine <span class="hps">del</span> <span class="hps">flusso</span> <span class="hps">degli</span> <span class="hps">elementi</span> <span class="hps">flessibili</span><span>. </span><span class="hps">Seguono</span> <span class="hps">l'asse principale</span> <span class="hps">e l'asse</span> <span class="hps">trasversale</span> <span class="hps">del contenitore</span> <span class="hps">flex</span> <span class="hps">nel vettore</span> <span class="hps">stabilito dalla</span> </span> <code>writing-mode</code><span lang="it"> <span class="atn hps">(</span><span>da sinistra a</span> <span class="hps">destra</span><span>,</span> <span class="hps">da destra a</span> <span class="hps">sinistra</span><span>,</span> <span class="hps">ecc</span><span>)</span><span>.</span></span></p> + + <ul> + <li>La <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.</li> + <li>La <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> proprietà shorthands <code>la </code><a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> <code>e </code><a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> proprietà per layout the flex items.</li> + </ul> + </dd> + <dt>Lines</dt> + <dd> + <p>Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a>, <span id="result_box" lang="it"><span class="hps">che controlla la</span> <span class="hps">direzione dell'asse</span> <span class="hps">trasversale</span> <span class="hps">e la direzione</span> <span class="hps">in cui le nuove</span> <span class="hps">righe sono ravvicinate.</span></span></p> + </dd> + <dt>Dimensions</dt> + <dd> + <p>gli elementi di height e width sono <strong>main size</strong> e <strong>cross size,</strong> che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.</p> + + <ul> + <li><code>La <a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> e <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> proprietà con valore iniziale 0.</li> + <li>La proprietà shorthands <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> la <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, e <a href="/en-US/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> <span id="result_box" lang="it"><span class="hps">proprietà</span> <span class="hps">per stabilire la</span> <span class="hps">flessibilità</span> <span class="hps">degli elementi</span> <span class="hps">flessibili</span><span>.</span></span></li> + </ul> + </dd> +</dl> + +<h2 id="Scegliere_un_flexible_box">Scegliere un flexible box</h2> + +<p>Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà <a href="/en-US/docs/Web/CSS/display">display</a> e prova:</p> + +<pre class="brush: css">display : flex</pre> + +<p>o</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore <code>flex</code> rende il contenitore flex un block-level element. IL valore <code>inline-flex</code> rende il contenitore flex come inline-level element.</p> + +<div class="note"><strong>Nota:</strong> Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, <code>display : -webkit-flex</code>.</div> + +<h2 id="Considerazione_elementi_flessibili">Considerazione elementi flessibili</h2> + +<p>Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . <span id="result_box" lang="it"><span class="hps">Tuttavia</span><span>,</span> <span class="hps">un elemento</span> <span class="hps">flex</span> <span class="hps">anonimo</span> <span class="hps">che contiene</span> <span class="hps">solo spazi vuoti</span> <span class="hps">non</span> <span class="hps">è considerato</span></span>, come se fosse <code>display: none</code>.</p> + +<p><span lang="it"><span class="hps">Figli</span> <span class="hps">posizionati in modo assoluto</span> <span class="hps">di un contenitore</span> <span class="hps">flex</span> <span class="hps">sono posizionati in modo</span> <span class="hps">che la loro posizione</span> iniziale <span class="hps">sia determinata</span> <span class="hps">in</span> <span class="hps">riferimento al</span> <span class="hps">principale</span> </span>start content-box<span lang="it"><span> del</span> <span class="hps">loro contenitore</span> <span class="hps">flessibile</span><span>.</span></span></p> + +<p>Attualmente, a causa di un problema noto, <code>specificando visibility: collapse</code> su un elemento flessibile, questo viene visto come <code>display: none</code>, invece <code>si ha il comportamento previsto con visibility: hidden</code>. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare <code>visibility:hidden</code> per gli elementi flessibili che dovrebbero comportarsi come <code>visibility:collapse</code>. Per ulteriori informazioni, vedi {{bug(783470)}}.</p> + +<p>I margini di elementi flessibili non collassano. Usando i margini <code>auto</code> assorbono spazio extra nella direzione verticale o orizzontale <span id="result_box" lang="it"><span class="hps">e può essere utilizzato</span> <span class="hps">per l'allineamento</span> <span class="hps">o</span> <span class="hps">per separare gli elementi</span> flessibili <span class="hps">adiacenti</span></span>. Vedi <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> nel W3C Flexible Box Layout Model specification per maggiori dettagli.</p> + +<p><s>To ensure a reasonable default minimum size for flex items, use <code>min-width:auto</code> and/or <code>min-height:auto</code>. For flex items, the <code>auto</code> attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.</s></p> + +<p>Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". <span id="result_box" lang="it"><span class="hps">Per ora, se</span> <span class="hps">questo è un problema</span><span>,</span> <span class="hps">si possono invece</span> <span class="hps">utilizzare</span> <span class="hps">i margini</span> <span class="hps">per ottenere</span> <span class="hps">la centratura</span><span>,</span> </span> as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare <code>align-</code> properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della <code>justify-</code> properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire <code>justify-content</code> con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p> + +<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p> + +<h2 id="Flexible_box_properties">Flexible box properties</h2> + +<h3 id="Proprietà_non_influenzate_da_flexible_boxes">Proprietà non influenzate da flexible boxes</h3> + +<p>Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:</p> + +<ul> + <li><code>column-*</code> proprietà della <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> non hanno nessuno effetto sugli elementi flessibili.</li> + <li>{{cssxref("float")}} e {{cssxref("clear")}} non hanno effetto sugli elementi flessibili. Usando <code>float</code> si causa il <code>display</code> property che è un elemento <code>block</code>.</li> + <li>{{cssxref("vertical-align")}} non ha alcun effetto sull'allineamento degli elementi flessibili.</li> +</ul> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="Esempi_base_flex">Esempi base flex</h3> + +<p><span id="result_box" lang="it"><span class="hps">Questo</span> <span class="hps">esempio di base</span> <span class="hps">mostra come applicare</span> <span class="hps">la "flessibilità</span><span>" per</span> <span class="hps">un elemento e</span> <span class="hps">come</span> <span class="hps">gli</span> <span class="hps">elementi</span> fratelli <span class="hps">si comportano in</span> <span class="hps">uno stato</span> <span class="hps">flessibile.</span></span></p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + width: 30px; /* To make the transition work nicely. (Transitions to/from + "width:auto" are buggy in Gecko and Webkit, at least. + See http://bugzil.la/731886 for more info.) */ + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3> + +<p><span id="result_box" lang="it"><span class="hps">Questo esempio dimostra come</span> <span class="hps">FlexBox</span> <span class="hps">fornisce</span> <span class="hps">la possibilità di modificare</span> <span class="hps">dinamicamente</span> <span class="hps">il layout per</span> <span class="hps">diverse risoluzioni dello schermo</span><span>.</span> <span class="hps">Il seguente diagramma illustra</span> <span class="hps">la trasformazione</span><span>.</span></span></p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-direction: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Prova">Prova</h2> + +<p>Ci sono diversi siti per la sperimentazione del flexBox:</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> +</ul> + +<h2 id="Cose_da_tenere_a_mente">Cose da tenere a mente</h2> + +<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p> + +<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> + +<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p> + +<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoDesktop("22.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoDesktop("28.0")}}</td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>11<sup>[3]</sup></td> + <td>12.10<sup>[5]</sup><br> + 15 {{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support (single-line flexbox)</td> + <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> + {{CompatGeckoMobile("22.0")}}</td> + <td> + <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> + 1.1</p> + </td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + <tr> + <td>Multi-line flexbox</td> + <td>{{CompatGeckoMobile("28.0")}}</td> + <td>1.3</td> + <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> + 4.4</td> + <td>11</td> + <td>12.10<sup>[5]</sup><br> + 15{{property_prefix("-webkit")}}</td> + <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.</p> + +<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p> + +<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p> + +<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p> + +<p>[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li> +</ul> diff --git a/files/it/web/css/css_positioning/index.html b/files/it/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/it/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +<div>{{CSSRef}}</div> + +<p><strong>CSS Positioned Layout</strong> is a module of CSS that defines how to position elements on the page.</p> + +<h2 id="Reference">Reference</h2> + +<h3 id="CSS_properties">CSS properties</h3> + +<div class="index"> +<ul> + <li>{{cssxref("bottom")}}</li> + <li>{{cssxref("clear")}}</li> + <li>{{cssxref("float")}}</li> + <li>{{cssxref("left")}}</li> + <li>{{cssxref("position")}}</li> + <li>{{cssxref("right")}}</li> + <li>{{cssxref("top")}}</li> + <li>{{cssxref("z-index")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt> + <dd>Presents the notion of stacking context and explains how z-ordering works, with several examples.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Positioning') }}</td> + <td>{{ Spec2('CSS3 Positioning') }}</td> + <td> </td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/it/web/css/css_positioning/understanding_z_index/index.html b/files/it/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/it/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +<div>{{cssref}}</div> + +<p>In the most basic cases, <a href="/en-US/docs/Web/HTML">HTML</a> pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p> + +<blockquote> +<p><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p> +</blockquote> + +<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> + +<p>This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS <code>z-index</code> property.</p> + +<p>Using <code>z-index</code> appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when <code>z-index</code> is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p> + +<p>This article will try to explain those rules, with some simplification and several examples.</p> + +<ol> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index">Using z-index</a>: How to use <code>z-index</code> to change default stacking.</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li> +</ol> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: July 9, 2005</li> +</ul> + +<p><small><em>Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.</em></small></p> +</div> diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>The <code>cursor</code> CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("cursor")}} +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><<code>uri</code>></dt> + <dd>A <code>url(…)</code> or a comma separated list <code>url(…), url(…), …</code>, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) <strong>must</strong> be at the end of the fallback list. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> + <dt><code><x></code> <code><y></code> {{ experimental_inline() }}</dt> + <dd>Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.</dd> + <dt>Keyword values</dt> + <dd> + <p><strong style="color: red; font-size: big;">Move mouse over value for testing:</strong></p> + + <table class="standard-table"> + <tbody> + <tr> + <th>Category</th> + <th>CSS value</th> + <th> </th> + <th>Description</th> + </tr> + <tr style="cursor: auto;"> + <td rowspan="3">General</td> + <td><code>auto</code></td> + <td> </td> + <td>The browser determines the cursor to display based on the current context.<br> + E.g. equivalent to <code>text</code> when hovering text.</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> + <td>Default cursor, typically an arrow.</td> + </tr> + <tr style="cursor: none;"> + <td><code>none</code></td> + <td> </td> + <td>No cursor is rendered.</td> + </tr> + <tr style="cursor: context-menu;"> + <td rowspan="5" style="cursor: auto;">Links & status</td> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> + <td>A context menu is available under the cursor.<br> + Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.</td> + </tr> + <tr style="cursor: help;"> + <td><code>help</code></td> + <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating help is available.</td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> + <td>E.g. used when hovering over links, typically a hand.</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> + <td>The program is busy in the background but the user can still interact with the interface (unlike for <code>wait</code>).</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> + <td>The program is busy (sometimes an hourglass or a watch).</td> + </tr> + <tr style="cursor: cell;"> + <td rowspan="4" style="cursor: auto;">Selection</td> + <td><code>cell</code></td> + <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating that cells can be selected.</td> + </tr> + <tr style="cursor: crosshair;"> + <td><code>crosshair</code></td> + <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> + <td>Cross cursor, often used to indicate selection in a bitmap.</td> + </tr> + <tr style="cursor: text;"> + <td><code>text</code></td> + <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating text can be selected, typically an I-beam.</td> + </tr> + <tr style="cursor: vertical-text;"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating that vertical text can be selected, typically a sideways I-beam.</td> + </tr> + <tr style="cursor: alias;"> + <td rowspan="5" style="cursor: auto;">Drag and drop</td> + <td><code>alias</code></td> + <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating an alias or shortcut is to be created.</td> + </tr> + <tr style="cursor: copy;"> + <td><code>copy</code></td> + <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> + <td>Indicating that something can be copied.</td> + </tr> + <tr style="cursor: move;"> + <td><code>move</code></td> + <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> + <td>The hovered object may be moved.</td> + </tr> + <tr style="cursor: no-drop;"> + <td><code>no-drop</code></td> + <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> + <td>Cursor showing that a drop is not allowed at the current location.<br> + {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".</td> + </tr> + <tr style="cursor: not-allowed;"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something cannot be done.</td> + </tr> + <tr style="cursor: all-scroll;"> + <td rowspan="15" style="cursor: auto;">Resize & scrolling</td> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> + <td>Cursor showing that something can be scrolled in any direction (panned).<br> + {{ bug("275174") }} on Windows, "<em>all-scroll</em> is the same as <em>move</em>".</td> + </tr> + <tr style="cursor: col-resize;"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.</td> + </tr> + <tr style="cursor: row-resize;"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> + <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td> + </tr> + <tr style="cursor: n-resize;"> + <td><code>n-resize</code></td> + <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> + <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.</td> + </tr> + <tr style="cursor: e-resize;"> + <td><code>e-resize</code></td> + <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: s-resize;"> + <td><code>s-resize</code></td> + <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: w-resize;"> + <td><code>w-resize</code></td> + <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ne-resize;"> + <td><code>ne-resize</code></td> + <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nw-resize;"> + <td><code>nw-resize</code></td> + <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: se-resize;"> + <td><code>se-resize</code></td> + <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: sw-resize;"> + <td><code>sw-resize</code></td> + <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: ew-resize;"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> + <td rowspan="4" style="cursor: auto;">Indicates a bidirectional resize cursor.</td> + </tr> + <tr style="cursor: ns-resize;"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: nesw-resize;"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> + </tr> + <tr style="cursor: nwse-resize;"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> + </tr> + <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;"> + <td rowspan="2">Zoom</td> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be zoomed (magnified) in or out.</p> + </td> + </tr> + <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;"> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> + </tr> + <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"> + <td rowspan="2">Grab</td> + <td><code>grab</code></td> + <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> + <td rowspan="2" style="cursor: auto;"> + <p>Indicates that something can be grabbed (dragged to be moved).</p> + </td> + </tr> + <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"> + <td><code>grabbing</code></td> + <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Examples" name="Examples">Examples</h2> + +<pre class="brush:css">.foo { cursor: crosshair; } + +/* use prefixed-value if "zoom-in" isn't supported */ +.bar { cursor: -webkit-zoom-in; cursor: zoom-in; } + +/* standard cursor value as fallback for url() <u>must</u> be provided (doesn't work without) */ +.baz { cursor: url(hyper.cur), auto } +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}</td> + <td>{{ Spec2('CSS3 Basic UI') }}</td> + <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome (WebKit)</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><code>auto</code>, <code>crosshair</code>, <code>default</code>, <code>move</code>, <code>text</code>, <code>wait</code>, <code>help</code>,<br> + <code>n-resize</code>, <code>e-resize</code>, <code>s-resize</code>, <code>w-resize</code>,<br> + <code>ne-resize</code>, <code>nw-resize</code>, <code>se-resize</code>, <code>sw-resize</code></td> + <td>1.0</td> + <td>1.0 (1.0)</td> + <td>4.0</td> + <td>7.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>pointer</code>, <code>progress</code></td> + <td>1.0</td> + <td>1.0 (1.0 | 1.7)</td> + <td>6.0</td> + <td>7.x</td> + <td>1.2 | 3.0</td> + </tr> + <tr> + <td><code>url()</code> - See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values</a></td> + <td>1.0 (523)</td> + <td>1.5 (1.8);<br> + OS X: 4.0 (2.0)</td> + <td>6.0</td> + <td>{{ CompatUnknown }}</td> + <td>3.0</td> + </tr> + <tr> + <td>Positioning syntax for <code>url()</code> values {{ experimental_inline() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td><code>not-allowed</code>, <code>no-drop</code>, <code>vertical-text</code>, <code>all-scroll</code>,<br> + <code>col-resize</code>, <code>row-resize</code></td> + <td>1.0 (522)</td> + <td>1.5 (1.8)</td> + <td>6.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>alias</code>, <code>cell</code>, <code>copy</code>,<br> + <code>ew-resize</code>, <code>ns-resize</code>, <code>nesw-resize</code>, <code>nwse-resize</code></td> + <td>1.0 (522)</td> + <td>1.5 (1.8)</td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>context-menu</code></td> + <td>OS X, Linux: 1.0 (522)</td> + <td>OS X, Linux: 1.5 (1.8)</td> + <td>10.0</td> + <td>10.6</td> + <td>3.0</td> + </tr> + <tr> + <td><code>none</code></td> + <td>5.0 (533)</td> + <td>3.0 (1.9)</td> + <td>9.0</td> + <td>{{ CompatUnknown }}</td> + <td>5.0</td> + </tr> + <tr> + <td><code>inherit</code></td> + <td>1.0</td> + <td>1.0</td> + <td>8.0</td> + <td>9.0</td> + <td>1.2</td> + </tr> + <tr> + <td><code>zoom-in</code>, <code>zoom-out</code></td> + <td>1.0 (522) {{ property_prefix("-webkit-") }}</td> + <td>1.0 (1.4) {{ property_prefix("-moz-") }}<br> + 24.0</td> + <td>{{ CompatNo }}</td> + <td>11.6</td> + <td>3.0 {{ property_prefix("-webkit-") }}</td> + </tr> + <tr> + <td><code>grab</code>, <code>grabbing</code></td> + <td>1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}</td> + <td>1.5 (1.8) {{ property_prefix("-moz-") }}<br> + 27.0</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatUnknown }}</td> + <td>4.0 {{ property_prefix("-webkit-") }}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li> + <li>{{ cssxref("pointer-events") }}</li> + <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li> +</ul> diff --git a/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html b/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ b/files/it/web/css/cursor/usare_valori_url_per_la_proprietà_cursor/index.html @@ -0,0 +1,40 @@ +--- +title: Usare valori URL per la proprietà cursor +slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +tags: + - CSS + - CSS_2.1 + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +<p> </p> +<p><a href="it/Gecko">Gecko</a> 1.8 (<a href="it/Firefox_1.5">Firefox 1.5</a>, SeaMonkey 1.0) supportano l'uso di valori URL per la <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#cursor-props">proprietà cursor CSS2</a>. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..</p> +<h3 id="Sintassi" name="Sintassi">Sintassi</h3> +<p>La sintassi per questa proprietà è:</p> +<pre class="eval">cursor: [<url>,]* keyword; +</pre> +<p>Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti <b>necessariamente</b> da una delle keyword definite nella specifica <a href="it/CSS">CSS</a>, come <code>auto</code> o <code>pointer</code>.</p> +<p>Ad esempio, la scrittura seguente è corretta:</p> +<pre class="eval">cursor: url(foo.cur), url(<span class="nowiki">http://www.example.com/bar.gif</span>), auto; +</pre> +<p>Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su <code>auto</code>.</p> +<p>il supporto della <a class="external" href="http://www.w3.org/TR/css3-ui/#cursor">sintassi</a> CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:</p> +<pre class="eval">cursor: url(foo.png) 4 12, auto; +</pre> +<p>Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).</p> +<h3 id="Limitazioni" name="Limitazioni">Limitazioni</h3> +<p>Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.</p> +<p><br> + Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).</p> +<p>Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.</p> +<p>Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})</p> +<h3 id="Compatibilit.C3.A0_con_altri_browsers" name="Compatibilit.C3.A0_con_altri_browsers">Compatibilità con altri browsers</h3> +<p>Anche Microsoft Internet Explorer supporta valori URI per la proprietà <code>cursor</code>. In ogni caso sono supportati solo i formati ANI e CUR.</p> +<p>La sintassi per la proprietà <code>cursor</code> è inoltre meno restrittiva. Questo significa che sia la scrittura:</p> +<pre class="eval">cursor: url(foo.cur); +</pre> +<p>che:</p> +<pre class="eval">cursor: url(foo.cur), pointer, url(bar.cur), auto; +</pre> +<p>funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.</p> diff --git a/files/it/web/css/flex-shrink/index.html b/files/it/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..81cc7cfd51 --- /dev/null +++ b/files/it/web/css/flex-shrink/index.html @@ -0,0 +1,120 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flex + - Proprietà CSS +translation_of: Web/CSS/flex-shrink +--- +<div>{{CSSRef}}</div> + +<div> </div> + +<p><span class="seoSummary">La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>flex-shrink</code></strong> setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di <code>flex-shrink</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}</div> + + + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="brush:css no-line-numbers">/* <number> valori */ +flex-shrink: 2; +flex-shrink: 0.6; + +/* Valori globali */ +flex-shrink: inherit; +flex-shrink: initial; +flex-shrink: unset; +</pre> + +<p>La proprietà <code>flex-shrink</code> è specificata come un singolo <code><a href="#<number>"><number></a></code>.</p> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><a id="<number>" name="<number>"><code><number></code></a></dt> + <dd>Guarda {{cssxref("<number>")}}. Non sono ammessi valori negativi.</dd> +</dl> + +<h3 id="Sintassi_formale">Sintassi formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="HTML">HTML</h3> + +<div id="Live_Sample"> +<pre class="brush: html"><p>La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.</p> +<p>A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 </p> +<p>La larghezza di D ed E è minore delle altre.</p> +<div id="content"> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> + <div class="box1" style="background-color:brown;">D</div> + <div class="box1" style="background-color:lightgreen;">E</div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#content { + display: flex; + width: 500px; +} + +#content div { + flex-basis: 120px; + border: 3px solid rgba(0,0,0,.2); +} + +.box { + flex-shrink: 1; +} + +.box1 { + flex-shrink: 2; +} +</pre> +</div> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('Example', 500, 300)}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifiche</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilità_dei_browser">Compatibilità dei browser</h2> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.properties.flex-shrink")}}</p> + +<h2 id="Guarda_anche">Guarda anche</h2> + +<ul> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li> + <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li> +</ul> diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html new file mode 100644 index 0000000000..a59a226f90 --- /dev/null +++ b/files/it/web/css/flex/index.html @@ -0,0 +1,200 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +<div>{{CSSRef}}</div> + +<h2 id="Sommario">Sommario</h2> + +<p>La proprietà <strong><code>flex</code></strong> di <a href="/en-US/docs/CSS" title="CSS">CSS</a> è una proprietà <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.</p> + +<p>{{cssinfo}}</p> + +<p>Vedi <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">L'Uso di flexible boxes</a> per altre proprietà e informazioni.</p> + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<pre class="brush:css">/* 0 0 auto */ +flex: none; + +/* Un valore, numero senza unità: flex-grow */ +flex: 2; + +/* Un valore, width/height: flex-basis */ +flex: 10em; +flex: 30px; +flex: auto; +flex: content; + +/* Due valori: flex-grow | flex-basis */ +flex: 1 30px; + +/* Due valori: flex-grow | flex-shrink */ +flex: 2 2; + +/* Tre valori: flex-grow | flex-shrink | flex-basis */ +flex: 2 2 10%; + +/* Valori globali */ +flex: inherit; +flex: initial; +flex: unset; +</pre> + +<h3 id="Values" name="Values">Valori</h3> + +<dl> + <dt><code><'flex-grow'></code></dt> + <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-grow">flex-grow</a></code> appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd> + <dt><code><'flex-shrink'></code></dt> + <dd>Il valore <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.</dd> + <dt><code><'flex-basis'></code></dt> + <dd>Il valore <a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis"><code>flex-basis</code></a> appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.</dd> + <dt><code>none</code></dt> + <dd>Questo valore viene interpretato come: <code>0 0 auto</code>.</dd> + <dt> + <h3 id="Sintassi_formale">Sintassi formale</h3> + </dt> +</dl> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: css">#flex-container { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; +} + +#flex-container > .flex-item { + -webkit-flex: auto; + flex: auto; +} + +#flex-container > .raw-item { + width: 5rem; +} +</pre> + +<pre class="brush: html"><div id="flex-container"> + <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div> + <div class="raw-item" id="raw">Raw box</div> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: js">var flex = document.getElementById("flex"); +var raw = document.getElementById("raw"); +flex.addEventListener("click", function() { + raw.style.display = raw.style.display == "none" ? "block" : "none"; +}); +</pre> + +<pre class="brush: css">#flex-container { + width: 100%; + font-family: Consolas, Arial, sans-serif; +} + +#flex-container > div { + border: 1px solid #f00; + padding: 1rem; +} + +#flex-container > .raw-item { + border: 1px solid #000; +} +</pre> +</div> + +<h2 id="Risultato">Risultato</h2> + +<p>{{EmbedLiveSample('Example','100%','60')}}</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("18.0")}} (behind a pref) <sup><a href="#bc1">[1]</a> <a href="#bc2">[2]</a></sup><br> + {{CompatGeckoDesktop("20.0")}} <sup><a href="#bc2">[2]</a><a href="#bc3">[3]</a></sup></td> + <td>21.0{{property_prefix("-webkit")}}<br> + 29.0</td> + <td>10.0{{property_prefix("-ms")}} <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup><br> + 11.0 <sup><a href="#flexbug8">[3]</a></sup><sup><a href="#flexbug4">[4]</a></sup></td> + <td>12.10</td> + <td>6.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>4.4</td> + <td>11</td> + <td>12.10</td> + <td>7.1{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<p><sup><a name="bc1">[1]</a></sup> <span id="result_box" lang="it"><span class="hps">Per attivare il supporto</span> <span class="hps">FlexBox</span> <span class="hps">per Firefox</span> <span class="hps">18 e 19</span><span>,</span> <span class="hps">l'utente deve</span> <span class="hps">cambiare la</span> <span class="hps">about:</span> <span class="hps">config</span> <span class="hps">preferenza</span> <span class="atn hps">"</span><span>layout.css.flexbox.enabled</span><span>"</span> <span class="hps">true.</span></span></p> + +<p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox sono supportate da Firefox 28.</p> + +<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (ma non 12+) ignora l'uso di <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a>nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug #8</a> per maggiori informazioni.</p> + +<p><sup><a name="flexbug4">[4]</a></sup> <span id="result_box" lang="it"><span class="hps">In Internet Explorer</span> <span class="hps">10-11</span> <span class="hps">(ma non</span> <span class="hps">12+)</span><span>,</span> <span class="hps">una dichiarazione</span> <span class="hps">flessibile</span> <span class="hps">con un</span> <span class="hps">valore senza unità</span> <span class="hps">nella sua parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base</span> <span class="hps">è considerato</span> <span class="hps">sintatticamente</span> <span class="hps">valido e</span> <span class="hps">sarà quindi</span> <span class="hps">ignorata</span><span>.</span> <span class="hps">Una soluzione</span> <span class="hps">è quella di includere</span> <span class="hps">sempre</span> <span class="hps">una unità</span> <span class="hps">nella parte</span> <span class="hps">flex</span><span class="atn">-</span><span>base del valore di</span> </span>shorthand di<span lang="it"> <span class="hps">flex</span><span>.</span> <span class="hps">Vedi</span> </span><a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> <span lang="it"> <span class="hps">per ulteriori informazioni</span><span>.</span></span></p> + +<h2 id="See_also" name="See_also">Guarda altro</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></li> +</ul> diff --git a/files/it/web/css/font-size-adjust/index.html b/files/it/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..8933c16794 --- /dev/null +++ b/files/it/web/css/font-size-adjust/index.html @@ -0,0 +1,114 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +translation_of: Web/CSS/font-size-adjust +--- +<p>il <strong><code>font-size-adjust</code></strong> <a href="/en-US/docs/Web/CSS">nelle proprieta CSS, dice come </a> dovrebbe essere impostatala dimensione del font scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.</p> + +<pre class="brush:css no-line-numbers">/* usa uno specifico font size */ +font-size-adjust: none; + +/* usa un dimensione font che dimezza le lettere +minuscole rispetto al font in uso*/ +font-size-adjust: 0.5; + +/* Valori globali */ +font-size-adjust: inherit; +font-size-adjust: initial; +font-size-adjust: unset; +</pre> + +<p>La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema quando la prima scelta {{ Cssxref("font-family") }} non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).</p> + +<p>Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il <code>font-size-adjust</code>, questa viene definita come un numero che sarà moltiplicato per la proprieta {{ Cssxref("font-size") }}. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio un foglio di stile che specifica :</p> + +<pre class="brush: css">font-size: 14px; +font-size-adjust: 0.5; +</pre> + +<p>...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><code>none</code></dt> + <dd>Sceglie la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.</dd> + <dt>{{cssxref("<numero>")}}</dt> + <dd> + <p>Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla x-height del font ) sia un numero di volte il {{ Cssxref("font-size") }}.</p> + + <p>Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel {{ Cssxref("font-family") }}. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il <code>font-size-adjust</code>.</p> + + <p><code>0</code> genera un testo di altezza zero (testo nascosto).</p> + </dd> +</dl> + +<h3 id="Sintassi_Formale">Sintassi Formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="times">Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.</p> +<p class="verdana">Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.</p> +<p class="adjtimes">Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.times { + font-family: Times, serif; + font-size: 10px; +} + +.verdana { + font-family: Verdana, sans-serif; + font-size: 10px; +} + +.adjtimes { + font-family: Times, sans-serif; + font-size-adjust: 0.58; + font-size: 10px; +} +</pre> + +<h3 id="Risultati">Risultati</h3> + +<p>{{ EmbedLiveSample('Examples', 500, 200) }}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}</td> + <td>{{ Spec2('CSS3 Fonts') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>The CSS property <code>font-size-adjust</code> was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.font-size-adjust")}}</p> + +<div>{{CSSRef}}</div> diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/guida_di_riferimento_ai_css/index.html new file mode 100644 index 0000000000..c97a962ac6 --- /dev/null +++ b/files/it/web/css/guida_di_riferimento_ai_css/index.html @@ -0,0 +1,96 @@ +--- +title: Guida di riferimento ai CSS +slug: Web/CSS/Guida_di_riferimento_ai_CSS +tags: + - CSS + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +<div>{{CSSRef}}</div> + +<p>Usate questo <strong>riferimento CSS</strong> per consultare un <a href="#Keyword_index">indice alfabetico</a> di tutte le proprietà <a href="/en-US/docs/Web/CSS">CSS</a> standard, <a href="/en-US/docs/Web/CSS/Pseudo-classes">le pseudo-classi</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">i tipi di dati</a>, e <a href="/en-US/docs/Web/CSS/At-rule">le at-rules</a>. Potete anche visualizzare <a href="#Concepts">i concetti chiave del CSS</a> e una lista dei <a href="#Selectors">selettori organizzati per tipo</a>. È anche inclusa un breve <a href="#DOM-CSS_CSSOM">prontuario su DOM-CSS / CSSOM</a>.</p> + +<h2 id="Sintassi_di_regola_base">Sintassi di regola base</h2> + +<h3 id="Sintassi_di_una_regola_di_stile">Sintassi di una regola di stile</h3> + +<pre class="syntaxbox"><var>regola-stile</var> <strong>::=</strong> + <var>lista-selettori</var> <strong>{</strong> + <var>lista-proprietà</var> + <strong>}</strong> +</pre> + +<p>... dove :</p> + +<pre class="syntaxbox"><var>lista-selettori</var> <strong>::=</strong> + <var>selettore</var>[<strong>:</strong><var>pseudo-classe</var>] [<strong>::</strong><var>pseudo-elemento</var>] + [<strong>,</strong> <var>lista-selettori</var>] + +<var>lista-proprietà</var> <strong>::=</strong> + [<var>proprietà</var> <strong>:</strong> <var>valore</var>] [<strong>;</strong> <var>lista-proprietà</var>] +</pre> + +<p>Consultate la lista dei <a href="#Selectors"><em>selettori</em></a>, <a href="#Pseudo"><em>pseudo-classi</em></a>, e <em><a href="#Pseudo">pseudo-elementi</a></em> sotto. La sintassi per ogni <em>valore</em> specificato dipende dal tipo di dato definito per ogni <em>proprietà</em> specificata.</p> + +<h4 id="Esempi_di_regole_di_stile">Esempi di regole di stile</h4> + +<pre class="brush: css">strong { + color: red; +} + +div.menu-bar li:hover > ul { + display: block; +} +</pre> + +<p>Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">guida ai Selettori CSS</a>. Siate consapevoli che ogni errore di <a href="/en-US/docs/Web/CSS/syntax">sintassi</a> in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente <a href="https://www.w3.org/TR/css-syntax-3/#intro">basata su stringhe di testo</a> (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è <a href="https://www.w3.org/TR/cssom/#introduction">basato su oggetti</a>.</p> + +<h3 id="Sintassi_at-rules">Sintassi at-rules</h3> + +<p>Poiché la struttura delle At-rules varia ampiamente, per piacere consultate <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> per trovare la sintassi della regola specifica che volete.</p> + +<h3 id="Selettori" name="Selettori">Selettori</h3> + +<ul> + <li>Selettori semplici + <ul> + <li><a href="/it/CSS/Type_selectors" title="it/CSS/Type_selectors">Selettori di tipo</a></li> + <li><a href="/it/CSS/Class_selectors" title="it/CSS/Class_selectors">Selettori di classe</a></li> + <li><a href="/it/CSS/ID_selectors" title="it/CSS/ID_selectors">Selettori di ID</a></li> + <li><a href="/it/CSS/Universal_selectors" title="it/CSS/Universal_selectors">Selettori universali</a></li> + <li><a href="/it/CSS/Attribute_selectors" title="it/CSS/Attribute_selectors">Selettori di attributo</a></li> + <li><a href="/it/CSS/Pseudo-classes" title="it/CSS/Pseudo-classes">Pseudoclassi</a></li> + <li><a href="/it/CSS/Pseudo-elements" title="it/CSS/Pseudo-elements">Pseudo-elementi</a></li> + </ul> + </li> + <li>Combinatori + <ul> + <li><a href="/it/CSS/Selettori_di_elementi_adiacenti" title="it/CSS/Selettori_di_elementi_adiacenti">Selettori di elementi adiacenti</a></li> + <li><a href="/it/CSS/elettori_di_figli" title="it/CSS/elettori_di_figli">Selettori di figli</a></li> + <li><a href="/it/CSS/Selettori_di_discendenti" title="it/CSS/Selettori_di_discendenti">Selettori di discendenti</a></li> + </ul> + </li> +</ul> + +<h3 id="Concetti" name="Concetti">Concetti</h3> + +<ul> + <li><a href="/it/CSS/Commenti" title="it/CSS/Commenti">Commenti</a></li> + <li><a href="/it/CSS/initial_value" title="it/CSS/initial_value">Valore iniziale</a></li> + <li><a href="/it/CSS/inheritance" title="it/CSS/inheritance">Eredità</a></li> + <li><a href="/it/CSS/specified_value" title="it/CSS/specified_value">Valore specificato</a></li> + <li><a href="/it/CSS/computed_value" title="it/CSS/computed_value">Valore calcolato</a></li> + <li><a href="/it/CSS/used_value" title="it/CSS/used_value">Valore utilizzato</a></li> + <li><a href="/it/CSS/actual_value" title="it/CSS/actual_value">Valore attuale</a></li> + <li><a href="/it/CSS/box_model" title="it/CSS/box_model">box model</a></li> +</ul> + +<h3 id="Estensioni_di_Mozilla" name="Estensioni_di_Mozilla">Estensioni di Mozilla</h3> + +<ul> + <li><a href="/it/CSS_Reference/Estensioni_di_Mozilla" title="it/CSS_Reference/Estensioni_di_Mozilla">CSS Reference:Estensioni di Mozilla</a></li> +</ul> + +<p>{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}</p> diff --git a/files/it/web/css/index.html b/files/it/web/css/index.html new file mode 100644 index 0000000000..4a4f4efb55 --- /dev/null +++ b/files/it/web/css/index.html @@ -0,0 +1,107 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Stile +translation_of: Web/CSS +--- +<p>Il <strong>Cascading Style Sheets (CSS)</strong> è un linguaggio per <a href="https://developer.mozilla.org/en-US/docs/DOM/stylesheet">fogli di stile</a> utilizzato per descrivere la presentazione di un documento scritto in <a href="https://developer.mozilla.org/en-US/docs/HTML" title="The HyperText Mark-up Language">HTML</a> o <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a> (inclusi vari linguaggi XML quali <a href="https://developer.mozilla.org/en-US/docs/SVG" title="en-US/docs/SVG">SVG</a> o <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.</p> + +<p>Il CSS è uno dei linguaggi fondamentali dell'<strong>open Web</strong> ed è standardizzato nei browser web secondo la <a class="external" href="http://w3.org/Style/CSS/#specs">specifica W3C</a>. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.</p> + +<section id="sect1"> +<ul class="card-grid"> + <li><span>Introduzione al CSS</span> + + <p>Se sei nuovo nello sviluppo web, assicurati di leggere il nostro articolo sulle <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/CSS_basics">basi del CSS</a> per imparare cos'è il CSS e come usarlo.</p> + </li> + <li><span>Tutorial CSS</span> + <p>La nostra <a href="https://wiki.developer.mozilla.org/it/docs/Learn/CSS">area di apprendimento CSS</a> contiene una vasta gamma di tutorial per portarti da un livello principiante a competente, coprendo tutti i fondamenti.</p> + </li> + <li><span>Guida di Riferimento</span> + <p>La nostra esaustiva <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Reference">guida di riferimento CSS</a> per sviluppatori esperti descrive ogni proprietà e concetto CSS.</p> + </li> +</ul> +</section> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentazione_ed_esercitazioni_su_CSS">Documentazione ed esercitazioni su CSS</h2> + +<dl> + <dt>Concetti chiave del CSS</dt> + <dd>Descrive la <a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">sintassi del linguaggio </a>e introduce a elementi fondamentali quali <a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity" title="Specificity">specificità</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance" title="inheritance">ereditarietà</a>, il <a href="https://developer.mozilla.org/en-US/docs/CSS/box_model" title="Box model">modello a box</a> ed il <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing" title="Margin collapsing">collasso dei margini</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">impilamento</a> e contesti di <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">formattazione dei blocchi</a>, o i valori <a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value" title="initial value">iniziali</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value" title="computed value">calcolati</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value" title="used value">utilizzati</a> ed <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value" title="actual value">attuali</a>. Sono anche definite entità quali le <a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">proprietà scorciatoia di CSS</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS" title="CSS/Writing_Efficient_CSS">Scrivere CSS efficienti</a></dt> + <dd>Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms" title="How to use CSS3 Transforms (2D and 3D)">Utilizzare le trasformazioni di CSS</a></dt> + <dd>Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="How to use CSS3 Transitions">Utilizzare le transizioni di CSS</a></dt> + <dd>Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="How to use CSS3 Animations">Utilizzare le animazioni di CSS</a></dt> + <dd>Descrive come definire le animazioni di un elemento ma anche come <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support" title="https://developer.mozilla.org/en-US/docs/CSS/CSS_animations/Detecting_CSS_animation_support">rilevare</a> con Javascript se il browser le supporta.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients" title="How to use CSS3 Gradients">Utilizzare i gradienti di CSS</a></dt> + <dd>Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="How to use CSS3 Multicol layout">Utilizzare l'impaginazione multicolonna di CSS</a></dt> + <dd>Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="How to use the CSS3 multiple background feature">Utilizzare sfondi multipli di CSS</a></dt> + <dd>Descrive come definire parecchi sfondi sullo stesso elemento.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scalare immagini di sfondo</a></dt> + <dd>Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.</dd> + <dt><a class="internal" href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries" title="How to use CSS3 Media Queries">Utilizzare l'interrogazione del media di CSS</a></dt> + <dd>Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS_Counters" title="CSS Counters">Utilizzare i contatori di CSS</a></dt> + <dd>Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.</dd> + <dt>Font e Tipografia</dt> + <dd>Informa sulla gestione dei propri <a href="https://developer.mozilla.org/en-US/docs/CSS/font" title="font">font</a> utilizzando {{ cssxref("@font-face") }} e il formato <a href="https://developer.mozilla.org/en-US/docs/WOFF" title="About_WOFF">font WOFF</a>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes" title="Using CSS flexible boxes">Utilizzare i box flessibili di CSS</a></dt> + <dd>Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Consistent_List_Indentation" title="Consistent_List_Indentation">Il Rientro Coerente degli Elenchi</a></dt> + <dd>Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. <span id="result_box" lang="it"><span class="hps">Scopri</span> <span class="hps">come metterli tutti</span><span class="hps"> in</span> <span class="hps">riga.</span></span></dd> + <dt></dt> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Utilizzare le informazioni di stile dinamiche</a></dt> + <dd>Come ottenere informazioni sullo stile e manipolarlo via DOM.</dd> +</dl> + +<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS" title="/en-US/docs/tag/CSS">Vedi Tutto...</a></span></p> +</div> + +<div class="section"> +<h2 class="Community" id="Community" name="Community">Ottentere aiuto dalla comunità</h2> + +<p>Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?</p> + +<ul> + <li><span id="result_box" lang="it"><span class="hps">Controlla le</span> </span><a href="https://developer.mozilla.org/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">domande comuni su CSS</a><span id="result_box" lang="it"> <span class="hps">che danno suggerimenti</span> <span class="hps">per risolvere i</span> <span class="hps">problemi</span> comuni<span>.</span></span></li> + <li>Vai su <a href="http://stackoverflow.com/questions/tagged/css" title="http://stackoverflow.com/questions/tagged/css">Stack Overflow</a>, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.</li> + <li>Consulta il forum layout, che tratta CSS e HTML: + <ul> + <li>Poni le tue domande sul canare IRC di Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li> + <li>Poni le tue domande sulla <a class="external" href="http://www.css-discuss.org/">lista e sito CSS-Discuss</a></li> + </ul> + </li> +</ul> + +<p><span class="alllinks"><a class="external" href="http://www.catb.org/%7Eesr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Non dimenticare la <em>netiquette</em>...</a></span></p> + +<h2 class="Tools" id="Tools" name="Tools">Strumenti che semplificano lo sviluppo in CSS</h2> + +<ul> + <li><span class="external">Il </span><a class="external" href="http://jigsaw.w3.org/css-validator/">Servizio di Validazione di CSS del W3C</a> controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">L'estensione Firebug</a><span class="external"> di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più</span>.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">L'estensione Web Developer</a> di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.</li> + <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">L'estensione EditCSS</a> di FireFox permette di editare il CSS nella barra laterale.</li> +</ul> + +<p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/CSS:Tools" title="/en-US/docs/tag/CSS:Tools">Vedi Tutto...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Argomenti correlati</h2> + +<ul> + <li>Mozilla Learn, <a href="https://developer.mozilla.org/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">risorse su CSS</a>.</li> + <li>I linguaggi Open Web a cui CSS è spesso applicato: <a href="https://developer.mozilla.org/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/SVG" title="SVG">SVG</a>, <a href="https://developer.mozilla.org/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="https://developer.mozilla.org/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li> + <li>Le tecnologie di Mozilla che fanno esteso uso di CSS: <a href="https://developer.mozilla.org/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, <a href="https://developer.mozilla.org/en-US/docs/Extensions" title="en-US/docs/Extensions">estensioni</a> e <a href="https://developer.mozilla.org/en-US/docs/Themes" title="en-US/docs/Themes">temi</a> di Firefox e Thunderbird.</li> +</ul> +</div> +</div> diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html new file mode 100644 index 0000000000..aaa9a6ac17 --- /dev/null +++ b/files/it/web/css/media_queries/index.html @@ -0,0 +1,136 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Query + - Disegno Responsivo + - media query +translation_of: Web/CSS/Media_Queries +--- +<div>{{CSSRef("CSS3 Media Queries")}}</div> + +<p>Le<strong> Media Queries</strong> sono un componente essenziale del <a href="/en-US/docs/Web/Apps/Progressive/Responsive">disegno responsivo</a>, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale). La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.</p> + +<p>Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.</p> + +<p>Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.</p> + +<p>Puoi saperne di più su come usare le media queries programmaticamente nell'articolo <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a>.</p> + +<h2 id="Referenze">Referenze</h2> + +<h3 id="Direttive">Direttive</h3> + +<div class="index"> +<ul> + <li>{{cssxref("@import")}}</li> + <li>{{cssxref("@media")}}</li> +</ul> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Come usare le media queries</a></dt> + <dd>Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.</dd> + <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Come testare le media queries</a></dt> + <dd>Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.</dd> +</dl> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Conditional')}}</td> + <td>{{Spec2('CSS3 Conditional')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS4 Media Queries')}}</td> + <td>{{Spec2('CSS4 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Media Queries')}}</td> + <td>{{Spec2('CSS3 Media Queries')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'media.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_browser">Compatibilità browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto basico</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.7)}}</td> + <td>9.0</td> + <td>9.2</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Supporto basico</td> + <td> </td> + </tr> + </tbody> + </table> + </td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1.7)}}</td> + <td>9.0</td> + <td>9.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/it/web/css/min-width/index.html b/files/it/web/css/min-width/index.html new file mode 100644 index 0000000000..881d345344 --- /dev/null +++ b/files/it/web/css/min-width/index.html @@ -0,0 +1,258 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - Proprietà CSS + - Riferimento +translation_of: Web/CSS/min-width +--- +<div>{{CSSRef}}</div> + +<p>La proprietà <a href="/en-US/docs/CSS">CSS</a> <strong><code>min-width</code></strong> imposta la larghezza minima di un elemento. Questo evita che lo <a href="/it-IT/docs/Web/CSS/used_value">used value</a> della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per <code>min-width</code>.</p> + +<pre class="brush:css no-line-numbers">/* <length> value */ +min-width: 3.5em; + +/* <percentage> value */ +min-width: 10%; + +/* Keyword values */ +min-width: max-content; +min-width: min-content; +min-width: fit-content; +min-width: fill-available; + +/* Global values */ +min-width: inherit; +min-width: initial; +min-width: unset; +</pre> + +<p>La larghezza dell'elemento viene impostata al valore di <code>min-width</code> ogni volta che <code>min-width</code> risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt>{{cssxref("<length>")}}</dt> + <dd>La larghezza minima espressa come {{cssxref("<length>")}}. Valori negativi rendono la dichiarazione non valida.</dd> + <dt> </dt> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>La larghezza minima espressa come {{cssxref("<percentage>")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.</dd> +</dl> + +<h4 id="Parole_chiave">Parole chiave</h4> + +<dl> + <dt><code>auto</code></dt> + <dd>La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.</dd> + <dt><code>max-content</code> {{ experimental_inline() }}</dt> + <dd>La larghezza massima preferita (<em>intrinsic</em>).</dd> + <dt><code>min-content</code> {{ experimental_inline() }}</dt> + <dd>La larghezza minima preferita (<em>intrinsic</em>).</dd> + <dt><code>fill-available</code>{{ experimental_inline() }}</dt> + <dd>La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, <code>available</code>.)</dd> + <dt><code>fit-content</code> {{ experimental_inline() }}</dt> + <dd>Definito come <code>min(max-content, max(min-content, fill-available))</code>.</dd> +</dl> + +<h3 id="Sintassi_formale">Sintassi formale</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Esempi">Esempi</h2> + +<pre class="brush:css;">table { min-width: 75%; } + +form { min-width: 0; } +</pre> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Sizing') }}</td> + <td>Vengono aggiunte le parole chiave <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> e <code>fill-available</code>. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.<em>)</em></td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Viene aggiunta la keyword <code>auto</code> e viene utilizzata come valore iniziale.</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Definisce <code>min-width</code> come animabile.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Definizione iniziale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità dei browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0 (1.0)</td> + <td>7.0</td> + <td>4.0</td> + <td>2.0.2 (416), buggy before</td> + </tr> + <tr> + <td>si applica a <code><table></code> <sup>[1]</sup></td> + <td>{{ CompatNo() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e<code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>24.0 {{property_prefix("-webkit")}} [3]</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }} [3]</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>21.0 [4]</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("16.0") }} [4]<br> + Removed in {{ CompatGeckoDesktop("22.0") }}<br> + Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.</td> + <td>{{ CompatNo() }}</td> + <td>12.10 [6]</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td><code>auto</code> as initial value{{obsolete_inline()}}</td> + <td>21.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("18.0") }}<br> + Removed in {{ CompatGeckoDesktop("22.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>12.10</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}[5]</td> + </tr> + <tr> + <td>applies to <code><table></code><sup>[1]</sup></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, e <code>fill-</code><code>available</code> {{ experimental_inline() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>auto</code> come valore iniziale {{obsolete_inline()}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] CSS 2.1 descrive esplicitamente il comportamento di <code>min-width</code> con {{ HTMLElement("table") }} come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.</p> + +<p>[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword <code>available</code> ma non <code>fill-available</code>. Inoltre la definizione di <code>fit-content</code> è più lasca di quella data da CSS3 Intrinsic.</p> + +<p>[3] WebKit implementa una proposta precedente, la parola chiave <code>intrinsic</code>.</p> + +<p>[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a <code>min-content</code> per gli oggetti di tipo flex, e <code>0</code> per qualsiasi altro elemento.</p> + +<p>[5] In alcuni browsers in iOS, un elemento di tipo <button> nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno <span> collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto. </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ Cssxref("width") }}, {{ Cssxref("max-width") }}</li> + <li>Il <a href="/it-IT/docs/Web/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("box-sizing") }}</li> +</ul> diff --git a/files/it/web/css/mozilla_extensions/index.html b/files/it/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..f2dca7f728 --- /dev/null +++ b/files/it/web/css/mozilla_extensions/index.html @@ -0,0 +1,336 @@ +--- +title: Mozilla Extensions +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - CSS Reference + - 'CSS:Mozilla Extensions' + - NeedsContent + - NeedsTechnicalReview + - Tutte_le_categorie +translation_of: Web/CSS/Mozilla_Extensions +--- +<p> </p> +<div class="note"> + <p>Traduzione a tempo perso ! Non essendo presente la traduzione mi dedicherò a tempo perso in questo progetto, quindi se mancano molte traduzioni non fatemene una colpa.</p> + <a>Zibibbo84</a> 10:30, 11 ott 2007 (PDT) ;)</div> +<p>Mozilla supporta alcune estensioni del <a href="it/CSS">CSS</a> le quali hanno il prefisso '-moz'. Queste consentono di modificare alcune proprietà delle pagine web in modo non tradizionale, per facilitare l'utente nello sviluppo dei suoi progetti.</p> +<p>Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.</p> +<p>Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.</p> +<h4 id="At-rules" name="At-rules">At-rules</h4> +<ul> + <li><a href="it/CSS/@-moz-document">@-moz-document</a></li> +</ul> +<h4 id="Pseudo-elements_and_pseudo-classes" name="Pseudo-elements_and_pseudo-classes">Pseudo-elements and pseudo-classes</h4> +<ul> + <li><a href="it/CSS/%3a-moz-list-bullet">:-moz-list-bullet</a></li> + <li><a href="it/CSS/%3a-moz-first-node">:-moz-first-node</a></li> + <li><a href="it/CSS/%3a-moz-last-node">:-moz-last-node</a></li> + <li><a href="it/CSS/%3a-moz-only-whitespace">:-moz-only-whitespace</a></li> + <li><a href="it/CSS/%3a-moz-bound-element">:-moz-bound-element</a></li> + <li><a href="it/CSS/%3a-moz-any-link">:-moz-any-link</a> (matches :link and :visited)</li> + <li><a href="it/CSS/%3a-moz-drag-over">:-moz-drag-over</a></li> + <li><a href="it/CSS/%3a-moz-tree-row">:-moz-tree-row</a></li> + <li><a href="it/CSS/%3a-moz-tree-cell">:-moz-tree-cell</a></li> + <li><a href="it/CSS/%3a-moz-tree-checkbox">:-moz-tree-checkbox</a></li> + <li><a href="it/CSS/%3a-moz-tree-column">:-moz-tree-column</a></li> + <li><a href="it/CSS/%3a-moz-tree-cell-text">:-moz-tree-cell-text</a></li> + <li><a href="it/CSS/%3a-moz-tree-twisty">:-moz-tree-twisty</a></li> + <li><a href="it/CSS/%3a-moz-tree-indentation">:-moz-tree-indentation</a></li> + <li><a href="it/CSS/%3a-moz-tree-line">:-moz-tree-line</a></li> + <li><a href="it/CSS/%3a-moz-tree-image">:-moz-tree-image</a></li> + <li><a href="it/CSS/%3a-moz-tree-separator">:-moz-tree-separator</a></li> + <li><a href="it/CSS/%3a-moz-tree-drop-feedback">:-moz-tree-feedback</a></li> + <li><a href="it/CSS/%3a-moz-tree-progressmeter">:-moz-tree-progressmeter</a></li> +</ul> +<h4 id="Properties" name="Properties">Properties</h4> +<ul> + <li><a href="it/CSS/-moz-appearance">-moz-appearance</a></li> + <li><a href="it/CSS/-moz-binding">-moz-binding</a></li> + <li><a href="it/CSS/-moz-background-clip">-moz-background-clip</a></li> + <li><a href="it/CSS/-moz-background-inline-policy">-moz-background-inline-policy</a></li> + <li><a href="it/CSS/-moz-background-origin">-moz-background-origin</a></li> + <li><a href="it/CSS/-moz-border-bottom-colors">-moz-border-bottom-colors</a></li> + <li><a href="it/CSS/-moz-border-left-colors">-moz-border-left-colors</a></li> + <li><a href="it/CSS/-moz-border-radius">-moz-border-radius</a></li> + <li><a href="it/CSS/-moz-border-radius-bottomleft">-moz-border-radius-bottomleft</a></li> + <li><a href="it/CSS/-moz-border-radius-bottomright">-moz-border-radius-bottomright</a></li> + <li><a href="it/CSS/-moz-border-radius-topleft">-moz-border-radius-topleft</a></li> + <li><a href="it/CSS/-moz-border-radius-topright">-moz-border-radius-topright</a></li> + <li><a href="it/CSS/-moz-border-right-colors">-moz-border-right-colors</a></li> + <li><a href="it/CSS/-moz-border-top-colors">-moz-border-top-colors</a></li> + <li><a href="it/CSS/-moz-box-align">-moz-box-align</a></li> + <li><a href="it/CSS/-moz-box-direction">-moz-box-direction</a></li> + <li><a href="it/CSS/-moz-box-flex">-moz-box-flex</a></li> + <li><a href="it/CSS/-moz-box-ordinal-group">-moz-box-ordinal-group</a></li> + <li><a href="it/CSS/-moz-box-orient">-moz-box-orient</a></li> + <li><a href="it/CSS/-moz-box-pack">-moz-box-pack</a></li> + <li><a href="it/CSS/-moz-box-sizing">-moz-box-sizing</a></li> + <li><a href="it/CSS/-moz-image-region">-moz-image-region</a></li> + <li><a href="it/CSS/-moz-box-flexgroup">-moz-key-equivalent</a></li> + <li><a href="it/CSS/-moz-opacity">-moz-opacity</a></li> + <li><a href="it/CSS/-moz-outline">-moz-outline</a></li> + <li><a href="it/CSS/-moz-outline-color">-moz-outline-color</a></li> + <li><a href="it/CSS/-moz-outline-offset">-moz-outline-offset</a></li> + <li><a href="it/CSS/-moz-outline-radius">-moz-outline-radius</a></li> + <li><a href="it/CSS/-moz-outline-radius-bottomleft">-moz-outline-radius-bottomleft</a></li> + <li><a href="it/CSS/-moz-outline-radius-bottomright">-moz-outline-radius-bottomright</a></li> + <li><a href="it/CSS/-moz-outline-radius-topleft">-moz-outline-radius-topleft</a></li> + <li><a href="it/CSS/-moz-outline-radius-topright">-moz-outline-radius-topright</a></li> + <li><a href="it/CSS/-moz-outline-style">-moz-outline-style</a></li> + <li><a href="it/CSS/-moz-outline-width">-moz-outline-width</a></li> + <li><a href="it/CSS/-moz-user-focus">-moz-user-focus</a></li> + <li><a href="it/CSS/-moz-user-input">-moz-user-input</a></li> + <li><a href="it/CSS/-moz-user-modify">-moz-user-modify</a></li> + <li><a href="it/CSS/-moz-user-select">-moz-user-select</a></li> +</ul> +<ul> + <li>(CSS3 columns) + <ul> + <li><a href="it/CSS/-moz-column-count">-moz-column-count</a></li> + <li><a href="it/CSS/-moz-column-gap">-moz-column-gap</a></li> + <li><a href="it/CSS/-moz-column-width">-moz-column-width</a></li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/-moz-float-edge">-moz-float-edge</a></li> +</ul> +<ul> + <li><a href="it/CSS/-moz-border-end">-moz-border-end</a></li> + <li><a href="it/CSS/-moz-border-end-color">-moz-border-end-color</a></li> + <li><a href="it/CSS/-moz-border-end-style">-moz-border-end-style</a></li> + <li><a href="it/CSS/-moz-border-end-width">-moz-border-end-width</a></li> + <li><a href="it/CSS/-moz-border-start">-moz-border-start</a></li> + <li><a href="it/CSS/-moz-border-start-color">-moz-border-start-color</a></li> + <li><a href="it/CSS/-moz-border-start-style">-moz-border-start-style</a></li> + <li><a href="it/CSS/-moz-border-start-width">-moz-border-start-width</a></li> + <li><a href="it/CSS/-moz-margin-end">-moz-margin-end</a></li> + <li><a href="it/CSS/-moz-margin-start">-moz-margin-start</a></li> + <li><a href="it/CSS/-moz-padding-start">-moz-padding-start</a></li> + <li><a href="it/CSS/-moz-padding-end">-moz-padding-end</a></li> +</ul> +<ul> + <li><a href="it/CSS/-moz-force-broken-image-icon">-moz-force-broken-image-icon</a></li> +</ul> +<h4 id="Values" name="Values">Values</h4> +<p>Probabilmente documentate nelle pagine delle proprietà standard.</p> +<ul> + <li>cursor (need to be moved to <a href="it/CSS/cursor">CSS:cursor</a>) + <ul> + <li><a href="it/CSS/-moz-alias">-moz-alias</a></li> + <li><a href="it/CSS/-moz-cell">-moz-cell</a></li> + <li><a href="it/CSS/-moz-context-menu">-moz-context-menu</a></li> + <li><a href="it/CSS/-moz-copy">-moz-copy</a></li> + <li><a href="it/CSS/-moz-grab">-moz-grab</a></li> + <li><a href="it/CSS/-moz-grabbing">-moz-grabbing</a></li> + <li><a href="it/CSS/-moz-spinning">-moz-spinning</a></li> + <li><a href="it/CSS/-moz-zoom-in">-moz-zoom-in</a></li> + <li><a href="it/CSS/-moz-zoom-out">-moz-zoom-out</a></li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/display">display</a> + <ul> + <li>-moz-box</li> + <li>-moz-inline-block</li> + <li>-moz-inline-box</li> + <li>-moz-inline-grid</li> + <li>-moz-inline-stack</li> + <li>-moz-inline-table</li> + <li>-moz-grid</li> + <li>-moz-grid-group</li> + <li>-moz-grid-line</li> + <li>-moz-groupbox</li> + <li>-moz-deck</li> + <li>-moz-popup</li> + <li>-moz-stack</li> + <li>-moz-run-in</li> + <li>-moz-compact</li> + <li>-moz-marker</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/overflow">overflow</a> + <ul> + <li>-moz-scrollbars-horizontal</li> + <li>-moz-scrollbars-none</li> + <li>-moz-scrollbars-vertical</li> + <li>-moz-hidden-unscrollable</li> + </ul> + </li> +</ul> +<p>Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare <a href="it/CSS/overflow-x">overflow-x</a> and <a href="it/CSS/overflow-y">overflow-y</a>, nonostante non rimpiazzino l'ultimo di questi.</p> +<ul> + <li>{{ Cssxref("border-style") }} e {{ Cssxref("outline-style") }} + <ul> + <li>-moz-bg-inset - Miscela il bordo del tipo inset con il background (scheduled for removal {{ Bug(84307) }})</li> + <li>-moz-bg-outset - Miscela il bordo del tipo outset con il background (scheduled for removal {{ Bug(84307) }})</li> + <li>-moz-bg-solid - Miscela il bordo del tipo solid con il background (scheduled for removal {{ Bug(84307) }})</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/border-color">border-color</a> + <ul> + <li>-moz-use-text-color</li> + </ul> + </li> +</ul> +<ul> + <li>tutte le proprietà accettano i nomi dei colori + <ul> + <li>-moz-activehyperlinktext</li> + <li>-moz-hyperlinktext</li> + <li>-moz-visitedhyperlinktext</li> + <li>-moz-buttondefault</li> + <li>-moz-buttonhoverface</li> + <li>-moz-buttonhovertext</li> + <li>-moz-cellhighlight</li> + <li>-moz-cellhighlighttext</li> + <li>-moz-field</li> + <li>-moz-fieldtext</li> + <li>-moz-dialog</li> + <li>-moz-dialogtext</li> + <li>-moz-dragtargetzone</li> + <li>-moz-mac-accentdarkestshadow</li> + <li>-moz-mac-accentdarkshadow</li> + <li>-moz-mac-accentface</li> + <li>-moz-mac-accentlightesthighlight</li> + <li>-moz-mac-accentlightshadow</li> + <li>-moz-mac-accentregularhighlight</li> + <li>-moz-mac-accentregularshadow</li> + <li>-moz-mac-focusring</li> + <li>-moz-mac-menuselect</li> + <li>-moz-mac-menushadow</li> + <li>-moz-mac-menutextselect</li> + <li>-moz-menuhover</li> + <li>-moz-menuhovertext</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/empty-cells">empty-cells</a> + <ul> + <li>-moz-show-background (valore di default)</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/font-family">font-family</a> + <ul> + <li>-moz-fixed</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/font">font</a> + <ul> + <li>-moz-button</li> + <li>-moz-info</li> + <li>-moz-desktop</li> + <li>-moz-dialog (come un colore)</li> + <li>-moz-document</li> + <li>-moz-workspace</li> + <li>-moz-window</li> + <li>-moz-list</li> + <li>-moz-pull-down-menu</li> + <li>-moz-field (come un colore)</li> + </ul> + </li> +</ul> +<ul> + <li>text-align + <ul> + <li>-moz-center</li> + <li>-moz-left</li> + <li>-moz-right</li> + </ul> + </li> +</ul> +<ul> + <li>text-decoration + <ul> + <li>-moz-anchor-decoration</li> + </ul> + </li> +</ul> +<ul> + <li>-moz-user-select + <ul> + <li>-moz-all</li> + <li>-moz-none</li> + </ul> + </li> +</ul> +<ul> + <li>white-space + <ul> + <li>-moz-pre-wrap</li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/list-style-type">list-style-type</a> + <ul> + <li>-moz-arabic-indic</li> + <li>-moz-bengali</li> + <li>-moz-cjk-earthly-branch</li> + <li>-moz-cjk-heavenly-stem</li> + <li>-moz-devanagari</li> + <li>-moz-ethiopic-halehame</li> + <li>-moz-ethiopic-halehame-am</li> + <li>-moz-ethiopic-halehame-ti-er</li> + <li>-moz-ethiopic-halehame-ti-et</li> + <li>-moz-ethiopic-numeric</li> + <li>-moz-gujarati</li> + <li>-moz-gurmukhi</li> + <li>-moz-hangul</li> + <li>-moz-hangul-consonant</li> + <li>-moz-japanese-formal</li> + <li>-moz-japanese-informal</li> + <li>-moz-kannada</li> + <li>-moz-khmer</li> + <li>-moz-lao</li> + <li>-moz-malayalam</li> + <li>-moz-myanmar</li> + <li>-moz-oriya</li> + <li>-moz-persian</li> + <li>-moz-simp-chinese-formal</li> + <li>-moz-simp-chinese-informal</li> + <li>-moz-tamil</li> + <li>-moz-telugu</li> + <li>-moz-thai</li> + <li>-moz-trad-chinese-formal</li> + <li>-moz-trad-chinese-informal</li> + <li>-moz-urdu</li> + </ul> + </li> +</ul> +<h4 id="Others" name="Others">Others</h4> +<ul> + <li>'funzioni' per il colore + <ul> + <li><a href="it/CSS/-moz-hsla">-moz-hsla</a> (tonalità, saturazione, luminosità, opacità)</li> + <li><a href="it/CSS/-moz-rgba">-moz-rgba</a></li> + </ul> + </li> +</ul> +<ul> + <li><a href="it/CSS/-moz-initial">-moz-initial</a> Il valore <code>-moz-initial</code> è un implementazione parziale del codice <code>initial</code> del CSS3, usato per applicare il valore iniziale della proprietà CSS ad un elemento.</li> +</ul> +<ul> + <li><a href="it/CSS/-moz-math-columnline">-moz-math-columnline</a></li> + <li><a href="it/CSS/-moz-math-firstcolumn">-moz-math-firstcolumn</a></li> + <li><a href="it/CSS/-moz-math-firstrow">-moz-math-firstrow</a></li> + <li><a href="it/CSS/-moz-math-font-size">-moz-math-font-size</a></li> + <li><a href="it/CSS/-moz-math-font-style">-moz-math-font-style</a></li> + <li><a href="it/CSS/-moz-math-lastcolumn">-moz-math-lastcolumn</a></li> + <li><a href="it/CSS/-moz-math-lastrow">-moz-math-lastrow</a></li> + <li><a href="it/CSS/-moz-math-rowline">-moz-math-rowline</a></li> +</ul> +<p><a>Talk:Mozilla CSS Extensions</a></p> +<p>{{ Bug(311415) }} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, and {{ Cssxref("max-width") }} properties.</p> +<p>{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}</p> diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html new file mode 100644 index 0000000000..1421cd58c8 --- /dev/null +++ b/files/it/web/css/object-fit/index.html @@ -0,0 +1,161 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +<div>{{CSSRef}}</div> + +<p>La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> istruisce il browser su come deve ridimensionare il contenuto di un <a href="/en-US/docs/Web/CSS/Replaced_element">elemento incluso</a>, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.</p> + +<p>Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.</p> + +<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Sintassi</h2> + +<p>La proprietà <code>object-fit</code> viene specificata usando uno dei seguenti valori.</p> + +<h3 id="Values" name="Values">Valori</h3> + +<dl> + <dt><code>contain</code></dt> + <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto <a href="https://en.wikipedia.org/wiki/Letterboxing_(filming)">"letterboxed"</a>.</dd> + <dt><code>cover</code></dt> + <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. <span class="tlid-translation translation" lang="it"><span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi</span></span>.</dd> + <dt><code>fill</code></dt> + <dd><span class="tlid-translation translation" lang="it"><span title="">L'elemento viene ridimensionato per riempire completamente il suo contenitore.</span> <span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.</span></span></dd> + <dt><code>none</code></dt> + <dd>L'elemento non viene ridimensionato.</dd> + <dt><code>scale-down</code></dt> + <dd>L'elemento viene ridimensionto come se <code>none</code> o <code>contain</code> fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Esempi</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div> + <h2>object-fit: fill</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> + + <h2>object-fit: contain</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + + <h2>object-fit: cover</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + + <h2>object-fit: none</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + + <h2>object-fit: scale-down</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 940px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.narrow { + width: 100px; + height: 150px; + margin-top: 10px; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2> + + + +<p>{{Compat("css.properties.object-fit")}}</p> + +<h2 id="See_also" name="See_also">Guarda anche</h2> + +<ul> + <li>Altre proprietà CSS relative alle immaggini: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> + <li>{{cssxref("background-size")}}</li> +</ul> diff --git a/files/it/web/css/pseudo-classes/index.html b/files/it/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..935d570c71 --- /dev/null +++ b/files/it/web/css/pseudo-classes/index.html @@ -0,0 +1,167 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Panoramica + - Pseudo-class + - Riferimento + - Selettori +translation_of: Web/CSS/Pseudo-classes +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="seoSummary">Una <strong><dfn>pseudo-classe</dfn></strong> <a href="/it/docs/Web/CSS">CSS</a> è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati.</span> Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.</p> + +<pre class="brush: css no-line-numbers">/* Qualsiasi button sopra al quale passa il cursore dell'utente*/ +button:hover { + color: blue; +}</pre> + +<p>La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Al contrario delle pseudo-classi, gli <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementi</a> possono essere usati per dare stile a <em>parti specifiche</em> di un elemento.</p> +</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">selector:pseudo-class { + property: value; +} +</pre> + +<p>Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.</p> + +<h2 id="Indice_delle_pseudo-classi_standard">Indice delle pseudo-classi standard</h2> + +<div class="index" id="index"> +<ul> + <li>{{CSSxRef(":active")}}</li> + <li>{{CSSxRef(":any-link")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":blank")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":checked")}}</li> + <li>{{CSSxRef(":current")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":default")}}</li> + <li>{{CSSxRef(":defined")}}</li> + <li>{{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":disabled")}}</li> + <li>{{CSSxRef(":drop")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":empty")}}</li> + <li>{{CSSxRef(":enabled")}}</li> + <li>{{CSSxRef(":first")}}</li> + <li>{{CSSxRef(":first-child")}}</li> + <li>{{CSSxRef(":first-of-type")}}</li> + <li>{{CSSxRef(":fullscreen")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":future")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus")}}</li> + <li>{{CSSxRef(":focus-visible")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":focus-within")}}</li> + <li>{{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":host")}}</li> + <li>{{CSSxRef(":host()")}}</li> + <li>{{CSSxRef(":host-context()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":hover")}}</li> + <li>{{CSSxRef(":indeterminate")}}</li> + <li>{{CSSxRef(":in-range")}}</li> + <li>{{CSSxRef(":invalid")}}</li> + <li>{{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":lang", ":lang()")}}</li> + <li>{{CSSxRef(":last-child")}}</li> + <li>{{CSSxRef(":last-of-type")}}</li> + <li>{{CSSxRef(":left")}}</li> + <li>{{CSSxRef(":link")}}</li> + <li>{{CSSxRef(":local-link")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":not", ":not()")}}</li> + <li>{{CSSxRef(":nth-child", ":nth-child()")}}</li> + <li>{{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":nth-last-child", ":nth-last-child()")}}</li> + <li>{{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}</li> + <li>{{CSSxRef(":nth-of-type", ":nth-of-type()")}}</li> + <li>{{CSSxRef(":only-child")}}</li> + <li>{{CSSxRef(":only-of-type")}}</li> + <li>{{CSSxRef(":optional")}}</li> + <li>{{CSSxRef(":out-of-range")}}</li> + <li>{{CSSxRef(":past")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":read-only")}}</li> + <li>{{CSSxRef(":read-write")}}</li> + <li>{{CSSxRef(":required")}}</li> + <li>{{CSSxRef(":right")}}</li> + <li>{{CSSxRef(":root")}}</li> + <li>{{CSSxRef(":scope")}}</li> + <li>{{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":target")}}</li> + <li>{{CSSxRef(":target-within")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":user-invalid")}} {{Experimental_Inline}}</li> + <li>{{CSSxRef(":valid")}}</li> + <li>{{CSSxRef(":visited")}}</li> + <li>{{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}</li> +</ul> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Definito <code>:fullscreen</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "#pseudo-classes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Definisce quando particolari selettori corrisponde ad elementi HTML.</td> + </tr> + <tr> + <td>{{SpecName("CSS4 Selectors")}}</td> + <td>{{Spec2("CSS4 Selectors")}}</td> + <td>Definiti <code style="white-space: nowrap;">:any-link</code>, <code>:blank</code>, <code style="white-space: nowrap;">:local-link</code>, <code>:scope</code>, <code>:drop</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code style="white-space: nowrap;">:placeholder-shown</code>, <code style="white-space: nowrap;">:user-invalid</code>, <code style="white-space: nowrap;">:nth-col()</code>, <code style="white-space: nowrap;">:nth-last-col()</code>, <code>:is()</code> e <code>:where()</code>.<br> + Cambiato il comportamento di <code>:empty</code> {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.<br> + Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Basic UI")}}</td> + <td>{{Spec2("CSS3 Basic UI")}}</td> + <td>Definiti <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code> and <code>:read-write</code>, ma senza l'associazione di significato semantico.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Selectors")}}</td> + <td>{{Spec2("CSS3 Selectors")}}</td> + <td>Definiti <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code> e <code>:not()</code>.<br> + Definita la sintassi di <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, e <code>:indeterminate</code>, ma senza l'associazione di significato semantico.<br> + Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS2.1")}}</td> + <td>{{Spec2("CSS2.1")}}</td> + <td>Definiti <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, e <code>:focus</code>.<br> + Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS1")}}</td> + <td>{{Spec2("CSS1")}}</td> + <td>Definiti <code>:link</code>, <code>:visited</code> e <code>:active</code>, ma senza l'associazione di significato semantico.</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche">Vedi anche</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></li> +</ul> diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html new file mode 100644 index 0000000000..bbdee7472e --- /dev/null +++ b/files/it/web/css/ricette_layout/index.html @@ -0,0 +1,60 @@ +--- +title: Ricette per layout in CSS +slug: Web/CSS/Ricette_layout +translation_of: Web/CSS/Layout_cookbook +--- +<div>{{CSSRef}}</div> + +<p class="summary">Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout learning module</a>, che darà le basi per fare pieno uso delle seguenti ricette.</p> +</div> + +<h2 id="Le_Ricette">Le Ricette</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Ricetta</th> + <th scope="col">Descrizione</th> + <th scope="col">Metodi di layout</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">Oggetti media</a></td> + <td>Una scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">Colonne</a></td> + <td>Quando scegliere un layout a più colonne, un flexbox o una griglia per le colonne</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Columns">Multicol</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element">Centrare un elemento</a></td> + <td>Come centrare un oggetto orizzontalmente e verticalmente</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Box Alignment</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers">Note a piè di pagina appiccicose</a></td> + <td>Creare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. </td> + <td><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation">Navigazione divisa</a></td> + <td>Uno schema nel quale alcuni link sono visualmente separati da altri.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a>, {{cssxref("margin")}}</td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation">Navigazione a briciole</a></td> + <td>Creare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.</td> + <td><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a></td> + </tr> + </tbody> +</table> + +<h2 id="Contribuire_al_ricettario">Contribuire al ricettario</h2> + +<p>Come con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. <a href="/en-US/docs/user:chrisdavidmills/Layout_Cookbook_Home/Contribute_a_recipe">Guarda questa pagina</a> per trovare un template e delle linee guida per scrivere il tuo esempio.</p> diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html new file mode 100644 index 0000000000..cf2903dbc9 --- /dev/null +++ b/files/it/web/css/selettore_figli_diretti/index.html @@ -0,0 +1,121 @@ +--- +title: Selettore di Figli Diretti +slug: Web/CSS/selettore_figli_diretti +tags: + - compinatori css + - selettore di figli diretti +translation_of: Web/CSS/Child_combinator +--- +<div>{{CSSRef("Selectors")}}</div> + +<div>Il combinatore<strong> </strong>"<strong>></strong>" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono <strong>figli diretti </strong>del primo selettore.</div> + +<div> </div> + +<div>Al contrario, quando due selettori sono combinati con il <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_selectors">selettore discendente</a>, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.</div> + +<div> </div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">selettore1 > selettore2 {<em>stili CSS</em> } +</pre> + +<h2 id="Esempio">Esempio</h2> + +<pre class="brush: css">span { background-color: white; } +div > span { + background-color: DodgerBlue; +} +</pre> + +<pre class="brush: html"><div> + <span>Span 1. In the div. + <span>Span 2. In the span that's in the div.</span> + </span> + <span>Span 3. In the div</span> +</div> + +<span>Span 4. Not in a div at all.</span> +</pre> + +<p>{{EmbedLiveSample("Example", 200, 100)}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_tra_i_browser">Compatibilità tra i browser</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>supporto di base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/it/web/css/text-align/index.html b/files/it/web/css/text-align/index.html new file mode 100644 index 0000000000..281bf0d8fa --- /dev/null +++ b/files/it/web/css/text-align/index.html @@ -0,0 +1,108 @@ +--- +title: text-align +slug: Web/CSS/text-align +translation_of: Web/CSS/text-align +--- +<p><< <a href="it/Guida_di_riferimento_ai_CSS">Guida di riferimento ai CSS</a></p> + +<h2 id="Sommario" name="Sommario">Sommario</h2> + +<p>La proprietà <code>text-align</code> indica come le linee di testo devono essere allineate tra loro. <code>text-align</code> non influisce sull'allineamento degli altri elementi, solo del loro contenuto <code>in-line</code>.</p> + +<ul> + <li>valore-iniziale: dipende dal browser utilizzato e dalla direzione del testo</li> + <li>Si applica a: tutti gli elementi di livello blocco</li> + <li>Eredità: si</li> + <li>Media: <a href="it/CSS/Media/visual">visual</a></li> + <li>Computed value:</li> +</ul> + +<h2 id="Sintassi" name="Sintassi">Sintassi</h2> + +<pre class="brush: css line-numbers language-css" dir="rtl"><code class="language-css"><span class="property token">text-align</span><span class="punctuation token">:</span> left<span class="punctuation token">;</span> +<span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> +<span class="property token">text-align</span><span class="punctuation token">:</span> center<span class="punctuation token">;</span> +<span class="property token">text-align</span><span class="punctuation token">:</span> justify<span class="punctuation token">; +text-align: justify-all;</span></code> +</pre> + +<h3 id="Valori" name="Valori">Valori</h3> + +<ul> + <li><strong>left</strong> : le righe si allineano al bordo sinistro dell'elemento che contiene il testo</li> + <li><strong>right</strong> : le righe si allineano al bordo destro dell'elemento che contiene il testo</li> + <li><strong>center</strong> : le righe sono centrate all'interno dell'elemento che contiene il testo</li> + <li><strong>justify</strong> : le righe sono lunghe uguali e sono quindi allineate ad entrambi i bordi dell'elemento (tranne l'ultima, generalmente più corta, che è allineata a sinistra)<br> + quindi è allineato in modo giustificato dell'elemento che contiene il testo</li> + <li><strong>justify-all</strong>: è come justify ma anche l'ultima riga è giustificata</li> +</ul> + +<h2 id="Esempi" name="Esempi">Esempi</h2> + +<pre>p.left { text-align: left; } + +p.right { text-align: right; } +</pre> + +<h3 id="Esempi_Live">Esempi Live</h3> + +<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; } + +<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p> +e le altre righe di codice...</div> + +<div style="text-align: center; border: solid; margin: 1em 0;">div { <strong>text-align: center</strong>; border:solid; } + +<p style="background: gold; width: 22em; margin: 1em auto;">p { background:gold; width:22em; <strong>margin: 1em auto</strong>; }</p> +e le altre righe di codice...</div> + +<div style="text-align: -moz-center; text-align: -webkit-center; border: solid; margin: 1em 0;">div { <strong>text-align:-moz-center</strong>; text-align:-webkit-center; border:solid; } + +<p style="background: gold; width: 22em; margin: 1em 0;">p { background:gold; width:22em; }</p> +e le altre righe di codice...</div> + +<h3 id="Note" name="Note">Note</h3> + +<ul> + <li>La specifica CSS2 comprendeva un valore <stringa> che poi è stato eliminato dai CSS2.1 perchè mai implementato.</li> +</ul> + +<h2 id="Specifiche" name="Specifiche">Specifiche</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/CSS1#text-align">CSS 1</a></li> + <li><a class="external" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop">CSS 2.1</a></li> +</ul> + +<h2 id="Compatibilit.C3.A0_coi_browser" name="Compatibilit.C3.A0_coi_browser">Compatibilità coi browser</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione minima supportata</th> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td>1.0</td> + </tr> + <tr> + <td>Internet Explorer</td> + <td>3</td> + </tr> + <tr> + <td>Netscape</td> + <td>4</td> + </tr> + <tr> + <td>Opera</td> + <td>3.5</td> + </tr> + </tbody> +</table> + +<h2 id="Vedi_anche" name="Vedi_anche">Vedi anche</h2> + +<p><code><a href="it/CSS/text-indent">text-indent</a></code>, <code><strong>text-align</strong></code>, <code><a href="it/CSS/text-decoration">text-decoration</a></code>, <code><a href="it/CSS/letter-spacing">letter-spacing</a></code>, <code><a href="it/CSS/word-spacing">word-spacing</a></code>, <code><a href="it/CSS/text-transform">text-transform</a></code>, <code><a href="it/CSS/white-space">white-space</a></code>, <code><a href="it/CSS/white-space-collapse">white-space-collapse</a></code>, <code><a href="it/CSS/text-rendering">text-rendering</a></code>, <code><a href="it/CSS/text-wrap">text-wrap</a></code>, <code><a href="it/CSS/text-shadow">text-shadow</a></code>, <code><a href="it/CSS/margin">margin</a></code>, <code><a href="it/CSS/margin-left">margin-left</a></code>, <code><a href="it/CSS/margin-right">margin-right</a></code>, <code><a href="it/CSS/vertical-align">vertical-align</a></code>,</p> + +<p>{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}</p> diff --git a/files/it/web/css/text-shadow/index.html b/files/it/web/css/text-shadow/index.html new file mode 100644 index 0000000000..fa04ed546b --- /dev/null +++ b/files/it/web/css/text-shadow/index.html @@ -0,0 +1,122 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +<p> </p> +<div style="margin: 10px 0px; padding: 0px 10px; background-color: rgb(254, 244, 156); font-weight: bold; text-align: center;"> + <p style="margin: 4px 0px;">Introdotto in Gecko 1.9.1</p> + <div> + Si applica a Firefox 3.5, Thunderbird 3 e superiori</div> +</div> +<p> </p> +<div id="section_1"> + <h3 class="editable" id="Sommario"><span>Sommario</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>La proprietà CSS <span class="lang lang-en"><code><strong>text-shadow</strong></code></span> accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle <span class="lang lang-en"><code><a href="../../../../en/CSS/text-decoration" rel="internal">text-decoration</a></code></span> dell'elemento.</p> + <ul> + <li><span class="lang lang-en"><a href="../../../../en/CSS/initial_value" rel="internal">Valore iniziale</a> </span>: <span class="lang lang-en"><code><a href="../../../../en/CSS/none" rel="internal">none</a></code></span></li> + <li>Si applica a: tutti gli elementi</li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/inheritance" rel="internal">Ereditabile</a> </span>: sì</li> + <li>Percentuali: no</li> + <li>Media: <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/Media/Visual" rel="internal">visual</a></code></span> </span></li> + <li><span class="lang lang-en"><a href="../../../../en/CSS/computed_value" rel="internal">Valore riconosciuto</a> </span>: un colore e tre lunghezze</li> + </ul> +</div> +<div id="section_2"> + <h3 class="editable" id="Sintassi"><span>Sintassi</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <pre>text-shadow: none | [<shadow>,]* <shadow> + + dove <shadow> è: + +[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]</pre> +</div> +<div id="section_3"> + <h3 class="editable" id="Valori"><span>Valori</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <dl> + <dt> + <colore></dt> + <dd> + Opzionale, prima o dopo i valori di <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span>. Se il <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/color_value" rel="internal"><colore></a></code></span> </span>non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà <span class="lang lang-en"><code><a href="../../../../en/CSS/color" rel="internal">color</a></code></span> dell'elemento. Gli altri browser potrebbero comportarsi diversamente.<span class="lang lang-en"> </span> + <div class="note"> + <span class="lang lang-en"><strong>Nota:</strong> Specifica un colore per la compatibilità tra browser.</span></div> + </dd> + <dt> + <lunghezza> <lunghezza></dt> + <dd> + Vedi <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><length></a></code></span> </span>per le possibili unità di misura.<br> + Questi valori di <code><lunghezza> </code>stabiliscono la distanza dell'ombreggiatura. Il primo parametro<code> <lunghezza> </code>specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro<code> <lunghezza> </code>specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono <code>0</code> l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro<code> <lunghezza></code>).</dd> + </dl> + <dl> + <dt> + <lunghezza></dt> + <dd> + Opzionale. Il terzo parametro <span class="lang lang-en"><span class="lang lang-en"><code><a href="../../../../en/CSS/length" rel="internal"><lunghezza></a></code></span> </span> specifica <em>il raggio dell'effetto sfocato</em>. Se non viene specificato, è <code>0</code>. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.</dd> + </dl> +</div> +<div id="section_4"> + <h3 class="editable" id="Examples"><span>Examples</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273985" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=273985">Esempio 1</a> <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=197360" rel="external nofollow" title="https://bugzilla.mozilla.org/attachment.cgi?id=197360">Esempio 2</a> da Bugzilla</p> + <pre> h1 { text-shadow: black 0 0 0.4em; } +</pre> + <pre> h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; } +</pre> +</div> +<div id="section_5"> + <h3 class="editable" id="Specifiche"><span>Specifiche</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p>Nota: <code>text-shadow </code>era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica <em>Text </em>di<em> CSS3</em> ha migliorato la sintassi.</p> + <ul> + <li><a class="external" href="http://www.w3.org/TR/css3-text/#text-shadow" rel="external nofollow" title="http://www.w3.org/TR/css3-text/#text-shadow">CSS 3 Text #text-shadow</a> Bozza, sono stati proposti alcuni cambiamenti.</li> + </ul> +</div> +<div id="section_6"> + <h3 class="editable" id="Compatibilità_tra_browser"><span>Compatibilità tra browser</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <table class="standard-table"> + <tbody> + <tr> + <th>Browser</th> + <th>Versione più vecchia</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td>No<br> + La versione 5.5 supporta il Filter <a class="external" href="http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx"><em>Shadow</em> e <em>DropShadow</em></a></td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>3.5</strong> (1.9.1)</td> + </tr> + <tr> + <td>Opera</td> + <td><strong>9.5</strong></td> + </tr> + <tr> + <td>Safari (WebKit)</td> + <td><strong>1.1</strong> (100), ombreggiature multiple dalla versione 4.0 (528)</td> + </tr> + </tbody> + </table> + <p>Al momento di scrittura:</p> + <ul> + <li><strong>Opera 9.x</strong> supporta al massimo 6 ombreggiature, e aderisce al CSS2 per il colore (la prima ombreggiatura specificata è l'ultima).</li> + <li><strong>Gecko 1.9.1</strong> (Firefox 3.5) teoricamente supporta infinite ombreggiature (ma non provarci!) e aderisce al CSS3 per il colore (la prima ombra specificata è la prima).</li> + </ul> +</div> +<div id="section_7"> + <h3 class="editable" id="Vedere_anche"><span>Vedere anche</span></h3> + <div class="editIcon"> + <a href="/../../../../en/CSS/text-shadow#" style="" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="../../../../skins/common/icons/icon-trans.gif"></span></a></div> + <p><span class="lang lang-en"><code><a class="internal" href="/../../en/CSS/-moz-box-shadow" rel="internal" title="../../en/CSS/-moz-box-shadow">-moz-box-shadow</a></code></span></p> +</div> +<p> </p> diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..c99e5f5678 --- /dev/null +++ b/files/it/web/css/transition-timing-function/index.html @@ -0,0 +1,634 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +<p>{{ CSSRef("CSS Transitions") }}</p> + +<h2 id="Sommario">Sommario</h2> + +<p>La proprietà <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> <code>transition-timing-function</code> è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions">effetto di transizione</a>. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.</p> + +<p>Questa curva di accelerazione viene definita utilizzando uno {{cssxref("<timing-function>")}} per ogni proprietà che ottiene una transizione.</p> + +<p>È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.</p> + +<p>Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (<code>ease</code>). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transition-timing-function")}} +</pre> + +<pre>transition-timing-function: ease +transition-timing-function: ease-in +transition-timing-function: ease-out +transition-timing-function: ease-in-out +transition-timing-function: linear +transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) +transition-timing-function: step-start +transition-timing-function: step-end +transition-timing-function: steps(4, end) + +transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1) + +transition-timing-function: inherit +</pre> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><code><timing-function></code></dt> + <dd>Ciascun {{cssxref("<timing-function>")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<div> +<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div> +</div> + +<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-in</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div> +</div> + +<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-out</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div> +</div> + +<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: ease-in-out</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: ease-in-out; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: ease-in-out; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div> +</div> +</div> + +<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: linear</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: linear; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: linear; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div> +</div> + +<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: step-start</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-start; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-start; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-start; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-start; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div> +</div> + +<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: step-end</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: step-end; + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: step-end; +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div> +</div> + +<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;"> +<p><code>transition-timing-function: steps(4, end)</code></p> + +<div style="display: none;"> +<pre class="brush:html"> <div class="parent"> + <div class="box">Lorem</div> +</div> + </pre> + +<pre class="brush:css;">.parent { width: 250px; height:125px;} +.box { + width: 100px; + height: 100px; + background-color: red; + font-size: 20px; + left: 0px; + top: 0px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +.box1{ + width: 50px; + height: 50px; + background-color: blue; + color: yellow; + font-size: 18px; + left: 150px; + top:25px; + position:absolute; + -webkit-transition-property: width height background-color font-size left top color; + -webkit-transition-duration:2s; + -webkit-transition-timing-function: steps(4, end); + transition-property: width height background-color font-size left top color; + transition-duration:2s; + transition-timing-function: steps(4, end); +} +</pre> + +<pre class="brush:js">function updateTransition() { + var el = document.querySelector("div.box"); + + if (el) { + el.className = "box1"; + } else { + el = document.querySelector("div.box1"); + el.className = "box"; + } + + return el; +} + +var intervalID = window.setInterval(updateTransition, 7000); +</pre> +</div> + +<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div> +</div> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_tra_Browser">Compatibilità tra Browser</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoDesktop("16.0") }}</td> + <td>10</td> + <td>11.6{{ property_prefix("-o") }}<br> + 12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + <td>{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}<br> + {{ CompatGeckoMobile("16.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vedi_Anche">Vedi Anche</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li> + <li>{{ domxref("TransitionEvent") }}</li> +</ul> diff --git a/files/it/web/css/type_selectors/index.html b/files/it/web/css/type_selectors/index.html new file mode 100644 index 0000000000..91e6b48de9 --- /dev/null +++ b/files/it/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +<div>{{CSSRef}}</div> + +<p>Il <strong>selettore di tipo</strong> CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.</p> + +<pre class="brush: css no-line-numbers">/* Tutti gli elemnti <a>. */ +a { + color: red; +}</pre> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">element { <em>style properties</em> } +</pre> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">span { + background-color: skyblue; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><span>Here's a span with some text.</span> +<p>Here's a p with some text.</p> +<span>Here's a span with more text.</span> +</pre> + +<h3 id="Risultato">Risultato</h3> + +<p>{{EmbedLiveSample('Example', '100%', 150)}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commento</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div class="hidden">La tabella di compatibilità in questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per favore controlla <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e crea una pull request.</div> + +<p>{{Compat("css.selectors.type")}}</p> diff --git a/files/it/web/css/universal_selectors/index.html b/files/it/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6c247e09da --- /dev/null +++ b/files/it/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Universal selectors +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selettori +translation_of: Web/CSS/Universal_selectors +--- +<div>{{CSSRef}}</div> + +<p>Il <strong>selettore universale</strong> CSS (<code>*</code>) corrisponde ad elementi di qualsiasi tipo.</p> + +<pre class="brush: css no-line-numbers">/* Seleziona tutti gli elementi */ +* { + color: green; +}</pre> + +<p>A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:</p> + +<ul> + <li><code>ns|*</code> - corrisponde a tutti gli elementi del namespace <em>ns</em></li> + <li><code>*|*</code> - corrisponde a tutti gli elementi</li> + <li><code>|*</code> - corrisponde a tutti gli elementi senza alcun namespace dichiarato</li> +</ul> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="syntaxbox">* { <em>style properties</em> }</pre> + +<p>L'asterisco è opzionale con i selettori semplici. Per esempio, <code>*.warning</code> e <code>.warning</code> sono equivalenti.</p> + +<h2 id="Esempio">Esempio</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">* [lang^=en] { + color: green; +} + +*.warning { + color: red; +} + +*#maincontent { + border: 1px solid blue; +} + +.floating { + float: left +} + +/* Aggiungi clear automatico al fratello immediatamente successivo dopo un elemento flottante */ +.floating + * { + clear: left; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p class="warning"> + <span lang="en-us">Uno span verde</span> in un paragrafo rosso. +</p> +<p id="maincontent" lang="en-gb"> + <span class="warning">Uno span rosso</span> in un paragrafo verde. +</p></pre> + +<h3 id="Risultati">Risultati</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Status</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS4 Selectors')}}</td> + <td>Nessun cambiamento</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS3 Selectors')}}</td> + <td>Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Definizione iniziale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_Browser">Compatibilità Browser</h2> + +<div class="hidden">La tabella di compatibilità di questa pagina è generata da dati strutturati. Se vorresti contribuire ai dati, per piacere visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e proponici una pull request.</div> + +<p>{{Compat("css.selectors.universal")}}</p> diff --git a/files/it/web/css/word-break/index.html b/files/it/web/css/word-break/index.html new file mode 100644 index 0000000000..0af1a85bd0 --- /dev/null +++ b/files/it/web/css/word-break/index.html @@ -0,0 +1,131 @@ +--- +title: word-break +slug: Web/CSS/word-break +translation_of: Web/CSS/word-break +--- +<div>{{CSSRef}}</div> + +<h2 id="Riassunto">Riassunto</h2> + +<p>La proprietà CSS <code>word-break</code> è usata per specificare come (e se) andare a capo in mezzo alle parole.</p> + +<div>{{cssinfo}}</div> + +<h2 id="Sintassi">Sintassi</h2> + +<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintassi Formale</a>: {{csssyntax("word-break")}} +</pre> + +<pre>word-break: normal +word-break: break-all +word-break: keep-all + +word-break: inherit +</pre> + +<h3 id="Valore">Valore</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Usa le regole di a-capo predefinite.</dd> + <dt><code>break-all</code></dt> + <dd>Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).</dd> + <dt><code>keep-all</code></dt> + <dd>Non permettere a-capo in mezzo ad una parola nei testi CJK. Il comportamento nei testi non-CJK è lo stesso di <code>normal</code>.</dd> +</dl> + +<h2 id="Esempi">Esempi</h2> + +<p>{{todo}}</p> + +<h2 id="Specifiche">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text', '#word-break', 'word-break')}}</td> + <td>{{Spec2('CSS3 Text')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>5.5 [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>keep-all</code></td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>5.5</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funzionalità</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Supporto di base</td> + <td>{{CompatVersionUnknown}}</td> + <td>18.0</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>keep-all</code></td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatNo}} [2]</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}} [2]</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] IE8 ha introdotto<code> -ms-word-break </code>come sinonimo di<code> word-break</code>. Si sconsiglia di usare il prefisso <code>-ms-</code> .</p> + +<p>[2] Vedi {{webkitbug("123782")}}.</p> diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html new file mode 100644 index 0000000000..7f58297a34 --- /dev/null +++ b/files/it/web/css/z-index/index.html @@ -0,0 +1,192 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +<div>{{CSSRef}}</div> + +<div>La Proprietà CSS <strong><code>z-index</code> </strong>specifica lo z-order di un elemento <a href="/it/docs/Web/CSS/position">posizionato</a> e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.</div> + +<div></div> + +<pre class="brush:css no-line-numbers notranslate">/* Keyword value */ +z-index: auto; + +/* <integer> values */ +z-index: 0; +z-index: 3; +z-index: 289; +z-index: -1; /* Negative values to lower the priority */ + +/* Global values */ +z-index: inherit; +z-index: initial; +z-index: unset; +</pre> + +<p>Per una box posizionata (ovvero con valore qualsiasi di <code>position</code> che non sia <code>static</code>) la proprietà <code>z-index</code> indica;</p> + +<ol> + <li> Il livello di sovrapposizione della box nello <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>corrente.</li> + <li> Se la box stabilisce uno <a href="/en-US/docs/Glossary/Stacking_context">stacking context </a>locale.</li> +</ol> + +<pre class="brush: html notranslate"><div class="container"> +<div class="block position1 text-top">z-index: auto</div> +<div class="block position2 text-top">z-index: auto</div> +<div class="block position3 text-top">z-index: auto</div> +</div> + +<div class="container"> +<div class="block position1 text-bottom" style="z-index:3">z-index: 3</div> +<div class="block position2 text-bottom" style="z-index:2">z-index: 2</div> +<div class="block position3 text-bottom" style="z-index:1">z-index: 1</div> +</div></pre> + +<div id="z-index"> +<pre class="brush: css notranslate">* { + box-sizing: border-box; +} + +.container { + display: inline-block; + width: 250px; + position: relative; +} + +.block { + width: 150px; + height: 75px; + position: absolute; + font-family: monospace; + background-color: #E5E8FC; + border: solid 5px #112382; +} + +.text-top { + padding: 0.5em 0 5em .5em; +} + +.text-bottom { + padding: 4em 0 1.5em .5em; +} + +.position1 { + top: 0; + left: 0; +} + +.position2 { + top: 30px; + left: 30px; +} + +.position3 { + top: 60px; + left: 60px; +}</pre> +</div> + +<p>{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}</p> + +<p>L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning">absolute positioning. </a>Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo <code>z-index</code>. </p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintassi">Sintassi</h2> + +<p>La proprieta <code>z-index</code> e' specificata anche con le chiavi <code><a href="/en-US/docs/">auto</a></code> o <code><a href="/en-US/docs/"><integer></a></code>.</p> + +<h3 id="Valori">Valori</h3> + +<dl> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore</dd> + <dt><a id="<integer>" name="<integer>"><code><integer></code></a></dt> + <dd>Questo {{cssxref("<integer>")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' <code>0</code>. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="dashed-box">Dashed box + <span class="gold-box">Gold box</span> + <span class="green-box">Green box</span> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box { + position: relative; + z-index: 1; + border: dashed; + height: 8em; + margin-bottom: 1em; + margin-top: 2em; +} +.gold-box { + position: absolute; + z-index: 3; /* put .gold-box above .green-box and .dashed-box */ + background: gold; + width: 80%; + left: 60px; + top: 3em; +} +.green-box { + position: absolute; + z-index: 2; /* put .green-box above .dashed-box */ + background: lightgreen; + width: 20%; + left: 65%; + top: -25px; + height: 7em; + opacity: 0.9; +} +</pre> + +<h3 id="Result"><strong>Result</strong></h3> + +<p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Defines <code>z-index</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.properties.z-index")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>CSS {{Cssxref("position")}} property</li> + <li><a href="/en-US/docs/CSS/Understanding_z-index">Understanding CSS z-indexes</a></li> +</ul> |