Confundido por pseudo-clase CSS: activo

Estaba buscando here en CSS: active Selector.Confundido por pseudo-clase CSS: activo

Los estilos: selector activo Enlaces a páginas activas

Eso me hizo pensar, ¿qué diablos es una página activa "en la terminología de HTML/CSS ...

En este point Fui a la sección w3docs: 5.11.3 Las pseudo-clases dinámicas:: hover,: active, y: focus.

The: activo pseudo-clase se aplica mientras un elemento está siendo activado por el usuario . Por ejemplo, entre los tiempos el usuario presiona el botón del mouse y lo libera .

por lo que utiliza uno de los w3shools try it pages y hackear un ejemplo, sustituyendo el siguiente código, que sólo se puede cortar & pasta y probar.

<html> 
<head> 
<style type="text/css"> 
:focus,:active 
{ 
outline-offset: 10px; 
outline: solid; 
} 
</style> 
</head> 

<body> 
<p>Click the links to see the background color become yellow:</p> 
<a href="http://www.w3schools.com">w3schools.com</a> 
<a href="http://www.wikipedia.org">wikipedia.org</a> 
<button type="button">Click Me!</button> 
<form> 
<input type="text"/> 
</form> 
</body> 
</html>

El campo de formulario funciona para: focus. Pero el botón o los enlaces no funcionan: activo.

¿Por qué es eso? ¿Hay algo sobre 'página activa' que no entiendo de lo que se habló w3schools?

Vi esto nice tip cuando busqué en Google, pero no creo que esté relacionado.

Fuente

2011-02-18 JGFMK

No hay concepto de "página activa" en CSS. De hecho, el SitePoint Reference debunks esto diciendo:

La pseudo-clase qué no significan un enlace a la activa, o corriente, página, eso es un error común entre los principiantes de CSS.

Lo que la especificación dice es correcto: :active simplemente estilos elementos que están activados , por ejemplo, hizo clic (como en el ejemplo dado) o de alguna otra manera se activó de tal manera que el navegador comienza a navegar hacia el objetivo del enlace.

Tenga en cuenta que no solo se aplica a los elementos <a>; se puede aplicar a cualquier elemento que no sea de entrada de formulario en el que se haga clic. Por ejemplo, puede hacer esto:

p:active { 
    color: red; 
}

Y cualquier párrafo en el que haga clic parpadeará en rojo.

Nota sin embargo, que la definición e implementación exacta se deja a cargo del navegador, pero en general , que pueden confiar en <a> elementos que tienen un estado activado.

Fuente

2011-02-18 18:56:38 BoltClock

:active es el estilo dado a un elemento (a o un botón, por ejemplo) cuando se mantiene presionado el mouse sobre él.Es posible que lo haya visto en algunos sitios cuando hace clic en un botón con estilo; cuando realmente haga clic en el botón, podría cambiar. Esta es la pseudoclase :active.

Fuente

2011-02-18 18:58:18 Bojangles

Ya lo entendí. Fue la cosa engañosa de la página activa que trajeron los w3schools lo que me arrojó. Ya cubierto anteriormente por @zzzBov & @ BoltClock – JGFMK

Siempre he usado :active para los enlaces. La fracción de segundo antes de que el navegador le lleva a la página que acaba de hacer clic en el texto iba a cambiar al color que llama en a:active{ ... }

Ejemplo:

a:active { color:pink; font-weight:bold; }

mayoría de los navegadores lo soportan, pero no es realmente vale la pena tu tiempo para estilizarlo En el día de la marcación de 56k fue una buena cosa tener que mostrar visualmente que el enlace que el usuario hizo clic se estaba cargando.

Fuente

2011-02-18 19:00:16 AJMaxwell

Confundido por pseudo-clase CSS: activo

Respuesta

Cuestiones relacionadas