Huge Discounts on Mobiles, Books, Cameras, Computers etc: @Flipkart

Saturday, May 31, 2014

How to denote that your link opens in a new Window?

I like to know whether a link would open in a new window or not, before I click a link. I think it is a good practice (especially for accessibility) and I think all browsers should do it automatically. Though the recommended practice is not to open links in another window (as it breaks back button navigation), we may have to do it some times, especially when we link to external websites. Here is a really neat way to do it, without any code changes, just via CSS (easy to remove if you change mind later).

a[target]::after {
    margin-left: 5px;
    content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODI2LjQyOSAtNjk4Ljc5MSkiPjxyZWN0IHdpZHRoPSI1Ljk4MiIgaGVpZ2h0PSI1Ljk4MiIgeD0iODI2LjkyOSIgeT0iNzAyLjMwOSIgZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjMDZjIi8+PGc+PHBhdGggZD0iTTgzMS4xOTQgNjk4Ljc5MWg1LjIzNHY1LjM5MWwtMS41NzEgMS41NDUtMS4zMS0xLjMxLTIuNzI1IDIuNzI1LTIuNjg5LTIuNjg5IDIuODA4LTIuODA4LTEuMzExLTEuMzExeiIgZmlsbD0iIzA2ZiIvPjxwYXRoIGQ9Ik04MzUuNDI0IDY5OS43OTVsLjAyMiA0Ljg4NS0xLjgxNy0xLjgxNy0yLjg4MSAyLjg4MS0xLjIyOC0xLjIyOCAyLjg4MS0yLjg4MS0xLjg1MS0xLjg1MXoiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);

<a href="">Open in this window </a>
<a href="" target="_blank">Open in another window </a>

This is how it would look. Notice the icon towards the end of the second link. Many well known websites (eg: Wikipedia) do this.