Usa target = “_ blank” in css

Ho collegamenti esterni nel menu principale del mio sito web. Voglio aprire questi collegamenti in una nuova scheda. Potrei realizzarlo usando “target = _blank” in HTML. Esiste una proprietà CSS simile o qualcos’altro?

Sfortunatamente no. Nel 2013, non c’è modo di farlo con puro CSS.


Aggiornamento : grazie a showdev per il collegamento alle specifiche obsolete dei collegamenti ipertestuali CSS3 e sì, nessun browser l’ha implementato. Quindi la risposta è ancora valida.

Come c69 accennato non c’è modo di farlo con puro CSS.

ma puoi usare HTML invece:

uso

    

nel HTML per rendere tutti i collegamenti alle pagine che non includono target attributo target da aprire in una nuova finestra vuota per impostazione predefinita. altrimenti puoi impostare l’attributo target per ogni link come questo:

  test-link 

e avrà la precedenza

    

tag se è stato definito in precedenza.

Ci sono alcuni modi in cui il CSS può ‘indirizzare’ la navigazione. Questo modulerà i collegamenti interni ed esterni usando lo stile degli attributi, che potrebbe aiutare a segnalare ai visitatori ciò che faranno i collegamenti.

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

Puoi anche scegliere come target il tradizionale HTML in linea “target = _blank”.

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

Inoltre: selettore target per disegnare il blocco di navigazione e gli elementi target .

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

CSS: è supportato il selettore pseudo-class di destinazione: caniuse , w3schools , MDN .

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

CSS / CSS3 proprietà ” target-new ” ecc., Non supportato da alcun browser principale, 2017 agosto, sebbene faccia parte delle specifiche W3 dal febbraio 2004 .

La costruzione “modale” di W3Schools utilizza la pseudo-class “target” che potrebbe contenere la navigazione WP. È inoltre ansible aggiungere HTML rel = “noreferrer e noopener accanto a target =” _ blank “per migliorare le prestazioni della ” nuova scheda “ . Il CSS non aprirà i collegamenti nelle tabs per ora, ma questa pagina spiega come farlo con jQuery (la compatibilità può dipendere per Coder WP ). MDN ha una buona recensione su Utilizzo della pseudo-class: target nei selettori

Un altro modo di usare target="_blank" è:

 onclick="this.target='_blank'" 

Esempio:

 Your Text 

Questo in realtà è javascript ma correlato / rilevante perché .QuerySelectorTutti i target per syntax CSS:

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

questo esempio usa css per indirizzare i collegamenti in un menu con id = “esempio”

questo crea una variabile che è una collezione di elementi che vogliamo cambiare, ma li abbiamo effettivamente modificati impostando il nuovo target (“_blank”):

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

Quel codice presuppone che ci siano 5 o meno elementi. Questo può essere cambiato facilmente cambiando la frase "i <5."

leggi di più qui: http://xahlee.info/js/js_get_elements.html

In attesa dell’adozione del targeting CSS3 …

In attesa dell’adozione del targeting CSS3 da parte dei principali browser, è ansible eseguire il seguente comando sed una volta creato l’HTML (X):

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

Aggiungerà target="_blank" a tutti i collegamenti ipertestuali esterni. Sono possibili anche variazioni.

MODIFICARE

Lo uso alla fine del makefile che genera ogni pagina web sul mio sito.