symbols
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 inicial | n/a (required) |
| Valor calculado | como se especifica |
Sintaxis
css
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
symbols =
<symbol>+
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Ejemplo
HTML
html
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
css
@counter-style symbols-example {
system: fixed;
symbols: A "1" "\24B7" D E;
}
.list {
list-style: symbols-example;
}
Resultado
Especificaciones
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-symbols |
Compatibilidad con navegadores
Loading…
Véase también
list-style,list-style-image,list-style-positionsymbols(), la notación funcional para crear estilos de contador anónimos.