Reply to thread

Message

<blockquote data-quote="Markshall" data-source="post: 329512" data-attributes="member: 1872">Got a little bored and decided to write this up, it's simply a little CSS hack that targets 'a' elements with the target of either _blank or _new, which means links attached to the 'a' element will open in a new page, then it places a little background image of a new window icon that I grabbed from Google next to it.Many sites use this for accessibility, but they decide to add a class of 'newwindow' (or something similar) to the 'a' element, whereas this removes the need for an additional class name so long as the target is either _blank or _newCode is below:[HTML]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;New Window&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: &quot;Helvetica&quot;, sans-serif;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 1em;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 1.2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; select elements whose target is '_blank' or '_new'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; meaning the attached link will open in a new page&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a[target=&quot;_blank&quot;],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a[target=&quot;_new&quot;] {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: url('newwindow.png') no-repeat center right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 12px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 14px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-right: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;http://google.co.uk&quot; target=&quot;_blank&quot;&gt;Google UK&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home page&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;http://eminem.com&quot; target=&quot;_new&quot;&gt;Eminem&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;http://facebook.com&quot; target=&quot;_blank&quot;&gt;Facebook&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;About this website&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Here is the link to the icon: <a href="http://i.imgur.com/Na5Kr1u.png" target="_blank">http://i.imgur.com/Na5Kr1u.png</a>Or you can view it on <a href="http://codepen.io/Markshall/pen/ZYVMjq" target="_blank">CodePen</a>Hope it helps,Mark</blockquote>

[QUOTE="Markshall, post: 329512, member: 1872"] Got a little bored and decided to write this up, it's simply a little CSS hack that targets 'a' elements with the target of either _blank or _new, which means links attached to the 'a' element will open in a new page, then it places a little background image of a new window icon that I grabbed from Google next to it. Many sites use this for accessibility, but they decide to add a class of 'newwindow' (or something similar) to the 'a' element, whereas this removes the need for an additional class name so long as the target is either _blank or _new Code is below: [HTML]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>New Window</title> <style> body { font-family: "Helvetica", sans-serif; font-size: 1em; line-height: 1.2; } /* select elements whose target is '_blank' or '_new' meaning the attached link will open in a new page */ a[target="_blank"], a[target="_new"] { background: url('newwindow.png') no-repeat center right; height: 12px; width: 14px; padding-right: 20px; } </style> </head> <body> <ul> <li><a href="http://google.co.uk" target="_blank">Google UK</a></li> <li><a href="index.html">Home page</a></li> <li><a href="http://eminem.com" target="_new">Eminem</a></li> <li><a href="http://facebook.com" target="_blank">Facebook</a></li> <li><a href="about.html">About this website</a></li> </ul> </body> </html>[/HTML] Here is the link to the icon: [URL]http://i.imgur.com/Na5Kr1u.png[/URL] Or you can view it on [URL='http://codepen.io/Markshall/pen/ZYVMjq']CodePen[/URL] Hope it helps, Mark [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members