La expresión toggle(): alternar valores en Css 1.8.12
La expresión toggle(): alternar valores en Css
El valor toggle()
El documento "CSS Values and Units Module Level 3" define la expresión css toggle(), antes llamada cicle(), como:
La expresión toggle() permite (a un grupo del mismo elemento anidado en un ciclo) alternar entre varios valores para una propiedad en vez de heredar siempre el mismo.
Sintaxis de toggle()
selector {
propiedad: toggle(valor1, valor2, valor3);
}
Como ves, dentro del paréntesis se declaran separados por una coma tantos valores permitidos para esa propiedad como se necesiten.
A tener presente:
♦ Debido a que los valores se separan con comas, dichos valores no pueden contener una coma en ellos.
♦ Un error en cualquiera de los valores anula toda la expresión, no sólo el valor erroneo.
♦ La expresión toggle() puede declararse en cualquier propiedad, pero debe ser el único componente del valor de ella.
♦ No está permitido anidar varios toggle()
♦ Dentro de la expresión toggle() no se permiten las expresiones ‘attr()’ o ‘calc()’. Si las hubiese anularía toda la expresión.
Ejemplos de toggle()
em { font-style: toggle(italic, normal);}
En el ejemplo anterior los tags <em> se mostrarán en cursiva (italic) en general, pero se verán "normal" si está dentro de algo que esté en cursiva.
ul { list-style-type: disc; }
ul ul { list-style-type: toggle(disc, circle, square, box);}
Se define el valor 'disc' para la lista padre (de primer nivel), para la de 2º nivel "circle", la de 3º en "square", etc.
En caso de que haya menos valores declarados en toggle() que elementos se vuelve al primer valor declarado para continuar la alternancia.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso