soy Kseso y esto EsCSS

Guerra de pseudoelementos en Css. :target vs :checked

Comparación de diferencias y parecidos, con demos incluidas, del uso de :target y :checked

Guerra de pseudoelementos en Css. :target vs :checked

·Por Kseso ✎ 6

"La pseudoclase :targer en xhtml y css"

"Target" se podría traducir como el destino, el blanco o el seleccionado.
En html, el destino de una dirección o enlace, por lo general, suele ser una página. Pero habrás visto que, en ciertas ocasiones, termina con algo parecido a "#algo". Significa que apunta a un elemento en concreto dentro del documento. Y ese "#algo" fuerza al navegador al cargar la página a ir a su posición y mostrarlo en la parte superior de la ventana.
Y sí, es lo que en ciertos momentos se llaman "anclas", "anchors" o similares.
Por otra parte, ya habrás observado que el símbolo # (también conocido como almohadilla) es el mismo que el utilizado en CSS para los id (identificadores únicos).
Así que ahí tenemos un pseudoelemento en el html. Aquel objeto que en un momento dado seleccionamos o convertimos en el destino de una acción.

Y para actuar sobre él (sobre el objeto de nuestra selección), CSS define la pseudoclase :target
Una de las diferencias principales con las demás pseudoclases como | :visited | :hover | :active | :focus | etc, es que estan últimas no son persistentes. Su efecto desaparece al retirar el curso, pinchar en una zona en blanco... etc. Cosa que no ocurre con :target que permanece... hasta seleccionar otra :target.

Pero antes de seguir, una nota sobre su soporte por los navegadores:

:target puede ser utilizada sin problemas con los verdaderos navegadores en sus últimas versiones. Los no tanto (léase ie en sus distintas versiones) pues no.

Esa persitencia mencionada es una característica que ha sido utilizada para ciertas realizaciones como son la navegación por pestañas (tabs), desplegables, etc, donde se requería que no se ocultase la información al retirar el puntero, como ocurre con :hover.

Unos ejemplos con :target

Pestaña 1

Algo de contenido en esta Pestaña

Incluido un enlace a la pestaña 4 de este ejemplo

Pestaña 2

Incluido un enlace al acordeón de abajo

Pestaña 3

bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla

Pestaña 4

El css de este ejemplo lo tienes justo encima, en el html, ya que html5 permite incluir estilos en el cuerpo del body.

En el ejemplo anterior, puedes optar, en vez de ocultar los elementos con display: none; que los dejará inaccesible para los usuarios de ie, por hacer uso de otros pseudolesectores:

.tab p:not(:target) {display: none} .tab p:target {display: block} /* Posíblemente necesites ajustar alguna cosilla*/

Un acordeon en vertical sólo con Css:

Pestaña 1

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.

Pestaña 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pestaña 3

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.

Pestaña 4

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.

El anterior acordeón está realizado en base a un trabajo de Paul Hayes

A estas alturas y después de haber visto y probado las pestañas anteriores ya te habrás percatado del principal inconveniente del uso de :target en este tipo de realizaciones.
Conlleva una modificación de la ruta en la ventana, de hecho añade el #target en la dirección que muestra el navegador.
Si la página es más alta (height) que la ventana, se produce un salto o desplazamiento para posicionar al elemento seleccionado en la parte superior de la ventana. Una sensación extraña el tener que buscar con la vista dónde se ha ido.

Actualización: Para evitar este efecto, mira cómo hacerlo en el artículo Sistema de pestañas (tabs) Css con :target sin salto y RWD

A lo anterior fíjate también en qué ocurre al tener una opción del primer ejemplo y pinchar sobre otra cualquiera de los siguientes. Efectívamente, la primera se cierra.
Ahora pasa al ejemplo realizado con :checked y selecciona una pestaña, vuelve a pinchar en una de las :target y regresa. Verás que se mantiene visible.

Pseudclase :checked en Css

La:checked define al marcado ✓ . A diferencia de :target sólo es aplicable a los checkboxes y radio buttons (casillas de verificación y radiobotones).
También se diferencia en que el marcar un elemento no implica por sí mismo ninguna respuesta del navegador a la acción. No se altera la ruta y por lo tanto no se mueve el scroll.

Otra cosa muy distinta es que aprovechemos ciertos selectores avanzados de Css para modificar propiedades a nuestra conveniencia.
Y aquí viene la diferencia en el funcionamiento de pestañas (tabs) basadas en una u otra.

Tabs persistentes sin sobresaltos con :checked

Cualquier tipo de contenidos. No sólamente listas.

Funcional en Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, and IE 9+

Aunque siempre puedes echar mano de Modernizr o similares

Créditos: en base a idea original de Chris Coyier en css-tricks.com

Créditos: en base a idea original de Chris Coyier en css-tricks.com

Aunque no es hoy el día de explicar el funcionamiento, toda la magia la realizan estas 2 declaraciones

.modulo { position: absolute; opacity: 0; } [type=radio]:checked ~ label ~ .modulo { z-index: 5; opacity: 1; }

Pero todo cambia. Nada hay inmutable.

Y mucho menos cuando el problema del salto en :target es abordado por magos del Css como Stu Nicholls.
Así que a continuación otro ejemplo de la potencia y posibilidades de encadenar selectores avanzados. Esos simbolitos tales como + ~ > etc.

CSS only Horizontal Click Accordian Menu
For IE9, IE10, Firefox, Chrome, Safari and Opera

  • INSECTS INSECTS : Some descriptive text can go here including links.
  • MAMMALS MAMMALS : A little bit of text can go here.
  • BIRDS BIRDS : Some information about birds can go here.
  • REPTILES REPTILES : The size of this panel can be controlled in the stylesheet.
  • FISH FISH : Freshwater, tropical and marine fish.

copyright © stu nicholls - CSS play

avatar del Editor del blog

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