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 system es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor additive-symbols es usado para especificar los símbolos.

Los valores posibles para descriptor de símbolos incluyen:

  • Textos (<string>) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".
  • Imágenes - Usando la función url()
  • Identificadores

Related at-rule@counter-style
Valor inicialN/A
Mediaall
Valor calculadocomo se especifica
Canonical orderorder of appearance in the formal grammar of the values

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

<symbol>+

where
<symbol> = <string> | <image> | <ident>

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>

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

Especificaciones

Especificación Estado Comentarios
CSS Counter Styles Level 3
The definition of 'symbols' in that specification.
Candidate Recommendation Definición inicial

Compatibilidad de navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico No support 33 (33) No support No support No support
Característic Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico No support 33 (33) No support No support No support

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,