CSS оформление внешних ссылок

Как с помощью CSS выделить внешние ссылки, чтобы они отличались от внутренних.

Иногда в тексте страницы требуется выделить внешние ссылки другим стилем, чтобы они отличались от внутренних ссылок сайта. Для чего этим ссылкам может понадобиться дополнительное оформление? Потому, что пользователь должен знать, что пройдя по этой ссылке, он перейдёт на другой сайт. А вдруг страницы, на которую ведёт ваша внешняя ссылка, уже не существует? Или сервер недоступен? Или там, прости господи, такая непотребщина выложена, что просто «ужоснах»?! ..и пользователю придётся срочно в панике закрывать окно браузера, потому что он в данный момент в офисе, сзади приближается шеф, а тут в мониторе ТАКОЕ!..

Таким образом, подобное выделение делает интерфейс сайта более предсказуемым. А это, ИМХО, для юзабилити только плюс.

Для начала определимся, какие ссылки будем считать внутренними. В моём случае они могут быть такие: "http://dotrb.blogspot.com/", "http://www.dotrb.blogspot.com/" и "/". Крайнее обозначение -- это ссылка в «корень» сайта.

Для этого применим регулярные выражения и селекторы атрибутов CSS:

a[href^="http:"] {...}

Этот код означает, что все ссылки с атрибутом href начинающимся с http: будут иметь стили присвоенные в данном правиле.

Чтобы отличить внешние ссылки от внутренних, пропишем правило, включающее домен:

a[href^="http://dotrb.blogspot.com/"], a[href^="http://www.dotrb.blogspot.com/"], a[href^="/"] {
  color:#C61A1A;
}

Беда в том, что IE 6 не понимает таких селекторов. Поэтому специально для «эксплорера» будем использовать expression.

Примерно так будет выглядеть правило, работающее для всех нормальных браузеров и Internet Explorer:

/* Цвет ссылки "по-умолчанию" -- для внешних ссылок */
a {color:#3256B6;}

/* Цвет внутренних ссылок */
a[href^="http://dotrb.blogspot.com/"], a[href^="http://www.dotrb.blogspot.com/"], a[href^="/"] {
  color:#C61A1A;
}
/* Цвет внутренних ссылок для IE */
a, a:link{
  color:expression(
    (this.getAttribute("href") && 
      ( (this.getAttribute("href").lastIndexOf("http://dotrb.blogspot.com/")==0)||
        (this.getAttribute("href").lastIndexOf("http://www.dotrb.blogspot.com/")==0)||
        (this.getAttribute("href").lastIndexOf("/")==0)
      )
    ) ? "#C61A1A" : "#3256B6"
  );
}

Теперь внутренние ссылки у меня будут под цвет дизайна (#C61A1A), а внешние -- более приближенными к «стандартному» синему (#3256B6).