From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../web/css/-moz-border-bottom-colors/index.html | 89 +++ .../web/css/-moz-font-language-override/index.html | 6 + .../web/css/-webkit-overflow-scrolling/index.html | 52 ++ files/it/web/css/@document/index.html | 47 ++ files/it/web/css/_colon_-moz-first-node/index.html | 46 ++ files/it/web/css/_colon_-moz-last-node/index.html | 46 ++ .../it/web/css/_colon_-moz-list-bullet/index.html | 42 ++ files/it/web/css/_colon_active/index.html | 128 +++++ files/it/web/css/_colon_focus/index.html | 117 ++++ files/it/web/css/_colon_hover/index.html | 99 ++++ files/it/web/css/_doublecolon_selection/index.html | 134 +++++ files/it/web/css/attribute_selectors/index.html | 239 ++++++++ files/it/web/css/background-attachment/index.html | 135 +++++ files/it/web/css/background-color/index.html | 86 +++ files/it/web/css/background-image/index.html | 126 ++++ files/it/web/css/background-position/index.html | 158 +++++ files/it/web/css/background-repeat/index.html | 165 ++++++ files/it/web/css/background/index.html | 116 ++++ files/it/web/css/border-bottom/index.html | 99 ++++ files/it/web/css/border-style/index.html | 229 ++++++++ files/it/web/css/border/index.html | 109 ++++ files/it/web/css/cascade/index.html | 149 +++++ files/it/web/css/color/index.html | 81 +++ files/it/web/css/css_box_model/index.html | 165 ++++++ .../introduction_to_the_css_box_model/index.html | 68 +++ .../it/web/css/css_flexible_box_layout/index.html | 118 ++++ .../using_css_flexible_boxes/index.html | 394 +++++++++++++ files/it/web/css/css_positioning/index.html | 63 ++ .../understanding_z_index/index.html | 51 ++ files/it/web/css/cursor/index.html | 388 +++++++++++++ .../index.html" | 40 ++ files/it/web/css/flex-shrink/index.html | 120 ++++ files/it/web/css/flex/index.html | 200 +++++++ files/it/web/css/font-size-adjust/index.html | 114 ++++ .../web/css/guida_di_riferimento_ai_css/index.html | 96 ++++ files/it/web/css/index.html | 107 ++++ files/it/web/css/media_queries/index.html | 136 +++++ files/it/web/css/min-width/index.html | 258 +++++++++ files/it/web/css/mozilla_extensions/index.html | 336 +++++++++++ files/it/web/css/object-fit/index.html | 161 ++++++ files/it/web/css/pseudo-classes/index.html | 167 ++++++ files/it/web/css/ricette_layout/index.html | 60 ++ .../it/web/css/selettore_figli_diretti/index.html | 121 ++++ files/it/web/css/text-align/index.html | 108 ++++ files/it/web/css/text-shadow/index.html | 122 ++++ .../web/css/transition-timing-function/index.html | 634 +++++++++++++++++++++ files/it/web/css/type_selectors/index.html | 78 +++ files/it/web/css/universal_selectors/index.html | 105 ++++ files/it/web/css/word-break/index.html | 131 +++++ files/it/web/css/z-index/index.html | 192 +++++++ 50 files changed, 7031 insertions(+) create mode 100644 files/it/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/it/web/css/-moz-font-language-override/index.html create mode 100644 files/it/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/it/web/css/@document/index.html create mode 100644 files/it/web/css/_colon_-moz-first-node/index.html create mode 100644 files/it/web/css/_colon_-moz-last-node/index.html create mode 100644 files/it/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/it/web/css/_colon_active/index.html create mode 100644 files/it/web/css/_colon_focus/index.html create mode 100644 files/it/web/css/_colon_hover/index.html create mode 100644 files/it/web/css/_doublecolon_selection/index.html create mode 100644 files/it/web/css/attribute_selectors/index.html create mode 100644 files/it/web/css/background-attachment/index.html create mode 100644 files/it/web/css/background-color/index.html create mode 100644 files/it/web/css/background-image/index.html create mode 100644 files/it/web/css/background-position/index.html create mode 100644 files/it/web/css/background-repeat/index.html create mode 100644 files/it/web/css/background/index.html create mode 100644 files/it/web/css/border-bottom/index.html create mode 100644 files/it/web/css/border-style/index.html create mode 100644 files/it/web/css/border/index.html create mode 100644 files/it/web/css/cascade/index.html create mode 100644 files/it/web/css/color/index.html create mode 100644 files/it/web/css/css_box_model/index.html create mode 100644 files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/it/web/css/css_positioning/index.html create mode 100644 files/it/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/it/web/css/cursor/index.html create mode 100644 "files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" create mode 100644 files/it/web/css/flex-shrink/index.html create mode 100644 files/it/web/css/flex/index.html create mode 100644 files/it/web/css/font-size-adjust/index.html create mode 100644 files/it/web/css/guida_di_riferimento_ai_css/index.html create mode 100644 files/it/web/css/index.html create mode 100644 files/it/web/css/media_queries/index.html create mode 100644 files/it/web/css/min-width/index.html create mode 100644 files/it/web/css/mozilla_extensions/index.html create mode 100644 files/it/web/css/object-fit/index.html create mode 100644 files/it/web/css/pseudo-classes/index.html create mode 100644 files/it/web/css/ricette_layout/index.html create mode 100644 files/it/web/css/selettore_figli_diretti/index.html create mode 100644 files/it/web/css/text-align/index.html create mode 100644 files/it/web/css/text-shadow/index.html create mode 100644 files/it/web/css/transition-timing-function/index.html create mode 100644 files/it/web/css/type_selectors/index.html create mode 100644 files/it/web/css/universal_selectors/index.html create mode 100644 files/it/web/css/word-break/index.html create mode 100644 files/it/web/css/z-index/index.html (limited to 'files/it/web/css') 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 +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

 

+ +

Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.

+ +
/* 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;
+
+ +

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. 

+ +

{{cssinfo}}

+ +

It does not apply

+ +
    +
  1. if {{Cssxref("border-style")}} is dashed or dotted.
    2. +
  2. to tables with border-collapse: collapse.
    3. +
+ +

Sintassi

+ +

Valori

+ +

Accetta una lista di colori separati dallo spazio.

+ +
+
<color>
+
+

Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("<color>")}} per le unità possibili.

+
+
none
+
Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.
+
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempio

+ +
<div id="example">Example</div>
+
+ +
#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;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Specificazioni

+ +

QUesta proprietà non è parte di nessun specificazione.

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

See also

+ + 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 +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

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 +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La proprietà CSS -webkit-overflow-scrolling controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.

+ +

{{cssinfo}}

+ +

Parametri

+ +
+
auto
+
Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.
+
touch
+
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.
+ La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.
+ Inoltre viene creato un nuovo stacking context.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */
+
+-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */
+
+ +

Specifiche

+ +

Non è parte di nessuna specifica.
+ Apple ne ha una descrizione nella reference CSS di Safari.

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Guarda anche

+ + 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 +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Sommario

+ +

La regola @-moz-document è 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.

+ +

Sintassi

+ +
@document url|url-prefix|domain(URL){ regole }
+ +

Esempi

+ +

Puoi usarlo nel file userContent.css:

+ +
@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; }
+}
+ +

Specifiche

+ + + +

Compatibilità Browser

+ +

Disponibile da Mozilla 1.8 / Firefox 1.5.

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' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-first-node applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal :first-child in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-first-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-first-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<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>
+
+ +

...risultato con :-moz-first-node...

+ +

Immagine:fchild1.jpg

+ +

...e con il :first-child...

+ +

Immagine:fchild2.jpg

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' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-last-node applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal :last-child in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-last-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-last-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<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>
+
+ +

...risultato con :-moz-last-node...

+ +

Immagine:lchild1.jpg

+ +

...e con il :last-child...

+ +

Immagine:lchild2.jpg

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' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-list-bullet è usata per modificare il pallino degli elementi lista.

+ +

Sintassi

+ +
li::-moz-list-bullet {proprietà di stile }
+
+ +

Esempi

+ +
.liste li::-moz-list-bullet{ font-size:36px }
+
+ +

...applicato a...

+ +
<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>
+
+ +

...risultato..

+ +

. Image:liug3.jpg

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' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :active rappresenta un elemento (come un bottone) che viene attivato dall'utente. Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.

+ +
/* Seleziona qualsiasi <a> che viene attivato */
+a:active {
+  color: red;
+}
+ +

La pseudo-class :active è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che contengono un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.

+ +

Gli stili definiti dalla pseudo-class :active 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 :active dopo tutte le altre regole relative ai link, così come definito dall'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class :active deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ + + +

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>
+ +

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 */
+ +

Risultato

+ +

{{EmbedLiveSample('Active_links')}}

+ +

Elementi form attivi

+ +

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>
+ +

CSS

+ +
form:active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Risultato

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Nessun Cambiamento.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.active")}}

+
+ +

Vedi anche

+ + 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' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :focus 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.

+ +
/* Seleziona qualsiasi <input> che ha ricevuto focus */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento che contiene un elemento che ha ricevuto il focus.

+
+ +

Sintassi

+ +
{{CSSSyntax}}
+ +

Esempio

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Example")}}

+ +

Interessi per l'Accessibilità

+ +

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 standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.

+ + + +

:focus { outline: none; }

+ +

Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Definisce semantiche specifiche HTML.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}Nessun cambiamento.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}Nessun cambiamento.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Vedi anche

+ + 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' +--- +
{{ CSSRef }}
+ +

La pseudo-classe CSS :hover 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).

+ +
/* Seleziona qualsiasi elemento <a> quando "hovered" */
+a:hover {
+  color: orange;
+}
+ +

Gli stili definiti dalla pseudo-classe :active 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 :hover dopo le regole :link e :visited ma prima di quella :active, così come definito nell'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-classe :hover è problematica sugli schermo touch. A seconda del browser, la pseudo-classe :hover 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.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ +

Esempio base

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

Potete usare la pseudo-classe :hover per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate questa demo per una possibile indicazione.

+ +
Nota: Per un effetto analogo, ma basato sulla pseudo-classe :checked (applicata a radiobox nascosti), vedete questa demo, presa dalla pagina di riferimento di :checked.
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificanCommentoFeedback
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}Permete che :hover venga applicato ad ogni pseudo-elemento.CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

Vedi anche

+ + 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' +--- +
{{CSSRef}}
+ +

Sommario

+ +

Lo pseudo-elemento CSS ::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.

+ +

Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa ::selection nel suo selettore: {{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à.

+ +
+

text-shadow in ::selection è supportato da Chrome, Safari e Firefox 17+.

+
+ +
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. (based on discussion in the W3C Style mailing list).
+
+Lo pseudo-elemento ::selection venne in seguito riaggiunto in Pseudo-Elements Level 4.
+ +

Esempio

+ +

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: ::-moz-selection, ::selection {...}. La regola verrà eliminata sui browser non-Gecko in quanto ::-moz-selection non è valido per questi ultimi.

+ +

HTML

+ +
<div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
+<p>Prova anche questo testo per <p></p>
+ +

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;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatusCommento
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

Lo pseudo-elemento ::selection ma questo venne rimosso prima di poter raggiungere lo status di Recommendation. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.

+ +

Compatibilità nei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Attualmente Gecko supporta solamente la versione prefissata ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.

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 +--- +
{{CSSRef}}
+ +

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

+ +
/* 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;
+}
+ +

Sintassi

+ +
+
[attr]
+
Rappresenta elementi con un nome di attributo attr.
+
[attr=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
+
[attr~=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
+
[attr|=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
+
[attr^=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
+
[attr$=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
+
[attr*=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
+
[attr operator value i]
+
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).
+
+ +

Esempi

+ + + +

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;
+}
+ +

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>
+ +

Risultato

+ +

{{EmbedLiveSample("Links")}}

+ +

Linguaggi

+ +

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]) {
+  font-style: italic;
+}
+
+/* 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;
+}
+
+ +

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>
+
+ +

Risultati

+ +

{{EmbedLiveSample("Languages")}}

+ +

Liste ordinate HTML

+ +

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 case-sensitive.

+ +

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;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Risultato

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Vedi anche

+ + 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 +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

Se è stata specificata una background-image, la proprietà background-attachment determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.

+ + + +

Sintassi

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valori

+ +
+
scroll 
+
Se scroll viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata
+
fixed 
+
Se fixed viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene
+
+ +

Esempi

+ +

Simple example

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

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>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background image support

+ +

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.

+ +

CSS

+ +
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;
+}
+ +

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>
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background, background-color, background-image, background-position, background-repeat

+ +
 
+ +

{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}

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 +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-color 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 transparent o inherit.

+ + + +

Sintassi

+ +
background-color: color | transparent | inherit
+
+ +

Valori

+ +
+
color 
+
Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.
+
transparent 
+
Il valore iniziale di background-color è transparent, il che significa che l'elemento non ha un proprio colore, ma è trasparente.
+
+ +

Esempi

+ +

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>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi","200","150")}}

+ + +

Specifiche

+ + + +

Si veda anche

+ +

background, background-attachment, background-image, background-position, background-repeat

+ +

{{ 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" } ) }}

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 +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-image imposta l'immagine di sfondo di un elemento.

+ + + +

Sintassi

+ +
background-image:uri | none | inherit
+
+ +

Valori

+ +
+
uri 
+
L'indirizzo dell'immagine da utilizzare come sfondo
+
none 
+
Specifica che l'elemento non ha alcuna immagina di sfondo
+
+ +

Esempi

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

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>
+ +

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;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Esempi')}}

+ +

Note

+ +

Gli sviluppatori dovrebbero specificare la proprietà background-color, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.

+ +

Specifiche

+ + + +

Browser Compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Vedi Anche

+ +

background

+ +

{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

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 +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

+ + +
+ +
+

Sintassi

+ +
Edit section
+ +
background-position: [ <percentuale> | <lunghezza> | left | center | right  ]
+                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
<percentuale>
+
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.
+
<lunghezza>
+
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.
+
top left e left top
+
Come '0% 0%'.
+
top, top center, e center top
+
Come '50% 0%'.
+
right top e top right
+
Come '100% 0%'.
+
left, left center, e center left
+
Come '0% 50%'.
+
center e center center
+
Come '50% 50%'.
+
right, right center, e center right
+
Come '100% 50%'.
+
bottom left e left bottom
+
Come '0% 100%'.
+
bottom, bottom center, e center bottom
+
Come '50% 100%'.
+
bottom right e right bottom
+
Come '100% 100%'.
+
+ +

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).

+
+ +
+

Esempi

+ +
Edit section
+ +
.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%;
+}
+
+
+
+ +
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+
+ +
+

Vedere anche

+ +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

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 +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-repeat specifica se e come lo sfondo deve essere ripetuto.

+ + +
+ +
+

Sintassi

+ +
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
repeat
+
L'immagine viene ripetuta sia orizzontalmente che verticalmente
+
repeat-x
+
L'immagine viene ripetuta solo orizzontalmente
+
repeat-y
+
L'immagine viene ripetuta solo verticalmente
+
no-repeat
+
L'immagine non viene ripetuta: viene visualizzata una sola volta.
+
+ +

 

+
+

Esempi

+ +

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>
+ +

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;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Esempi', 240, 360)}}

+
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ + +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
Browser +

Versione più vecchia

+
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+ +
+

Vedere anche

+ + +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

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 +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. background può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: background-attachment, background-color, background-image, background-position, background-repeat.

+ + + +

Sintassi

+ +
background: [background-color || background-image ||
+    background-repeat || background-attachment ||
+    background-position] | inherit]
+
+ +

Valori

+ +
+
background-color
+
si veda background-color.
+
background-image 
+
si veda background-image.
+
background-repeat 
+
si veda background-repeat.
+
background-attachment 
+
si veda background-attachment.
+
background-position 
+
si veda background-position.
+
+ +

Esempi

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi")}}

+ +

Note

+ +

Data una dichiarazione valida, la proprietà background 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.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background-attachment, background-color, background-image, background-position, background-repeat

+ +

Interwiki Language Links

+ +

 

+ +

{{ 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" } ) }}

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 +--- +

 

+
+

Sommario

+

La proprietà border-bottom è una abbreviazione che imposta il valore di border-bottom-color , border-bottom-style , and border-bottom-width . These properties describe the bottom border of elements.

+ +
+
+

Sintassi

+ 
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Values

+
+
+ <border-width> 
+
+ Vedi border-bottom-width .
+
+ <border-style> 
+
+ Vedi border-bottom-style .
+
+ <border-color> 
+
+ Vedi border-bottom-color .
+
+
+
+

Esempi

+

Guarda gli esempi dal vivo

+ 
element {
+    border-bottom-width: 1px solid #000;
+}
+
+
+
+

Note

+

I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.

+

Come per tutte le abbreviazioni, border-bottom 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:

+ 
  border-bottom-style: dotted;
+  border-bottom: thick green;
+

è attualmente uguale a:

+ 
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+

e il valore di border-bottom-style dato prima di border-bottom viene ignorato.

+

Siccome il valore predefinito di border-bottom-style è none, se non si specifica la parte <border-style> del valore allora la proprietà non specifica nessun bordo.

+
+
+

Specifiche

+ +
+
+

Compatibilità tra browser

+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+
+

Vedere anche

+

border , border-bottom , border-bottom-width , border-bottom-style , border-bottom-color .

+
+

 

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 +--- +
{{CSSRef}}
+ +
La proprietà border-style è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.
+ +
+ +
/* 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;
+
+ +
Nota: Il valore di default di border-style è none. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il {{ Cssxref("border-color") }}, non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia none o hidden.
+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprietà border-style può essere specificata usando uno, due, tre o quattro valori.

+ + + +

Ogni valore è una keyword scelta dalla seguente lista.

+ +

Valori

+ +
+
<br-style>
+
E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Come per la keyword hidden, 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 none ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.
hidden +
+ 		Come per la keyword hidden, 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.
dotted +
+ 		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") }}.
dashed +
+ 		Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.
solid +
+ 		Mostra una singola dritta e solida linea.
double +
+ 		Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .
groove +
+ 		Mostra un bordo che porta ad un effetto intagliato. È l'opposto di ridge. 
ridge +
+ 		Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  groove.
inset +
+ 		Mostra un bordo che fa apparire il box incassato.
+ E' l'opposto di outset. Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come groove.
outset +
+ 		+

Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di inset. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come ridge.

+
+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

Tabella con tutti i valori della proprietà

+ +

Ecco un esempio con tutti i valori che la proprietà può assumere

+ +

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>
+ +

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;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Specific​he

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Added hidden
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Vedi anche

+ + 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 +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà border è una abbreviazione per impostare in una sola volta i valori individuali di border. border può essere usata per impostare uno o più dei seguenti valori: border-width , border-style , border-color .

+ +
+
+

Sintassi

+
+ Edit section
+ 
border:  [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Valori

+
+ Edit section
+
+
+ border-width
+
+ Opzionale, se è assente viene usato il valore di default medium. Vedi border-width .
+
+ border-style 
+
+ Richiesto, se è assente viene usato il valore di default none. Vedi border-style .
+
+ border-color 
+
+ Opzionale, se è assente il valore di default è la proprietà color (colore di primo piano). Vedi border-color .
+
+
+
+

Esempi

+
+ Edit section
+

Guarda gli esempi dal vivo

+ 
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 */
+
+
+
+

Note

+
+ Edit section
+

Mentre le proprietà border-width , border-style , e border-color accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.

+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4.0
Firefox1.0
Safari1.0
Opera3.5
+
+
+

Vedere anche

+
+ Edit section
+

border , border-width , border-style , border-color , margin , padding

+
+

 

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 +--- +

{{ CSSRef() }}

+ +

The cascade 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: Cascading Style Sheets.

+ +

What CSS entities participate in the cascade

+ +

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 descriptors 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 font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.

+ +

If the declarations contained in most at-rules 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.

+ +

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:

+ + + +

Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. 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.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     OriginImportance
    1user agentnormal
    2user agent!important
    3usernormal
    4authornormal
    5CSS Animationssee below
    6author!important
    7user!important
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

CSS animations and the cascade

+ +

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

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:

+ +
margin-left: 3px
+ +

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.

+ +

See also

+ + 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 +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS color imposta il colore di primo piano del contenuto testuale di un elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
color:  <color> | inherit
+
+
+

Valori

+
+ Edit section
+
+
+ <color>
+
+ La proprietà color accetta varie parole chiave e valori numerici. Vedi i valori di <color> per maggiori dettagli.
+
+
+
+

Esempi

+
+ Edit section
+

Tutti gli esempi seguenti rendono il testo rosso.

+ 
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) }
+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+
+ Edit section
+

La proprietà color è supportata molto bene da tutti i browser più comuni.
+ Una tabella di compatibilità tra browser è qui: <color> .

+
+
+

Vedere anche

+
+
+ Edit section
+ +
+

 

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 +--- +
{{CSSRef}}
+ +

CSS Box Model 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 visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+ +
+ +

Properties controlling the size of a box

+ +
+ +
+ +

Properties controlling the margins of a box

+ +
+ +
+ +

Properties controlling the paddings of a box

+ +
+ +
+ +

Other properties

+ +
+ +
+ +

Guides

+ +
+
Introduction to the CSS box model
+
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.
+
Mastering margin collapsing
+
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.
+
Visual formatting model
+
Explains the visual formatting model.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
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 +--- +
{{CSSRef}}
+ +
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 box model di CSS. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.
+ +
 
+ +

Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.

+ +

CSS Box model

+ +

L'area del contenuto, 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 content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.

+ +

Se la proprietà {{cssxref("box-sizing")}} è impostata su content-box ( 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")}}.

+ +

L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.

+ +

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")}}.

+ +

L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.

+ +

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  border-box, 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")}}.

+ +

L'area del margine, 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 margin-box width e margin-box height.

+ +

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 (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.

+ +

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 <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>)  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.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Descrizione più precisa, ma nessun cambio a livello pratico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definizione iniziale.
+ +

Vedi anche

+ + 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 +--- +

{{CSSRef}}

+ +

CSS Flexible 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.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

 

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 +--- +
{{CSSRef}}
+ +

Il CSS3 Flexible Box, o flexbox, è un layout mode 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 . 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.

+ +

Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio dello schermo. Il posizionamento degli elementi figli è quindi molto più facile, e i layout complessi possono essere realizzati più semplicemente e con codice più pulito, anche l'ordine di visualizzazione degli elementi è indipendente dal loro ordine nel codice sorgente. Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.

+ +
Nota: Anche CSS Flexible Boxes Layout specification è in fase Last Call Working Draft stage (vedi anche Latest Editor draft), 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 tabella delle compatibilità su ogni proprietà per aggiornarti sullo stato di compatibilità.
+ +

Caratteristiche del flexible boxes

+ +

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.

+ +

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, non è sufficientemente adatto per sostenere componenti applicativi che devono modificare l'orientamento, 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. Entrambi fanno parte di uno sforzo più ampio del CSS Working Group per fornire una maggiore interoperabilità delle applicazioni web con diversi user agents, diverse modalità di scrittura, e altre richieste di flessibilità.

+ +

Vocabolario del flexible boxes

+ +

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. Si consideri il seguente schema al momento di rivedere gli elementi di vocabolario qui sotto. Essa mostra un contenitore flessibile che ha un flex-direction di row, il che significa che gli elementi flessibili susseguono orizzontalmente attraverso l'asse principale secondo la modalità di scrittura stabilita, la direzione in cui il testo dell'elemento scorre, in questo caso da sinistra a destra.

+ +

flex_terms.png

+ +
+
Flex container
+
L'elemento principale in cui gli elementi di flessione sono contenuti. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà {{Cssxref ("visualizzazione")}} .
+
Flex item
+
+

Ciascun figlio di un contenitore flessibile diventa un elemento flessibile. Del testo direttamente contenuto in un contenitore flessibile è avvolto in un elemento flex anonimo.

+
+
Axes
+
+

Ogni flexible box di layout flessibile segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale.

+ +
    +
  • Il flex-direction proprietà che stabilisce l'asse principale.
    • +
  • Il justify-content proprietà definisce come gli elementi flessibili siano disposti lungo l'asse principale sulla riga corrente.
    • +
  • La align-items proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.
    • +
  • La align-self proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da align-items.
    • +
+
+
Directions
+
+

La main start/main end e cross start/cross end lati del contenitore flex descrivono l'origine e la fine del flusso degli elementi flessibili. Seguono l'asse principale e l'asse trasversale del contenitore flex nel vettore stabilito dalla writing-mode (da sinistra a destra, da destra a sinistra, ecc).

+ +
    +
  • La order proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.
    • +
  • La flex-flow proprietà shorthands la flex-direction e flex-wrap proprietà per layout the flex items.
    • +
+
+
Lines
+
+

Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà flex-wrap, che controlla la direzione dell'asse trasversale e la direzione in cui le nuove righe sono ravvicinate.

+
+
Dimensions
+
+

gli elementi di height e width sono main size e cross size, che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.

+ + +
+
+ +

Scegliere un flexible box

+ +

Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà display e prova:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore flex rende il contenitore flex un block-level element. IL valore inline-flex rende il contenitore flex come inline-level element.

+ +
Nota: Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, display : -webkit-flex.
+ +

Considerazione elementi flessibili

+ +

Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . Tuttavia, un elemento flex anonimo che contiene solo spazi vuoti non è considerato, come se fosse display: none.

+ +

Figli posizionati in modo assoluto di un contenitore flex sono posizionati in modo che la loro posizione iniziale sia determinata in riferimento al principale start content-box del loro contenitore flessibile.

+ +

Attualmente, a causa di un problema noto, specificando visibility: collapse su un elemento flessibile, questo viene visto come display: none, invece si ha il comportamento previsto con visibility: hidden. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare visibility:hidden per gli elementi flessibili che dovrebbero comportarsi come visibility:collapse. Per ulteriori informazioni, vedi {{bug(783470)}}.

+ +

I margini di elementi flessibili non collassano. Usando i margini auto assorbono spazio extra nella direzione verticale o orizzontale e può essere utilizzato per l'allineamento o per separare gli elementi flessibili adiacenti. Vedi Aligning with 'auto' margins nel W3C Flexible Box Layout Model specification per maggiori dettagli.

+ +

To ensure a reasonable default minimum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto 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.

+ +

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". Per ora, se questo è un problema, si possono invece utilizzare i margini per ottenere la centratura, as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare align- properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  justify- 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 justify-content 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 justify-content property.

+ +

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.

+ +

Flexible box properties

+ +

Proprietà non influenzate da flexible boxes

+ +

Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:

+ + + +

Esempi

+ +

Esempi base flex

+ +

Questo esempio di base mostra come applicare la "flessibilità" per un elemento e come gli elementi fratelli si comportano in uno stato flessibile.

+ +
​<!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>
+ +

Holy Grail Layout example

+ +

Questo esempio dimostra come FlexBox fornisce la possibilità di modificare dinamicamente il layout per diverse risoluzioni dello schermo. Il seguente diagramma illustra la trasformazione.

+ +

HolyGrailLayout.png

+ +

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.

+ +
​<!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>
+ +

Prova

+ +

Ci sono diversi siti per la sperimentazione del flexBox:

+ + + +

Cose da tenere a mente

+ +

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.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[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.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[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.

+ +

[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.

+ +

See also

+ + 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 +--- +
{{CSSRef}}
+ +

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+ +

Reference

+ +

CSS properties

+ +
+ +
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explains how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
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 +--- +
{{cssref}}
+ +

In the most basic cases, HTML 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. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+ +
+

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.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

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 z-index property.

+ +

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index 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 CSS-2.1 Appendix E to explain these rules better.

+ +

This article will try to explain those rules, with some simplification and several examples.

+ +
    +
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. +
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. +
  3. Using z-index: How to use z-index to change default stacking.
    4. +
  4. The stacking context: Notes on the stacking context.
    5. +
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
+ +
+

Original Document Information

+ + + +

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
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 +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, 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) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.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() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + diff --git "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_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 +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

+

Sintassi

+

La sintassi per questa proprietà è:

+
cursor: [<url>,]* keyword;
+
+

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

+

Ad esempio, la scrittura seguente è corretta:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

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 auto.

+

il supporto della sintassi 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 è:

+
cursor: url(foo.png) 4 12, auto;
+
+

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).

+

Limitazioni

+

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.

+


+ 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).

+

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.

+

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) }})

+

Compatibilità con altri browsers

+

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

+

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

+
cursor: url(foo.cur);
+
+

che:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

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.

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 +--- +
{{CSSRef}}
+ +
 
+ +

La proprietà CSS flex-shrink 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 flex-shrink.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Sintassi

+ +
/* <number> valori */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valori globali */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La proprietà flex-shrink è specificata come un singolo <number>.

+ +

Valori

+ +
+
<number>
+
Guarda {{cssxref("<number>")}}. Non sono ammessi valori negativi.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempio

+ +

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>
+
+ +

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;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 500, 300)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Definizione iniziale
+ +

{{cssinfo}}

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Guarda anche

+ + 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 +--- +
{{CSSRef}}
+ +

Sommario

+ +

La proprietà flex di CSS è una proprietà shorthand 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.

+ +

{{cssinfo}}

+ +

Vedi L'Uso di flexible boxes per altre proprietà e informazioni.

+ +

Sintassi

+ +
/* 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;
+
+ +

Valori

+ +
+
<'flex-grow'>
+
Il valore flex-grow appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-shrink'>
+
Il valore flex-shrink appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-basis'>
+
Il valore flex-basis 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%.
+
none
+
Questo valore viene interpretato come: 0 0 auto.
+
+

Sintassi formale

+
+
+ +
{{csssyntax}}
+ +

Example

+ +
#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;
+}
+
+ +
<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>
+
+ + + +

Risultato

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] Per attivare il supporto FlexBox per Firefox 18 e 19, l'utente deve cambiare la about: config preferenza "layout.css.flexbox.enabled" true.

+ +

[2] Multi-line flexbox sono supportate da Firefox 28.

+ +

[3] Internet Explorer 10-11 (ma non 12+) ignora l'uso di calc()nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi Flexbug #8 per maggiori informazioni.

+ +

[4] In Internet Explorer 10-11 (ma non 12+), una dichiarazione flessibile con un valore senza unità nella sua parte flex-base è considerato sintatticamente valido e sarà quindi ignorata. Una soluzione è quella di includere sempre una unità nella parte flex-base del valore di shorthand di flex. Vedi Flexbug #4 per ulteriori informazioni.

+ +

Guarda altro

+ + 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 +--- +

il font-size-adjust nelle proprieta CSS, dice come  dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.

+ +
/* 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;
+
+ +

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).

+ +

Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il font-size-adjust, 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 :

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
none
+
Sceglie  la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.
+
{{cssxref("<numero>")}}
+
+

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") }}.

+ +

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 font-size-adjust.

+ +

0 genera un testo di altezza zero (testo nascosto).

+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

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>
+ +

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;
+}
+
+ +

Risultati

+ +

{{ EmbedLiveSample('Examples', 500, 200) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +
+

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

+
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
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 +--- +
{{CSSRef}}
+ +

Usate questo riferimento CSS per consultare un indice alfabetico di tutte le proprietà CSS standard, le pseudo-classi, pseudo-elementi, i tipi di dati, e le at-rules. Potete anche visualizzare i concetti chiave del CSS e una lista dei selettori organizzati per tipo. È anche inclusa un breve prontuario su DOM-CSS / CSSOM.

+ +

Sintassi di regola base

+ +

Sintassi di una regola di stile

+ +
regola-stile ::=
+    lista-selettori {
+      lista-proprietà
+    }
+
+ +

... dove :

+ +
lista-selettori ::=
+    selettore[:pseudo-classe] [::pseudo-elemento]
+    [, lista-selettori]
+
+lista-proprietà ::=
+    [proprietà : valore] [; lista-proprietà]
+
+ +

Consultate la lista dei selettori, pseudo-classi, e pseudo-elementi sotto. La sintassi per ogni valore specificato dipende dal tipo di dato definito per ogni proprietà specificata.

+ +

Esempi di regole di stile

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra guida ai Selettori CSS. Siate consapevoli che ogni errore di sintassi 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 basata su stringhe di testo (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è basato su oggetti.

+ +

Sintassi at-rules

+ +

Poiché la struttura delle At-rules varia ampiamente, per piacere consultate At-rule per trovare la sintassi della regola specifica che volete.

+ +

Selettori

+ + + +

Concetti

+ + + +

Estensioni di Mozilla

+ + + +

{{ 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" } ) }}

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 +--- +

Il Cascading Style Sheets (CSS) è un linguaggio per fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.

+ +

Il CSS è uno dei linguaggi fondamentali dell'open Web ed è standardizzato nei browser web secondo la specifica W3C. 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.

+ +
+ +
+ +
+
+

Documentazione ed esercitazioni su CSS

+ +
+
Concetti chiave del CSS
+
Descrive la sintassi del linguaggio e introduce a elementi fondamentali quali specificità ed ereditarietà, il modello a box ed il collasso dei margini, impilamento e contesti di formattazione dei blocchi, o i valori iniziali, calcolati, utilizzati ed attuali. Sono anche definite entità quali le proprietà scorciatoia di CSS.
+
Scrivere CSS efficienti
+
Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.
+
Utilizzare le trasformazioni di CSS
+
Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.
+
Utilizzare le transizioni di CSS
+
Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.
+
Utilizzare le animazioni di CSS
+
Descrive come definire le animazioni di un elemento ma anche come rilevare con Javascript se il browser le supporta.
+
Utilizzare i gradienti di CSS
+
Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.
+
Utilizzare l'impaginazione multicolonna di CSS
+
Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.
+
Utilizzare sfondi multipli di CSS
+
Descrive come definire parecchi sfondi sullo stesso elemento.
+
Scalare immagini di sfondo
+
Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.
+
Utilizzare l'interrogazione del media di CSS
+
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.
+
Utilizzare i contatori di CSS
+
Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.
+
Font e Tipografia
+
Informa sulla gestione dei propri font utilizzando {{ cssxref("@font-face") }} e il formato font WOFF.
+
Utilizzare i box flessibili di CSS
+
Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.
+
Il Rientro Coerente degli Elenchi
+
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. Scopri come metterli tutti in riga.
+
+
Utilizzare le informazioni di stile dinamiche
+
Come ottenere informazioni sullo stile e manipolarlo via DOM.
+
+ +

Vedi Tutto...

+
+ +
+

Ottentere aiuto dalla comunità

+ +

Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?

+ +
    +
  • Controlla le domande comuni su CSS che danno suggerimenti per risolvere i problemi comuni.
    • +
  • Vai su Stack Overflow, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.
    • +
  • Consulta il forum layout, che tratta CSS e HTML: + +
    • +
+ +

Non dimenticare la netiquette...

+ +

Strumenti che semplificano lo sviluppo in CSS

+ +
    +
  • Il Servizio di Validazione di CSS del W3C controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.
    • +
  • L'estensione Firebug 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ù.
    • +
  • L'estensione Web Developer di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.
    • +
  • L'estensione EditCSS di FireFox permette di editare il CSS nella barra laterale.
    • +
+ +

Vedi Tutto...

+ + + + +
+
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 +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Le Media Queries sono un componente essenziale del disegno responsivo, 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.

+ +

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")}}.

+ +

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.

+ +

Puoi saperne di più su come usare le media queries programmaticamente nell'articolo Testing media queries.

+ +

Referenze

+ +

Direttive

+ +
+ +
+ +

Guide

+ +
+
Come usare le media queries
+
Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.
+
Come testare le media queries
+
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.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto basico1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Supporto basico 
+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
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 +--- +
{{CSSRef}}
+ +

La proprietà CSS min-width imposta la larghezza minima di un elemento.  Questo evita che lo used value della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per min-width.

+ +
/* <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;
+
+ +

La larghezza dell'elemento viene impostata al valore di min-width ogni volta che min-width risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
{{cssxref("<length>")}}
+
La larghezza minima espressa come {{cssxref("<length>")}}. Valori negativi rendono la dichiarazione non valida.
+
 
+
{{cssxref("<percentage>")}}
+
La larghezza minima espressa come {{cssxref("<percentage>")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.
+
+ +

Parole chiave

+ +
+
auto
+
La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.
+
max-content {{ experimental_inline() }}
+
La larghezza massima preferita (intrinsic).
+
min-content {{ experimental_inline() }}
+
La larghezza minima preferita (intrinsic).
+
fill-available{{ experimental_inline() }}
+
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, available.)
+
fit-content {{ experimental_inline() }}
+
Definito come min(max-content, max(min-content, fill-available)).
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Vengono aggiunte le parole chiave max-content, min-content, fit-content e fill-available. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Viene aggiunta la keyword auto e viene utilizzata come valore iniziale.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Definisce min-width come animabile.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definizione iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
si applica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content, efill-available {{ experimental_inline() }}24.0 {{property_prefix("-webkit")}} [3]{{CompatNo}}{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
auto21.0 [4]{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }} [4]
+ Removed in {{ CompatGeckoDesktop("22.0") }}
+ Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.		{{ CompatNo() }}12.10 [6]{{ CompatNo() }}
auto as initial value{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
applies to <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content, e fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto come valore iniziale {{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 descrive esplicitamente il comportamento di min-width 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.

+ +

[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword available ma non fill-available. Inoltre la definizione di fit-content è più lasca di quella data da CSS3 Intrinsic.

+ +

[3] WebKit implementa una proposta precedente, la parola chiave intrinsic.

+ +

[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a min-content per gli oggetti di tipo flex, e 0 per qualsiasi altro elemento.

+ +

[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.  

+ +

See also

+ + 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 +--- +

 

+
+

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.

+ Zibibbo84 10:30, 11 ott 2007 (PDT) ;)
+

Mozilla supporta alcune estensioni del CSS 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.

+

Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.

+

Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.

+

At-rules

+ +

Pseudo-elements and pseudo-classes

+ +

Properties

+ + + + + +

Values

+

Probabilmente documentate nelle pagine delle proprietà standard.

+ + + +

Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare overflow-x and overflow-y, nonostante non rimpiazzino l'ultimo di questi.

+ + + + + + + + + + + +

Others

+ + + +

Talk:Mozilla CSS Extensions

+

{{ 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.

+

{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}

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 +--- +
{{CSSRef}}
+ +

La proprietà CSS object-fit istruisce il browser su come deve ridimensionare il contenuto di un elemento incluso, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.

+ +

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

Sintassi

+ +

La proprietà object-fit viene specificata usando uno dei seguenti valori.

+ +

Valori

+ +
+
contain
+
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 "letterboxed".
+
cover
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi.
+
fill
+
L'elemento viene ridimensionato per riempire completamente il suo contenitore. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.
+
none
+
L'elemento non viene ridimensionato.
+
scale-down
+
L'elemento viene ridimensionto come se none o contain fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<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>
+ +

CSS

+ +
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;
+}
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

Guarda anche

+ + 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 +--- +
{{CSSRef}}
+ +

Una pseudo-classe CSS è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati. Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.

+ +
/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
+button:hover {
+  color: blue;
+}
+ +

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.

+ +
+

Nota: Al contrario delle pseudo-classi, gli pseudo-elementi possono essere usati per dare stile a parti specifiche di un elemento.

+
+ +

Sintassi

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.

+ +

Indice delle pseudo-classi standard

+ +
+ +
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Definito :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Definisce quando particolari selettori corrisponde ad elementi HTML.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Definiti :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() e :where().
+ Cambiato il comportamento di :empty {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ 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).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Definiti :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, ma senza l'associazione di significato semantico.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Definiti :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty e :not().
+ Definita la sintassi di :enabled, :disabled, :checked, e :indeterminate, ma senza l'associazione di significato semantico.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Definiti :lang(), :first-child, :hover, e :focus.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definiti :link, :visited e :active, ma senza l'associazione di significato semantico.
+ +

Vedi anche

+ + 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 +--- +
{{CSSRef}}
+ +

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.

+ +
+

Nota: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro CSS layout learning module, che darà le basi per fare pieno uso delle seguenti ricette.

+
+ +

Le Ricette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RicettaDescrizioneMetodi di layout
Oggetti mediaUna 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.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColonneQuando scegliere un layout a più colonne, un flexbox o una griglia per le colonneCSS Grid, Multicol, Flexbox
Centrare un elementoCome centrare un oggetto orizzontalmente e verticalmenteFlexbox, Box Alignment
Note a piè di pagina appiccicoseCreare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. CSS Grid, Flexbox
Navigazione divisaUno schema nel quale alcuni link sono visualmente separati da altri.Flexbox, {{cssxref("margin")}}
Navigazione a bricioleCreare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.Flexbox
+ +

Contribuire al ricettario

+ +

Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. Guarda questa pagina per trovare un template e delle linee guida per scrivere il tuo esempio.

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 +--- +
{{CSSRef("Selectors")}}
+ +
Il combinatore ">" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono figli diretti del primo selettore.
+ +
 
+ +
Al contrario, quando due selettori sono combinati con il selettore discendente, 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.
+ +
 
+ +

Sintassi

+ +
selettore1 > selettore2 {stili CSS }
+
+ +

Esempio

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<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>
+
+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}No change
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilità tra i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
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 +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà text-align indica come le linee di testo devono essere allineate tra loro. text-align non influisce sull'allineamento degli altri elementi, solo del loro contenuto in-line.

+ + + +

Sintassi

+ +
text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+
+ +

Valori

+ + + +

Esempi

+ +
p.left { text-align: left; }
+
+p.right { text-align: right; }
+
+ +

Esempi Live

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+e le altre righe di codice...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +

Note

+ + + +

Specifiche

+ + + +

Compatibilità coi browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima supportata
Firefox (Gecko)1.0
Internet Explorer3
Netscape4
Opera3.5
+ +

Vedi anche

+ +

text-indent, text-align, text-decoration, letter-spacing, word-spacing, text-transform, white-space, white-space-collapse, text-rendering, text-wrap, text-shadow, margin, margin-left, margin-right, vertical-align,

+ +

{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}

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 +--- +

 

+
+

Introdotto in Gecko 1.9.1

+
+ Si applica a Firefox 3.5, Thunderbird 3 e superiori
+
+

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS text-shadow accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle  text-decoration dell'elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
text-shadow: none | [<shadow>,]* <shadow>
+
+  dove <shadow> è:
+
+[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]
+
+
+

Valori

+
+ Edit section
+
+
+ <colore>
+
+ Opzionale, prima o dopo i valori di <lunghezza> . Se il <colore> non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà color dell'elemento. Gli altri browser potrebbero comportarsi diversamente. +
+ Nota: Specifica un colore per la compatibilità tra browser.
+
+
+ <lunghezza> <lunghezza>
+
+ Vedi <length> per le possibili unità di misura.
+ Questi valori di <lunghezza> stabiliscono la distanza dell'ombreggiatura. Il primo parametro <lunghezza> specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro <lunghezza> specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono 0 l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro <lunghezza>).
+
+
+
+ <lunghezza>
+
+ Opzionale. Il terzo parametro <lunghezza> specifica il raggio dell'effetto sfocato. Se non viene specificato, è 0. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.
+
+
+
+

Examples

+
+ Edit section
+

Esempio 1 Esempio 2 da Bugzilla

+ 
  h1 { text-shadow: black 0 0 0.4em; }
+
+ 
  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
+
+
+
+

Specifiche

+
+ Edit section
+

Nota: text-shadow era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica Text di CSS3 ha migliorato la sintassi.

+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet ExplorerNo
+ La versione 5.5  supporta il Filter Shadow e DropShadow
Firefox (Gecko)3.5 (1.9.1)
Opera9.5
Safari (WebKit)1.1 (100), ombreggiature multiple dalla versione 4.0 (528)
+

Al momento di scrittura:

+ +
+
+

Vedere anche

+
+ Edit section
+

-moz-box-shadow

+
+

 

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 +--- +

{{ CSSRef("CSS Transitions") }}

+ +

Sommario

+ +

La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

+ +

Questa curva di accelerazione viene definita utilizzando uno {{cssxref("<timing-function>")}} per ogni proprietà che ottiene una transizione.

+ +

È 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.

+ +

Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). 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.

+ +

{{cssinfo}}

+ +

Sintassi

+ +
Formal syntax: {{csssyntax("transition-timing-function")}}
+
+ +
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
+
+ +

Valori

+ +
+
<timing-function>
+
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") }}.
+
+ +

Esempi

+ +
+
+

transition-timing-function: ease

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: ease-in

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_easein",275,150)}}
+
+ +
+

transition-timing-function: ease-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_easeout",275,150)}}
+
+ +
+

transition-timing-function: ease-in-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_easeinout",275,150)}}
+
+
+ +
+

transition-timing-function: linear

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-start

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_stepstart",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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;
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.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);
+}
+
+ +
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);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }} 
+ +

Compatibilità tra Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1011.6{{ property_prefix("-o") }}
+ 12.10 #		{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Vedi Anche

+ + 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 +--- +
{{CSSRef}}
+ +

Il selettore di tipo CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.

+ +
/* Tutti gli elemnti <a>. */
+a {
+  color: red;
+}
+ +

Sintassi

+ +
element { style properties }
+
+ +

Esempio

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

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>
+
+ +

Risultato

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Nessun cambiamento
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.type")}}

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 +--- +
{{CSSRef}}
+ +

Il selettore universale CSS (*) corrisponde ad elementi di qualsiasi tipo.

+ +
/* Seleziona tutti gli elementi */
+* {
+  color: green;
+}
+ +

A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintassi

+ +
* { style properties }
+ +

L'asterisco è opzionale con i selettori semplici. Per esempio, *.warning e .warning sono equivalenti.

+ +

Esempio

+ +

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;
+}
+
+ +

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>
+ +

Risultati

+ +

{{EmbedLiveSample('Examples')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

{{Compat("css.selectors.universal")}}

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 +--- +
{{CSSRef}}
+ +

Riassunto

+ +

La proprietà CSS word-break è usata per specificare come (e se) andare a capo in mezzo alle parole.

+ +
{{cssinfo}}
+ +

Sintassi

+ +
Sintassi Formale: {{csssyntax("word-break")}}
+
+ +
word-break: normal
+word-break: break-all
+word-break: keep-all
+
+word-break: inherit
+
+ +

Valore

+ +
+
normal
+
Usa le regole di a-capo predefinite.
+
break-all
+
Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).
+
keep-all
+
Non permettere a-capo in mezzo ad una parola nei testi CJK.  Il comportamento nei testi non-CJK è lo stesso di normal.
+
+ +

Esempi

+ +

{{todo}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSS3 Text', '#word-break', 'word-break')}}{{Spec2('CSS3 Text')}} 
+ +

Compatibilità con i browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1.0{{CompatGeckoDesktop("15.0")}}5.5 [1]{{CompatNo}}{{CompatVersionUnknown}}
keep-all{{CompatNo}} [2]{{CompatGeckoDesktop("15.0")}}5.5{{CompatNo}}{{CompatNo}} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}18.0{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
keep-all{{CompatNo}} [2]{{CompatNo}} [2]{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}} [2]
+
+ +

[1] IE8 ha introdotto -ms-word-break come sinonimo di word-break. Si sconsiglia di usare il prefisso -ms- .

+ +

[2] Vedi {{webkitbug("123782")}}.

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 +--- +
{{CSSRef}}
+ +
La Proprietà CSS z-index specifica lo z-order di un elemento posizionato 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.
+ +
+ +
/* 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;
+
+ +

Per una box posizionata (ovvero con valore qualsiasi di position che non sia static) la proprietà z-index indica;

+ +
    +
  1.  Il livello di sovrapposizione della box nello stacking context corrente.
    2. +
  2.  Se la box stabilisce uno stacking context locale.
    3. +
+ +
<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>
+ +
+
* {
+  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;
+}
+
+ +

{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}

+ +

L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando absolute positioning. 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 z-index. 

+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprieta z-index e' specificata anche con le chiavi auto o <integer>.

+ +

Valori

+ +
+
auto
+
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
+
<integer>
+
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' 0. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.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;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.z-index")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf