From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/_colon_active/index.html | 166 +++++++++++ files/ca/web/css/_colon_any-link/index.html | 78 +++++ files/ca/web/css/_colon_any/index.html | 197 ++++++++++++ files/ca/web/css/_colon_checked/index.html | 252 ++++++++++++++++ files/ca/web/css/_colon_default/index.html | 145 +++++++++ files/ca/web/css/_colon_dir/index.html | 105 +++++++ files/ca/web/css/_colon_disabled/index.html | 182 ++++++++++++ files/ca/web/css/_colon_empty/index.html | 135 +++++++++ files/ca/web/css/_colon_enabled/index.html | 155 ++++++++++ files/ca/web/css/_colon_first-child/index.html | 203 +++++++++++++ files/ca/web/css/_colon_first-of-type/index.html | 159 ++++++++++ files/ca/web/css/_colon_first/index.html | 147 +++++++++ files/ca/web/css/_colon_focus-within/index.html | 146 +++++++++ files/ca/web/css/_colon_focus/index.html | 144 +++++++++ files/ca/web/css/_colon_fullscreen/index.html | 241 +++++++++++++++ files/ca/web/css/_colon_hover/index.html | 178 +++++++++++ files/ca/web/css/_colon_in-range/index.html | 110 +++++++ files/ca/web/css/_colon_indeterminate/index.html | 132 +++++++++ files/ca/web/css/_colon_invalid/index.html | 141 +++++++++ files/ca/web/css/_colon_lang/index.html | 149 ++++++++++ files/ca/web/css/_colon_last-child/index.html | 197 ++++++++++++ files/ca/web/css/_colon_last-of-type/index.html | 158 ++++++++++ files/ca/web/css/_colon_left/index.html | 122 ++++++++ files/ca/web/css/_colon_link/index.html | 150 ++++++++++ files/ca/web/css/_colon_not/index.html | 176 +++++++++++ files/ca/web/css/_colon_nth-child/index.html | 276 +++++++++++++++++ files/ca/web/css/_colon_nth-last-child/index.html | 217 ++++++++++++++ .../ca/web/css/_colon_nth-last-of-type/index.html | 141 +++++++++ files/ca/web/css/_colon_nth-of-type/index.html | 150 ++++++++++ files/ca/web/css/_colon_only-child/index.html | 199 +++++++++++++ files/ca/web/css/_colon_only-of-type/index.html | 142 +++++++++ files/ca/web/css/_colon_optional/index.html | 128 ++++++++ files/ca/web/css/_colon_out-of-range/index.html | 158 ++++++++++ .../ca/web/css/_colon_placeholder-shown/index.html | 166 +++++++++++ files/ca/web/css/_colon_read-only/index.html | 98 ++++++ files/ca/web/css/_colon_read-write/index.html | 98 ++++++ files/ca/web/css/_colon_required/index.html | 128 ++++++++ files/ca/web/css/_colon_right/index.html | 124 ++++++++ files/ca/web/css/_colon_root/index.html | 112 +++++++ files/ca/web/css/_colon_scope/index.html | 146 +++++++++ files/ca/web/css/_colon_target/index.html | 260 ++++++++++++++++ files/ca/web/css/_colon_valid/index.html | 74 +++++ files/ca/web/css/_colon_visited/index.html | 178 +++++++++++ .../css/_doublecolon_-moz-progress-bar/index.html | 55 ++++ .../_doublecolon_-moz-range-progress/index.html | 117 ++++++++ .../css/_doublecolon_-moz-range-thumb/index.html | 117 ++++++++ .../css/_doublecolon_-moz-range-track/index.html | 117 ++++++++ .../web/css/_doublecolon_-ms-fill-lower/index.html | 91 ++++++ .../web/css/_doublecolon_-ms-fill-upper/index.html | 91 ++++++ files/ca/web/css/_doublecolon_-ms-fill/index.html | 108 +++++++ files/ca/web/css/_doublecolon_-ms-thumb/index.html | 41 +++ files/ca/web/css/_doublecolon_-ms-track/index.html | 45 +++ .../_doublecolon_-webkit-progress-bar/index.html | 110 +++++++ .../_doublecolon_-webkit-progress-value/index.html | 109 +++++++ .../index.html | 35 +++ .../_doublecolon_-webkit-slider-thumb/index.html | 34 +++ files/ca/web/css/_doublecolon_after/index.html | 260 ++++++++++++++++ files/ca/web/css/_doublecolon_backdrop/index.html | 143 +++++++++ files/ca/web/css/_doublecolon_before/index.html | 329 +++++++++++++++++++++ files/ca/web/css/_doublecolon_cue/index.html | 78 +++++ .../web/css/_doublecolon_first-letter/index.html | 219 ++++++++++++++ .../ca/web/css/_doublecolon_first-line/index.html | 117 ++++++++ .../ca/web/css/_doublecolon_placeholder/index.html | 150 ++++++++++ files/ca/web/css/_doublecolon_selection/index.html | 160 ++++++++++ files/ca/web/css/at-rule/index.html | 77 +++++ files/ca/web/css/box-sizing/index.html | 287 ++++++++++++++++++ .../dominar_el_col.lapse_del_marge/index.html | 89 ++++++ files/ca/web/css/css_box_model/index.html | 163 ++++++++++ .../index.html" | 67 +++++ .../ca/web/css/css_flexible_box_layout/index.html | 111 +++++++ files/ca/web/css/height/index.html | 236 +++++++++++++++ files/ca/web/css/index.html | 65 ++++ files/ca/web/css/margin-bottom/index.html | 192 ++++++++++++ files/ca/web/css/margin-left/index.html | 219 ++++++++++++++ files/ca/web/css/margin-right/index.html | 218 ++++++++++++++ files/ca/web/css/margin-top/index.html | 156 ++++++++++ files/ca/web/css/margin-trim/index.html | 96 ++++++ files/ca/web/css/margin/index.html | 302 +++++++++++++++++++ files/ca/web/css/max-height/index.html | 223 ++++++++++++++ files/ca/web/css/max-width/index.html | 234 +++++++++++++++ files/ca/web/css/min-height/index.html | 211 +++++++++++++ files/ca/web/css/min-width/index.html | 257 ++++++++++++++++ files/ca/web/css/overflow-x/index.html | 192 ++++++++++++ files/ca/web/css/overflow-y/index.html | 196 ++++++++++++ files/ca/web/css/overflow/index.html | 273 +++++++++++++++++ .../web/css/overscroll-behavior-block/index.html | 133 +++++++++ .../web/css/overscroll-behavior-inline/index.html | 134 +++++++++ files/ca/web/css/overscroll-behavior/index.html | 106 +++++++ files/ca/web/css/padding-bottom/index.html | 149 ++++++++++ files/ca/web/css/padding-left/index.html | 147 +++++++++ files/ca/web/css/padding-right/index.html | 147 +++++++++ files/ca/web/css/padding-top/index.html | 149 ++++++++++ files/ca/web/css/padding/index.html | 255 ++++++++++++++++ .../ca/web/css/refer\303\251ncia_css/index.html" | 206 +++++++++++++ files/ca/web/css/selectors_css/index.html | 156 ++++++++++ .../index.html | 69 +++++ files/ca/web/css/selectors_d'atribut/index.html | 250 ++++++++++++++++ files/ca/web/css/selectors_de_classe/index.html | 139 +++++++++ .../ca/web/css/selectors_de_descendents/index.html | 170 +++++++++++ files/ca/web/css/selectors_de_fills/index.html | 135 +++++++++ .../css/selectors_de_germans_adjacents/index.html | 135 +++++++++ files/ca/web/css/selectors_de_tipus/index.html | 135 +++++++++ .../css/selectors_general_de_germans/index.html | 129 ++++++++ files/ca/web/css/selectors_id/index.html | 134 +++++++++ files/ca/web/css/selectors_universal/index.html | 176 +++++++++++ files/ca/web/css/sintaxi/index.html | 79 +++++ files/ca/web/css/visibility/index.html | 242 +++++++++++++++ files/ca/web/css/width/index.html | 204 +++++++++++++ 108 files changed, 16732 insertions(+) create mode 100644 files/ca/web/css/_colon_active/index.html create mode 100644 files/ca/web/css/_colon_any-link/index.html create mode 100644 files/ca/web/css/_colon_any/index.html create mode 100644 files/ca/web/css/_colon_checked/index.html create mode 100644 files/ca/web/css/_colon_default/index.html create mode 100644 files/ca/web/css/_colon_dir/index.html create mode 100644 files/ca/web/css/_colon_disabled/index.html create mode 100644 files/ca/web/css/_colon_empty/index.html create mode 100644 files/ca/web/css/_colon_enabled/index.html create mode 100644 files/ca/web/css/_colon_first-child/index.html create mode 100644 files/ca/web/css/_colon_first-of-type/index.html create mode 100644 files/ca/web/css/_colon_first/index.html create mode 100644 files/ca/web/css/_colon_focus-within/index.html create mode 100644 files/ca/web/css/_colon_focus/index.html create mode 100644 files/ca/web/css/_colon_fullscreen/index.html create mode 100644 files/ca/web/css/_colon_hover/index.html create mode 100644 files/ca/web/css/_colon_in-range/index.html create mode 100644 files/ca/web/css/_colon_indeterminate/index.html create mode 100644 files/ca/web/css/_colon_invalid/index.html create mode 100644 files/ca/web/css/_colon_lang/index.html create mode 100644 files/ca/web/css/_colon_last-child/index.html create mode 100644 files/ca/web/css/_colon_last-of-type/index.html create mode 100644 files/ca/web/css/_colon_left/index.html create mode 100644 files/ca/web/css/_colon_link/index.html create mode 100644 files/ca/web/css/_colon_not/index.html create mode 100644 files/ca/web/css/_colon_nth-child/index.html create mode 100644 files/ca/web/css/_colon_nth-last-child/index.html create mode 100644 files/ca/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/ca/web/css/_colon_nth-of-type/index.html create mode 100644 files/ca/web/css/_colon_only-child/index.html create mode 100644 files/ca/web/css/_colon_only-of-type/index.html create mode 100644 files/ca/web/css/_colon_optional/index.html create mode 100644 files/ca/web/css/_colon_out-of-range/index.html create mode 100644 files/ca/web/css/_colon_placeholder-shown/index.html create mode 100644 files/ca/web/css/_colon_read-only/index.html create mode 100644 files/ca/web/css/_colon_read-write/index.html create mode 100644 files/ca/web/css/_colon_required/index.html create mode 100644 files/ca/web/css/_colon_right/index.html create mode 100644 files/ca/web/css/_colon_root/index.html create mode 100644 files/ca/web/css/_colon_scope/index.html create mode 100644 files/ca/web/css/_colon_target/index.html create mode 100644 files/ca/web/css/_colon_valid/index.html create mode 100644 files/ca/web/css/_colon_visited/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_-ms-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/ca/web/css/_doublecolon_after/index.html create mode 100644 files/ca/web/css/_doublecolon_backdrop/index.html create mode 100644 files/ca/web/css/_doublecolon_before/index.html create mode 100644 files/ca/web/css/_doublecolon_cue/index.html create mode 100644 files/ca/web/css/_doublecolon_first-letter/index.html create mode 100644 files/ca/web/css/_doublecolon_first-line/index.html create mode 100644 files/ca/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ca/web/css/_doublecolon_selection/index.html create mode 100644 files/ca/web/css/at-rule/index.html create mode 100644 files/ca/web/css/box-sizing/index.html create mode 100644 files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html create mode 100644 files/ca/web/css/css_box_model/index.html create mode 100644 "files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" create mode 100644 files/ca/web/css/css_flexible_box_layout/index.html create mode 100644 files/ca/web/css/height/index.html create mode 100644 files/ca/web/css/index.html create mode 100644 files/ca/web/css/margin-bottom/index.html create mode 100644 files/ca/web/css/margin-left/index.html create mode 100644 files/ca/web/css/margin-right/index.html create mode 100644 files/ca/web/css/margin-top/index.html create mode 100644 files/ca/web/css/margin-trim/index.html create mode 100644 files/ca/web/css/margin/index.html create mode 100644 files/ca/web/css/max-height/index.html create mode 100644 files/ca/web/css/max-width/index.html create mode 100644 files/ca/web/css/min-height/index.html create mode 100644 files/ca/web/css/min-width/index.html create mode 100644 files/ca/web/css/overflow-x/index.html create mode 100644 files/ca/web/css/overflow-y/index.html create mode 100644 files/ca/web/css/overflow/index.html create mode 100644 files/ca/web/css/overscroll-behavior-block/index.html create mode 100644 files/ca/web/css/overscroll-behavior-inline/index.html create mode 100644 files/ca/web/css/overscroll-behavior/index.html create mode 100644 files/ca/web/css/padding-bottom/index.html create mode 100644 files/ca/web/css/padding-left/index.html create mode 100644 files/ca/web/css/padding-right/index.html create mode 100644 files/ca/web/css/padding-top/index.html create mode 100644 files/ca/web/css/padding/index.html create mode 100644 "files/ca/web/css/refer\303\251ncia_css/index.html" create mode 100644 files/ca/web/css/selectors_css/index.html create mode 100644 files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ca/web/css/selectors_d'atribut/index.html create mode 100644 files/ca/web/css/selectors_de_classe/index.html create mode 100644 files/ca/web/css/selectors_de_descendents/index.html create mode 100644 files/ca/web/css/selectors_de_fills/index.html create mode 100644 files/ca/web/css/selectors_de_germans_adjacents/index.html create mode 100644 files/ca/web/css/selectors_de_tipus/index.html create mode 100644 files/ca/web/css/selectors_general_de_germans/index.html create mode 100644 files/ca/web/css/selectors_id/index.html create mode 100644 files/ca/web/css/selectors_universal/index.html create mode 100644 files/ca/web/css/sintaxi/index.html create mode 100644 files/ca/web/css/visibility/index.html create mode 100644 files/ca/web/css/width/index.html (limited to 'files/ca/web/css') diff --git a/files/ca/web/css/_colon_active/index.html b/files/ca/web/css/_colon_active/index.html new file mode 100644 index 0000000000..ee066e1a03 --- /dev/null +++ b/files/ca/web/css/_colon_active/index.html @@ -0,0 +1,166 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudo-class + - Layout + - Reference + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :active representa un element (com un botó) que està sent activat per l'usuari. Quan s'usa un ratolí, l'"activació" normalment comença quan l'usuari pressiona el botó primari del ratolí i acaba quan es deixa anar. La pseudo-classe :active s'usa comunament en elements {{HTMLElement("a")}} i {{HTMLElement("button")}}, però també pot usar-se en altres elements.

+ +
/* Selects any <a> that is being activated */
+a:active {
+  color: red;
+}
+ +

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla :active després de totes les altres regles relacionades amb els enllaços, tal com ho defineix l'ordre LVHA-order: :link — :visited — :hover — :active.

+ +
Nota: En sistemes amb ratolins de múltiples botons, CSS 3 especifica que la pseudo-class :active només s'ha d'aplicar al botó primari; en ratolins destres, normalment és el botó més a l'esquerra.
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<a href="#">This link will turn lime while you click on it.</a>
+
+ +

CSS

+ +
a:link { color: blue; }          /* Unvisited links */
+a:visited { color: purple; }     /* Visited links */
+a:hover { background: yellow; }  /* User hovers */
+a:active { color: lime; }        /* Active links */
+
+ +

Resultat

+ +
{{EmbedLiveSample('Example')}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Sense canvis.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Sense canvis.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.05.01.0
Suport en elements no <a>1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}6.06.01.0
Suport en elements no <a>1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [1]
+
+ +

[1] Per defecte, Safari Mobile no utilitza l'estat {{cssxref(":active")}} a menys que hi hagi un controlador d'esdeveniments touchstart en l'element rellevant o en el {{HTMLElement("body")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_any-link/index.html b/files/ca/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..30d729e862 --- /dev/null +++ b/files/ca/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Experimental + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe CSS :any-link representa un element que actua com a àncora font d'un hiperenllaç, independentment de si s'ha visitat. En altres paraules, coincideix amb cada element {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} que té un atribut href. D'aquesta manera, es correspont amb tots els elements que coincideixen amb {{cssxref(":link")}} o {{cssxref(":visited")}}.

+ +
/*  Selecciona qualsevol element que coincideixi amb :link o :visited */
+:-any-link {
+  color: green;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Definició inicial
+ + + + + +

{{Compat("css.selectors.any-link")}}

diff --git a/files/ca/web/css/_colon_any/index.html b/files/ca/web/css/_colon_any/index.html new file mode 100644 index 0000000000..fa4bcea79c --- /dev/null +++ b/files/ca/web/css/_colon_any/index.html @@ -0,0 +1,197 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-classe :any() permet crear un selector que contingui múltiples opcions, algun dels quals seran aparellats. Aquesta és una alternativa més senzilla que repetir un selector sencer diverses vegades perquè un element dins d'ell varia.

+ +
/* Select any h2 inside a section, article, aside, or nav */
+/* Currently supported with -moz- and -webkit- prefixes */
+:-moz-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+:-webkit-any(section, article, aside, nav) h2 {
+  font-size: 4.5rem;
+}
+
+ +
Nota : Aquesta pseudo-classe està en curs de ser estandarditzada en CSS Selectors Level 4 sota el nom :matches(). És probable que la sintaxi i el nom de :-vendor-any() seran canviats perquè es reflecteixi en un futur proper.
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Valors

+ +
+
selector
+
Un selector. Això pot ser un selector simple o un selector múltiple compost de selectors simples CSS 3 i pot incloure el combinador descendent.
+
+ +
Nota: Els selectors no poden contenir pseudo-elements i l'únic combinador permès és el combinador descendent.
+ +

Exemples

+ +

Per exemple, el següent CSS:

+ +
/* 3 deep (or more) unordered lists use a square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Pot substituir-se per:

+ +
/* 3 deep (or more) unordered lists use a square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

No obstant això, no utilitzeu el següent: (Veure la secció sobre el rendiment més endavant.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notes

+ +

Aquesta propietat és particularment útil quan es tracta de seccions i encapçalaments en HTML5. Des {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} es poden niar, sense :any() , l'estil d'aquests perquè coincideixin entre si pot ser difícil.

+ +

Per exemple, sense :any(), donar estil a tot els elements {{HTMLElement("h1")}} a diferents profunditats podria ser molt complicat:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... don't even think about it*/
+
+ +

Usant :-any(), és molt més fàcil:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemes amb el rendiment i l'especificitat

+ +

Bug 561154 registra un problema amb Gecko en el qual l'especificitat de: :-moz-any() és incorrecta. La implementació actual (com Firefox 12) posa: :-moz-any() en la categoria de regles universals, la qual cosa significa que usar-ho com el selector dret serà més lent que usar un ID, una classe o una etiqueta com el selector dret.

+ +

Per exemple:

+ +
.a > :-moz-any(.b, .c)
+
+ +

és més lent que:

+ +
.a > .b, .a > .c
+
+ +

i el següent és més ràpid:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/ca/web/css/_colon_checked/index.html b/files/ca/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..1f0915eefc --- /dev/null +++ b/files/ca/web/css/_colon_checked/index.html @@ -0,0 +1,252 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :checked representa qualsevol radio (<input type="radio">), checkbox (<input type="checkbox">) o option ({{HTMLElement("option")}} en un element {{HTMLElement("select")}})   que està marcat o commutat a un estat on (activat).

+ +
/* Matches any checked/selected radio, checkbox, or option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

L'usuari pot activar aquest estat marcant/seleccionant un element o desactivar-ho desmarcant/deseleccionant l'element.

+ +
+

Nota: Com que els navegadors sovint tracten <option>s com a elements reemplaçats, el grau en què poden ser dissenyats amb la pseudo-class :checked varia d'un navegador a un altre.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Basic example

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="yes">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Alternar elements amb una casella de selecció oculta

+ +

En aquest exemple s'utilitza la pseudo-class :checked per permetre a l'usuari que alterni el contingut en funció de l'estat d'una casella de selecció (checkbox), tot sense utilitzar JavaScript.

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+
+ +

CSS

+ +
/* Oculta la casella de selecció (checkbox) */
+#expand-toggle {
+  display: none;
+}
+
+/* Oculta el contingut expandible per defecte */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Estil del botó */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Mostra el contingut ocult quan es marca la casella de selecció */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Estil del botó quan està marcada la casella de selecció */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

+ +

Galeria d'imatges

+ +

Podeu utilitzar la pseudo-class :checked per construir una galeria d'imatges amb imatges de grandària completa que només es mostrin quan l'usuari faci clic a una miniatura. Vegeu aquesta demostració com un possible exemple.

+ +
Nota: Per a un efecte anàleg, però basat en la pseudo-classe :hover i sense caixes de ràdio (radioboxes) ocultes, vegeu aquesta demostració, presa de la pàgina de referència :hover.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 Basic UI') }}Enllaç a Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{ CompatGeckoMobile(1.0) }}9.09.53.1
+
+ +

 

diff --git a/files/ca/web/css/_colon_default/index.html b/files/ca/web/css/_colon_default/index.html new file mode 100644 index 0000000000..1cec2992e7 --- /dev/null +++ b/files/ca/web/css/_colon_default/index.html @@ -0,0 +1,145 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :default representa qualsevol element de formulari que sigui el predeterminat entre un grup d'elements relacionats.

+ +

Aquest selector es pot utilitzar en els elements {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> i {{htmlelement("option")}}.

+ +
/* Selects any default <input> */
+input:default {
+  background-color: lime;
+}
+ +

Els elements agrupats que permeten seleccions múltiples també poden tenir múltiples valors predeterminats, és a dir, poden tenir diversos elements seleccionats inicialment. En aquest cas, tots els valors predeterminats es representen utilitzant la pseudo-classe :default. Per exemple, podeu aplicar un estil a les caselles de selecció predeterminades d'un grup de caselles de selecció.

+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="spring">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="spring">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="spring">Winter</label>
+
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Sense canvis.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica HTML associada i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Definició inicial, però sense la semàntica associada
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatGeckoDesktop("2.0")}}{{CompatNo}}10.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}10.05.0
+
diff --git a/files/ca/web/css/_colon_dir/index.html b/files/ca/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..75ce09caef --- /dev/null +++ b/files/ca/web/css/_colon_dir/index.html @@ -0,0 +1,105 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudo-class + - Experimental + - Reference +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-class CSS  :dir() coincideix amb elements basats en la direccionalidad del text contingut en ells

+ +
/* Selecciona qualsevol element amb text de dreta a esquerra */
+:dir(rtl) {
+  background-color: red;
+}
+ +

La pseudo-class :dir() utilitza només el valor semàntic de la direccionalitat, és a dir, el definit en el mateix document. No té en compte la direccionalitat de l'estil, és a dir, la direccionalitat establerta per les propietats CSS com {{cssxref("direction")}}.

+ +
+

Nota: Tingueu en compte que el comportament de la pseudo-class :dir() no és equivalent als selectors d'atribut [dir=…]. Aquest últim coincideix amb l'atribut HTML {{htmlattrxref("dir")}}, i ignora els elements que no ho tenen, fins i tot si hereten una direcció del seu pare. (De la mateixa manera, [dir=rtl] i [dir=ltr] no coincideixen amb el valor auto.) En canvi, :dir() coincideix amb el valor calculat pel {{glossary("user agent")}}, fins i tot si s'hereta.

+
+ +
+

Nota: En HTML, la direcció està determinada per l'atribut {{htmlattrxref("dir")}}. Altres tipus de document poden tenir mètodes diferents.

+
+ +

Sintaxi

+ +

La pseudo-class :dir() requereix un paràmetre, que representa la direccionalitat de text que voleu orientar.

+ +

Parametres

+ +
+
ltr
+
Direcciona els elements d'esquerra a dreta.
+
rtl
+
Direcciona els elements de dreta a esquerra.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Resultat

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Sense camvis.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definició inicial
+ + + +

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

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_disabled/index.html b/files/ca/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ded833befe --- /dev/null +++ b/files/ca/web/css/_colon_disabled/index.html @@ -0,0 +1,182 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-class  CSS :disabled representa qualsevol element deshabilitat. Un element queda deshabilitat si no es pot activar (seleccionar, fer clic, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat habilitat, en el qual es pot activar o acceptar l'enfocament.

+ +
/* Selecciona qualsevol <input> deshabilitat */
+input:disabled {
+  background: #ccc;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Aquest exemple mostra un formulari d'enviament bàsic. Utilitza l'esdeveniment JavaScript {{event("change")}} per permetre que l'usuari habiliti/deshabiliti els camps de facturació.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Shipping address</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Address">
+    <input type="text" placeholder="Zip Code">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Billing address</legend>
+    <label for="billing_is_shipping">Same as shipping address:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

JavaScript

+ +
// Wait for the page to finish loading
+document.addEventListener('DOMContentLoaded', function () {
+  // Attach `change` event listener to checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Select the billing text fields
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Toggle the billing text fields
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Sense canvis
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i els formularis.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Enllaços a Selectors Nivell 3
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

[1] Internet Explorer no reconeix :disabled en l'element {{HTMLElement("fieldset")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_empty/index.html b/files/ca/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..0c9743ad81 --- /dev/null +++ b/files/ca/web/css/_colon_empty/index.html @@ -0,0 +1,135 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :empty representa qualsevol element que no tingui fills. Els fills poden ser nodes d'elements o text (inclosos els espais en blanc). Els comentaris o les instruccions de processament no afecten si un element es considera buit o no.

+ +
/* Selecciona qualsevol <div> que no contingui cap contingut */
+div:empty {
+  background: lime;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

HTML

+ +
<div class="box"><!-- I will be lime. --></div>
+<div class="box">I will be pink.</div>
+<div class="box">
+    <!-- I will be pink because of the whitespace around this comment. -->
+</div>
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 300, 80)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Sense canvis
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Definició inicial
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}9.09.53.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}9.510.03.1
+
diff --git a/files/ca/web/css/_colon_enabled/index.html b/files/ca/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..0b6d579968 --- /dev/null +++ b/files/ca/web/css/_colon_enabled/index.html @@ -0,0 +1,155 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :enabled representa qualsevol element habilitat. Un element està habilitat si es pot activar (seleccionar, fer clic en, teclejar, etc.) o acceptar l'enfocament. L'element també té un estat de deshabilitat, en el qual no es pot activar o acceptar l'enfocament.

+ +
/*  Selecciona qualsevol <input> habilitat */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El següent exemple fa que el color del text i botó {{htmlElement("input")}} sigui verd quan està habilitat, i gris quan està deshabilitat. Això ajuda a l'usuari a comprendre amb quins elements pot interactuar.

+ +
+

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 550, 95)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica per a HTML i formularis.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Cap canvi .
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Enllaços a selectors Nivell 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.09.53.1
+
+ +

Vegeu també

+ + +
diff --git a/files/ca/web/css/_colon_first-child/index.html b/files/ca/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..7a226ce95e --- /dev/null +++ b/files/ca/web/css/_colon_first-child/index.html @@ -0,0 +1,203 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first-child representa el primer element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui el primer element entre els seus germans */
+p:first-child {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultat

+ +

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

+ +

Disseny d'una llista

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Cap canvi.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7[1]{{CompatOpera(9.5)}}4
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[2]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}7[1]{{CompatOperaMobile(10)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("51")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza els estils quan s'afegeixen elements dinàmicament. A Internet Explorer 8, si un element s'insereix de forma dinàmica fent clic en un enllaç, l'estil del primer fill no s'aplica fins que l'enllaç no ha perdut el focus.

+ +

[2] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_first-of-type/index.html b/files/ca/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..8b2551b725 --- /dev/null +++ b/files/ca/web/css/_colon_first-of-type/index.html @@ -0,0 +1,159 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first-of-type representa el primer element d'aquest tipus entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui el primer element d'aquest tipus entre els seus germans */
+p:first-of-type {
+  color: red;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Disseny del primer paràgraf

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_the_first_paragraph')}}

+ +

Elements niats

+ +

Aquest exemple mostra com es poden orientar els elements niats. Tingueu en compte que el selector universal (*) està implicat quan no s'escriu cap selector senzill.

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_first/index.html b/files/ca/web/css/_colon_first/index.html new file mode 100644 index 0000000000..f71aa1953b --- /dev/null +++ b/files/ca/web/css/_colon_first/index.html @@ -0,0 +1,147 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :first , utilitzada amb la regla at (at-rule) {{cssxref("@page")}}, representa la primera pàgina d'un document imprès.

+ +
/* Selecciona la primera pàgina en imprimir. */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
+

Nota: No poden canviar totes les propietats CSS amb aquesta pseudo-class. Només es poden canviar els marges, {{cssxref("orphans")}}, {{cssxref("widows")}}, i els salts de pàgina del document. A més, només es poden utilitzar unitats de longitud absoluta en definir els marges. Totes les altres propietats seran ignorades.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>First Page.</p>
+<p>Second Page.</p>
+<button>Print!</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").onclick = function(){ window.print() }
+
+ +

Resultat

+ +

Premeu el botó "Print!" per imprimir l'exemple. Les paraules en la primera pàgina han d'estar en algun lloc al voltant del centre, mentre que altres pàgines tindran els seus continguts en la posició per defecte.

+ +

{{ EmbedLiveSample('Example', '80%', '150px') }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Cap canvi
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}8.09.2{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_focus-within/index.html b/files/ca/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..ae6393853d --- /dev/null +++ b/files/ca/web/css/_colon_focus-within/index.html @@ -0,0 +1,146 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :focus-within representa un element que ha rebut focus o conté un element que ha rebut focus. En altres paraules, representa un element que està aparellat amb la pseudo-class {{cssxref(":focus")}} o té un descendent que està aparellat amb :focus. (Això inclou descendents en arbres d'ombres.)

+ +
/* Selecciona un <div> quan un dels seus descendents està enfocat */
+div:focus-within {
+  background: cyan;
+}
+ +

Aquest selector és útil, per fer un exemple comú, per a ressaltar un contenidor complet {{htmlElement("form")}} quan l'usuari se centra en un dels seus camps {{htmlElement("input")}}.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

En aquest exemple, el formulari rebrà estils de color especials quan l'entrada de text rep el focus.

+ +

HTML

+ +
<p>Try typing into this form.</p>
+
+<form>
+  <label for="given_name">Given Name:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Family Name:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome("60")}}{{CompatNo}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatChrome("60")}}{{CompatChrome("60")}}{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}{{CompatOpera("47")}}10.3
+
+ +

[1] Aquesta característica encara no està implementada. Consulteu la sol·licitud de millora relacionada.

+ +

[2] Aquesta característica es va implementar al {{bug("1176997")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_focus/index.html b/files/ca/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..eb3b9ec2b9 --- /dev/null +++ b/files/ca/web/css/_colon_focus/index.html @@ -0,0 +1,144 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :focus representa un element (com ara una entrada de formulari) que ha rebut el focus. Generalment, s'activa quan l'usuari fa clic o toca un element o el selecciona amb la tecla "tab" del teclat.

+ +
/* Selecciona qualsevol <input> quan s'enfoca */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Aquesta pseudo-class s'aplica només a l'element enfocat. Utilitzeu {{cssxref(":focus-within")}} si voleu seleccionar un element que contingui un element enfocat.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

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

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Defineix la semàntica específica d'HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}8.06.01.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_fullscreen/index.html b/files/ca/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..f1a7bad43f --- /dev/null +++ b/files/ca/web/css/_colon_fullscreen/index.html @@ -0,0 +1,241 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Full-screen + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

La pseudo-class CSS :fullscreen representa un element que es mostra quan el navegador està en mode de pantalla completa (fullscreen mode).

+ +
/* Selecciona qualsevol <div> que es mostri en mode de pantalla completa */
+/* S'ha implementat a Firefox, WebKit / Chrome i Edge / IE amb prefixos; Edge també és compatible amb la versió no prefixada */
+div:-moz-full-screen {
+  background-color: pink;
+}
+
+div:-webkit-full-screen {
+  background-color: pink;
+}
+
+div:fullscreen {
+  background-color: pink;
+}
+ +
+

Note: L'especificació del W3C utilitza la paraula única :fullscreen,  - sense guió -, però ambdues implementacions experimentals de WebKit i Gecko utilitzen una variant prefixada amb dues paraules separades per un guió: :-webkit-full-screen i :-moz-full-screen, respectivament. Microsoft Edge i Internet Explorer utilitzen la convenció estàndard: :fullscreen i :-ms-fullscreen, respectivament.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div id="fullscreen">
+  <h1>:fullscreen Demo</h1>
+  <p>This text will become big and red when the browser is in fullscreen mode.</p>
+  <button id="fullscreen-button">Enter Fullscreen</button>
+</div>
+
+ + + +

CSS

+ +
#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen > h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen > p {
+  color: darkred;
+}
+
+#fullscreen:fullscreen > button {
+  display: none;
+}
+
+ +

Resultats

+ +

{{ LiveSampleLink('Example', "Feu clic aquí per provar aquest exemple.") }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic15.0 {{property_prefix("-webkit")}}[1]12{{CompatGeckoDesktop("9.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("47.0")}}[2]		11 {{property_prefix("-ms")}}[3]{{CompatUnknown}}6.0 {{property_prefix("-webkit")}}[1]
Seleccionar tots els elements en la pila de la pantalla completa{{CompatUnknown}}12{{CompatGeckoDesktop(43)}}11{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}
+ {{CompatGeckoDesktop("47.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Seleccionar tots els elements en la pila de la pantalla completa{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Tant les versions prefixades de WebKit com Gecko tenen un guió entre full i screen, però la proposta de W3C utilitza una sola paraula: :fullscreen, :-webkit-full-screen, :-moz-full-screen.

+ +

[2] Gecko 47.0 {{geckoRelease("47.0")}} implementa la pseudo-classe sense prefix darrere de la preferència full-screen-api.unprefix.enabled, per defecte a false.

+ +

[3] Internet Explorer utilitza el prefix -ms però no té un guió entre full i screen: :-ms-fullscreen.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_hover/index.html b/files/ca/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..7d6cf260d5 --- /dev/null +++ b/files/ca/web/css/_colon_hover/index.html @@ -0,0 +1,178 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :hover coincideix quan l'usuari interactua amb un element amb un dispositiu apuntador, però no necessàriament ho activa. Generalment s'activa quan l'usuari es desplaça sobre un element amb el cursor (punter de ratolí).

+ +
/* Selecciona qualsevol element <a> quan "es deplaça" */
+a:hover {
+  color: orange;
+}
+ +

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{ cssxref(":link") }}, {{ cssxref(":visited") }} o {{ cssxref(":active") }}) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla :hover després de les regles :link i :visited però abans d'una regla :active segons el definit per l'ordre LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-class :hover és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class :hover pot ser que mai coincideixi, només coincidir per un moment després de tocar un element o bé continuarà coincidint fins i tot després que l'usuari hagi deixat de tocar i fins que l'usuari toqui un altre element. Els desenvolupadors web han d'assegurar-se que el contingut sigui accessible en dispositius amb capacitats de desplaçaments limitats o inexistents.
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

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

CSS

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

Resultat

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Galeria d'imatges

+ +

Podeu utilitzar la pseudo-class :hover per construir una galeria d'imatges amb imatges en grandària real que es mostrin només quan el ratolí es mogui sobre una miniatura. Vegeu aquesta demostració per a un possible exemple.

+ +
Nota: Per a un efecte anàleg, però basat en la pseudo-class :checked (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu aquesta demostració , presa de la pàgina de referència :checked.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Es permet a :hover ser aplicat a qualsevol pseudo-element.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Cap canvi significatiu .
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
per elements <a>0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}4.04.02.0.4 (419)
+ various bugs before
per a tots els elements0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}7.0[1][2]7.02.0.4 (419)
+ various bugs before
per pseudo-element{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(28) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[3]
+
+ +

[1] En IE8-11, en passar per sobre d'un element i després desplaçar-se cap amunt/cap baix sense moure el punter, deixarà l'element en estat :hover fins que es mogui el punter. Veure IE bug 926665.

+ +

[2] En IE9 (i possiblement abans), si un {{HTMLElement("table")}} té un pare amb un no-auto {{cssxref("width")}} i {{cssxref("overflow-x")}}: auto;, i {{HTMLElement("table")}} té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils {{cssxref(":hover")}} establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de {{HTMLElement("table")}}. Aquí hi ha una demostració en viu que activa l'error. Una solució provisional per a l'errada és establir min-height: 0%; en l'element pare de la taula (i la unitat % ha de ser especificada; 0 i 0px no funcionen). Hi va haver un error creat com jQuery ticket #10854, però s'ha tancat perquè no es considera un error de jQuery.

+ +

[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un element que es pot fer clic  fa que l'element entri en l'estat :hover. L'element romandrà a l'estat :hover fins que un element diferent hagi entrat en l'estat :hover.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_in-range/index.html b/files/ca/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..a8fd5171be --- /dev/null +++ b/files/ca/web/css/_colon_in-range/index.html @@ -0,0 +1,110 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :in-range representa un element {{htmlelement("input")}} en què el seu valor actual està dins dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.

+ +
/* Selecciona qualsevol <input>, però només quan té un rang especificat, i el seu valor està dins d'aquest rang */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Aquesta pseudo-class és útil per donar a l'usuari una indicació visual que el valor actual, d'un camp, està dins dels límits permesos.

+ +
Nota Aquesta pseudo-class només s'aplica als elements que tenen (i poden tenir) una limitació de rang. Mancant tal limitació, l'element no pot estar "en rang" ni "fora de rang".
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

Resultat

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Defineix quan :in-range coincideix en elements HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
{{Compat("css.selectors.in-range")}}
+ +

 

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_indeterminate/index.html b/files/ca/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..c9fb4578e5 --- /dev/null +++ b/files/ca/web/css/_colon_indeterminate/index.html @@ -0,0 +1,132 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :indeterminate representa qualsevol element de formulari, l'estat del qual, sigui indeterminat.

+ +
/* Selecciona qualsevol <input> l'estat del qual sigui indeterminat */
+input:indeterminate {
+  background: lime;
+}
+ +

Els elements als quals apunta aquest selector són:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Checkbox & radio button

+ +

Aquest exemple aplica estils especials a les etiquetes associades a camps de formulari indeterminats.

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">This label starts out lime.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">This label starts out lime.</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

Progress bar

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Sense canvis
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i la validició de restriccions
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Defineix la pseudo-class, però no la semàntica associada.
+ + + +
+ + +

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

+
diff --git a/files/ca/web/css/_colon_invalid/index.html b/files/ca/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..8e8b1ee626 --- /dev/null +++ b/files/ca/web/css/_colon_invalid/index.html @@ -0,0 +1,141 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :invalid representa qualsevol element {{HTMLElement("input")}} o un altre {{HTMLElement("form")}} en que el seu contingut no es valida.

+ +
/*  Selecciona qualsevol <input> invàlit */
+input:invalid {
+  background-color: pink;
+}
+ +

Aquesta pseudo-class és útil per ressaltar errors de camp per a l'usuari.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Aquest exemple presenta una forma senzilla que acoloreix elements en verd quan es validen i vermells quan no ho fan.

+ +

HTML

+ +
<form>
+  <label for="url_input">Enter a URL:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Enter an email address:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 600, 120)}}

+ +

Notes

+ +

Botons de ràdio

+ +

Si un botó de ràdio qualsevol en un grup és required, la pseudo-class :invalid s'aplica a tots ells si no se selecciona cap dels botons del grup. (Els botons de ràdio agrupats comparteixen el mateix valor per al seu atribut name).

+ +

Gecko per defecte

+ +

Per defecte, Gecko no aplica un estil a la pseudo-class :invalid. Tanmateix, aplica un estil (un "resplendor" vermell usant la propietat {{Cssxref("box-shadow")}}) a la pseudo-class {{cssxref(":-moz-ui-invalid")}} que s'aplica en un subconjunt de casos per :invalid.

+ +

Podeu desactivar la brillantor usant el següent CSS, o anul·lar-ho completament per alterar l'aparença dels camps no vàlids:

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica d'HTML i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
+ + +

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

+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_lang/index.html b/files/ca/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..b30ec5855f --- /dev/null +++ b/files/ca/web/css/_colon_lang/index.html @@ -0,0 +1,149 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :lang() coincideix amb elements basats en l'idioma en què estan definits.

+ +
/* Selecciona qualsevol <p> en Anglès (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Nota: En HTML, el llenguatge està determinat per una combinació de l'atribut {{htmlattrxref ("lang")}}, l'element {{HTMLElement ("meta")}}, i possiblement per informació del protocol (com ara encapçalaments HTTP. Per a altres tipus de documents, hi pot haver altres mètodes de document per determinar el llenguatge

+
+ +

Sintaxi

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Paràmetre

+ +
+
<language-code>
+
Un {{cssxref("<string>")}} representant l'idioma en el qual us voleu dirigir. Els valors acceptables s'especifiquen en l'especificació HTML.
+
+ +

Exemple

+ +

En aquest exemple, la pseudo-classe :lang() s'utilitza per a que coincideixi amb els pares dels elements de la cita ({{htmlElement("q")}}) usant combinadors fills. Tingueu en compte que això no il·lustra l'única manera de fer-ho, i que el millor mètode a utilitzar depèn del tipus de document. També tingueu en compte que els valors {{glossary("Unicode")}} s'utilitzen per especificar alguns dels caràcters especials de la cita.

+ +

HTML

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

CSS

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Cap canvi.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Cap canvi significatiu.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}8.08.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}8.08.03.1
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_last-child/index.html b/files/ca/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..9d449b660b --- /dev/null +++ b/files/ca/web/css/_colon_last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :last-child representa l'últim element entre un grup d'elements germans.

+ +
/* Selecciona qualsevol <p> que sigui l'últim element entre els seus germans */
+p:last-child {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <p>This text isn't selected.</p>
+  <p>This text is selected!</p>
+</div>
+
+<div>
+  <p>This text isn't selected.</p>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultat

+ +

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

+ +

Disseny d'una llista

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.0{{CompatOpera(9.5)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[1]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.0{{CompatOperaMobile(10)}}3.2
No es requereix pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[1]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

 

+ +

[1] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_last-of-type/index.html b/files/ca/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..b5f1844d2e --- /dev/null +++ b/files/ca/web/css/_colon_last-of-type/index.html @@ -0,0 +1,158 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :last-of-type representa l'últim element del seu tipus entre un grup d'elements germa.

+ +
/* Selecciona qualsevol <p> que sigui l'últim element del seu tipus entre els seus germans */
+p:last-of-type {
+  color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels selectors de nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

Disseny de l'últim paràgraf

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Styling_the_last_paragraph')}}

+ +

Elements niats

+ +

Aquest exemple mostra com es poden dirigir els elements niats. Tingueu en compte que el selector universal selector universal (*) està implícit quan no s'escriu un selector simple .

+ +

HTML

+ +
<article>
+  <div>This `div` is first.</div>
+  <div>This <span>nested `span` is last</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Nested_elements', 500)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Veure també

+ + diff --git a/files/ca/web/css/_colon_left/index.html b/files/ca/web/css/_colon_left/index.html new file mode 100644 index 0000000000..73fb3d65c5 --- /dev/null +++ b/files/ca/web/css/_colon_left/index.html @@ -0,0 +1,122 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :left, usada amb la regla at {{cssxref("@page")}} , representa totes les pàgines de l'esquerra d'un document imprès.

+ +
/* Selects any left-hand pages when printing */
+@page :left {
+  margin: 2in 3in;
+}
+ +

Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina {{Cssxref(":right")}}; si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina :left.

+ +
+

Nota: No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}Sense canvis.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}8.09.2{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_link/index.html b/files/ca/web/css/_colon_link/index.html new file mode 100644 index 0000000000..af971fb36b --- /dev/null +++ b/files/ca/web/css/_colon_link/index.html @@ -0,0 +1,150 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:link' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :link representa un element que encara no ha estat visitat. S'adapta a tots els no visitats {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} element que té un atribut href.

+ +
/* Selecciona qualsevol <a> que encara no s'hagi visitat */
+a:link {
+  color: red;
+}
+ +

Els estils definits per la pseudo-class :link seran anul·lats per qualsevol pseudo-class relacionada amb un enllaç posterior ({{cssxref(":active")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tingui almenys la mateixa especificitat. Per donar un estil apropiat als enllaços, poseu la regla :link davant de totes les altres regles relacionades amb els enllaços, segons el definit per l'ordre LVHA: :link — :visited — :hover — :active.

+ +
+

Nota: Utilitzeu {{cssxref (":any-link")}} per seleccionar un element independentment de si s'ha visitat o no.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Per defecte, la majoria dels navegadors apliquen un valor {{cssxref("color")}} especial als enllaços visitats. Per tant, els enllaços que vnguin a continuació probablement tinguin colors de fonts especials només abans de visitar-los. (Després d'això, haureu d'esborrar l'historial del navegador per tornar-los a veure). Tanmateix, és probable que els valors de {{cssxref("background-color")}} quedin, ja que la majoria dels navegadors no estableixen aquesta propietat als enllaços visitats de forma predeterminada.

+ +

HTML

+ +
<a href="#ordinary-target">This is an ordinary link.</a><br>
+<a href="">You've already visited this link.</a><br>
+<a>Placeholder link (won't get styled)</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Sense canvis.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Aixecar la restricció només per aplicar-lo a l'element {{HTMLElement ("a")}}.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_not/index.html b/files/ca/web/css/_colon_not/index.html new file mode 100644 index 0000000000..2c0171e00b --- /dev/null +++ b/files/ca/web/css/_colon_not/index.html @@ -0,0 +1,176 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :not() representa elements que no coincideixen amb una llista de selectors. Atès que impedeix que es seleccionin elements específics, es coneix com a pseudo-class de negació.

+ +
/* Selecciona qualsevol element que NO sigui un paràgraf */
+:not(p) {
+  color: blue;
+}
+ +
+

Notes:

+ + +
+ +

Sintaxi

+ +

La pseudo-class :not() requereix una llista separada per comes d'un o més selectors com a argument. La llista no ha de contenir un altre selector de negació o un pseudo-element.

+ +
+

La capacitat d'enumerar més d'un selector és experimental i encara no està àmpliament suportada.

+
+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>I am a paragraph.</p>
+<p class="fancy">I am so very fancy!</p>
+<div>I am NOT a paragraph.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* <p> elements that are not in the class `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elements that are not <p> elements */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elements that are not <div> or <span> elements */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elements that are not `.crazy` or `.fancy` */
+/* Note that this syntax is not well supported yet. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}{{ Spec2('CSS4 Selectors') }}Estén el seu argument per permetre a alguns selectors no simples.
{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}{{ Spec2('CSS3 Selectors') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.09.53.2
Arguments estesos{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.010.03.2
Arguments estesos{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0
+
diff --git a/files/ca/web/css/_colon_nth-child/index.html b/files/ca/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..fee9b30c51 --- /dev/null +++ b/files/ca/web/css/_colon_nth-child/index.html @@ -0,0 +1,276 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-child() CSS coincideix amb un o més elements basats en la seva posició entre un grup de germans.

+ +
/* Selecciona cada quart element entre qualsevol grup de germans */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Sintaxi

+ +

La pseudo-class nth-child s'especifica amb un únic argument, que representa el patró per als elements coincidents.

+ +

Valors de paraules clau

+ +
+
odd
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc.
+
even
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc.
+
+ +

Notació funcional

+ +
+
<An+B>
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element és 1. Els valors A i B han de ser {{cssxref("<integer>")}}s.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple de selectors

+ +
+
tr:nth-child(odd) or tr:nth-child(2n+1)
+
Representa les files imparells d'una taula HTML: 1, 3, 5, etc.
+
tr:nth-child(even) or tr:nth-child(2n)
+
Representa les files parells d'una taula HTML: 2, 4, 6, etc.
+
:nth-child(5n)
+
Representa elements 5, 10, 15, etc.
+
:nth-child(3n+4)
+
Representa elements 4, 7, 10, 13, etc.
+
:nth-child(-n+3)
+
Representa els tres primers elements entre un grup de germans.
+
p:nth-child(n)
+
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p .
+
p:nth-child(1) or p:nth-child(0n+1)
+
Representa cada <p> aquest és el primer element entre un grup de germans. Això és el mateix que el selector {{cssxref(":first-child")}}.
+
+ +

Exemple detallat

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Afegeix la sintaxi del <selector> i especifica que els elements coincidents no són necessaris per tenir un pare.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatOpera(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[3]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}[2]9.0{{CompatOperaMobile(9.5)}}[1]3.1
sintaxi del <selector>{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[3]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Opera no pot gestionar la inserció dinàmica dels elements

+ +

[2] Gecko encara no implementa aquesta funció. Vegeu {{bug(854148)}}.

+ +

[3] Vegeu {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-last-child/index.html b/files/ca/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..44fed32a4d --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,217 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-last-child() coincideix amb un o més elements en funció de la seva posició entre un grup de germans, comptant des del final.

+ +
/* Selecciona cada quart element entre qualsevol grup de germans, comptant enrere des de l'últim */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

Nota: Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-child")}}, excepte que compta els elements a l'inrevés des del final i no des del començament.

+
+ +

Sintaxi

+ +

The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

+ +

Valors de paraules clau

+ +
+
odd
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc., comptant des del final.
+
even
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc., comptant des del final.
+
+ +

Notació funcional

+ +
+
<An+B>
+
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element, comptant des del final, és 1. Els valors A i B han de ser dos {{cssxref("<integer>")}}s.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple de selectors

+ +
+
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
+
Representa les files imparells d'una taula HTML: 1, 3, 5, etc., comptant des del final.
+
tr:nth-last-child(even) or tr:nth-last-child(2n)
+
Representa les files parells d'una taula HTML: 2, 4, 6, etc., comptant des del final.
+
:nth-last-child(5n)
+
Representa els elements 5, 10, 15, etc., comptant des del final.
+
:nth-last-child(3n+4)
+
Representa els elements 4, 7, 10, 13, etc., comptant des del final.
+
:nth-last-child(-n+3)
+
Representa els tres últims elements entre un grup de germans.
+
p:nth-last-child(n)
+
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p.
+
p:nth-last-child(1) or p:nth-last-child(0n+1)
+
Representa cada <p> que és el primer element d'un grup de germans comptant des del final. Això és el mateix que el selector {{cssxref(":last-child")}}.
+
+ +

Exemple de taula

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>First line</td>
+    </tr>
+    <tr>
+      <td>Second line</td>
+    </tr>
+    <tr>
+      <td>Third line</td>
+    </tr>
+    <tr>
+      <td>Fourth line</td>
+    </tr>
+    <tr>
+      <td>Fifth line</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* Selects the last three elements */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Table_example', 300, 150)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatOpera(9.5)}}3.2
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoDesktop("51")}}[1]{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.0{{CompatOperaMobile(10)}}3.2
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatGeckoMobile("51")}}[1]{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

[1] Veure {{bug(1300374)}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-last-of-type/index.html b/files/ca/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..64fbeee193 --- /dev/null +++ b/files/ca/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,141 @@ +--- +title: ':nth-last-of-type' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-last-of-type() coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans, comptant des del final.

+ +
/* Selecciona cada quart element <p> entre qualsevol grup de germans, comptant enrere des de l'últim */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

Nota: Aquesta pseudo-class és bàsicament la mateixa que {{Cssxref(":nth-of-type")}}, excepte que compta els elements a l'inrevés des del final i no cap a endavant des del principi.

+
+ +

Sintaxi

+ +

La pseudo-class nth-last-of-type s'especifica amb un sol argument, representa el patró per als elements coincidents, comptant des del final.

+ +

Vegeu {{Cssxref(":nth-last-child")}} per obtenir una explicació més detallada de la seva sintaxi.

+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<div>
+  <span>This is a span.</span>
+  <span>This is another span.</span>
+  <em>This is emphasized.</em>
+  <span>Wow, this span gets limed!!!</span>
+  <strike>This is struck through.</strike>
+  <span>Here is one last span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_nth-of-type/index.html b/files/ca/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..c309e14b41 --- /dev/null +++ b/files/ca/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,150 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :nth-of-type() coincideix amb un o més elements d'un tipus determinat, en funció de la seva posició entre un grup de germans.

+ +
+

There is no `:nth-of-type(0)`!

+ +

+
+ +
/* Selecciona cada quart element <p> entre qualsevol grup de germans */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Sintaxi

+ +

La pseudo-class nth-of-type s'especifica amb un sol argument, que representa el patró per als elements coincidents.

+ +

Veure {{Cssxref(":nth-child")}} per obtenir una explicació més detallada de la seva sintaxi.

+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<div>
+  <div>This element isn't counted.</div>
+  <p>First paragraph. (left aligned)</p>
+  <p>Second paragraph. (right aligned)</p>
+  <div>This element isn't counted.</div>
+  <p>Third paragraph. (left aligned)</p>
+</div>
+ +

CSS

+ +
/* Align odd paragraphs to the left */
+p:nth-of-type(2n+1) {
+  text-align: left;
+}
+
+/* Align even paragraphs to the right */
+p:nth-of-type(2n) {
+  text-align: right;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example', 250, 200)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.09.53.1
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_only-child/index.html b/files/ca/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ed94d4791a --- /dev/null +++ b/files/ca/web/css/_colon_only-child/index.html @@ -0,0 +1,199 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :only-child representa un element sense germans. És el mateix que :first-child:last-child o :nth-child(1):nth-last-child(1), però amb una menor especificitat.

+ +
/* Selecciona cada <p>, però només si és l'únic fill del seu pare */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<main>
+  <div>
+    <i>I am a lonely only child.</i>
+  </div>
+
+  <div>
+    <i>I have siblings.</i><br>
+    <b>So do I!</b><br>
+    <span>I also have siblings, <span>but this is an only child.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Basic_example','100%',180)}}

+ +

Un exemple de llista

+ +

HTML

+ +
<ol>
+  <li>First
+    <ul>
+      <li>This list has just one element.
+    </ul>
+  </li>
+  <li>Second
+    <ul>
+      <li>This list has three elements.
+      <li>This list has three elements.
+      <li>This list has three elements.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('A_list_example', '100%', 210)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic2{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.8)}}9{{CompatOpera(9.5)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.8)}}9{{CompatOperaMobile(10)}}3.1
No es requereix cap pare{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_only-of-type/index.html b/files/ca/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..55dab9d76a --- /dev/null +++ b/files/ca/web/css/_colon_only-of-type/index.html @@ -0,0 +1,142 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :only-of-type representa un element que no té germans del mateix tipus.

+ +
/* Selecciona cada <p>, però només si és l'únic element <p> dins del seu pare */
+p:only-of-type {
+  background-color: lime;
+}
+ +
+

Nota: Com es va definir originalment, l'element seleccionat havia de tenir un pare. A partir dels Selectores Nivell 4, això ja no és necessari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<main>
+  <div>I am `div` #1.</div>
+  <p>I am the only `p` among my siblings.</p>
+  <div>I am `div` #2.</div>
+  <div>I am `div` #3.
+    <i>I am the only `i` child.</i>
+    <em>I am `em` #1.</em>
+    <em>I am `em` #2.</em>
+  </div>
+</main>
+
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}9.010.03.2
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_optional/index.html b/files/ca/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..0437cca6c0 --- /dev/null +++ b/files/ca/web/css/_colon_optional/index.html @@ -0,0 +1,128 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :optional representa qualsevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que no té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.

+ +
/*  Selecciona qualsevol <input> opcional */
+input:optional {
+  border: 1px dashed black;
+}
+ +

Aquesta pseudo-class és útil per als camps d'estil que no són obligatoris per enviar en un formulari.

+ +
+

Nota: La pseudo-class {{cssxref(":required")}} selecciona els camps de formulari obligatoris.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Veure {{ cssxref(":invalid") }} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica d'HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Defineix la pseudo-classe, però no la semàntica associada.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_out-of-range/index.html b/files/ca/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..797063240d --- /dev/null +++ b/files/ca/web/css/_colon_out-of-range/index.html @@ -0,0 +1,158 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :out-of-range representa un element {{htmlelement("input")}} el valor actual del qual està fora dels límits de rang especificats pels atributs {{htmlattrxref("min", "input")}} i {{htmlattrxref("max","input")}}.

+ +
/* Selecciona qualsevol <input>,  però només quan té un rang especificat, i el seu valor està fora d'aquest rang */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

Aquesta pseudo-class és útil per proporcionar a l'usuari una indicació visual de que el valor actual d'un camp està fora dels límits permesos.

+ +
Nota: Aquesta pseudo-class només s'aplica als elements que tenen (i poden prendre) una limitació de rang. A falta d'aquesta limitació, l'element no pot ser "dins del rang" ni "fora de rang".
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

Resultat

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Defineix quan :out-of-range coincideix en elements HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport en <input>10.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatNo()}}11.05.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport en <input>2.3{{CompatVersionUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_placeholder-shown/index.html b/files/ca/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..3c0eeb091b --- /dev/null +++ b/files/ca/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,166 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-class CSS :placeholder-shown representa qualsevol element {{htmlElement("input")}} o {{htmlElement("textarea")}} que actualment mostra text de marcador de posició.

+ +
/* Selecciona qualsevol element amb un marcador de posició actiu */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example", 200, 60)}}

+ +

Text desbordat

+ +

En pantalles estretes, com ara telèfons intel·ligents, l'amplada de les caixes de cerca i altres camps de formulari es poden reduir dràsticament. Això pot provocar que el text del marcador de posició sigui retallat d'una manera indesitjable. Sovint és útil modificar aquest comportament amb la propietat {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="Enter something into this field, if you please!">
+ +

CSS

+ +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder")}}{{Spec2("CSS4 Selectors")}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Suport bàsic
+ (en <input type="text">)		{{CompatChrome("47.0")}}{{CompatGeckoDesktop("51.0")}}[1]{{CompatNo}}{{CompatNo}}[2]{{CompatOpera("34.0")}}{{CompatSafari("9.0")}}
en type="number", type="time", i similars{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic
+ (en <input type="text">)		{{CompatAndroid("51.0")}}{{CompatGeckoMobile("51.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatSafari("9.2")}}
en type="number", type="time", i similars{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}}, Gecko va implementar una pseudo-class prefixada -moz anomenada {{cssxref(":-moz-placeholder")}}, que va ser reemplaçada més tard per un pseudo-element {{cssxref("::-moz-placeholder")}}. La pseudo-class estàndard es va implementar en {{bug("1069012")}}.

+ +

[2] S'ha sol·licitat suport per a aquesta pseudo-class a la pàgina de comentaris del desenvolupador de Microsoft Edge.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_read-only/index.html b/files/ca/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..5db61a8b07 --- /dev/null +++ b/files/ca/web/css/_colon_read-only/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :read-only representa un element (com ara una entrada de text bloquejat) que no és editable per l'usuari.

+ +
/* Selecciona qualsevol element <input> que sigui de només lectura Compatible amb Firefox amb un prefix */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Compatible amb Blink/WebKit/Edge sense un prefix */
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

Nota: Aquest selector no només selecciona {{htmlElement("input")}}s amb {{htmlattrxref("readonly", "input")}} establerts en ells; seleccionarà qualsevol element que no pugui ser editat per l'usuari.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a l'HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada.
+ +

Navegadors compatibles

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_read-write/index.html b/files/ca/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..434094c2ef --- /dev/null +++ b/files/ca/web/css/_colon_read-write/index.html @@ -0,0 +1,98 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :read-write representa un element (com ara una entrada de text) que l'usuari pot editar.

+ +
/* Selecciona qualsevol element <input> que sigui editable Compatible amb Firefox amb un prefix */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Compatible amb Blink / WebKit / Edge sense un prefix */
+input:read-write {
+  background-color: #bbf;
+}
+ +
+

Nota: Aquest selector no només selecciona el text {{htmlElement("input")}} s; seleccionarà qualsevol element que l'usuari pugui editar, com ara un element {{htmlelement("p")}} amb {{htmlattrxref("contenteditable")}} establert en ell.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Defineix la pseudo-classe, però no la semàntica associada.
+ +

Navegadors compatibles

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_required/index.html b/files/ca/web/css/_colon_required/index.html new file mode 100644 index 0000000000..ee1d7cffc5 --- /dev/null +++ b/files/ca/web/css/_colon_required/index.html @@ -0,0 +1,128 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:required' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :required representa qulasevol element {{HTMLElement("input")}}, {{HTMLElement("select")}} o {{HTMLElement("textarea")}} que té l'atribut {{ htmlattrxref("required", "input") }} establert en ell.

+ +
/* Selecciona qualsevol <input> requerit */
+input:required {
+  border: 1px dashed red;
+}
+ +

Aquesta pseudo-class és útil per ressaltar els camps que han de tenir dades vàlides abans de poder enviar un formulari.

+ +
+

Nota: La classe pseudo-class {{cssxref(":optional")}} selecciona camps de formulari opcionals.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Veure {{ cssxref(":invalid") }} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Sense canvis.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Defineix la semàntica respecte a HTML i la validació de restriccions.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Sense canvis.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Defineix la pseudo-classe, però no la semàntica associada.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic10.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic4.4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_right/index.html b/files/ca/web/css/_colon_right/index.html new file mode 100644 index 0000000000..c0cfce6475 --- /dev/null +++ b/files/ca/web/css/_colon_right/index.html @@ -0,0 +1,124 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Layout + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

La pseudo-class CSS :right, usada amb la regla at {{cssxref("@page")}}, representa totes les pàgines de la dreta d'un document imprès.

+ +
/* Selecciona les pàgines de la dreta quan imprimiu */
+@page :right {
+  margin: 2in 3in;
+}
+ +

Si una pàgina donada és "esquerra" o "dreta" ve determinada per la direcció principal d'escriptura del document. Per exemple, si la primera pàgina té una direcció d'escriptura principal d'esquerra a dreta llavors serà una pàgina :right si té una direcció d'escriptura principal de dreta a esquerra llavors serà una pàgina {{Cssxref(":left")}}.

+ +
+

Note: No podeu canviar totes les propietats CSS amb aquesta pseudo-class. Només podeu canviar les propietats {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }} i {{ Cssxref("background") }} del quadre de pàgina. S'ignoraran totes les altres propietats i només es veurà afectat el quadre de pàgina, no el contingut del document de la pàgina.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}Sense canvis.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}8.09.2{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_root/index.html b/files/ca/web/css/_colon_root/index.html new file mode 100644 index 0000000000..072802e541 --- /dev/null +++ b/files/ca/web/css/_colon_root/index.html @@ -0,0 +1,112 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :root coincideix amb l'element arrel de l'arbre que representa el document. En HTML, :root representa l'element {{HTMLElement("html")}} i és idèntic al selector html, excepte que la seva Especificitat és més alta.

+ +
/*  Selecciona l'element arrel del document: <html> en el cas de l'HTML */
+:root {
+  background: yellow;
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El ùs de :root pot ser útil per declarar Variables CSS globals:

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Sense canvis.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}99.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/_colon_scope/index.html b/files/ca/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..3985aa7d08 --- /dev/null +++ b/files/ca/web/css/_colon_scope/index.html @@ -0,0 +1,146 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Scoped Elements + - Web +translation_of: 'Web/CSS/:scope' +--- +
{{CSSRef}}
+ +

La pseudo-class de CSS :scope representa aquells elements que són un punt de referència per tal que els selectors coincideixin.

+ +
/* Selecciona un element d'àmbit */
+:scope {
+  background-color: lime;
+}
+ +

Actualment, quan s'utilitza en un full d'estils, :scope és el mateix que {{cssxref(":root")}}, ja que, en aquest moment, no hi ha una manera d'establir explícitament un element amb àmbit. Quan s'utilitza des d'una API DOM com {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} o {{domxref("Element.closest()")}}, :scope coincideix amb l'element que es va cridar el mètode.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

En aquest exemple senzill, demostrem que l'ús de la pseudo-class :scope del mètode {{domxref("Element.matches()")}} coincideix amb l'element del qual és cridat.

+ +

JavaScript

+ +
let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "Yep, the element is its own scope as expected!";
+}
+ +

HTML

+ +
<p id="para">
+  This is a paragraph. It is not an interesting paragraph. Sorry about that.
+</p>
+<p id="output"></p>
+ +

Resultat

+ +
{{ EmbedLiveSample('Example') }}
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{ CompatNo }}{{ CompatGeckoDesktop(20) }}[1]{{CompatNo}}157.0
En querySelector() i querySelectorAll(){{ CompatChrome(27) }}{{CompatGeckoDesktop(32)}}[1][2]{{CompatNo}}157.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatNo }}{{ CompatGeckoMobile(20) }}[1]{{CompatNo}}{{CompatNo}}7.0
En querySelector() i querySelectorAll(){{ CompatChrome(27) }}{{CompatGeckoMobile(32)}}[1][2]{{CompatNo}}{{CompatNo}}7.0
+
+ +

[2] Firefox 20 implementa la pseudo-class :scope, la funció està desactivada per defecte. Per habilitar la funció, estableix la preferència layout.css.scope-pseudo.enabled a true. A partir de Firefox 32, aquest indicador està per defecte a true en les versions de llançament de Firefox ({{bug(528456)}}).

+ +

[3] Gecko 55 (Firefox 55) elimina el suport per a <style scoped> però no per a la pseudo-class :scope, que encara és compatible. <style scoped> va fer possible configurar explícitament els àmbits de l'element, però les discussions en curs sobre el disseny d'aquesta característica, així com la manca d'altres implementacions, van donar com a resultat la decisió d'eliminar-lo.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_target/index.html b/files/ca/web/css/_colon_target/index.html new file mode 100644 index 0000000000..07c4b7c27e --- /dev/null +++ b/files/ca/web/css/_colon_target/index.html @@ -0,0 +1,260 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :target representa un element únic (l'element destinació) amb un {{htmlattrxref("id")}} que coincideix amb el fragment de l'URL.

+ +
/* Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual */
+:target {
+  border: 2px solid black;
+}
+ +

Per exemple, la següent URL té un fragment (indicat pel signe #) que apunta a un element anomenat section2:

+ +
http://www.example.com/index.html#section2
+ +

El següent element es seleccionaria amb un selector :target quan l'URL actual fora igual a l'anterior:

+ +
<section id="section2">Example</section>
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Una taula de continguts

+ +

La pseudo-class :target es pot utilitzar per ressaltar la part d'una pàgina a la qual s'ha enllaçat des d'una taula de continguts.

+ +

HTML

+ +
<h3>Table of Contents</h3>
+<ol>
+ <li><a href="#p1">Jump to the first paragraph!</a></li>
+ <li><a href="#p2">Jump to the second paragraph!</a></li>
+ <li><a href="#nowhere">This link goes nowhere,
+   because the target doesn't exist.</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Add a pseudo-element inside the target element */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Style italic elements within the target element */
+p:target i {
+  color: red;
+}
+ +

Resultat

+ +

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

+ +

Pur-CSS lightbox

+ +

Podeu utilitzar la pseudo-class :target per crear una caixa de llum ( lightbox) sense utilitzar JavaScript. Aquesta tècnica es basa en la capacitat dels enllaços d'ancoratge per apuntar a elements que estan inicialment ocults a la pàgina. Una vegada seleccionats, el CSS canvia el display perquè es mostrin.

+ +
Nota: Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class :target, disponible en GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">Open example #1</a></li>
+  <li><a href="#example2">Open example #2</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* Unopened lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Opened lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Lightbox content */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Close button */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Lightbox overlay */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Defineix la semàntica específica d'HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Sense canvis.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7 or earlier")}}99.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7 or earlier")}}9.09.52.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_valid/index.html b/files/ca/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..4bea8abf18 --- /dev/null +++ b/files/ca/web/css/_colon_valid/index.html @@ -0,0 +1,74 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

The pseudo-class CSS :valid representa qualsevol element {{HTMLElement("input")}} o altre {{HTMLElement("form")}} el contingut del qual es valida correctament. Això permet fer, fàcilment, que els camps vàlids adoptin una aparença que ajudi a l'usuari a confirmar que les seves dades estan formatades correctament.

+ +
/* Selecciona qualsevol <input> vàlid */
+input:valid {
+  background-color: powderblue;
+}
+ +

Aquesta pseudo-class és útil per ressaltar els camps correctes per a l'usuari.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Vegeu {{cssxref(":invalid")}} com exemple.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Cap canvi.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Defineix la semàntica respecte a l'HTML i la validació de restriccions.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}Definició inicial.
+ + + +
+ + +

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

+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_colon_visited/index.html b/files/ca/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..00b61c6301 --- /dev/null +++ b/files/ca/web/css/_colon_visited/index.html @@ -0,0 +1,178 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

La  pseudo-class CSS :visited representa enllaços que l'usuari ja ha visitat. Per motius de privadesa, els estils que es poden modificar utilitzant aquest selector són molt limitats

+ +
/*  Selecciona qualsevol <a> que s'hagi visitat */
+a:visited {
+  color: green;
+}
+ +

Els estils definits per la pseudo-class :visited seran anul·lats per qualsevol pseudo-class posterior relacionada amb l'enllaç ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que té com a mínim la mateixa especificitat. Per donar-li un estil apropiat als enllaços, col·loqueu la regla :visited després de la regla :link però abans de :hover i :active, tal com ho defineix l'ordre LVHA: :link — :visited — :hover — :active.

+ +

Restriccions d'estil

+ +

Per motius de privadesa, els navegadors limiten estrictament quins són els estils que es podem aplicar mitjançant aquesta pseudo-class, i com es poden utilitzar:

+ + + +
+

Nota: Per obtenir més informació sobre aquestes limitacions i els motius que hi ha darrere, consulteu Privadesa i el selector :visited.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Les propietats que d'altra manera no tindrien color o serien transparents no es poden modificar amb :visited. De les propietats que es poden establir amb aquesta pseudo-class, probablement el vostre navegador tingui un valor predeterminat només per color i column-rule-color. Per tant, si voleu modificar les altres propietats, haureu de donar-los un valor base fora del selector :visited.

+ +

HTML

+ +
<a href="#test-visited-link">Have you visited this link yet?</a><br>
+<a href="">You've already visited this link.</a>
+ +

CSS

+ +
a {
+  /* Specify non-transparent defaults to certain properties,
+     allowing them to be styled with the :visited state */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Cap canvi.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Cap canvi.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Aixeca la restricció per aplicar solament :visited a l'element {{HTMLElement ("a")}}. Permet als navegadors restringir el seu comportament per raons de privadesa.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}3.53.51.0
Restriccions en les propietats CSS permeses en una declaració usant :visited6{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0") }}8 (or earlier){{ CompatUnknown() }}5.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic4.4{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}11379.3
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..579c5d5934 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-progress-bar és una estensió de Mozilla que representa la barra de progrés dins d'un element {{HTMLElement("progress")}}. (La barra representa la quantitat de progrés que s'ha realitzat).

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminate</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Force indeterminate bars to have zero width */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

La primera barra des de dalt hauria de ser així:

+ +

Custom styled progress bar

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-progress/index.html b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..517f19e1fd --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-range-progress és una extensió de Mozilla, que representa la part inferior de la pista (és a dir, la ranura) en la qual l'indicador es llisca en un {{HTMLElement("input")}} de type="range". Aquesta part correspon a valors inferiors al valor actualment seleccionat pel polze (és a dir, botó virtual).

+ +
+

Nota: L'ùs de ::-moz-range-progress amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..dfbfb9f162 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-moz-range-thumb es una extensió de Mozilla que representa el polze (és a dir, botó virtual) d'un {{HTMLElement("input")}} de type="range". L'usuari pot moure el polze al llarg de la pista d'entrada per canviar el seu valor numèric.

+ +
+

Nota: L'ùs ::-moz-range-thumb amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així

+ +

The thumb of the <input type=right> styled in green

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-moz-range-track/index.html b/files/ca/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..41ad08a697 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,117 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The pseudo-element CSS ::-moz-range-track és una extensió de Mozilla que representa la pista (és a dir, la ranura) en què l'indicador es llisca en un {{HTMLElement("input")}} de type="range".

+ +
+

Nota: L'ùs de ::-moz-range-track amb qualsevol cosa que no sigui <input type="range"> no coincideix amb res i no té cap efecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

A range with the track green.

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en Gecko.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..f7f8896483 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill-lower representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de type="range", que correspon a valors inferiors al valor actualment seleccionat per el polze.

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..eb28ffc2db --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,91 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill-upper representa la part de la "pista" (la ranura en la qual llisca l'indicador denominat polze) d'un {{HTMLElement("input")}} de type="range" , que correspon a valors superiors al valor actualment seleccionat per el polze.

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN.

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-fill/index.html b/files/ca/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..1377611a03 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,108 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-fill representa la porció emplenada d'un element {{HTMLElement("progress")}}. Aquest pseudo-element no és estàndard i específic de Internet Explorer 10+, d'aquí el prefix del proveidor.

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Especificacions

+ +

No forma part de cap especificació. Microsoft té una descripció en MSDN.

+ +

Exemple

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així:

+ +

Progress Bar with Orange Fill

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-thumb/index.html b/files/ca/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..fb3bd8e4e5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,41 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-ms-thumb representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de type="range" per modificar el seu valor numèric.

+ +

Especificacions

+ +

No forma part de cap especificació, encara que Microsoft té una descripció en MSDN.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-ms-track/index.html b/files/ca/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..799efce737 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,45 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

El pseudo-element CSS ::-ms-track representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de type="range".

+ +

Especificacions

+ +

No forma part de cap especificació.

+ +

Microsoft té una descripció en MSDN .

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..fc18f805e2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,110 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-progress-bar representa la barra sencere d'un element {{HTMLElement("progress")}}. Normalment només és visible la part no emplenada de la barra, ja que de forma predeterminada es processa a continuació el  pseudo-element {{ cssxref("::-webkit-progress-value") }}. És un fill del pseudo-element {{cssxref("::-webkit-progress-inner-element")}} i el pare del pseudo-element {{cssxref("::-webkit-progress-value")}}.

+ +
+

Nota: Perquè ::-webkit-progress-value tingui efecte, {{cssxref("-webkit-appearance")}} s'ha d'establir a none en l'element <progress>.

+
+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Exemple

+ +

Contingut CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

Contingut HTML

+ +
<progress value="10" max="50">
+
+ +

Resultat

+ +

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

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així :

+ +

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..95235bb4cc --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,109 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-progress-value  representa la part emplenada de la barra d'un element {{HTMLElement("progress")}}. És un fill del pseudo-element {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: Per tal de permetre que ::-webkit-progress-value tingui efecte, {{cssxref("-webkit-appearance")}} necessita ser ajustat a none en l'element <progress>.

+
+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Exemple

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Resultat

+ +

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

+ +

Una barra de progrés que utilitzi aquest estil pot semblar una cosa així :

+ +

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..e6797248cf --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,35 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
{{ CSSRef() }} {{ Non-standard_header() }}
+ +

El pseudo-element CSS ::-webkit-slider-runnable-track representa la "pista" (la ranura en la qual llisca l'indicador) d'un {{HTMLElement("input")}} de type="range".

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..0efff168d2 --- /dev/null +++ b/files/ca/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,34 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Reference +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-element CSS ::-webkit-slider-thumb representa el "polze" que l'usuari pot moure dins de la "ranura" d'un {{HTMLElement("input")}} de type="range" per modificar el seu valor numèric.

+ +

Especificacions

+ +

No forma part de cap especificació. Es tracta d'un pseudo-element propietari, específic en WebKit/Blink.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_after/index.html b/files/ca/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..95161d7f25 --- /dev/null +++ b/files/ca/web/css/_doublecolon_after/index.html @@ -0,0 +1,260 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

En CSS, ::after crea un pseudo-element que és l'últim fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat{{cssxref("content")}}. Està integrat per defecte.

+ +
/* Afegeix una fletxa després d'enllaços */
+a::after {
+  content: "→";
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +
+

CSS3 va introduir la notació de ::after ( amb dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :after, introduït en CSS2.

+
+ +

Consideracions

+ +

Els pseudo-elements generats per ::before i ::after estan continguts per la caixa de formatació de l'element i, per tant  ::before i ::after no s'apliquen als elements reemplaçats com img, or a elements br.

+ +

Exemples

+ +

Ùs senzill

+ +

Crearem dues classes: una per als paràgrafs boring i un per als exciting. Marcarem cada paràgraf afegint un pseudo-element al final del mateix.

+ +
<p class="boring-text">Here is some plain old boring text.</p>
+<p>Here is some normal text that is neither boring nor exciting.</p>
+<p class="exciting-text">Contributing to MDN is easy and fun.
+Just hit the edit button to add new live samples, or improve existing samples.</p>
+ +
.exciting-text::after {
+  content: "<- now this *is* exciting!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "<- BORING!";
+   color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+ +

Exemple decoratiu

+ +

Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+ +

Tooltips

+ +

El següent exemple mostra l'ús del pseudo-element ::after en conjunció amb l'expressió CSS attr() i un atribut de dades personalitzades data-descr per crear un tooltip en pur CSS, similar al glossari. Feu clic en la vista prèvia en viu o vegeu aquest exemple en una pàgina apart.

+ +
<p>Here is the live example of the above code.<br />
+  We have some <span data-descr="collection of words and punctuation">text</span> here with a few
+  <span data-descr="small popups which also hide again">tooltips</span>.<br />
+  Don't be shy, hover over to take a <span data-descr="not to be taken literally">look</span>.
+</p>
+
+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}No hi ha canvis significatius en l'especificació anterior.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}Permet transicions en les propietats definides en els pseudo-elements.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}Permet animacions en les propietats definides en els pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introdueix la sintaxi de dos caràcters de dos punts .
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Definició inicial, utilitzant la sintaxi d'un  caràcter de dos punts.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
suport :after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]8.0{{CompatOpera("4")}}4.0
suport ::after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}[1]9.0{{CompatOpera("7")}}4.0
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
suport :after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
suport ::after{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suport d'animacions i transicions{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :after. No es permet {{cssxref("position")}}, {{cssxref("float")}}, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

+ +

Notes de Quantum CSS

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_backdrop/index.html b/files/ca/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..dccf033dee --- /dev/null +++ b/files/ca/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,143 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Full-screen + - Layout + - NeedsContent + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

El {{Cssxref("pseudo-elements", "pseudo-element")}} CSS  ::backdrop és una caixa situada immediatament per sota d'un element visualitzat en mode de pantalla completa  (i per sobre de qualsevol element inferior de la pila). Els elements de pantalla completa formen part de la pila de la capa superior, és a dir, es representen davant de qualsevol altre contingut.

+ +
dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

El pseudo-element ::backdrop es pot utilitzar per donar estil o ocultar el document subjacent d'un element que es mostra a pantalla completa.

+ +

::backdrop no hereta de cap element i no és hereditari. No es fa cap restricció sobre quines propietats s'apliquen a aquest pseudo-element.

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
en <dialog>32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
en fullscreen{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
en <dialog>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
en fullscreen{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("ms")}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] See {{bug(1064843)}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_before/index.html b/files/ca/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..ad7738d6f5 --- /dev/null +++ b/files/ca/web/css/_doublecolon_before/index.html @@ -0,0 +1,329 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

En CSS, ::before crea un pseudo-element que és el primer fill de l'element seleccionat. Sovint s'utilitza per afegir contingut cosmètic a un element amb la propietat {{cssxref("content")}}. Està integrat per defecte.

+ +
/* Add a heart before links */
+a::before {
+  content: "♥";
+}
+ +

Sintaxi

+ +
{{csssyntax}}
+ +
+

CSS3 va introduir la notació de ::before ( de dos caràcters de dos punts ) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :before, introduït en CSS2.

+
+ +

Consideracions

+ +

Els pseudo-elements generats per ::before i ::after estan continguts per la caixa de formatació de l'element i, per tant  ::before i ::after no s'apliquen als elements reemplaçats com img, or a elements br.

+ +

Exemples

+ +

Afegint cometes

+ +

Un exemple senzill de l'ús del pseudo-element ::before és proporcionar cometes. Aquí s'utilitza tant ::before com {{Cssxref("::after")}} per a inserir caràcters cometes.

+ +

Contingut HTML

+ +
<q>Some quotes</q>, he said, <q>are better than none</q>.
+ +

Contingut CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

+ +

Exemple Decorativu

+ +

Podem donar estil de text o imatges en la propietat {{cssxref("content")}} gairebé de qualsevol manera que vulguem.

+ +

Contingut HTML

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

Contingut CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Decorative_example', 450, 60)}}

+ +

Llista de tasques

+ +

En aquest exemple crearem una senzilla llista de tasques utilitzant pseudo-elements. Aquest mètode sovint es pot utilitzar per afegir petits tocs a la interfície d'usuari i millorar l'experiència de l'usuari.

+ +

Contingut HTML

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

Contingut CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

Contingut  JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Aquí està l'exemple del codi anterior executat en directe. Recordeu que no s'han utilitzat icones , i la marca de verificació és en realitat el ::before que s'ha donat estil amb CSS. Seguiu endavant i aconseguiu algunes coses per fer.

+ +

Resultat

+ +

{{EmbedLiveSample('To-do_list', 400, 300)}}

+ +

Notes

+ +

Encara que el posicionament fix en Firefox 3.5 no permet contingut generat per separat com un germà anterior (segons l'especificació CSS afirma que "Els pseudo-elements :before i :after, son elements que interactuen amb altres caixes ... com si fossin veritables elements inserits dins del seu element associat."), poden ser usats per a proporcionar una lleugera millora en els dissenys sense taules (per exemple, per aconseguir el centrat), sempre que el contingut que es centri estigui embolicat en un fill, una columna abans i després que el contingut pugui ser introduït sense afegir un germà anterior o següent (és a dir, és potser més semànticament correcta afegir un span addicional com s'indica a continuació, del que seria afegir un element <div /> abans i després). (I recordeu sempre afegir un width a un float, ja que, altrament, no surarà!).

+ +

Contingut  HTML

+ +
<div class="example">
+<span id="floatme">"Floated Before" should be generated on the left of the
+viewport and not allow overflow in this line to flow under it. Likewise
+should "Floated After" appear on the right of the viewport and not allow this
+line to flow under it.</span>
+</div>
+ +

Contingut  CSS

+ +
#floatme { float: left; width: 50%; }
+
+/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
+.example::before {
+  content: "Floated Before";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Floated After";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Notes")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}No hi ha canvis significatius en l'especificació anterior.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permet transicions en les propietats definides en els pseudo-elements.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permet animacions en les propietats definides en els pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introdueix la sintaxi de dos caràcters de dos punts .
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts .
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport :before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]8.0{{CompatOpera("4")}}4.0
Suport ::before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}[1]9.0{{CompatOpera("7")}}4.0
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport :before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Suport ::before{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.1{{CompatUnknown}}5.1
Suport d'animacions i transicions26{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox anterior a la versió 3.5 només implementa la versió CSS 2.0 de :before. No es permet {{cssxref("position")}}, {{cssxref("float")}}, list-style-* i algunes propietats de pantalla. Firefox 3.5 elimina aquestes restriccions.

+ +

Quantum CSS notes

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_cue/index.html b/files/ca/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..3c1265334b --- /dev/null +++ b/files/ca/web/css/_doublecolon_cue/index.html @@ -0,0 +1,78 @@ +--- +title: '::cue (:cue)' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - CSS + - Media + - Pseudo-element + - Reference + - Web Video Text Tracks + - WebVTT + - cue +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::cue coincideix amb senyals de WebVTT dins d'un element seleccionat. Això es pot usar per donar estil als títols i altres senyals en els medis amb pistes VTT.

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::cue:

+ + + +

Les propietats s'apliquen a tot el conjunt de senyals com si fossin una sola unitat. L'única excepció és que el background i les propietats abreujades s'apliquen a cada senyal individualment, per evitar la creació de caixes i que ocultin inesperadament grans àrees dels medis

+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

El següent CSS estableix l'estil de cue perquè el text sigui blanc i el fons sigui una caixa negra translúcida.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Definició  incial.
+ + + + + +

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

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_first-letter/index.html b/files/ca/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..40e4c9c293 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,219 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS code>::first-letter aplica estils a la primera lletra de la primera línia d'un element de nivell de bloc, però només quan no està precedit d'un altre contingut (com ara imatges o taules en línia).

+ +
/* Selecciona la primera lletra d'un <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

La primera lletra d'un element no sempre és trivial per identificar:

+ + + +
+

CSS3 va introduir la notació de ::first-letter ( amb dos caràcters de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-letter, introduït en CSS2.

+
+ +

Propietats permeses

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-letter:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

Fa que la primera lletra de cada paràgraf sigui en vermell i gran.

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Genera propietats permeses per a la composició de textos, decoració de text, propietats de disseny en línia, {{ cssxref("opacity") }} i {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permet l'ús de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introducció de la sintaxi de dos caràcters de dos punts. Definició del comportament de casos limits, com ara en elements de llista o amb idiomes específics (p. ex., el dígraf holandès IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Cap canvi.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definició inicial, utilitzant la sintaxi d'un caràcter de dos punts.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}9.07.01.0 (85)
Antiga sintaxis d'un caràcter de dos punts (:first-letter)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}5.53.51.0 (85)
Suport per al dígraf holandès IJ{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} {{ bug("92176") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Antiga sintaxis d'un caràcter de dos punts (:first-letter){{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Suport per al dígraf holandès IJ{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_first-line/index.html b/files/ca/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..065c7dc0f3 --- /dev/null +++ b/files/ca/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,117 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::first-line aplica estils a la primera línia d'un element de nivell de bloc. Tingueu en compte que la longitud de la primera línia depèn de molts factors, incloent l'amplada de l'element, l'amplada del document i la mida de la font del text

+ +
/* Selecciona la primera línia d'un <p> */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 va introduir la notació de ::first-line (de dos caràcters, de dos punts) per distingir les pseudo-classes dels pseudo-elements. Els navegadors també accepten :first-line, introduït en CSS2.

+
+ +

Propietats permeses

+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::first-line:

+ + + +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<p>Styles will only be applied to the first line of this paragraph.
+After that, all text will be styled like normal. See what I mean?</p>
+
+<span>The first line of this text will not receive special styling
+because it is not a block-level element.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* WARNING: DO NOT USE THESE */
+  /* Many properties are invalid in ::first-line pseudo-classes */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 350, 160)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{ Spec2('CSS4 Pseudo-Elements')}}Defineix de manera més estricta on pot apareixer una ::first-letter.
+ Generalitza propietats permeses per a composició tipogràfica, decoració de text i propietats de disseny en línia i {{cssxref("opacity")}}.
+ Defineix l'herència de ::first-letter.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{ Spec2('CSS3 Text Decoration')}}Permès lùs de {{cssxref("text-shadow")}} amb ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}{{ Spec2('CSS3 Selectors') }}Introdueix la sintaxi de dos caràcter de dos punts.
{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}{{ Spec2('CSS2.1') }}Cap canvi
{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}{{ Spec2('CSS1') }}La definició inicial fa servir la sintaxi d'un sol caràcter de dos punts.
+ + + +

{{Compat("css.selectors.first-line")}}

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_placeholder/index.html b/files/ca/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..3c985e7912 --- /dev/null +++ b/files/ca/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Experimental + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-element CSS ::placeholder representa el text de marcador de posició d'un element de formulari.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Només un subconjunt de propietats CSS que s'aplica al pseudo-element {{cssxref("::first-line")}} es pot utilitzar en una regla, utilitzant ::placeholder en el seu selector.

+ +
+

Nota: A Firefox, l'aparença del text del marcador de posició és de color gris translúcid per defecte.

+
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
Suport bàsic{{CompatChrome(57)}}{{CompatGeckoDesktop("51.0")}}[1]{{CompatNo}}{{CompatNo}}4410.1
Suport parcial amb prefixSupportedSupportedSupported10 -ms-Supported5 -webkit-
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("52.0")}}{{CompatNo}} 10.3
Suport parcial amb prefix2.1 -webkit-SupportedSupported10 -ms-37 -webkit-4.3 -webkit-
+
+ +

[1] Abans de Gecko 51.0 {{geckoRelease("51.0")}} Gecko va implementar aquest com a pseudo-element prefixat {{cssxref("::-moz-placeholder")}}.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/_doublecolon_selection/index.html b/files/ca/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..62b5e25619 --- /dev/null +++ b/files/ca/web/css/_doublecolon_selection/index.html @@ -0,0 +1,160 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Layout + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

El pseudo-element CSS ::selection aplica estils a la part d'un document que l'usuari ha ressaltat (com ara amb el ratolí).

+ +
::selection {
+  color: gold;
+  background: red;
+}
+ +

Només un petit subconjunt de propietats CSS es pot utilitzar amb el pseudo-element ::selection:

+ + + +

Tingueu en compte que, en particular, s'ignora {{cssxref("background-image")}}.

+ +

Sintaxi

+ +
/* Firefox syntax */
+::-moz-selection
+
+{{csssyntax}}
+
+ +

Exemple

+ +

HTML

+ +
<div>This text has special styles when you highlight it.</div>
+<p>Also try selecting text in this paragraph.</p>
+ +

CSS

+ +
/* Make selected text gold on a red background */
+::-moz-selection {
+  color: gold;
+  background: red;
+}
+
+::selection {
+  color: gold;
+  background: red;
+}
+
+/* Make selected text in a paragraph white on a blue background */
+p::-moz-selection {
+  color: white;
+  background: blue;
+}
+
+p::selection {
+  color: white;
+  background: blue;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Definició inicial.
+ +
+

Nota: Tot i que ::selection estava present en els esborranys de CSS Selectors Nivell 3, es va eliminar durant la fase de Recomanació de Candidats perquè el seu comportament no era suficientment especificat (especialment amb elements niats) i no es va aconseguir la interoperabilitat (basada en una discussió en la llista de correu d'Estil W3C). El pseudo-element ::selection ha estat retornat a Pseudo-Elements Nivell 4.

+
+ + + +
+

Nota: text-shadow en ::selection és compatible amb Chrome, Safari i Firefox 17+.

+
+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko actualment només és compatible amb la versió prefixada ::-moz-selection. Serà sense prefix en {{bug(509958)}}.

diff --git a/files/ca/web/css/at-rule/index.html b/files/ca/web/css/at-rule/index.html new file mode 100644 index 0000000000..17bb9c3288 --- /dev/null +++ b/files/ca/web/css/at-rule/index.html @@ -0,0 +1,77 @@ +--- +title: At-rule +slug: Web/CSS/At-rule +tags: + - At-rule + - CSS + - Reference +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Una regla at (at-rule) es una declaració CSS que comença amb un signe, '@' (U+0040 COMMERCIAL AT), seguit d'un identificador i inclou tot fins al següent punt i coma, ';' (U+003B SEMICOLON), o el següent bloc bloc CSS , el que succeeixi primer.

+ +

Hi ha diverses regles at (at-rules), designades pels seus identificadors, cadascuna amb una sintaxi diferent:

+ + + +

Regles del grup condicional

+ +

Igual que els valors de les propietats, cada regla té una sintaxi diferent. No obstant això, alguns d'ells poden agrupar-se en una categoria especial anomenada regles de grup condicional. Aquests declaracions comparteixen una sintaxi comuna i cadascun d'ells pot incloure declaracions niades, ja siguin conjunts de regles o regles at niades. A més, tots transmeten un significat semàntic comú: tots vinculen algun tipus de condició que, en qualsevol moment, s'avalua com a veritable o fals. Si la condició s'avalua com a veritable, s'aplicaran totes les instruccions del grup

+ +

Les regles de grup condicional es defineixen Condicionals CSS Nivell 3 i son:

+ + + +

Atès que cada grup condicional també pot contenir declaracions niades, pot haver-hi una quantitat no especificada de niaments.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definició inicial
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}Estandaritza @-webkit-keyframes.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/box-sizing/index.html b/files/ca/web/css/box-sizing/index.html new file mode 100644 index 0000000000..33d55a232a --- /dev/null +++ b/files/ca/web/css/box-sizing/index.html @@ -0,0 +1,287 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

La propietat CSS box-sizing s'utilitza per modificar el model de caixa CSS predeterminat usat per calcular l'amplada i l'alçada dels elements.

+ +
/* Keyword values */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Global values */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

En CSS, de manera predeterminada, l'amplada i l'alçada que s'assigna a un element només s'aplica a la caixa de contingut de l'element. Si l'element té qualsevol vora o farcit, aquest s'afegeix a l'amplada i alçada per arribar a la grandària de la caixa que es representa en la pantalla. Això significa que quan fixeu l'amplada i l'alçada, heu d'ajustar el valor que dóna per permetre qualsevol vora o farcit que pugui ser afegit. Això és especialment difícil quan s'implementa un disseny sensible.

+ +

La propietat box-sizing es pot utilitzar per ajustar aquest comportament:

+ + + +

Alguns experts recomanen que els desenvolupadors web considerin aplicar rutinariament box-sizing: border-box a tots els elements.

+ +
+ + + + +

{{EmbedLiveSample("box-sizing", 1200, 340, "", "", "example-outcome-frame")}}

+
+ +

L'exemple anterior mostra tres escenaris. En cada escenari hi ha un DIV pare (amb una vora taronja) que conté un DIV fill. El fill té fixat un width: 100%  i un fons blau pàl·lid.

+ + + +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat box-sizing s'especifica com una paraula clau única seleccionada de la llista de valors a continuació.

+ +

Valors

+ +
+
content-box
+
Aquest és el valor inicial i predeterminat especificat per l'estàndard CSS. Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} es mesuren incloent només el contingut, però no el farciment, la vora o el marge. Per exemple, si establiu .box {width: 350px;}, apliqueu {border: 10px solid black;} , llavors el resultat representat és una caixa de width: 370px.
+
Aquí les dimensions de l'element es calculen com: amplària = amplària del contingut, i alçada = alçada del contingut (excloent els valors de vora i farciment).
+
border-box
+
Les propietats {{Cssxref("width")}} i {{Cssxref("height")}} inclouen el contingut, el farciment i la vora, però no el marge. Note that padding and border will be inside of the box e.g. .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
+
Aquí les dimensions de l'element es calculen com: amplària = vora + farciment + amplària del contingut, i alçada = vora + farciment + alçada del contingut.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+
+ +

Resultat

+ +

{{EmbedLiveSample('Exemple','auto','300')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0 {{property_prefix("-webkit")}}[1]
+ 10.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		 +

{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}[2]

+ 		+

8.0[1]

+ 		7.03.0 (522){{property_prefix("-webkit")}}
+ 5.1[3]
padding-box{{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("29.0")}}
+ Eliminat a {{CompatGeckoDesktop("50.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic2.1{{property_prefix("-webkit")}}[1]
+ 4.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("29.0")}}[2]		9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
padding-box{{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("29.0")}}
+ Eliminat a {{CompatGeckoMobile("50.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] box-sizing no es respectat quan l'alçada es calcula a partir de {{domxref("window.getComputedStyle()")}}, en Internet Explorer (totes les versions), en Firefox anterior a la 23, i en Chrome. Edge no presenta el problema. Tingueu en compte que la propietat currentStyle retorna el valor correcte de height.

+ +

[2] A més del suport no prefixat, Gecko 44.0 {{geckoRelease("44.0")}} va afegir suport per a una versió prefixada -webkit de la propietat per raons de compatibilitat web darrere de la preferència layout.css.prefixes.webkit, per defecte a false. Des de Gecko 49.0 {{geckoRelease("49.0")}} la preferència per defecte és true.

+ +

[3] El prefix de proveïdor -webkit s'ha eliminat a 534.12.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html new file mode 100644 index 0000000000..9b312fc789 --- /dev/null +++ b/files/ca/web/css/css_box_model/dominar_el_col.lapse_del_marge/index.html @@ -0,0 +1,89 @@ +--- +title: Dominar el col.lapse del marge +slug: Web/CSS/CSS_Box_Model/Dominar_el_col.lapse_del_marge +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Els marges superior (top) i inferior (bottom) dels blocs, a vegades, es combinen (col·lapsats) en un únic marge, la grandària del qual és el més gran dels marges individuals (o només un d'ells, si són iguals), un comportament conegut com col·lapse del marge. Tingueu en compte que els marges dels elements flotants i absolutament posicionats mai es col·lapsen.

+ +

El col·lapse de marges es produeix en tres casos bàsics:

+ +
+
Germans adjacents
+
Els marges dels germans adjacents estan col·lapsats (excepte quan el darrer germà ha de ser eliminat dels flotadors anteriors).
+
Pare i primer/últim fill
+
Si no hi ha una vora, farcit, part en línia, context de format de blocs creat, o un espaia lliure per separar el {{cssxref("margin-top")}} d'un bloc del {{cssxref("margin-top")}} del seu primer bloc fill; o sense vora, farcit, contingut en línia, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} per separar el {{cssxref("margin-bottom")}} d'un bloc del {{cssxref("margin-bottom")}} del seu últim fill, llavors aquests marges es col·lapsen. El marge col·lapsat acaba fora del pare
+
Blocs buits
+
Si no hi ha vora, farcit, contingut en línia, {{cssxref("height")}} o {{cssxref("min-height")}} per separar un bloc {{cssxref("margin-top")}} del seu {{cssxref("margin-bottom")}}, llavors els marges superior i inferior es col·lapsen.
+
+ +

Algunes coses a destacar:

+ + + +

Exemples

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Examples', 'auto', 350)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_box_model/index.html b/files/ca/web/css/css_box_model/index.html new file mode 100644 index 0000000000..dc3adb0cd0 --- /dev/null +++ b/files/ca/web/css/css_box_model/index.html @@ -0,0 +1,163 @@ +--- +title: Model de Caixa CSS +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

Model de Caixa CSS és un mòdul de CSS que defineix les caixes rectangulars — incloent el seu farciment i marge —que es generen per als elements i que es defineixen segons el model de format visual.

+ +

Referència

+ +

Propietats

+ +

Propietats que controlen el flux de contingut en una caixa

+ +
+ +
+ +

Propietats que controlen la mida en una caixa

+ +
+ +
+ +

Propietats que controlen els marges en una caixa

+ +
+ +
+ +

Propietats que controlen els farciments en una caixa

+ +
+ +
+ +

Altres propietats

+ +
+ +
+ +

Guies

+ +
+
Introducció al model de caixa CSS
+
Explica un dels conceptes fonamentals de CSS: el model de caixa. Aquest model defineix com CSS estableix elements, incloent-hi les àrees de contingut, farcit, vora i marge.
+
Dominar el col.lapse del marge
+
De vegades, dos marges adjacents es col·loquen en un. En aquest article es descriuen les regles que regeixen quan i per què passa això i com controlar-lo.
+
Model de format visual
+
Explica el model de format visual.
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definició inicial
+ +

Compatibilitat dels navegadors

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git "a/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" new file mode 100644 index 0000000000..bfb613ed6c --- /dev/null +++ "b/files/ca/web/css/css_box_model/introducci\303\263_al_model_de_caixa_css/index.html" @@ -0,0 +1,67 @@ +--- +title: Introducció al model de caixa CSS +slug: Web/CSS/CSS_Box_Model/Introducció_al_model_de_caixa_CSS +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Quan es dissenya un document, el motor d'interpretació del navegador representa cada element com una caixa rectangular d'acord amb el model de caixa CSS estàndard. CSS determina la grandària, la posició i les propietats (color, fons, grandària de la vora, etc.) d'aquests caixes.

+ +

Cada caixa es compon de quatre parts (o àrees), definides per les seves respectives vores: la vora del contingut, la vora del farciment, la vora de la vora i la vora del marge.

+ +

CSS Box model

+ +

L'àrea de contingut, limitada per la vora del contingut, conté el contingut "real" de l'element, com ara text, una imatge o un reproductor de vídeo. Les seves dimensions són l'amplada del contingut (o l'amplada de la caixa de contingut) i l'alçada del contingut (o l'alçada de la caixa de contingut). Sovint té un color de fons o una imatge de fons.

+ +

Si la propietat {{cssxref("box-sizing")}} s'estableix a content-box (predeterminat), la grandària de l'àrea de contingut es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de farcit, delimitada per la vora de farcit, estén l'àrea de contingut per incloure el farciment de l'element. Les seves dimensions són l'amplada de la caixa de farcit i l'alçada de la caixa de farcit. Quan l'àrea de contingut té un fons, s'estén en el farcit.

+ +

El gruix del farciment està determinat pel {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} i les propietats abreujades de {{cssxref("padding")}}.

+ +

L'àrea de vora, delimitada per la vora de la vora, estén l'àrea de farciment per incloure les vores de l'element. Les seves dimensions són l'amplada de la caixa de vora i l'alçada de la caixa de vora.

+ +

El gruix de les vores està determinat per les propietats {{cssxref("border-width")}} i les propietats abreujades {{cssxref("border")}}. Si la propietat {{cssxref("box-sizing")}} s'estableix a border-box, la grandària de l'àrea de la vora es pot definir explícitament amb les propietats {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}} i {{cssxref("max-height")}}.

+ +

L'àrea de marge, delimitada per la vora del marge, estén l'àrea de la vora per incloure una àrea buida utilitzada per separar l'element dels seus veïns. Les seves dimensions són l'amplada de la caixa de marge i l'alçada de la caixa de marge.

+ +

La grandària de l'àrea de marge està determinada pel {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} i les propietats abreujades {{cssxref("margin")}}. Quan es produeix el col.lapse del marge, l'àrea de marge no està clarament definida, ja que els marges es comparteixen entre les caixes.

+ +

Finalment, tingueu en compte que, per als elements en línia no reemplaçats, la quantitat d'espai ocupat (la contribució a l'alçada de la línia) està determinat per la propietat {{cssxref('line-height')}} encara que les vores i el farciment encara es mostran al voltant del contingut.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Encara que formulat amb més precisió, no hi ha canvi pràctic.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definició inicial.
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/css_flexible_box_layout/index.html b/files/ca/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..50a0d76329 --- /dev/null +++ b/files/ca/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +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/ca/web/css/height/index.html b/files/ca/web/css/height/index.html new file mode 100644 index 0000000000..062d09c1fb --- /dev/null +++ b/files/ca/web/css/height/index.html @@ -0,0 +1,236 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

La propietat CSS height especifica l'alçada d'un element. Per defecte, la propietat defineix l'alçada de l'àrea de contingut. Si {{cssxref("box-sizing")}} s'estableix a border-box, aquest determina l'alçada de l'àrea de vora.

+ +
/* Keyword value */
+height: auto;
+
+/* <length> values */
+height: 120px;
+height: 10em;
+
+/* <percentage> value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Les propietats {{cssxref("min-height")}} i {{cssxref("max-height")}} anul·la {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
Defineix l'alçada com un valor absolut.
+
{{cssxref("<percentage>")}}
+
Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.
+
border-box {{experimental_inline}}
+
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de vora de l'element.
+
content-box {{experimental_inline}}
+
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de contingut de l'element.
+
auto
+
El navegador calcularà i seleccionarà una alçada per a l'element especificat .
+
fill {{experimental_inline}}
+
Utilitzeu la grandària fill-available en línia o la grandària fill-available del bloc, segons correspongui a la modalitat d'escriptura.
+
max-content {{experimental_inline}}
+
L'alçada preferida intrínseca.
+
min-content {{experimental_inline}}
+
L'alçada mínima intrínseca.
+
available {{experimental_inline}}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farciment.
+
fit-content {{experimental_inline}}
+
El més gran de: +
    +
  • l'alçada mínima intrínseca.
    • +
  • la menor de l'alçada intrínseca preferida i l'alçada disponible.
    • +
+
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div id="red">
+  <span>I'm 50 pixels tall.</span>
+</div>
+<div id="green">
+  <span>I'm 25 pixels tall.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>I'm half the height of my parent.</span>
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}S'han afegit les paraules clau max-content, min-content, available, fit-content, border-box, content-box
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Mostra height com a animable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Afegeix suport per als valors {{cssxref("<length>")}} i especifica en quin element s'aplica.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Definició inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Afegeix noves paraules clau de grandària per width i height.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}4.07.01.0
fill, fit-content, min-content, max-content{{CompatChrome(46.0)}}{{CompatUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0{{CompatVersionUnknown}}
fill, fit-content, min-content, max-content{{CompatUnknown}}{{CompatChrome(46.0)}}{{CompatUnknown}}    {{CompatChrome(46.0)}}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/index.html b/files/ca/web/css/index.html new file mode 100644 index 0000000000..89ff6655ca --- /dev/null +++ b/files/ca/web/css/index.html @@ -0,0 +1,65 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Reference + - 'l10n:priority' +translation_of: Web/CSS +--- +

Fulles d'estil en cascada (CSS) són un llenguatge de full d'estil (stylsheet) utilitzat per descriure la presentació d'un document escrit en HTML o XML (incloent dialectes de XML com SVG o XHTML). CSS descriu com els elements han de ser presentats a la pantalla, en paper, en la parla, o en altres mitjans de comunicació.

+ +

CSS és un dels idiomes principals de la web oberta i té una especificació en W3C estandarditzada. Desenvolupat en nivells, CSS1 ja està obsoleta, CSS2.1 és una recomanació i CSS3, ara dividit en mòduls més petits, està progressant en el camí de la normalització.

+ +
+ + +
+
+

Documentació i tutorials

+ +
+
CSS conceptes calu
+
Descriu la sintaxi i les formes del llenguatge i introdueix els fonaments com specificity i inheritance, la box model i margin collapsing, stacking i contextos de block-formatting , o la initial, computed, used i els valors reals. Les entitats com CSS shorthand properties també es defineixen.
+
CSS guia per a desenvolupadors
+
Articles per ajudar a aprendre de tot, des dels conceptes bàsics per donar estil a HTML a diverses tècniques CSS per fer brillar el seu contingut.
+
CSS preguntes comuns
+
Les respostes a preguntes comuns sobre CSS.
+
+
+ +
+

Eines per al desenvolupament de CSS

+ + +
+
+
+ +

Veure

+ + diff --git a/files/ca/web/css/margin-bottom/index.html b/files/ca/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7704f229b4 --- /dev/null +++ b/files/ca/web/css/margin-bottom/index.html @@ -0,0 +1,192 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

La propietat CSS margin-bottom estableix l'àrea de marge a la part inferior d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-bottom: 10px;  /* An absolute length */
+margin-bottom: 1em;   /* relative to the text size */
+margin-bottom: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-bottom: auto;
+
+/* Global values */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

The effect of the CSS margin-bottom property on the element box

+ +

Aquesta propietat no té cap efecte sobre els elements en línia no reemplaçats, com ara {{HTMLElement("tt")}} o {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-bottom és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un valor adequat per utilitzar. Veure {{cssxref("margin")}}.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

CSS per divs per establir margin-bottom i height

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

Algunes definicions per a contenidors i divs permeten veure de manera més clara els efectes dels marges.

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComenteri
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No hi ha canvis significatius
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defineix margin-bottom com animable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Elimina el seu efecte en elements en línia.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Definició inicial
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-left/index.html b/files/ca/web/css/margin-left/index.html new file mode 100644 index 0000000000..388c6f9a4c --- /dev/null +++ b/files/ca/web/css/margin-left/index.html @@ -0,0 +1,219 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/margin-left +--- +
{{CSSRef()}}
+ +

La propietat CSS margin-left estableix l'àrea de marge en el costat esquerre d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-left: 10px;  /* An absolute length */
+margin-left: 1em;   /* relative to the text size */
+margin-left: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-left: auto;
+
+/* Global values */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Area on which CSS margin-left apply

+ +

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

+ +

En els casos excepcionals en què l'amplada està massa restringida (és a dir, quan es defineixen tots els width, margin-left, border, padding, l'àrea de contingut i margin-right), s'ignora el margin-left i tindrà el mateix valor calculat que si s'especifica el valor auto.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-left és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right són auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor de {{cssxref("display")}}Valor de {{cssxref("float")}}Valor de {{cssxref("position")}}Valor calculat d'autoComment
inline, inline-block, inline-tablequalsevolstatic o relative0Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-captionqualsevolstatic o relative0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft o rightstatic o relative0Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-captionqualsevolqualsevol0Els elements interns de table-* no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc
qualsevol, excepte flex, inline-flex, o table-*qualsevolfixed o absolute0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa.Mode de disseny absolutament posicionat
flex, inline-flexqualsevolqualsevol0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals.Mode de disseny Flexbox
+
+
+ +

Sintaxi formal

+ +
{{csssyntax()}}
+ +

Exemples

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi significatiu des de CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Defineix margin-left com animable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Defineix el comportament de margin-left en elements flex.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Igual que a CSS1, però elimina el seu efecte en els elements en línia
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-right/index.html b/files/ca/web/css/margin-right/index.html new file mode 100644 index 0000000000..eada94a607 --- /dev/null +++ b/files/ca/web/css/margin-right/index.html @@ -0,0 +1,218 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

La propietat CSS margin-right estableix l'àrea de marge en el costat dret d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-right: 20px;  /* An absolute length */
+margin-right: 1em;   /* relative to the text size */
+margin-right: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-right: auto;
+
+/* Global values */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

The effect of the CSS margin-right property on the element box

+ +

Els marges verticals de dues caixes adjacents es poden fusionar. Això es diu col.lapse de marge.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-right és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El marge esquerre rep una part de l'espai horitzontal no utilitzat, tal com es determina principalment pel mode de disseny que s'utilitza. Si els valors de margin-left i margin-right sòn auto, l'espai calculat es distribueix de manera uniforme. Aquesta taula resumeix els diferents casos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor de {{cssxref("display")}}Valor de {{cssxref("float")}}Valor de {{cssxref("position")}}Valor calculat d'autoComment
inline, inline-block, inline-tablequalsevolstatic o relative0Mode de disseny en línia
block, inline, inline-block, block, table, inline-table, list-item, table-captionqualsevolstatic o relative0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'element dins del seu pare.Mode de disseny de block
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft o rightstatic o relative0Mode de disseny de block (element flotant)
qualsevol table-*, excepte table-captionqualsevolqualsevol0Els elements interns de table-* no tenen marges, utilitzeu {{ cssxref("border-spacing") }} en el seu lloc
qualsevol , excepte flex, inline-flex, or table-*qualsevolfixed o absolute0, excepte si tant margin-left i margin-right s'estableixen en auto. En aquest cas, s'estableix el valor que centra l'àrea de vora dins de width disponible, si es fixa.Mode de disseny absolutament posicionat
flex, inline-flexqualsevolqualsevol0, excepte si hi ha algun espai lliure horitzontal positiu. En aquest cas, es distribueix uniformement a tots els marges auto horitzontals.Mode de disseny Flexbox
+
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi significatiu
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defineix margin-right com animable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defineix el comportament de margin-right en elements flex.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Elimina el seu efecte en els elements en línia
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
+

valor auto

+ 		1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
diff --git a/files/ca/web/css/margin-top/index.html b/files/ca/web/css/margin-top/index.html new file mode 100644 index 0000000000..9642251af6 --- /dev/null +++ b/files/ca/web/css/margin-top/index.html @@ -0,0 +1,156 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

La propietat CSS margin-top estableix l'àrea de marge en la part superior d'un element . Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-top: 10px;  /* An absolute length */
+margin-top: 1em;   /* relative to the text size */
+margin-top: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-top: auto;
+
+/* Global values */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

The effect of the CSS margin-top property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-top és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un valor adequat per utilitzar. Veure {{cssxref("margin")}}.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentsri
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi significatiu
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}Defineix margin-top com animable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}Elimina el seu efecte en els elements en línia
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+

valor auto

+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/ca/web/css/margin-trim/index.html b/files/ca/web/css/margin-trim/index.html new file mode 100644 index 0000000000..fca1c48772 --- /dev/null +++ b/files/ca/web/css/margin-trim/index.html @@ -0,0 +1,96 @@ +--- +title: margin-trim +slug: Web/CSS/margin-trim +translation_of: Web/CSS/margin-trim +--- +

{{CSSRef}}

+ +

La propietat margin-trim permet al contenidor retallar els marges dels seus fills on s'adhereixen a les vores del contenidor.

+ +

Sintaxi

+ +
+
none
+
Els marges no són retallats pel contenidor.
+
in-flow
+
+

Per a les caixes in-flow contingudes per aquesta caixa, els marges block-axis adjacents a les vores de la caixa estan truncats a zero.

+ +

També trunca qualsevol marge col·lapsat amb aquest marge.

+
+
all
+
Retalla els marges de les caixes in-flow i floats, els marges dels quals coincideixen amb la vora del contingut del contenidor.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Ús bàsic

+ +

Una vegada que es doni suport a aquesta propietat, probablement funcionarà així::

+ +

Quan tinguem un contenidor amb alguns fills en línia i vulguem posar un marge entre cada fill, però no interferir amb l'espaiat al final de la fila, podem fer una cosa així:

+ +
article {
+  background-color: red;
+  margin: 20px;
+  padding: 20px;
+  display: inline-block;
+}
+
+article > span {
+  background-color: black;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  margin-right: 20px;
+}
+ +

El problema aquí és que acabaríem amb 20px massa espaiat a la dreta de la fila, així que tal vegada fariem això per a arreglar-ho:

+ +
span:last-child {
+  margin-right: 0;
+}
+ +

És un dolor haver d'escriure una altra norma per a aconseguir-lo, i tampoc és molt flexible. En lloc d'això, margin-trim podria arreglar-ho:

+ +
 article {
+  margin-trim: in-flow;
+  ...
+}
+ +

Especificacions

+ + + + + + + + + + + + + + +
EspecificacionsEstat
{{SpecName('CSS4 Box', '#margin-trim', 'margin-trim')}}{{Spec2('CSS4 Box')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.margin-trim")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/margin/index.html b/files/ca/web/css/margin/index.html new file mode 100644 index 0000000000..514a06cd6a --- /dev/null +++ b/files/ca/web/css/margin/index.html @@ -0,0 +1,302 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

La propietat CSS margin estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} i {{cssxref("margin-left")}}.

+ +
/* Apply to all four sides */
+margin: 1em;
+
+/* vertical | horizontal */
+margin: 5% auto;
+
+/* top | horizontal | bottom */
+margin: 1em auto 2em;
+
+/* top | right | bottom | left */
+margin: 2px 1em 0 auto;
+
+/* Global values */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ + + +

{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <length>, un <percentage>, o la paraula clau auto. Cada valor pot ser positiu, zero o negatiu.

+ + + +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("percentage")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple senzill

+ +

HTML

+ +
<div class="center">This element is centered.</div>
+
+<div class="outside">This element is positioned outside of its container.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example','100%',120) }}

+ +

Més exemples

+ +
margin: 5%;                 /* all sides: 5% margin */
+
+margin: 10px;               /* all sides: 10px margin */
+
+margin: 1.6em 20px;         /* top and bottom: 1.6em margin */
+                            /* left and right: 20px margin  */
+
+margin: 10px 3% 1em;        /* top:            10px margin */
+                            /* left and right: 3% margin   */
+                            /* bottom:         1em margin  */
+
+margin: 10px 3px 30px 5px;  /* top:    10px margin */
+                            /* right:  3px margin  */
+                            /* bottom: 30px margin */
+                            /* left:   5px margin  */
+
+margin: 2em auto;           /* top and bottom: 2em margin   */
+                            /* box is horizontally centered */
+
+margin: auto;               /* top and bottom: 0 margin     */
+                            /* box is horizontally centered */
+
+ +

Notes

+ +

Centrat horitzontal

+ +

Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar display: flex; justify-content: center; .

+ +

Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu margin: 0 auto; .

+ +

Col.lapse del marge

+ +

Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu Dominar el col.lapse del marge per obtenir més informació.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No hi ha canvis significatius .
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defineix margin com animable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Elimina el seu efecte en elements en línia .
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Definició iniciaI.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{CompatUnknown}}{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/max-height/index.html b/files/ca/web/css/max-height/index.html new file mode 100644 index 0000000000..9ae113b699 --- /dev/null +++ b/files/ca/web/css/max-height/index.html @@ -0,0 +1,223 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

La propietat CSS max-height estableix l'alçada màxima d'un element. Impedeix que el valor utilitzat per la propietat {{ Cssxref("height") }} sigui més gran que el valor especificat per max-height.

+ +
/* <length> value */
+max-height: 3.5em;
+
+/* <percentage> value */
+max-height: 75%;
+
+/* Keyword values */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Global values */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

{{ Cssxref("max-height") }} anul·la {{cssxref("height")}}, però {{ Cssxref("min-height") }} anul·la {{ Cssxref("max-height") }}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'alçada màxima, expressada com {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
L'alçada màxima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no s'especifica explícitament, el valor del percentatge es tractarà com a zero.
+
+ +

Valors de paraules clau

+ +
+
none
+
L'alçada no té un valor màxim.
+
max-content{{experimental_inline()}}
+
L'alçada preferida intrínseca.
+
min-content{{experimental_inline()}}
+
L'alçada mínima intrínseca.
+
fill-available{{experimental_inline()}}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit. (Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available.)
+
fit-content{{experimental_inline()}}
+
El mateix que max-content.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}{{ Spec2('CSS3 Transitions') }}Defineix max-height com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegador compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}7.07.01.0
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content i fit-content {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}9[3](bug)
fill-available {{ experimental_inline() }}{{ CompatNo() }}{{CompatNo}}{{ CompatNo() }} {{ bug(527285) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
s'aplica a <table>[1]{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content i fit-content {{ experimental_inline() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9[3](bug)
fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-height amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.

+ +

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content. No hi ha equivalent per fill-available o fit-content.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/max-width/index.html b/files/ca/web/css/max-width/index.html new file mode 100644 index 0000000000..445a4e76ff --- /dev/null +++ b/files/ca/web/css/max-width/index.html @@ -0,0 +1,234 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

La propietat CSS max-width estableix l'amplada màxima d'un element . Impedeix que el valor utilitzat per la propietat {{ Cssxref("width") }} sigui més gran que el valor especificat per max-width.

+ +
/* <length> value */
+max-width: 3.5em;
+
+/* <percentage> value */
+max-width: 75%;
+
+/* Keyword values */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Global values */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

{{ Cssxref("max-width") }} anul·la {{cssxref("width")}}, però {{ Cssxref("min-width") }} anul·la {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'amplada màxima, expressada com {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
L'amplada màxima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor.
+
+ +

Valors de paraules clau

+ +
+
none
+
L'amplada no té un valor màxim.
+
max-content{{experimental_inline()}}
+
L'amplada preferida intrínseca.
+
min-content{{experimental_inline()}}
+
L'amplada mínima intrínseca.
+
fill-available{{experimental_inline()}}
+
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau , available.)
+
fit-content{{experimental_inline()}}
+
El mateix que max-content.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

En aquest exemple, el "fill" tindrà 150 píxels d'amplada o l'amplada del "pare", el que sigui més petit:

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

El valor fit-content es pot utilitzar per establir l'amplada d'un element en funció de la grandària intrínseca que requereix el seu contingut:

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació).
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defineix max-width com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}7.04.02.0.2 (416),
+ buggy before
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de max-width amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing .

+ +

[3] WebKit implementa una proposta anterior per establir l'alçada a una alçada intrínseca: les paraules clau són intrinsic, en comptes de max-content i min-intrinsic, en comptes de min-content No hi ha equivalent per fill-available o fit-content.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/min-height/index.html b/files/ca/web/css/min-height/index.html new file mode 100644 index 0000000000..10f4f67152 --- /dev/null +++ b/files/ca/web/css/min-height/index.html @@ -0,0 +1,211 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

La propietat CSS min-height estableix l'alçada mínima d'un element . Impedeix que el valor utilitzat per la propietat {{ Cssxref("height") }} sigui més petit que el valor especificat per min-height.

+ +
/* <length> value */
+min-height: 3.5em;
+
+/* <percentage> value */
+min-height: 10%;
+
+/* Keyword values */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* Global values */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

L'alçada de l'element s'ajusta al valor de min-height cada vegada que min-height és més gran que {{ Cssxref("max-height") }} o {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'alçada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida.
+
{{cssxref("<percentage>")}}
+
L'alçada mínima, expressada com {{cssxref("<percentage>")}} de l'alçada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida.
+
+ +

Valors de paraules clau

+ +
+
auto
+
L'alçada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys.
+
+ +
+
max-content {{ experimental_inline() }}
+
L'alçada preferida intrínseca.
+
min-content {{ experimental_inline() }}
+
L'alçada mínima intrínseca.
+
fill-available{{ experimental_inline() }}
+
L'alçada del bloc contenidor menys el marge vertical, la vora i el farcit . ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available.)
+
fit-content {{ experimental_inline() }}
+
Segons CSS3 Box, aquest és un sinònim de min-content. CSS3 Sizing defineix un algoritme més complex, però cap navegador l'implementa, fins i tot de forma experimental.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

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

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content i fill-available. ( Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació )
{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}{{ Spec2('CSS3 Flexbox') }}Afegeix la paraula clau auto i l'utilitza com a valor inicial.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}{{ Spec2('CSS3 Transitions') }}Defineix min-height com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.9") }}7.0 [3]4.01.0
+ 2.0.2 (416) for positioned elements
s'aplica a <table>[1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatNo() }}{{CompatNo}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}9
auto{{obsolete_inline(22)}}21.0{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }}{{ CompatNo() }}12.10{{ CompatNo() }}
auto com a valor incial{{obsolete_inline(22)}}21.0{{CompatUnknown}}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de min-height amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] A causa de l'error ({{bug("307866")}}) Firefox no maneja min-height en elements amb display: table-*.

+ +

[3] A Internet Explorer 10-11 (però no 12+), una declaració min-height en un contenidor flex de direcció-columna no s'aplica als elements flex del contenidor. Consulteu Flexbug #3 per més informació.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/min-width/index.html b/files/ca/web/css/min-width/index.html new file mode 100644 index 0000000000..f0c3067728 --- /dev/null +++ b/files/ca/web/css/min-width/index.html @@ -0,0 +1,257 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La propietat CSS min-width estableix l'amplada mínima d'un element. Impedeix que el valor utilitzat per la propietat {{ Cssxref("width") }} sigui més ampla que el valor especificat 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;
+
+ +

L'amplada de l'element s'ajusta al valor de min-width  cada vegada que min-width és més gran que  {{ Cssxref("max-width") }} o {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
L'amplada mínima, expressada com {{cssxref("<length>")}}. Els valors negatius fan que la declaració no sigui vàlida .
+
{{cssxref("<percentage>")}}
+
L'amplada mínima, expressada com {{cssxref("<percentage>")}} de l'amplada del bloc contenidor. Els valors negatius fan que la declaració no sigui vàlida .
+
+ +

Valors de paraules clau

+ +
+
auto
+
L'amplada mínima predeterminada per a elements flexibles, proporcionant un valor predeterminat més raonable que 0 per a altres dissenys .
+
max-content {{ experimental_inline() }}
+
L'amplada preferida intrínseca.
+
min-content {{ experimental_inline() }}
+
L'amplada mínima intrínseca.
+
fill-available{{ experimental_inline() }}
+
L'amplada del bloc contenidor menys el marge horitzontal, la vora i el farcit. ( Tingueu en compte que alguns navegadors implementen un nom antic per a aquesta paraula clau, available).
+
fit-content {{ experimental_inline() }}
+
Definit com min(max-content, max(min-content, fill-available)).
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

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

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Afegeix les paraules clau max-content, min-content, fit-content, and fill-available keywords. (Els esborranys CSS3 Box i CSS3 Writing Modes s'utilitzen per definir aquestes paraules clau, però són substituïdes per aquesta especificació)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Afegeix la paraula clau auto keyword i l'utilitza com a valor inicial.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Defineix min-width com animable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
s'aplica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content i fill-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 com a valor inicial{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
s'aplica a <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content i fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto com a valor inicial{{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 deixa explícitament indefinit el comportament de min-width amb {{ HTMLElement("table") }}. Per tant, qualsevol comportament és compatible amb CSS2.1; les noves especificacions de CSS poden definir aquest comportament, de manera que els desenvolupadors web no haurien de confiar en un específic ara.

+ +

[2] Gecko implementa experimentalment les definicions donades en CSS3 Basic Box. Aquesta defineix available i no fill-available. També la definició de fit-content és més simple que en CSS3 Sizing.

+ +

[3] WebKit també implementa una proposta anterior, la paraula clau intrinsic.

+ +

[4] Aquestes implementacions on s'implementa un comportament lleugerament més simple per a aquesta paraula clau: calcula min-content en elements flexibles, i computa a 0 en tota la resta.

+ +

[5] En alguns navegadors, a iOS, un element <button> en la seva configuració nativa (predeterminada) no respondrà a min-width. Aquest problema es deu als botons natius. Un <span> dins d'un botó natiu mostrarà el mateix problema, malgrat tenir definit "display:inline-block". Quan es fan canvis en altres paràmetres d'estil i el navegador es veu obligat a abandonar el botó natiu, la configuració min-width es veu afectada.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow-x/index.html b/files/ca/web/css/overflow-x/index.html new file mode 100644 index 0000000000..28ed745f75 --- /dev/null +++ b/files/ca/web/css/overflow-x/index.html @@ -0,0 +1,192 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-x +--- +
{{CSSRef}}
+ +

La propietat overflow-x especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores esquerra i dreta.

+ +
/* El contingut no es retallat */
+overflow-x: visible;
+
+/* El contingut es retallat, sense barres desplaçament */
+overflow-x: hidden;
+
+/* El contingut es retallat, amb barres desplaçament */
+overflow-x: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow-x: auto;
+
+/* Valors globals */
+overflow-x: inherit;
+overflow-x: initial;
+overflow-x: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
+
hidden
+
El contingut es retalla i no es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-x:hidden</code> —  amaga el text fora de la caixa
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:scroll</code> — afegeix sempre una barra de desplaçament
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:visible</code> — mostra el text fora de la caixa, si és necessari
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-x:auto</code> — a la majoria de navegadors, equivalent a <code>scroll</code>
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+
+ +

CSS

+ +
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-x: hidden;}
+#div2 { overflow-x: scroll;}
+#div3 { overflow-x: visible;}
+#div4 { overflow-x: auto;}
+
+ +

Resultat

+ +
+

{{EmbedLiveSample("Examples", "100%", "270")}}

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}}{{Spec2('CSS3 Overflow')}} 
{{SpecName('CSS3 Box', '#overflow-x', 'overflow-x')}}{{Spec2('CSS3 Box')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}5.0[1]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 8 va introduir -ms-overflow-x com sinònim de overflow-x. No utilitzeu el prefix -ms-.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow-y/index.html b/files/ca/web/css/overflow-y/index.html new file mode 100644 index 0000000000..4426f507b4 --- /dev/null +++ b/files/ca/web/css/overflow-y/index.html @@ -0,0 +1,196 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Box Model + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

La propietat overflow-y especifica si s'ha de retallar el contingut, mostrar una barra de desplaçament o mostrar el contingut de desbordament d'un element de nivell de bloc, quan es desbordan les vores superior i inferior.

+ +
/* El contingut no es retallat */
+overflow-y: visible;
+
+/* El contingut es retallat, sense barres desplaçament */
+overflow-y: hidden;
+
+/* El contingut es retallat, amb barres desplaçament */
+overflow-y: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow-y: auto;
+
+/* Valors globals */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+
+ +
{{cssinfo}}
+ +

Sintaxi

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut.
+
hidden
+
El contingut es retalla i no es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla i els exploradors d'escriptori utilitzen barres de desplaçament, independentment que s'hagi retallat o no qualsevol contingut. Això evita qualsevol problema amb les barres de desplaçament que apareixen i desapareixen en un entorn dinàmic. Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — amaga el text fora de la caixa
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — afegeix sempre una barra de desplaçament
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — mostra el text fora de la caixa, si és necessari
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — a la majoria de navegadors, equivalent a <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+
+ +

Resultat

+ +
+

{{EmbedLiveSample("Example", "100%", "780")}}

+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}{{ Spec2('CSS3 Overflow') }} 
{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}{{Spec2('CSS3 Box')}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}5.0 [*]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[*] IE8 va introduir -ms-overflow-y com a sinònim de overflow-y. No utilitzeu el prefix -ms-.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overflow/index.html b/files/ca/web/css/overflow/index.html new file mode 100644 index 0000000000..fa1264359d --- /dev/null +++ b/files/ca/web/css/overflow/index.html @@ -0,0 +1,273 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

La propietat CSS overflow especifica si s'ha de retallar el contingut, mostrar barres de desplaçament o mostrar el contingut desbordat quan és massa gran per al seu contenidor a nivell de bloc.

+ +
/* El contingut no es retallat */
+overflow: visible;
+
+/* El contingut es retallat, sense barres de desplaçament */
+overflow: hidden;
+
+/* El contingut es retallat, amb barres de desplaçament */
+overflow: scroll;
+
+/* Deixa que el navegador decideixi */
+overflow: auto;
+
+/* Valors globals */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ + + +

{{EmbedLiveSample("overflow", "100%", 200, "", "", "example-outcome-frame")}}

+ +

L'ús d' overflow amb un valor diferent a visible (per defecte) crea un nou context de format de bloc. Això és necessari per motius tècnics — si un flotador es creua amb l'element de desplaçament, el contingut es torna a embolicar per la força després de cada pas de desplaçament, donant lloc a una experiència de desplaçament lent.

+ +

Per tal que l' overflow tingui un efecte, el contenidor a nivell de bloc ha de tenir una alçada definida (height o max-height) o white-space establert a nowrap.

+ +
+

Nota: La propietat de JavaScript {{domxref("Element.scrollTop")}} es pot utilitzar per desplaçar un element HTML fins i tot quan overflow està configurat com hidden.

+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat overflow s'especifica com una sola paraula clau triada de la llista de valors que es mostra a continuació.

+ +

Valors

+ +
+
visible
+
El contingut no es retalla i es pot mostrar fora de la caixa de contingut. Valor per defecte.
+
hidden
+
El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. No es proporcionen barres de desplaçament.
+
scroll
+
El contingut es retalla si és necessari per adaptar-lo a la caixa de contingut. Els navegadors mostren les barres de desplaçament independentment que el contingut estigui o no retallat. (Això evita que les barres de desplaçament apareguin o desapareguin quan el contingut canvia). Les impressores poden imprimir contingut desbordat.
+
auto
+
Depèn de l'agent d'usuari. Si el contingut s'adapta a l'interior de la caixa de contingut, es veurà igual que visible, però se segueix establint un nou context de format de bloc. Els navegadors d'escriptori com Firefox proporcionen barres de desplaçament si el contingut es desborda.
+
+ +
+
overlay {{experimental_inline}} {{deprecated_inline}}
+
Es comporta de la mateixa manera que auto, però amb les barres de desplaçament sobre el contingut en lloc d'ocupar espai. Només s'admet en navegadors basats en WebKit (p. ex., Safari) i basats en Blink (p. ex., Chrome o Opera).
+
+ +

Extensions Mozilla

+ +
+
-moz-scrollbars-none {{obsolete_inline}}
+
Utilitzeu overflow: hidden en el seu lloc.
+
-moz-scrollbars-horizontal {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-scrollbars-vertical {{deprecated_inline}}
+
Es preferible l'ús de {{Cssxref("overflow-x")}} i {{Cssxref("overflow-y")}}.
+
-moz-hidden-unscrollable {{non-standard_inline}}
+
Destinat principalment per a ús intern i per temes. Desactiva el desplaçament dels elements arrel XML, <html> i <body> amb les tecles de fletxa del teclat i la roda del ratolí.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
p {
+  width: 12em;
+  height: 6em;
+  border: dotted;
+  overflow: visible; /* el contingut no es retalla */
+}
+
+ +

visible (per defecte)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* no es proporcionen barres de desplaçament */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* mostra sempre barres de desplaçament */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* afegeix barres de desplaçament si és necessari */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}} 
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}No canvia.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}[1]4.0[2]7.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] A través de Firefox 3.6 (Gecko 1.9.2), la propietat overflow s'aplica incorrectament als elements del grup de taula (<thead> , <tbody> , <tfoot>). Aquest comportament es corregeix en versions posteriors.

+ +

[2] Internet Explorer 4 a 6 amplia un element amb overflow: visible (valor predeterminat) per adaptar-se al contingut que hi ha dins. height/width es comportan com min-height/min-width.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/overscroll-behavior-block/index.html b/files/ca/web/css/overscroll-behavior-block/index.html new file mode 100644 index 0000000000..000b4e8c9c --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-block/index.html @@ -0,0 +1,133 @@ +--- +title: overscroll-behavior-block +slug: Web/CSS/overscroll-behavior-block +translation_of: Web/CSS/overscroll-behavior-block +--- +
{{CSSRef}}
+ +

La propietat CSS overscroll-behavior-block estableix el comportament del navegador quan s'arriba al límit de direcció de bloc d'una àrea de desplaçament.

+ +

Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.

+ +
/* Keyword values */
+overscroll-behavior-block: auto; /* default */
+overscroll-behavior-block: contain;
+overscroll-behavior-block: none;
+
+/* Global values */
+overscroll-behavior-block: inherit;
+overscroll-behavior-block: initial;
+overscroll-behavior-block: unset;
+
+ +

Sintaxi

+ +

La propietat overscroll-behavior-block s'especifica com una paraula clau triada de la llista de valors de sota.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (e.ex. Els efectes "rebot" o refrescs), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Prevenint el desplaçament del bloc

+ +

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("height")}} establert en ella de manera que la pàgina es desplaçarà verticalment. La caixa interior té una petita {{cssxref("width")}} (i height) establerta sobre ella de manera que s'assenta de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una gran height de manera que també es desplaçarà verticalment..

+ +

Per defecte, quan la capsa interior es desplaça i s'arriba a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció del bloc, hem establert overscroll-behavior-block: contain en la caixa interior.

+ +

HTML

+ +
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  height: 3000px;
+  width: 500px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-block: contain;
+}
+
+div > div {
+  height: 1500px;
+  width: 100%;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 340px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior-block")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/overscroll-behavior-inline/index.html b/files/ca/web/css/overscroll-behavior-inline/index.html new file mode 100644 index 0000000000..1cc7a7c605 --- /dev/null +++ b/files/ca/web/css/overscroll-behavior-inline/index.html @@ -0,0 +1,134 @@ +--- +title: overscroll-behavior-inline +slug: Web/CSS/overscroll-behavior-inline +translation_of: Web/CSS/overscroll-behavior-inline +--- +
{{CSSRef}}
+ +

+La propietat CSS overscroll-behavior-inline estableix el comportament del navegador quan s'arriba al límit de direcció en línia d'una àrea de desplaçament.

+ +

Veure {{cssxref("overscroll-behavior")}} per a una explicació completa.

+ +
/* Keyword values */
+overscroll-behavior-inline: auto; /* default */
+overscroll-behavior-inline: contain;
+overscroll-behavior-inline: none;
+
+/* Global values */
+overscroll-behavior-inline: inherit;
+overscroll-behavior-inline: initial;
+overscroll-behavior-inline: unset;
+
+ +

Sintaxi

+ +

La propietat overscroll-behavior-inline s'especifica com una paraula clau triada de la llista de valors de sota.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p. ex. g. Els efectes "rebot o refrescs), no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Evitar el desplaçament en línia

+ +

En aquesta demostració tenim dues caixes a nivell de bloc, una dins l'altra. La caixa exterior té una gran {{cssxref("width")}} establert en ella de manera que la pàgina es desplaçarà horitzontalment. La caixa interior té una petita amplada (i {{cssxref("height")}}) establerta sobre ella de manera que es troba de manera inexcusable dins de l'àrea de visualització, però el seu contingut té una amplada gran de manera que també es desplaçarà horitzontalment.

+ +

Per defecte, quan la caixa interior es desplaçi i s'arribi a un límit de desplaçament, tota la pàgina començarà a desplaçar-se, que probablement no és el que volem. Per evitar que això passi en la direcció en línia, hem establert overscroll-behavior-inline: contain en la caixa interior.

+ +

HTML

+ +
<main>
+  <div>
+    <div>
+      <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
+    </div>
+  </div>
+</main>
+ +

CSS

+ +
main {
+  height: 400px;
+  width: 3000px;
+  background-color: white;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+main > div {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-inline: contain;
+}
+
+div > div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

Result

+ +

{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior-inline")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/overscroll-behavior/index.html b/files/ca/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..9ed28a5a0b --- /dev/null +++ b/files/ca/web/css/overscroll-behavior/index.html @@ -0,0 +1,106 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

la propietat CSS overscroll-behavior estableix el que fa un navegador quan arriba al límit d'una àrea de desplaçament. És una abreujada per {{cssxref("overscroll-behavior-x")}} i {{cssxref("overscroll-behavior-y")}}.

+ +
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overscroll-behavior: inherit;
+overscroll-behavior: initial;
+overscroll-behavior: unset;
+
+ +

Per defecte, els navegadors mòbils tendeixen a proporcionar un efecte "rebot" o fins i tot una actualització de pàgina quan s'arriba a la part superior o inferior d'una pàgina (o una altra àrea de desplaçament). També us podeu haver adonat que quan tingueu un quadre de diàleg amb contingut de desplaçament a la part superior d'una pàgina de contingut de desplaçament, una vegada s'hagi assolit el límit de desplaçament del quadre de diàleg, la pàgina subjacent començarà a desplaçar-se - això s'anomena scroll chaining (encadenament de desplaçament).

+ +

En alguns casos aquests comportaments no són desitjables. Es pot utilitzar overscroll-behavior per desfer-se de l'encadenament de desplaçament no desitjat i de l'aplicació de Facebook/Twitter inspirada en el comportament de "tirar per a refrescar" del navegador

+ +

Sintaxi

+ +

La propietat overscroll-behavior s'especifica com una o dues paraules clau triades de la llista de valors de sota.

+ +

Dues paraules clau especifican el valor de overscroll-behavior en els eixos x i y respectivament. Si només s'especifica un valor, tant x com y se suposa que tenen el mateix valor.

+ +

Valors

+ +
+
auto
+
El comportament per defecte de desbordament de desplaçament es produeix com a normal.
+
contain
+
El comportament per defecte del desbordament de desplaçament s'observa dins de l'element on aquest valor està establert (p.ex. efectes de "rebot" o refrescos), però no es produeix cap encadenament de desplaçament a les zones veïnes, p.ex. els elements subjacents no es desplaçaran.
+
none
+
No es produeix cap encadenament de desplaçament a les zones veïnes, i s'impedeix el comportament per defecte de desbordament de desplaçament.
+
+ +

Definició formal

+ +

{{cssinfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Evitar que un element subjacent es desplaci

+ +

En el nostre exemple d'overscroll-behavior example (vegeu també el codi font source code), presentem una llista de pàgines senceres de contactes falsos, i un quadre de diàleg que conté una finestra de xat.

+ +

+ +

Totes dues àrees es desplacen; normalment, si es desplaça la finestra del xat fins a arribar a un límit de desplaçament, la finestra de contactes subjacent començaria a desplaçar-se també, la qual no és desitjable. Això es pot aturar fent servir overscroll-behavior-y (també funciona overscroll-behavior) a la finestra de xat com ara:

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

També voldríem desfer-nos dels efectes de desplaçament estàndard quan els contactes es desplacen cap amunt o cap avall (p. ex. Chrome on Android refresca la pàgina quan es desplaça més enllà del límit superior). Això pot evitar-se establint overscroll-behavior: none en l'element {{htmlelement("body")}}:

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Especificacions

+ + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}}
+ +

Compatibilitat amb el navegador

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

Veure també

+ + diff --git a/files/ca/web/css/padding-bottom/index.html b/files/ca/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..5fb786bd98 --- /dev/null +++ b/files/ca/web/css/padding-bottom/index.html @@ -0,0 +1,149 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

La propietat CSS padding-bottom estableix l'alçada de l'àrea de farcit a la part inferior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value */
+padding-bottom: 10%;
+
+/* Global values */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

The effect of the CSS padding-bottom property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-bottom como animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi des de {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-left/index.html b/files/ca/web/css/padding-left/index.html new file mode 100644 index 0000000000..8d4d4bef27 --- /dev/null +++ b/files/ca/web/css/padding-left/index.html @@ -0,0 +1,147 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

La propietat CSS padding-left estableix l'amplada de l'àrea de farcit a la part esquerra d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* <percentage> value */
+padding-left: 10%;
+
+/* Global values */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-left como animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi.
{{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-right/index.html b/files/ca/web/css/padding-right/index.html new file mode 100644 index 0000000000..7e5baa72e8 --- /dev/null +++ b/files/ca/web/css/padding-right/index.html @@ -0,0 +1,147 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

La propietat CSS padding-right estableix l'amplada de l'àrea de farcit a la part dreta d'un element. A diferència dels marges, no es permeten valors negatius per al farcit . La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> value */
+padding-right: 10%;
+
+/* Global values */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-right com animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi.
{{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git a/files/ca/web/css/padding-top/index.html b/files/ca/web/css/padding-top/index.html new file mode 100644 index 0000000000..2311e2a624 --- /dev/null +++ b/files/ca/web/css/padding-top/index.html @@ -0,0 +1,149 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-top +--- +
{{CSSRef}}
+ +

La propietat CSS padding-top estableix l'alçada de l'àrea de farcit a la part superior d'un element. A diferència dels marges, no es permeten valors negatius per al farcit. La propietat abreujada {{cssxref("padding")}} es pot utilitzar per establir farcits als quatre costats d'un element amb una sola declaració.

+ +
/* <length> values */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> value */
+padding-top: 10%;
+
+/* Global values */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

L'àrea de farcit d'un element és l'espai entre el seu contingut i la seva vora.

+ +

The effect of the CSS padding-top property on the element box

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No hi ha cap canvi des de {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defineix padding-top com animable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No hi ha cap canvi des de {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 Vegeu també

+ + diff --git a/files/ca/web/css/padding/index.html b/files/ca/web/css/padding/index.html new file mode 100644 index 0000000000..7e93cddcf1 --- /dev/null +++ b/files/ca/web/css/padding/index.html @@ -0,0 +1,255 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

La propietat CSS padding estableix l'àrea de farcit als quatre costats d'un element. És una abreviatura que estableix tots els farcits individuals alhora: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.

+ +
/* Apply to all four sides */
+padding: 1em;
+
+/* vertical | horizontal */
+padding: 5% 10%;
+
+/* top | horizontal | bottom */
+padding: 1em 2em 2em;
+
+/* top | right | bottom | left */
+padding: 5px 1em 0 1em;
+
+/* Global values */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ + + +

{{EmbedLiveSample("padding", "100%", 280, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat padding es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <length> o un <percentage>.

+ + + +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple senzill

+ +

HTML

+ +
<h4>This element has moderate padding.</h4>
+<h3>The padding is huge in this element!</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

{{EmbedLiveSample('Simple_example','100%',300)}}

+ +

Més exemples

+ +
padding: 5%;                /* all sides: 5% padding */
+
+padding: 10px;              /* all sides: 10px padding */
+
+padding: 10px 20px;         /* top and bottom: 10px padding */
+                            /* left and right: 20px padding */
+
+padding: 10px 3% 20px;      /* top:            10px padding */
+                            /* left and right: 3% padding   */
+                            /* bottom:         20px padding */
+
+padding: 1em 3px 30px 5px;  /* top:    1em padding  */
+                            /* right:  3px padding  */
+                            /* bottom: 30px padding */
+                            /* left:   5px padding  */
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}No canvia.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}No canvia.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + diff --git "a/files/ca/web/css/refer\303\251ncia_css/index.html" "b/files/ca/web/css/refer\303\251ncia_css/index.html" new file mode 100644 index 0000000000..739dcdc9e3 --- /dev/null +++ "b/files/ca/web/css/refer\303\251ncia_css/index.html" @@ -0,0 +1,206 @@ +--- +title: Referéncia CSS +slug: Web/CSS/Referéncia_CSS +tags: + - CSS + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +

Utilitzeu aquesta referència CSS per explorar un índex alfabètic de totes les propietats CSS estàndard , pseudo-classes, pseudo-elements, tipus de dades, i regles-at. També podeu explorar una llista de tots els  selectors CSS organitzats per tipus i una llista de conceptes clau CSS. També s'inclou una breu referència DOM-CSS / CSSOM.

+ +

Sintaxi de regla bàsica

+ +

Sintaxi de regla d'estil

+ +
selectorlist {
+  property: value;
+  [more property:value; pairs]
+}
+
+... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-class, pseudo-element lists below.
+
+ +

Exemples de regla d'estil

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

Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu aquest tutorial. Tingueu en compte que qualsevol error de sintaxi CSS en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment basades en text (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està basat en objectes.

+ +

Sintaxi de regla-At (At-rule)

+ +

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want.

+ +

Índex de paraules clau (Keyword)

+ +
{{CSS_Ref}}
+ +

Selectors

+ +

Selectors Bàsics

+ + + +

Combinadors

+ + + +

Pseudo-classes

+ +
+ +
+ +

Pseudo-elements

+ +
+ +
+ +
+

Vegeu també: Una llista completa de selectors en l'especificació Selectors Level 3.

+
+ +

Conceptes

+ +

Sintaxi i semàntica

+ + + +

Valors

+ + + +

Disseny

+ + + +

DOM-CSS / CSSOM

+ +

Tipus d'objectes principals

+ + + +

Mètodes importants

+ + + +

Vegeu també

+ + diff --git a/files/ca/web/css/selectors_css/index.html b/files/ca/web/css/selectors_css/index.html new file mode 100644 index 0000000000..9eaf8daffc --- /dev/null +++ b/files/ca/web/css/selectors_css/index.html @@ -0,0 +1,156 @@ +--- +title: Selectors CSS +slug: Web/CSS/Selectors_CSS +tags: + - CSS + - CSS Selectors + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Els Selectors CSS defineixen els elements als quals s'aplica un conjunt de normes CSS.

+ +

Selectors Bàsics

+ +
+
Selector de tipus
+
Selecciona tots els elements que coincideixen amb el nom del node donat.
+ Sintaxi: eltname
+ Exemple: input coincidirà amb qualsevol element {{HTMLElement('input')}}
+
Selector de clase
+
Selecciona tots els elements que tenen l'atribut class donat.
+ Sintaxi: .classname
+ Exemple: .index coincidirà amb qualsevol element que tingui una classe "index"
+
Selector de ID
+
Selecciona un element basat en el valor del seu atribut id. Només hi ha d'haver un element amb una ID determinat en un document.
+ Sintaxi: #idname
+ Exemple: #toc coincidiran amb l'element que té l'ID "toc".
+
Selector universal
+
Selecciona tots els elements. De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.
+ Sintaxi: * ns|* *|*
+ Exemple: * coincideix amb tots els elements del document.
+
Selector d'atribut
+
Selecciona elements basats en el valor de l'atribut donat.
+ Sintaxi: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Exemple: [autoplay] coincidiran tots els elements que tenen establert l'atribut autoplay (a qualsevol valor).
+
+ +

Combinadors

+ +
+
Combinador de germans adjacents
+
El combinador + selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.
+ Sintaxi: A + B
+ Exemple: h2 + p coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.
+
Combinador general de germans
+
El combinador ~ selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.
+ Sintaxi: A ~ B
+ Exemple: p ~ span coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.
+
Combinador de fills
+
El combinador > selecciona els nodes que són fills directes del primer element.
+ Sintaxi: A > B
+ Exemple: ul > li coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.
+
Combinador de descendents
+
El combinador    selecciona els nodes que són descendents del primer element.
+ Sintaxi: A B
+ Exemple: div span coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.
+
+ +

Pseudo-classes

+ +

Pseudo-classes permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.

+ +

Exemple: a:visited coincidirà amb tots els elements {{HTMLElement('a')}} que hagi visitat l'usuari.

+ +

Pseudo-elements

+ +

Pseudo-elements representen entitats que no estan incloses en HTML.

+ +

Exemple: p::first-line coincidirà amb la primera línia de tots els elements {{HTMLElement('p')}}.

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióChromeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
DescripcióAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..53339b06e5 --- /dev/null +++ b/files/ca/web/css/selectors_css/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,69 @@ +--- +title: 'Ùs de la pseudo-class :target en selectors' +slug: 'Web/CSS/Selectors_CSS/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - Guide + - Reference + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

Quan una URL apunta a una peça específica d'un document, pot ser difícil per a l'usuari adonar-se. Esbrineu com podeu fer servir algun CSS senzill per cridar l'atenció sobre el destí d'una URL i millorar l'experiència de l'usuari.

+ +

Triar un destí

+ +

La pseudo-class {{ Cssxref(":target") }}s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, l'URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#example conté el identificador de fragment #example. En HTML, els identificadors corresponent els valors dels atributs id o name, ja que tots dos comparteixen el mateix espai de noms. Per tant, l'URI d'exemple assenyalaria l'encapçalament "example" en aquest document.

+ +

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

+ +
h2:target {font-weight: bold;}
+ +

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #example, escriuríem:

+ +
#example:target {border: 1px solid black;}
+ +

Dirigit a tots els elements

+ +

Si la intenció és crear un estil "ampli" que s'apliqui a tots els elements seleccionats, llavors el selector universal, ve molt bé:

+ +
:target {color: red;}
+
+ +

Exemple

+ +

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusió

+ +

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

+ + + + + +
+

Informació del document original

+ + +
diff --git a/files/ca/web/css/selectors_d'atribut/index.html b/files/ca/web/css/selectors_d'atribut/index.html new file mode 100644 index 0000000000..6778a2b3cb --- /dev/null +++ b/files/ca/web/css/selectors_d'atribut/index.html @@ -0,0 +1,250 @@ +--- +title: Selector Atribut +slug: Web/CSS/Selectors_d'Atribut +tags: + - Beginner + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

+ +
/* <a> elements amb l'atribut title */
+a[title] {
+  color: purple;
+}
+
+/* elements <a> amb una coincidència href "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* elements <a> amb un href contenint "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* elements <a> amb un href amb una terminació ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Representa un element amb un nom d'atribut attr.
+
[attr=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
+
[attr~=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
+
[attr|=value]
+
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
+
[attr^=value]
+
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
+
[attr$=value]
+
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
+
[attr*=value]
+
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
+
[attr operator value i]
+
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).
+
+ +

Exemples

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links that end in ".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>
+ +

Resultat

+ +

{{EmbedLiveSample('Links')}}

+ +

Llengües

+ +

CSS

+ +
/* Tots els divs amb un atribut `lang` són en negreta. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tots els divs en US Anglès són blaus. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tots els divs en Portuguès són verds. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tots els divs en Xinès són vermells, ja sigui
+   simplificat (zh-CN) o tradicional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tots els divs en Xinès Traditional
+   `data-lang` són porpra */
+/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
+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>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Languages')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
Modificador sense distinció de majúscules i minúscules{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(36)}}{{CompatSafari(9)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Modificador sense distinció de majúscules i minúscules{{CompatUnknown}}{{CompatChrome(49.0)}}{{CompatNo}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatSafari(9)}}{{CompatChrome(49.0)}}
+
diff --git a/files/ca/web/css/selectors_de_classe/index.html b/files/ca/web/css/selectors_de_classe/index.html new file mode 100644 index 0000000000..1f8cfdbee4 --- /dev/null +++ b/files/ca/web/css/selectors_de_classe/index.html @@ -0,0 +1,139 @@ +--- +title: Selector Class +slug: Web/CSS/Selectors_de_Classe +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

El selector class CSS coincideix amb elements basats en el contingut de l'atribut {{htmlattrxref("class")}}.

+ +
/* Tots els elements amb class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* Tots els elements <li> amb class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+ +

Sintaxi

+ +
.classname { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[class~=classname] { style properties }
+ +

Exemple

+ +

CSS

+ +
div.classy {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div class="classy">This div has a special class on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_descendents/index.html b/files/ca/web/css/selectors_de_descendents/index.html new file mode 100644 index 0000000000..1eb4fd57f8 --- /dev/null +++ b/files/ca/web/css/selectors_de_descendents/index.html @@ -0,0 +1,170 @@ +--- +title: Selectors de descendents +slug: Web/CSS/Selectors_de_descendents +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

+ +
/* Llista els elemenst que són descendsnts de la llista "my-things" */
+ul.my-things li {
+  margin: 2em;
+}
+ +

El combinador descendent és tècnicament un o més caràcters d'espais en blanc {{Glossary("CSS")}} - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

+ +

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

+ +

Sintaxi

+ +
selector1 selector2 { /* property declarations */ }
+
+ +
selector1 >> selector2 { /* property declarations */ }
+
+ +

Exemple

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Resultat

+ +

{{EmbedLiveSample('Example', 200, 160)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS4 Selectors')}}>> introduït com combinador descendent a més de l'espai en blanc com combinador.
{{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatSafari("10")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Tipus >>{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_fills/index.html b/files/ca/web/css/selectors_de_fills/index.html new file mode 100644 index 0000000000..f5cb8139f9 --- /dev/null +++ b/files/ca/web/css/selectors_de_fills/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de fills +slug: Web/CSS/Selectors_de_fills +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de fills (>) es col·loca entre dos selectors CSS. Solament coincideix amb aquells elements que coincideixen amb el segon selector que són fills d'elements que coincideixen amb el primer.

+ +
/* Enumera els elements que són fills de la llista "my-things" */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

Els elements que coincideixin amb el segon selector han de ser els fills immediats dels elements que coincideixin amb el primer selector. Això és més estricte que el selector descendent, que coincideix amb tots els elements que coincideixen amb el segon selector per al qual existeix un element ancestral coincident amb el primer selector, independentment de la quantitat de "salts" en el DOM

+ +

Sintaxi

+ +
selector1 > selector2 { style properties }
+
+ +

Exemple

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_de_germans_adjacents/index.html b/files/ca/web/css/selectors_de_germans_adjacents/index.html new file mode 100644 index 0000000000..911a395693 --- /dev/null +++ b/files/ca/web/css/selectors_de_germans_adjacents/index.html @@ -0,0 +1,135 @@ +--- +title: Combinador de germans adjacents +slug: Web/CSS/Selectors_de_germans_adjacents +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador de germans adjacents (+) separa dos selectors i només coincideix amb el segon element si segueix immediatament el primer element, i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que vénen immediatament després de qualsevol imatge */
+img + p {
+  font-style: bold;
+}
+ +

Sintaxi

+ +
former_element + target_element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}Li dóna un nou nom al combinador "next-sibling".
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualitza l'estil correctament quan un element es col·loca dinàmicament abans d'un element que coincideixi amb el selector. En Internet Explorer 8, si un element s'insereix dinàmicament fent clic en un enllaç, l'estil del primer fill no s'aplicarà fins que l'enllaç perdi el focus.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/selectors_de_tipus/index.html b/files/ca/web/css/selectors_de_tipus/index.html new file mode 100644 index 0000000000..d87b102ac3 --- /dev/null +++ b/files/ca/web/css/selectors_de_tipus/index.html @@ -0,0 +1,135 @@ +--- +title: Selector Type +slug: Web/CSS/Selectors_de_Tipus +tags: + - CSS + - HTML + - NeedsMobileBrowserCompatibility + - Node + - Reference + - Selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

El selector type CSS coincideix amb elements per nom del node. En altres paraules, selecciona tots els elements del tipus donat dins d'un document.

+ +
/* Tots els elements <a>. */
+a {
+  color: purple;
+}
+ +

Sintaxi

+ +
element { style properties }
+
+ +

Exemple

+ +

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

Resultat

+ +

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

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Sense canvis
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_general_de_germans/index.html b/files/ca/web/css/selectors_general_de_germans/index.html new file mode 100644 index 0000000000..64429bbaba --- /dev/null +++ b/files/ca/web/css/selectors_general_de_germans/index.html @@ -0,0 +1,129 @@ +--- +title: Combinador general de germans +slug: Web/CSS/Selectors_general_de_germans +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador general de germans (~) separa dos selectors i només coincideix amb el segon element si segueix el primer element (encara que no necessàriament immediatament), i tots dos són fills del mateix pare {{domxref("element")}}.

+ +
/* Paràgrafs que són germans i posteriors a qualsevol imatge */
+img ~ p {
+  color: red;
+}
+ +

Sintaxi

+ +
element ~ element { style properties }
+
+ +

Exemple

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a red span!</span>
+<code>More code...</code>
+<span>And this is a red span!</span>
+
+ +

Resultat

+ +

{{ EmbedLiveSample('Example', 280, 120) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}}Li dona un nou nom al combinador "subsequent-sibling"
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Veure

+ + diff --git a/files/ca/web/css/selectors_id/index.html b/files/ca/web/css/selectors_id/index.html new file mode 100644 index 0000000000..1b6f041eb6 --- /dev/null +++ b/files/ca/web/css/selectors_id/index.html @@ -0,0 +1,134 @@ +--- +title: Selector ID +slug: Web/CSS/Selectors_ID +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un document HTML, el selector ID CSS coincideix amb un element basat en el valor del seu atribut {{htmlattrxref("ID")}}. L'atribut ID de l'element seleccionat ha de coincidir exactament amb el valor indicat en el selector

+ +
/* The element with id="demo" */
+div#demo {
+  border: red 2px solid;
+}
+ +

Sintaxi

+ +
#id_value { style properties }
+ +

Recordeu que això és equivalent al següent {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Exemple

+ +

CSS

+ +
div#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">This div has a special ID on it!</div>
+<div>This is just a regular div.</div>
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/selectors_universal/index.html b/files/ca/web/css/selectors_universal/index.html new file mode 100644 index 0000000000..6aa7931ef9 --- /dev/null +++ b/files/ca/web/css/selectors_universal/index.html @@ -0,0 +1,176 @@ +--- +title: Selector Universal +slug: Web/CSS/Selectors_Universal +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference + - Selectors +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

El selector universal CSS (*) coincideix amb elements de qualsevol tipus.

+ +
/* Selecciona tots els elements */
+* {
+  color: green;
+}
+ +

A partir de CSS3, l'asterisc pot ser usat en combinació amb {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintaxi

+ +
* { style properties }
+ +

L'asterisc és opcional amb selectors simples . Per exemple , *.warning i .warning són equivalents.

+ +

Exemples

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* automatically clear the next sibling after a floating element */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">A green span</span> in a red paragraph.</span>
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">A red span</span> in a green paragraph.</span>
+</p>
+ +

Resultat

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Sense canvis
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Defineix el comportament pel que fa als espais de noms i afegeix suggeriments que permeten ometre el selector dins de pseudo-elements
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definició inicial
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}7{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Combinació amb suport d'espai de noms{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}981.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Combinació amb suport d'espai de noms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/ca/web/css/sintaxi/index.html b/files/ca/web/css/sintaxi/index.html new file mode 100644 index 0000000000..51931c11f0 --- /dev/null +++ b/files/ca/web/css/sintaxi/index.html @@ -0,0 +1,79 @@ +--- +title: Sintaxi +slug: Web/CSS/Sintaxi +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La sintaxi CSS reflecteix aquest objectiu i els seus components bàsics són:

+ + + +

Declaracions CSS

+ +

Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena declaració, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.

+ +

Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.

+ +

css syntax - declaration.png

+ +

Hi ha més de 100 propiertats diferents en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera invàlida i és totalment ignorada per el motor CSS .

+ +

Blocs de declaracions CSS

+ +

Les declaracions s'agrupen en blocs, és a dir, en una estructura delimitada per una clau d'obertura, '{' (U+007B LEFT CURLY BRACKET), i una de tancament, '}' (U+007D RIGHT CURLY BRACKET). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.

+ +

css syntax - block.png

+ +

Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.

+ +

css syntax - declarations block.png

+ +
El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'estil.
+ +

Regles de CSS

+ +

Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.

+ +

CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un conjunt de regles (ruleset), o sovint només una regla (rule).

+ +

css syntax - ruleset.png

+ +

Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en cascade.

+ +
És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.
+
+Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).
+ +

Sentències CSS

+ +

Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.

+ +

Una declaració és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).

+ +

css syntax - statements Venn diag.png

+ +

Hi ha dos tipus de declaracions:

+ + + +

Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.

+ +

Hi ha un altre grup de declaracions – les declaracions niades. Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les regles de grup condicional. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at @media només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at @document només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar conjunts de regles dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en CSS Conditionals Level 3. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.

+ +

Vegeu també

+ + diff --git a/files/ca/web/css/visibility/index.html b/files/ca/web/css/visibility/index.html new file mode 100644 index 0000000000..ce3e835ec9 --- /dev/null +++ b/files/ca/web/css/visibility/index.html @@ -0,0 +1,242 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference + - Web +translation_of: Web/CSS/visibility +--- +
{{CSSRef}}
+ +

La propietat CSS visibility pot mostrar o ocultar un element sense afectar el disseny d'un document (és a dir, es crea espai per a elements, independentment de si són visibles o no). La propietat també pot ocultar files o columnes en un {{HTMLElement("table")}}.

+ +
/* Valors de les paraules claus */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Valors globals */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+
+ +
+

Nota: Per ocultar un element i eliminar-lo del disseny del document, establiu la propietat {{cssxref("display")}} a none en comptes d'utilitzar visibility.

+
+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat visibility s'especifica com un dels valors de les paraules clau que es detallen a continuació.

+ +

Valors

+ +
+
visible
+
La caixa de l'element és visible.
+
hidden
+
La caixa de l'element és invisible (no dibuixada), però encara afecta el disseny normal. Els descendents de l'element seran visibles si tenen visibility establert a visible. L'element no pot rebre el focus (com ara quan navegueu pels índexs de pestanyes).
+
collapse
+
Per {{HTMLElement("table")}} files, columnes, grups de columnes i grups de files, les files o columnes estan ocults i l'espai que han ocupat s'elimina (com si {{Cssxref("display")}}: none s'apliqués a la columna/fila de la taula). Tanmateix, la grandària d'altres files i columnes encara es calcula com si les cel·les de les files o columnes col·lapsades estiguessin presents. Aquest valor permet l'eliminació ràpida d'una fila o columna d'una taula sense forçar el recàlcul d'amplades i alçades per a tota la taula. Per als elements XUL, la grandària calculada de l'element sempre és zero, independentment d'altres estils que normalment afectarien la grandària, tot i que els marges encara tenen efecte. Per a altres elements, collapse es tracta igual que hidden.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Interpolació

+ +

Els valors de visibilitat són interpolables entre visible i no visible. Per tant, un dels valors d'inici o de finalització ha de ser visible o no es pot produir interpolació. El valor s'interpola com un pas discret, on els valors de la funció de temporització entre 0 i 1 es corresponen amb visible i altres valors de la funció de temporització (que només es produeixen a l'inici/final de la transició o com a resultat de funcions cubic-bezier() amb valors y fora de [0, 1]) aplicat fins a l'extrem més proper.

+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<p class="visible">The first paragraph is visible.</p>
+<p class="not-visible">The second paragraph is NOT visible.</p>
+<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>
+
+ +

CSS

+ +
.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+
+ +

{{EmbedLiveSample('Basic_example')}}

+ +

Exemple de taula

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1.1</td>
+    <td class="collapse">1.2</td>
+    <td>1.3</td>
+  </tr>
+  <tr class="collapse">
+    <td>2.1</td>
+    <td>2.2</td>
+    <td>2.3</td>
+  </tr>
+  <tr>
+    <td>3.1</td>
+    <td>3.2</td>
+    <td>3.3</td>
+  </tr>
+</table>
+ +

CSS

+ +
.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}
+
+ +

{{EmbedLiveSample('Table_example')}}

+ +

Notes

+ + + +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}{{Spec2('CSS3 Flexbox')}}Defineix el valor de collapse tal com s'aplica als elements flex.
{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}{{Spec2('CSS3 Box')}}No hi ha cap canvi.
{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}{{Spec2('CSS3 Transitions')}}Defineix visibility com animable.
{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}{{Spec2('CSS2.1')}}Definició inicial.
+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[2]4.0[4]4.0[3]1.0[1]
col.lapse62{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic1.01.0[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}[2]6.06.0[3]1.0[1]
col.lapse{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

[1] Chrome i Safari tractant visibility: collapse com hidden, deixant un buit blanc; només ho suporten {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} i {{HTMLElement("tfoot")}}, però no als elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}}.

+ +

[2] Firefox no amaga les vores quan s'amaguen els elements {{HTMLElement("col")}} i {{HTMLElement("colgroup")}} si està establert border-collapse: collapse.

+ +

[3] A Opera, visibility: collapse funciona en elements de taula, però no sembla amagar un {{HTMLElement("tfoot")}} si és adjacent a un {{HTMLElement("tbody")}} visible.

+ +

[4] Internet Explorer no admet visibility: initial. Fins a IE7, els descendents d'elements hidden seguiran sent invisibles fins i tot si tenen visibility definida com visible.

diff --git a/files/ca/web/css/width/index.html b/files/ca/web/css/width/index.html new file mode 100644 index 0000000000..ced3086fa8 --- /dev/null +++ b/files/ca/web/css/width/index.html @@ -0,0 +1,204 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/width +--- +

{{CSSRef}}

+ +

La propietat CSS width especifica l'amplada d'un element. Per defecte, estableix l'amplada de l'àrea de contingut. però si {{cssxref("box-sizing")}} està establert a border-box, aquest determina l'amplada de l'àrea de vora.

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

Les propietats {{cssxref("min-width")}} i {{cssxref("max-width")}} anul·la {{cssxref("width")}}.

+ +

Sintaxi

+ +
/* <length> values */
+width: 300px;
+width: 25em;
+
+/* <percentage> value */
+width: 75%;
+
+/* Keyword values */
+width: max-content;
+width: min-content;
+width: fit-content(20em);
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+
+ +

La propietat width s'especifica com a:

+ + + +

Valors

+ +
+
{{cssxref("<length>")}}
+
Defineix l'amplada com un valor absolut.
+
{{cssxref("<percentage>")}}
+
Defineix l'amplada com a percentatge de l'amplada del bloc que conté.
+
auto
+
El navegador calcularà i seleccionarà una amplada per a l'element especificat.
+
max-content
+
L'amplada intrínseca preferida.
+
min-content
+
L'amplada mínima intrínseca.
+
fit-content({{cssxref("<length-percentage>")}})
+
Utilitza la fórmula fit-content amb l'espai disponible substituït per l'argument especificat, i. e. min(max-content, max(min-content, <length-percentage>)).
+
+ +

Qüestions d'accessibilitat

+ +

Ens hem d'assegurar que els elements establerts amb un width no estan truncats i que no enfosqueixin altres continguts quan la pàgina s'ampliï per augmentar la mida del text.

+ + + +

Definició formal

+ +

{{CSSInfo}}

+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Amplada per defecte

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+ +

Pixels i ems

+ +
.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+
+ +
<div class="px_length">Width measured in px</div>
+<div class="em_length">Width measured in em</div>
+ +

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+ +

Percentatge

+ +
.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+ +

max-content

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+  width: max-content;
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('max-content', '500px', '64px')}}

+ +

min-content

+ +
p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}
+ +
<p class="minblue">The Mozilla community produces a lot of great software.</p>
+ +

{{EmbedLiveSample('min-content', '500px', '155px')}}

+ +

Epecificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Added the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}Precises on which element it applies to.
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}Initial definition.
+ + + + + +

{{Compat("css.properties.width")}}

+ +

Veure també

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