Últimamente he estado viendo muchos tutoriales que utilizan :objetivo en CSS para realizar alguna hazaña de fantasía, así que pensé que me tomaría el tiempo de profundizar y discutir cómo y por qué funciona esta sintaxis. En lugar de seguir ciegamente el código de otra persona, debería poder manejar esta herramienta con el conocimiento de lo que está sucediendo y cómo afecta el soporte del navegador.
Siga leyendo para aprender todo sobre la funcionalidad básica asociada con el :objetivo pseudo clase y cómo puedes estirar esa habilidad para realizar todo tipo de cosas locas con CSS puro. En el camino, crearemos algunos excelentes ejemplos de navegación y presentación de diapositivas para que aprenda.
¿Qué es: objetivo?
En CSS, :objetivo Es un selector de pseudo clase. Recuerde de nuestro artículo sobre: antes y: después, que las pseudo clases son una forma de seleccionar una parte completa de su documento HTML, mientras que los pseudo elementos pueden usarse para seleccionar una subparte? de un elemento. Para ayudar a ilustrar este punto, aquí hay algunos ejemplos de cada uno:
La pseudo clase con la que probablemente estés más familiarizado es :flotar, que le permite declarar un estilo especial que se activará cuando el usuario se mueva sobre un elemento. los :objetivo la pseudo clase permite, de manera similar, un estilo personalizado que se activará en función de un escenario específico.
Identificadores de fragmentos
El evento especial para la :objetivo pseudo clase depende de algo llamado? identificador de fragmento. Hay una historia y una explicación complicadas detrás de esto, pero todo lo que realmente necesita saber es que cuando discutimos los identificadores de fragmentos, nos referimos a un hashtag asociado con una palabra o frase al final de un URI.
Estos se utilizan para apuntar? un punto específico en una página HTML y se asocian con un ID (que también utiliza la sintaxis de hashtag). Cuando está emparejado, el URI se puede usar para saltar a su ID adjunta. Aquí hay una rápida página de demostración que preparé para ilustrar esta funcionalidad.
Esta página contiene una serie de etiquetas h1, cada una de las cuales posee una ID única. Aquí está la estructura básica:
Esta estructura se asocia con un menú de navegación simple formado por elementos de lista que contienen etiquetas de anclaje. Cada etiqueta de anclaje apunta a uno de los identificadores de fragmentos que configuramos. La funcionalidad aquí es extremadamente útil: cuando hace clic en uno de los elementos de la lista, la página salta automáticamente al encabezado correspondiente. Dale una oportunidad para verlo en acción. Tenga en cuenta que esto funciona con HTML puro, sin CSS necesario.
Aprovechamiento: destino para crear eventos de clic
Ahora que tenemos una demostración simple en funcionamiento que utiliza identificadores únicos e identificadores de fragmentos, es hora de sacar nuestra :objetivo pseudo clase Cualquier cosa dentro de un :objetivo el bloque de estilo se activará solo cuando un identificador de fragmento esté actualmente activo en el URI. En cierto sentido, :objetivo se puede utilizar para crear el evento de clic CSS siempre difícil de alcanzar.
Por ejemplo, supongamos que queremos hacerlo para que el elemento en el que se hace clic en nuestro menú de navegación se cambie de alguna manera. Esto permitirá a los usuarios identificar claramente la sección a la que están saltando. Para lograr esto, usaremos el selector? H1: target? y agrega alguna variación a través del tamaño de fuente, color y decoración del texto. Revisa la demostración aquí.
Animalo
Eres libre de usar :objetivo casi sin embargo, usted usaría :flotar, lo que significa que puedes tener todo tipo de diversión agregando efectos de animación. Aquí agregamos una pequeña transición para el cambio de color. Véalo en vivo aquí.
Manipulación de objetos no dirigidos
Digamos que también queríamos cambiar el párrafo que lo acompaña cuando se dirige un encabezado dado. Esto puede sonar difícil ya que ya hemos configurado nuestra estructura HTML para que las ID únicas se usen solo en las etiquetas h1, pero recuerde que CSS nos da una serie de selectores potentes. Podemos usar un clic en el elemento seleccionado para manipular otros objetos en la página.
En nuestro ejemplo, apuntar al elemento de párrafo después de hacer clic en h1 es tan fácil como extraer el combinador de hermanos adyacente. El código está abajo y la demostración está aquí.
Crear una simple presentación de diapositivas CSS
Teniendo en cuenta esto como punto de partida, los desarrolladores han creado una tonelada de aplicaciones excelentes para utilizar el :objetivo pseudo clase Puede usarlo para crear una interfaz con pestañas CSS pura o incluso una presentación de diapositivas con imágenes. Veamos cómo crear este último.
Para empezar, necesitamos codificar una lista desordenada. Cada elemento de la lista contendrá una etiqueta de anclaje que apunta a un identificador de fragmento, seguido de una imagen con una ID coincidente.
Ahora vamos a utilizar un posicionamiento inteligente para colocar todo en su lugar y, por supuesto, un poco. :objetivo Magia para que todo funcione. A ver si puedes averiguar qué está pasando aquí antes de que te explique.
Primero hicimos flotar los elementos de nuestra lista a la izquierda, diseñamos el estilo y aplicamos un efecto de desplazamiento. La parte interesante sobre el posicionamiento es que hemos alejado todas nuestras imágenes de la parte de texto de sus elementos de la lista utilizando la maravillosa técnica de posicionamiento absoluto dentro de un padre relativamente posicionado. Lee este artículo para aprender todo sobre cómo funciona esto.
A continuación, establecemos el índice z de todas las imágenes en -1, luego establecemos el índice z de la imagen objetivo en 1. Esto hace que el elemento de la lista en el que haga clic haga que su imagen se sitúe por encima de las demás. Para que el cambio sea agradable y gradual, reducimos la opacidad de las otras imágenes a cero y agregamos una transición CSS3. Vea la demostración de presentación de diapositivas en CSS puro aquí.
Soporte del navegador
los :objetivo El selector de pseudo clase es un selector de nivel tres de CSS, todos los cuales tienen un soporte increíble en casi todos los navegadores. excepto por supuesto para IE. La buena versión de Internet Explorer es compatible con los selectores CSS3 en las versiones 9 y 10, pero nada más antiguo.
Por esta razón, es poco aconsejable usar :objetivo en cualquier cosa que afecte directamente el éxito de la interacción del usuario. Por ejemplo, podría estar bien para los estilos de diferenciación opcionales de nuestros primeros ejemplos, pero nuestra presentación de diapositivas no funcionará en absoluto para IE8 y usuarios mayores.
Selectivizr Para El Rescate
Al igual que con cualquier problema del selector IE CSS3, en realidad hay una solución bastante fácil que le permite utilizar :objetivo sin excluir a los seres humanos tristes que ejecutan versiones anticuadas de un navegador creado por Microsoft: Selectivizr.
Simplemente ingrese su biblioteca de JavaScript favorita como jQuery o MooTools, luego pegue un fragmento de código de Selectivizr y el resto se encargará de una manera completamente automática. Selectivizr trabajará su vudú para brindar una impresionante compatibilidad con el selector de CSS3 a IE6 en adelante.
Conclusión
Usar clases de pseudo puede ser complicado, pero una vez que tenga una idea de cómo funcionan algunas de ellas, los tipos de cosas que podrá extraer con CSS puro lo sorprenderán. ¿El objetivo? la pseudo clase es un gran ejemplo de algo que puede cambiar dramáticamente la forma en que estructuran las interacciones de los usuarios. Solo asegúrate de no salir corriendo y usarlo demasiado sin considerar las ramificaciones que tendrá en el soporte del navegador.
Deja un comentario a continuación y déjanos saber lo que piensas :objetivo. ¿Alguna vez lo has usado en un proyecto real? ¿Por qué o por qué no?