CSS プロパティ target-new：新しいウィンドウまたはタブでリンクを開く
target-new プロパティは、リンク（<a> 要素）を新しいウィンドウまたはタブで開くかどうかを指定するために使用されていました。しかし、このプロパティは CSS 標準から削除され、現在は使用されていません。代わりに、rel="noopener" と target="_blank" を組み合わせて使用することをお勧めします。
target-new の構文と値
-
構文:
target-new: window | tab | <string>; -
値:
window: 新しいウィンドウにリンクを開きます。tab: 新しいタブにリンクを開きます。<string>: 指定された名前のウィンドウまたはタブにリンクを開きます。
コード例:
<a href="https://www.example.com" target-new="window">新しいウィンドウで開く</a>
<a href="https://www.example.com" target-new="tab">新しいタブで開く</a>
<a href="https://www.example.com" target-new="myWindow">"myWindow" という名前のウィンドウで開く</a>
target-new は廃止されました
target-new プロパティは CSS 標準から削除され、現在はサポートされていません。
推奨される代替案：rel="noopener" と target="_blank"
新しいウィンドウまたはタブでリンクを開き、セキュリティを確保するには、次の組み合わせを使用することをお勧めします。
-
rel="noopener": 新しく開かれたページがwindow.openerを介して元のページにアクセスするのを防ぎ、セキュリティを向上させます。 -
target="_blank": 新しいウィンドウまたはタブにリンクを開きます。
コード例:
<a href="https://www.example.com" target="_blank" rel="noopener">新しいウィンドウ/タブで安全に開く</a>
ブラウザの互換性
target-new は廃止されたため、すべての主要なブラウザでサポートされなくなりました。
| ブラウザ | サポート状況 |
|---|---|
| Chrome | サポートされていません |
| Firefox | サポートされていません |
| Safari | サポートされていません |
| Edge | サポートされていません |
| Internet Explorer | サポートされていません |
まとめ
target-new プロパティは、かつてはリンクの開き方を制御する方法を提供していましたが、現在は廃止されています。同じ目標を達成し、セキュリティを確保するためには、rel="noopener" と target="_blank" を組み合わせて使用することをお勧めします。
参考文献
よくある質問
Q1: target-new を使用しても問題ありませんか？
A1: いいえ、target-new は廃止されたため、使用しないでください。代わりに、rel="noopener" と target="_blank" を組み合わせて使用してください。
Q2: target-new を使用すると、どのようなセキュリティ上のリスクがありますか？
A2: target-new を使用すると、新しく開かれたページが window.opener を介して元のページにアクセスする可能性があり、セキュリティ上のリスクとなります。具体的には、フィッシング詐欺やマルウェアのインストールなどに悪用される可能性があります。
Q3: rel="noopener" と target="_blank" を組み合わせることで、どのようなメリットがありますか？
A3: rel="noopener" と target="_blank" を組み合わせることで、新しいウィンドウまたはタブでリンクを開きつつ、セキュリティ上のリスクを軽減することができます。 rel="noopener" は、新しく開かれたページが window.opener を介して元のページにアクセスするのを防ぎ、target="_blank" は新しいウィンドウまたはタブでリンクを開きます。これらの属性を組み合わせることで、より安全なウェブサイトを構築することができます。