KLoning Spoon

if you care about valid HTML5, there is another small problem in the disqus plugin. It is using rel attributes in <span> tags (which is not allowed in HTML5) to mark these tags for the JavaScript code that later replaces them with the  x comments and y reactions link.

Instead of rel attributes, a HTML5 conformal data-*  attribute can be used. To fix this, do the following:

  • Search disqus.php for <span class=”dsq-postid”  rel=”[…]. There should be 2 occurrences around line 700 in the functions dsq_comments_number and dsq_comments_text.
  • replace the rel tag with a data-* tag of your choice, for example data-id.
  • Around line 1060 there are 2 functions, dsq_output_loop_comment_js and dsq_output_footer_comment_js. Within the loops inside these 2 functions, you will find a nodes[i].getAttribute(‘rel’) expression. Replace the rel with the name of the data-* tag you have assigned in step 2.

This will make HTML5 validators happy without affecting the functionality of the plugin.

Note: tested in most modern browsers (Internet Explorer 8 and up), Chrome, Firefox 4, Opera 10+11.  I cannot guarantee that some older browsers may react strangely on data-* attributes. In theory, they shouldn’t, but you never know…

source: blog miranda

  1. kloningspoon posted this
Blog comments powered by Disqus