0

Is it possible to style a broken link (ie. one that tries to link to a non-existent page on your site) in a different colour? eg. working links are blue, broken links are red?

Or, if not CSS, is it possible to identify them through JavaScript and then style them later? (jQuery is not available to me.)

StarDart
  • 251
  • 1
  • 10
  • 4
    No, it is not possible to do with just CSS. (Furthermore, it is not possible to know if a link is 'broken' without attempting access and applying a relevant 'broken' heuristic - and Same-Origin policy makes this difficult from JavaScript.) – user2864740 Feb 01 '16 at 00:39
  • You may want to check this post: http://stackoverflow.com/questions/5224197/javascript-check-if-server-is-online – LuvnJesus Feb 01 '16 at 00:40

3 Answers3

0

Referencing You may want to check this post: Javascript: Check if server is online?

You can use javascript to check to see if a site is up/down. Using this function you can determine whether or not the link is good and display it with a different class than those that are not good.

Community
  • 1
  • 1
LuvnJesus
  • 631
  • 4
  • 9
0

No, you cannot style a broken link with CSS. The browser does not know if a link is broken until some agent tries to access the link.

You could conceivably write some Javascript that would attempt to fetch every page for every link in your document and then, upon failure of some of the links, it could dynamically change the style of the link to something else. But, this is likely a very bad idea because it would potentially waste a lot of bandwidth and waste some CPU (both particularly important on mobile).

And, even further is some of the links are to other domains, the browser will likely prohibit your Javascript from directly fetching those pages (same-origin security restrictions) so you may not even be able to do it with Javascript.

A scalable system that could work would be the have your server check the links you're using in your pages on some interval (perhaps once every few days), keep that info in a local database and then you can add a class to a link (server-side) when rendering the page and then a CSS rule can style that link differently. Plus, the server is not subject to same-origin restrictions so you don't have that limitation doing it server-side. There are lots of gotchas when determining off-line that you will have to watch out for because a host can be down temporarily, can be down only from a particular route on the internet, etc...

jfriend00
  • 683,504
  • 96
  • 985
  • 979
0

CSS itself does not have the ability to identify a link as broken or not, no.

But, assuming you have some other method of determining whether or not the link is broken, yes you can add a class to the broken ones and give those a unique CSS style to visually indicate them as such.

How to automatically determine broken links would be another question, one which is pretty well covered in various places on the web. For example in JS here, and PHP here. I would highly recommend building a system that does not try to determine each link each visit for each visitor, but rather one that maybe checks all the links on your site once a week and updates what links on the site get served with an extra broken class attached to them or something like that.

Community
  • 1
  • 1
Jimbo Jonny
  • 3,549
  • 1
  • 19
  • 23