css - style - href

¿Por qué no: visitó en lugar de: visitó para los enlaces?

Question

Todos los ejemplos y hojas de estilo que he visto utilizan a:visited to style links. Además de a:visited con mayor especificidad, ¿la :visited no debería ser equivalente y más simple?

Answer 1

En teoría es lo mismo por las razones ya mencionadas. En el papel, a:visited vs :visited hace explícito que el estilo solo se aplica a los anclajes, y posiblemente sea más rápido: piense en él como el navegador que necesita recorrer todas las etiquetas en un lado, y verifique si :visited Aplica, vs hacer lo mismo para todas las etiquetas en el DOM.

Sin embargo, la razón más importante es que los estilos relacionados con una etiqueta, un pseudo-selector, una clase y un identificador no se aplican necesariamente en un orden consistente y predecible de un navegador a otro.

Supongamos, por ejemplo, este enlace visitado:

<a id="foo" class="bar" href="...">visited link</a>

Entonces considera el siguiente CSS:

#foo {
  color: red;
}

.bar {
  color: green;
}

:visited {
  color: purple
}

Solía ​​haber un momento en el que el enlace aparecería rojo, verde o púrpura, según el navegador. (Quizás sigue siendo el caso; no lo he probado). Porque algunos tratarían a #foo como más importante que .bar (es una identificación frente a una clase) y ambos son más importantes que :visited por razones similares. Algunos tratarían #foo , .bar y :visited como si tuvieran la misma importancia, como una propiedad de la etiqueta en sí. Algunos podrían haber tratado a #foo y .bar como iguales pero más importantes que :visited por motivos, este último es una mera pseudo clase. Etcétera.

Ahora, considera este CSS, que es el tipo de cosas que podrías encontrar en una hoja de estilo hoy:

a.bar {
  color: green;
}

:visited {
  color: purple
}

Incluso suponiendo que las etiquetas, la ID, las clases y las pseudo clases se traten de la misma manera, todavía tenemos un problema potencial, ya que a.bar también puede considerarse más específico que simple :visited por algunos navegadores.

Ergo, terminará teniendo que especificar a:visited en la declaración para asegurarse de que el comportamiento sea coherente en todos los navegadores, y es probable que aún existan algunas manzanas podridas que lo hagan querer escribir a:visited, a.bar:visited solo para estar seguro.

Una vez que se haya topado con el problema unas cuantas veces, la fuerza del hábito se activará y terminará siempre escribiendo a:hover o a:visited .

Answer 2

Sí, pero no será compatible en el futuro si se introduce una nueva etiqueta con el estilo :visited .

La prueba más cercana que puedo encontrar:

http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

El lenguaje del documento determina qué elementos son anclajes de origen de hipervínculo. Por ejemplo, en HTML4, las pseudo-clases de enlace se aplican a los elementos A con un atributo "href". Por lo tanto, las siguientes dos declaraciones CSS 2.1 tienen un efecto similar:

a:link { color: red }
:link  { color: red }

Answer 3

Según los selectores, el nivel 4 :visited aplica a cualquier hipervínculo, que en HTML es el elemento <a> , <area> y <link> cuando tienen un atributo href .

Una prueba rápida para el elemento de link muestra que Firefox respeta al menos parcialmente esto:

Pruebe http://jsfiddle.net/rfdzpjLo/4/ en FF o vea más abajo

link:before { content:attr(href); }
link { display:block; }
:visited { color: red; }
:link { color:green; }

<link href="http://.com/questions/27263128/why-not-visited-instead-of-avisited-for-links" />
<link href="example.net/lsjhuehbsi00ejjdus" />

Answer 4

:visited es un selector de pseudo clase utilizado solo para elementos de enlace de anclaje que coinciden cuando el navegador ha visitado el atributo href de ese enlace de anclaje en el pasado. Está pensado para ser un comentario útil para un usuario, de modo que puedan distinguir la diferencia entre los enlaces a los que han estado y los enlaces que no.

REFERENCE

La sintaxis de una pseudo clase es la siguiente

selector:pseudo-class {
    property:value;
}

Por lo tanto, debe usar un selector cuando use una pseudoclase y, dado que solo admite enlaces, en este caso, el selector sería a .

Answer 5

TL; DR: Al momento de escribir, estás completamente en lo correcto; no hay diferencia entre a:visited y :visited . Sin embargo, el uso de a:visited es la mejor práctica para probar el código en el futuro.

TL; DR EDIT: a partir de agosto de 2016, el borrador de trabajo de CSS4 permite que otras etiquetas usen :visited . Ahora hay una diferencia funcional entre a:visited y :visited ! Tener cuidado.

Para los lenguajes de desarrollo web de hoy, específicamente HTML5 y CSS3, tiene razón: funcionalmente no hay diferencia entre a:visited y :visited . Ahora, tome esto con precaución: los estándares web, los elementos y los protocolos de interfaz de usuario están en constante evolución, lo que significa que en el futuro es posible que se introduzca una nueva etiqueta compatible con :visited .

Cuando :visited se introdujo en CSS, la especificación W3C CSS1 dijo:

En CSS1, las pseudoclases de anclaje no tienen efecto en otros elementos que no sean ''a''. Por lo tanto, el tipo de elemento se puede omitir en el selector: a:link { color: red } == :link { color: red }

SIN EMBARGO , en la especificación CSS2 , el comportamiento de la pseudo-clase :visited no se restringió a solo a etiqueta:

El lenguaje del documento determina qué elementos son anclajes de origen de hipervínculo. Por ejemplo, en HTML4, las pseudo-clases de enlace se aplican a elementos con un atributo "href".

Esto significa que depende del idioma del documento y del navegador determinar qué elementos son compatibles con :visited . Si bien el estándar de la industria actual establece que para HTML, solo califican los elementos con un atributo href , esto puede cambiar más adelante en la línea.

EDITAR, agosto de 2016 : Parece que el borrador de trabajo de CSS4 ha confirmado mi sospecha; en la nueva especificación,: :visited se puede usar para otros elementos "tipo enlace", a saber, <area> y <link> . La especificación dice:

La pseudo-clase: cualquier enlace representa un elemento que actúa como el ancla de origen de un hipervínculo. Por ejemplo, en [HTML5], cualquier elemento <a> , <area> o <link> con un atributo href son hipervínculos.

Así que <a> , <area> y <link> se tratan como hipervínculos, y la especificación dice que :visited aplica a todos los hipervínculos. Así que a partir de CSS4, será mejor que incluyas la a en a:visited .