Nofollow Highlighting In Google Chrome

28th November 2008 - 1 minute read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and we will endeavour to correct.

I found this excellent bookmarklet the other day which allows you to see nofollow links quickly and easily in ~~Chrome~~ most modern browsers.

Nofollow?

The bookmarklet consists of the following JavaScript.

javascript:function%20highlightNofollow(){var%20newStyle=document.createElement('style');newStyle.type='text/css';newStyle.appendChild(document.createTextNode('a[rel~=nofollow]{border:1px%20dashed%20#852!%20important;background-color:#fcc!%20important;}'));document.getElementsByTagName('head')[0].appendChild(newStyle);};highlightNofollow();

Which basically puts the following CSS rules into your document, thus highlighting any links with the rel="nofollow" attribute.

a[rel~=nofollow] {
 border:1px dashed #852! important;
 background-color:#fcc! important;
}

Take a look at the bookmarklet on johnmu.com.

css

Add new comment

Related Content

Using Shadow DOM

When I first heard the term "Shadow DOM" I had to laugh at the name. I had visions of a cloak and dagger HTML element that would only be seen on the dark web. Or some sort of nefarious shadow site that was the after effect of a hack. In reality, this is quite a useful bit of technology that has a number of applications, although it does need a fairly modern browser to be able to use it. Shadow DOM is part of the web components strategy, which includes custom elements and HTML templates. These give developers the power to create custom tools and experiences that are encapsulated away from other parts of the code. In this article I will go though what the shadow DOM is, how to use it, and in what situations it comes in handy.

Simple Horizontal Segmented Bar Chart With CSS

Bar charts are powerful ways to show the relationships between different data items. If the data you want to show is discrete then a simple horizontal segmented bar chart is a good idea. You can easily change a collection of numbers into a related set of attributes.

Displaying Tables As Block Elements On Mobile

The experience of using tables in websites whilst on a mobile can be pretty poor. Things tend to get a bit squashed and displaying the information can be a challenge just to fit the table onto the screen.

I was recently faced with a similar problem where I had a particular design in mind for the mobile version of the table. The solution I found was base based on some responsive table designs from CSS-tricks. I'm certainly no designer, but the what I created worked for the situation I was trying to solve.

The iframe srcdoc Attribute

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe. I did think about creating using an API to send back each page on request but I thought that this might just overcomplicate the program.

Show The First N Items In A List With CSS

A common design method is to use list elements to create the layout of a menu or a section on a page. This is all fine until the users come along and create lots of list items that mess up the layout of the page. In CSS it is possible to show only the first few items in the list so that your users can't mess up the layout.

To show only the first 2 items in a list use the adjacent sibling combinator to hide the third element and everything after that.

Langton's Ant In JavaScript

After looking at Conway's game of life I have been looking at other forms of cellular automata. This lead me to discover Langton's ant, which is a different kind of cellular automata where an agent (namely an ant) is used to turn the squares on or off as it travels around a grid.

The rules of Langton's ant are quite simple. The ant simply follows two rules as it moves around the grid.