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

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 Don Kseso Kseso

Comentarios: 6

  1. Sin duda, el salto que provoca :target es horrible y un castigo para el usuario.

    Sobre el ejemplo de :checked, desde una perspectiva semántica e incluso usable, disponer gráficamente inputs del tipo radio como pestañas me parece algo de "trilerismo" de cara al usuario. Desde mi punto de vista, una pestaña debería mostrar opciones ¡no chequearlas! No sé... Quizás los expertos en usabilidad puedan confirmar esto.

    Por otro lado, aunque lo he analizado por encima, me convence y enamora el ejemplo de Stu Nicholls. Volver al origen (hermanos adyacentes o directos), soluciona más :-)

    Felicidades por el blog, estoy enganchado.

    ResponderEliminar
    Respuestas
    1. Todo css no deja de ser un acto de magos. Hacerte ver lo que no es ;-)
      Pero sí. El :checked no deja de ser otro recurso, y mostrando el radio o no es sólo eso, un recurso con sus pros y contras. Todo depende de qué se prime.
      Pero no creo que hoy por hoy el basar las tabs sólo en css sea lo más acertado.

      Gracias por la visita. Y ya sabes, la puerta está siempre abierta y la bandeja perronillas encima la mesa xD.
      Buen provecho.

      Eliminar
    2. Hombre, por esa regla de tres el hecho de cambiar inputs tipo check o radio, o los propios selects, por capas, imágenes y css (horriblemente común y aceptado en estos tiempos) también sería un acto de trileros. Lo cual sí lo es, pero si aceptamos barco como animal acuático también aceptamos pulpo como animal de compañía. Esto es así.

      Saludos!

      Eliminar
  2. Cada día se aprende algo nuevo, gracias KSESO tenia una que otra duda con esto del Target: XD

    ResponderEliminar
  3. Si tengo estrucuturado una página con código css, tres cajas, una de enlaces y en la central quiero que me salga una página, Cómo lo puedo hacer sin target?

    ResponderEliminar
  4. Antalvac:
    Creo que está planteando dos cuestiones diferentes. Eso o comprendí mal su consulta.

    Por un lado: para mostrar una página en otra "en una caja central" o donde sea debería hacer uso del elemento iframe.
    También existen los frames, pero esa es otra historia.

    Por otra parte: si se trata de mostrar y/u ocultar el contenido de un elemento (con independencia de cómo se genere dicho contenido) usando Css (pestañas o similares) además de :target puede recurrir a algunas otras pseudoclases como :checked, :hover, :focus por ejemplo.
    Si hace uso del buscador del blog encontrará varios artículos al respecto de esto último.

    Un saludo

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap