From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../css/@counter-style/additive-symbols/index.html | 129 +++++++++++++ files/es/web/css/@counter-style/index.html | 200 +++++++++++++++++++++ files/es/web/css/@counter-style/symbols/index.html | 144 +++++++++++++++ 3 files changed, 473 insertions(+) create mode 100644 files/es/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/es/web/css/@counter-style/index.html create mode 100644 files/es/web/css/@counter-style/symbols/index.html (limited to 'files/es/web/css/@counter-style') diff --git a/files/es/web/css/@counter-style/additive-symbols/index.html b/files/es/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..9c91ff7f39 --- /dev/null +++ b/files/es/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,129 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - Descriptor CSS + - Estilos de Contador CSS + - Referencia +translation_of: Web/CSS/@counter-style/additive-symbols +--- +

Resumen

+ +

El descriptor additive-symbols es similar al descriptor {{cssxref('symbols')}}, y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor {{cssxref('system')}} es additive. El descriptor additive-symbols define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo. El sistema aditivo es usado para construir sistemas de numeración de valores de signos como la numeración romana.

+ +

Cuando el valor del descriptor es cyclic, numeric, alphabetic, symbolic, o fixed, se usa el descriptor symbols, en lugar de additive-symbols para especificar los símbolos de conteo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<ul class="list">
+   <li>One</li>
+   <li>Two</li>
+   <li>Three</li>
+   <li>Four</li>
+   <li>Five</li>
+</ul>
+ +

Contenido CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@counter-style/index.html b/files/es/web/css/@counter-style/index.html new file mode 100644 index 0000000000..557c5b42a9 --- /dev/null +++ b/files/es/web/css/@counter-style/index.html @@ -0,0 +1,200 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - At-rule + - CSS + - NeedsTranslation + - Reference + - Styles + - TopicStub + - counter +translation_of: Web/CSS/@counter-style +--- +

{{CSSRef}}

+ +

Summary

+ +

The @counter-style CSS at-rule lets authors define specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.

+ +

Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

+ +

Syntax

+ +

Descriptors

+ +

Each @counter-style is identified by a name and has a set of descriptors.

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
+
+ The below @counter-style rule uses images instead of character symbols.
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

The above counter style rule can be applied to lists like this:

+ +
.items {
+   list-style: circled-alpha;
+}
+
+ +

Which will produce lists like this:

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ....
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six

+ +

27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

Checkout more examples on the demo page.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..8a81c04645 --- /dev/null +++ b/files/es/web/css/@counter-style/symbols/index.html @@ -0,0 +1,144 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - Descriptor CSS + - Estilos de contadores CSS +translation_of: Web/CSS/@counter-style/symbols +--- +

Summary

+ +

El descriptor symbols es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador. El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.

+ +

Los valores posibles para descriptor de símbolos incluyen:

+ + + +

{{cssinfo}}

+ +

Sintaxis

+ +
symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('first.svg') url('second.svg') url('third.svg');
+symbols: indic-numbers;
+
+ +

Valores

+ +
+
<symbol>
+
Representa u símbolo (<symbol>) usado dentro del sistema de conteo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style symbols-example {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.list {
+  list-style: symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

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