web-dev-qa-db-fra.com

Utilisez target = "_ blank" en css

J'ai des liens externes dans le menu du haut de mon site. Je veux ouvrir ces liens dans un nouvel onglet. Je pouvais y arriver en utilisant "target = _blank" en HTML. Y a-t-il une propriété CSS similaire ou autre chose?

csscss3
47
Ali

Malheureusement, non… .. En 2013, il n'y a aucun moyen de le faire avec du CSS pur.

Update: grâce à showdev pour avoir créé un lien vers la spécification obsolète de Hyperliens CSS3 , et oui, aucun navigateur ne l'a implémenté. Donc, la réponse est toujours valable.

20
c69

Comme C69 l'a mentionné, il n'y a aucun moyen de le faire avec du CSS pur.

mais vous pouvez utiliser HTML à la place:

utilisation

<head>
    <base target="_blank">
</head>

dans votre balise HTML <head> pour créer tous les liens de page quel attribut non include target soit ouvert dans une nouvelle fenêtre vide par défaut . Sinon, vous pouvez définir un attribut cible pour chaque lien comme ceci:

    <a href="/yourlink.html" target="_blank">test-link</a>

et il remplacera

<head>
    <base target="_blank">
</head>

balise si elle a été définie précédemment.

68
Mojtaba Rezaeian

CSS peut «cibler» la navigation de plusieurs manières… .. Cela permet de styliser les liens internes et externes à l'aide d'un style d'attribut, ce qui pourrait aider les visiteurs à indiquer ce que vos liens vont faire.

a[href="#"] { color: forestgreen; font-weight: normal; }
a[href="http"] { color: dodgerblue; font-weight: normal; }

Vous pouvez également cibler le code HTML traditionnel en ligne 'target = _blank'.

a[target=_blank] { font-weight: bold; }

Également: sélecteur de cible pour le bloc de navigation de style et éléments cibles .

nav { display: none; }
nav:target { display: block; }

CSS: le sélecteur de pseudo-classe cible est pris en charge - caniuse , w3schools , MDN . 

a[href="http"] { target: new; target-name: new; target-new: tab; }

Propriété CSS/CSS3 ' target-new ', etc., non prise en charge par les principaux navigateurs, 2017 août, bien qu'elle fasse partie de la spécification W3 depuis 2004 en février .

La construction modale '[] de W3Schools utilise la pseudo-classe': target 'pouvant contenir la navigation WP. Vous pouvez également ajouter HTML rel = "noreferrer et noopener à côté de target =" _ blank "pour améliorer les performances de 'nouvel onglet'. CSS n'ouvrira pas les liens dans les onglets pour l'instant, mais cette page explique comment procéder avec jQuery (la compatibilité peut dépendre de WP codeurs ) . MDN a une bonne critique à Utilisation de la pseudo-classe: target dans les sélecteurs

9
mark stewart

Une autre façon d'utiliser target="_blank" est la suivante:

onclick="this.target='_blank'"

Exemple:

<a href="http://www.url.com" onclick="this.target='_blank'">Your Text<a>
4
Edison Q

C'est en fait du javascript, mais lié/pertinent car .querySelectorAll cible par la syntaxe CSS:

var i_will_target_self = document.querySelectorAll("ul.menu li a#example")

cet exemple utilise css pour cibler des liens dans un menu avec id = "exemple"

cela crée une variable qui est une collection d'éléments que nous voulons changer, mais nous les avons toujours modifiés en définissant la nouvelle cible ("_blank"):

for (var i = 0; i < 5; i++) {
i_will_target_self[i].style.target = "_blank";
}

Ce code suppose qu'il y a 5 éléments ou moins. Cela peut être changé facilement en changeant la phrase "i <5."

lisez plus ici: http://xahlee.info/js/js_get_elements.html

1
John Vandivier

En attendant l'adoption du ciblage CSS3…

En attendant l’adoption du ciblage CSS3 par les principaux navigateurs, vous pouvez exécuter la commande sed suivante après la création du (X) HTML:

sed -i 's|href="http|target="_blank" href="http|g' index.html

Cela ajoutera target="_blank" à tous les hyperliens externes. Des variations sont également possibles.

MODIFIER

J'utilise ceci à la fin de la makefile qui génère chaque page Web sur mon site.

0
Serge Stroobandt