web-dev-qa-db-fra.com

Définissez la couleur du lien visité en fonction de la couleur du lien non visité (P.S. pas la question habituelle)

Je dois définir le CSS a: visité sur peu importe couleur le a normal est défini sur.

Ce que je veux pouvoir dire au navigateur, c'est pour les liens visités, utilisez la même couleur que les liens non visités, quelle que soit sa couleur.

Je dois faire ceci sans spécifier une couleur particulière.

Par exemple, si un navigateur étrange utilise la couleur «verte» pour les liens non visités normaux, ce CSS doit lui demander d'utiliser le même vert pour les liens visités. La couleur utilisée par le navigateur doit être transparente pour mon code. D'où l'expression "quelle que soit la couleur".

P.S. Je sais comment définir un: visité et une couleur particulière. Ce n'est pas ce que je demande.

P.P.S. Je suis prêt à utiliser JavaScript si je dois le faire. Mais je tiens vraiment à ce que le navigateur le fasse.

Pourquoi voudrais-je faire quelque chose comme ça que vous demandez? 

La couleur bleue utilisée par IE8 pour les liens est plutôt cool. Ce n'est pas # 0000FF. C'est une belle nuance de bleu. Je veux donc le définir pour les liens visités et non visités. Mais je ne devrais pas prendre une capture d'écran ou utiliser un add-on pour choisir la valeur hexadécimale exacte à chaque fois. Si IE modifie ultérieurement la couleur en une autre nuance impressionnante, ce code devrait simplement fonctionner. Je ne veux plus retrouver l'hexagone et le changer partout dans mon code.

Ceci est juste une des raisons. Ne me donne pas l'hexagone pour ce bleu. Il est facile de trouver cela, mais ce ne serait pas la solution!

htmlcssanchorvisited
47
anon355079
a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit}
a:hover{color:inherit}

Putain, oui.

J'avais besoin de cela parce que certains liens de texte (par opposition aux liens d'image) constituaient une partie importante du menu principal de mon projet, je les veux donc à mes couleurs, pas à celles du navigateur!

Chaque lien était enfermé dans un groupe de balises p dont la classe avait une couleur particulière (MY color) définie en CSS.

8
Fintan

Danny Robers script fonctionne pour moi dans Firefox et Chrome (pas sûr de IE). 

FWIW, la valeur spéciale HyperlinkText aurait été le moyen "standard" de faire ce que vous voulez, mais il a été supprimé de CSS3 au printemps 2003.

Il semble que Firefox est le seul navigateur à avoir commencé à l'implémenter, car ce qui suit fonctionne pour Firefox:

a: visité {couleur: -moz-hyperlinktext; }

4
Dean Brettle

Il n'y a aucun moyen de faire cela en utilisant CSS. Le navigateur indique qu'un lien a été visité sur la base d'une entrée de base de données uniquement connue, puis utilise les couleurs par défaut spécifiées dans la configuration spécifique du navigateur.

CSS ne peut pas physiquement obtenir la couleur de quelque chose sur la page. C'est comme ça. Le seul moyen est d'utiliser du javascript comme celui de Danny Roberts.

La raison pour laquelle je pense que sa réponse ne fonctionne pas correctement est que $('a:visited') ne fait que sélectionner tous les liens visités à ce moment-là, puis la couleur est modifiée pour eux.

Ce que vous devez faire, c'est surveiller les événements liés aux clics et réexécuter le code à chaque fois:

var normalColor = $('a:link').css('color');
$('a').click(function() {
    $('a:visited').css('color', normalColor);
});
3
Marcus Whybrow

Je ne pense pas qu'il existe une solution CSS pure. Habituellement, vous choisissez une couleur et définissez un lien: et un: visité la même couleur.

J'ai essayé {color: inherit} mais c'était inutile.

Cette solution jQuery fonctionne très bien cependant.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                var normalColor = $('a:link').css('color');
                $('a:visited').css('color', normalColor);
            });
        </script>
    </head>
    <body>
        <a href="http://www.google.com">Google</a>
        <a href="nowhereyouvebeen">No where you've been</a>
    </body>
</html>
3
Danny Roberts

Je ne pense pas qu'il existe un moyen purement CSS de réaliser cela. Je pense que vous auriez besoin d'utiliser JavaScript pour obtenir la couleur du a puis définir un: visité à cette couleur et cela ne fonctionnerait probablement pas dans tous les navigateurs à moins qu'un {color: #dea} soit spécifié.

1
easement

Presto:

$(function(){
  var sheet = document.styleSheets[document.styleSheets.length-1];
  sheet.insertRule(
    'a:visited { color:'+$('a:link').css('color')+'; }',
    sheet.length
   );
});

J'ai testé et je peux confirmer que cela fonctionne sous Chrome. Cependant, gardez à l'esprit la variable sheet à laquelle vous ajoutez les règles - assurez-vous que son attributmedias'applique au média qui vous tient à cœur. En outre, si certaines règles remplacent la coloration a, cela ne fonctionnera probablement pas correctement. Assurez-vous donc que vos feuilles de style ne sont pas affectées par cela.

De toute façon, je ne suis pas sûr que ce soit une pratique très sage. Personnellement, je définis toujours explicitement les couleurs de mes liens pour chaque site. 

PS:

Apparemment, IE (je ne sais pas quelle version) insiste sur sa propre syntaxe:

sheet.addRule('a:visited', $('a:link').css('color'), -1);
0
ChaseMoskal

J'ai eu besoin d'une solution à faire, comme l'indique le titre de cette question "Définir la couleur du lien visité en fonction de la couleur du lien non visité". Pour moi, je cherchais un moyen de comparer les captures d’écran de contenu de page de navigateur que je m’utilise pour les tests de régression (pdiff - perceptual diff). Voici le code qui a fonctionné pour moi.

(function(){
  var links = document.querySelectorAll('a');
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.href) { //must be visitable
      var rules = window.getMatchedCSSRules(link) || [];
      var color = '#0000EE' //most browsers default a:link color;
      for (var j=0; j<rules.length; j++) {
        var rule = rules[j];
        var selector = rule.selectorText;
        color = rule.style['color'] || color;
      }
      link.setAttribute('style','color:' + color + ' !important');
      //this was enough for me but you could add a 'a:visited' style rule to the rule set
    }
  }
})();
0
kernowcode

Nevermind cela. Voir mon autre réponse pour quelque chose de plus spécifiquement pertinent à la question du demandeur.

Je fais ça:

a, a:visited { color:#4CA1F6; }
a:hover      { color:#4CB6E1; } a:active  { color:#0055AA; }

Maintenant que ce fil m'a fait réfléchir,et j'ai apporté les améliorations suivantes à ma méthode:

a:link, a:visited { color:#4CA1F6; }
a:hover, a:focus  { color:#4CB6E1; } 
a:active          { color:#0055AA; }
0
ChaseMoskal