415 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 5-6 years
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Bought between 10 and 49 items
  • Referred between 10 and 49 users
  • Portugal
unisphere says

Sorry guys if this was already posted on the forum, I couldn’t find it.

A potential Buyer of my most recent theme (2 months old) had a pre-purchase concern regarding the validation of the theme in W3C , it was displaying validation errors. You can imagine my surprise since 2 months ago when I submitted the theme the validation errors weren’t there. I decided to search for the validation errors but couldn’t find anything of interest, just this post.

In my theme (and I believe in most theme this is happening), these are the errors:

<meta name="search" content="search..." />

I sometimes use this approach in order to get PHP values for javascript use (I believe you are familiar with this approach).

rel="lightbox"

It seems the rel attribute now has limited valid values for a correct validation so lightbox plugins that use the rel attribute, like prettyphoto for example, will have validation problems.

This also happens with the rel=”canonical” markup generated by WordPress.

If you take a look at this post dated from February 2011 you can see the default Tweentyten WordPress theme validates correctly with the HTML5 Doctype. Try and validate it now and you can see the same errors: check errors

Would love to hear your thoughts about this.

Cheers

385 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 4-5 years
  • United Kingdom
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Exclusive Author
EugeneO says

I was validating a new theme this morning and noticed the same thing. The index and canonical <link /> tags and the rel attribute on category links generated by WordPress no longer validate.

3256 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Beta Tester
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
+4 more
ParkerAndKent says

Yes,

all the custom tag attributes like rel, to be validated need to be in the form: data-rel (data-attribute_name).

This sucks because WordPress too prints rel attributes within the header…

In any case, I think that this kind of validation errors are just ridicolous… validation is needed to check more important things…

I think that to protect authors from buyers complaints, staff should make a list of “accepted validation errors” that don’t create any problem to the themes.

We cannot change how plugins like prettyPhoto work just for these errors, because otherwise if a buyer updates his plugins then they wuldn’t work with the new validated attributes (if we edit them to data-rel).

2566 posts Put a Donk On It
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • United Kingdom
  • Exclusive Author
  • Attended a Community Meetup
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Referred between 200 and 499 users
+5 more
ThemeProvince says

I personally find validation pointless, if it displays correctly thats all that matters, but I still do it because it is required for some reason.

1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 more
JamiGibbs says

I’m glad you brought this up. I had trouble getting my latest HTML template validated because the hover navigation was using ‘rel’ for the background hex color effect I’m using.

I remember when I ran it through HTML5 validation and nearly blew a gasket. ;) But there are workarounds to it.

One thing you can do with lightbox is just make it a class and change ‘rel’ in the function to ‘class’ as well.

This guy has a nice little write up on it.

327 posts just a random dude...
  • Author had a Free File of the Month
  • Bought between 100 and 499 items
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Europe
  • Exclusive Author
  • Has been a member for 4-5 years
  • Envato Studio (Microlancer) Beta Tester
  • Referred between 1 and 9 users
+1 more
trendyWebStar says

i have noticed this too…So are we supposed just to ignore it and continue like we did before or what?that’s my question? : )

1024 posts Best-dressed man at PressNomics 2013
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has attended an Envato Live event
  • Has been a member for 5-6 years
+5 more
Parallelus says

I’ll bet you could replace all your “rel” attributes with “data-rel” in the code then using jQuery in your footer swap them:

jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel');
});

This way the page validates but the rel attribute is still there for all the scripts that rely on it. That won’t fix the WP or other CMS core code that have these attributes but those will likely be updated soon.

356 posts
  • Interviewed on the Envato Notes blog
  • Beta Tester
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 3-4 years
  • Referred between 1 and 9 users
  • Bought between 50 and 99 items
  • Sold between 100 and 1 000 dollars
  • Exclusive Author
  • United Kingdom
FutureSight says

Yeah just ignore it ;]

1024 posts Best-dressed man at PressNomics 2013
  • Attended a Community Meetup
  • Author had a File in an Envato Bundle
  • Bought between 1 and 9 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has attended an Envato Live event
  • Has been a member for 5-6 years
+5 more
Parallelus says

Just noticed a missing “)” in the previous code:

jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel'));
});

There, I think that will work.

2024 posts
  • Elite Author
  • Author had a Free File of the Month
  • Has been a member for 4-5 years
  • Austria
  • Exclusive Author
  • Interviewed on the Envato Notes blog
  • Envato Studio (Microlancer) Beta Tester
+3 more
revaxarts says

Just noticed a missing “)” in the previous code:
jQuery('*').each( function() {
    jQuery(this).attr('rel',  jQuery(this).attr('data-rel'));
});
There, I think that will work.

The ’*’ selector is very heavy. It selects all elements!

jQuery('[rel]').each( function() {
   var $t = jQuery(this);
    $t.attr('rel',  $t.data('rel'));
});
should be a little bit faster (requires jQuery 1.4.4+)
by
by
by
by
by
by