WordPress.org

Ready to get started?Download WordPress

Forums

Decode
[resolved] Lots of W3C HTML Validation errors (52 posts)

  1. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    There are 35 of them, totaling 164 KB. It is irresponsible to download all of these when most devices won't use them.

  2. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    And I mean that at some point, the site stopped doing the whole responsive thing on IE 8 and lower. I don't think it had to do with these standard-compliant changes, something else maybe.

  3. sparky672
    Member
    Posted 6 months ago #

    Yeah, I guess. How many KB are all the pages and scripts?

  4. sparky672
    Member
    Posted 6 months ago #

    Yeah, I know IE 8 was pretty hosed up before I made my changes, but I can only compare it to the other browsers where it looks really nice.

  5. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    It depends on the page and settings, etc. A fully-loaded page I just loaded cost 594 KB, another cost 1MB, another 704 KB, yet another 535 KB. In any case, this is still a large percentage of the page.

  6. sparky672
    Member
    Posted 6 months ago #

    From a mobile perspective, that makes total sense.

  7. sparky672
    Member
    Posted 6 months ago #

    I found a minor issue in the header.php file. The <title> element inside the "Strava" section contains "Foursquare".

    How are your changes/workarounds coming regarding the HTML validation?

    I'm presently using jQuery to write the <image> element after page load. It's not ideal... although the page's HTML is valid, the workaround image inserted by jQuery makes for invalid HTML in the DOM. I'm willing to accept this as it achieves the appearance of valid HTML until such time that an image fallback is no longer needed. Then it's just a simple matter of deactivating the jQuery.

    Specifically, I placed a <desc> element within the SVG. This must be set to display:none in the CSS and it contains the URL to the PNG file, <desc>path-to-PNG</desc>. It's valid HTML and no image loads. The jQuery then takes this URL and through DOM manipulation creates the <image> element immediately after.

    jQuery(document).ready(function($) {
    $('desc.fallback').each(function() {
    var html = '<image src="' + $(this).html() + '" width="200" height="200"></image>';
    $(html).insertAfter($(this));
    });
    });

    The problem with my solution is that, although it works great in older versions of Safari, it's not working at all in IE 8. I'm willing to live with that since the theme is not really looking too good in IE 8 anyway. I am unable to test this solution in Android 2.3 though.

    I've also added two new items for the Social Icons... "StackOverflow" and "Yelp", including the SVG and PNG versions of the icons and modifications to the PHP so those URLs can be entered in the admin panel.

    The SVG paths are way too long to post here, but if you're interested in any of these modifications, icons, etc., please contact me privately.

  8. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    I worked through the theme's Respond.js not working in IE 8 today as well as found a way around a compromise I made earlier. I'll have more time tonight to implement the fallback I came up with. I think it will work really well and won't require JS.

  9. sparky672
    Member
    Posted 6 months ago #

    That's all very good news considering my attempt is not working so great cross-browser.

    Any interest in adding Yelp or StackOverflow to the icons? I can email those SVG and PNG files to you if you want.

  10. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    I can add those. I make the social icons myself and add them to my icon set.

  11. sparky672
    Member
    Posted 6 months ago #

    Nice.

    I'm not really good with Illustrator so it took me a while to convert the raster images to get the SVG path data today. I think they turned out well although the path data is a bit on the long side.

  12. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    So for the icons in IE, I got a great fallback working but it depends on background-size support which IE 8 and lower of course doesn't have. So the images are too large for IE, maybe I'll export smaller ones or I may call it quits on IE support. In any case, the fallback is HTML 5 valid, bring the theme fully up to validity.

  13. sparky672
    Member
    Posted 6 months ago #

    I don't see it on GitGub. Have you made it available for download yet? I'd love to try it.

    Yes, for something like this, maybe the Ie 8 fallback should be text links in place of icons and no widget slider, IMHO. Otherwise, forget about ie 8 entirely.

  14. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    It's in a separate branch. Here's a link: https://github.com/ScottSmith95/Decode/tree/2.8.5

  15. sparky672
    Member
    Posted 6 months ago #

    You are awesome! Looks great and works great! IE 8 still looks pretty bad but at least the icons are there. I'm adding my "IE too old - not supported" browser message.

    Can you advise about how to over-ride the customizer.php file using a child theme? I'm trying to add my StackOverflow and Yelp social icons without having to modify /inc/customizer.php in the parent theme.

    Thanks!

  16. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    Hook in to the Customizer with this hook: add_action( 'customize_register', 'decodeChild_function_name_customize_register' );

    You can do this in your functions.php file.

  17. sparky672
    Member
    Posted 6 months ago #

    I tried something like that but got some errors. Stupid mistake on my part. Fixed.

    It's working now, except that it cannot find my new fallback icons which are located in my child theme image folder. What's the current fallback mechanism and how can I get it to also look in the child's /image/ folder?

    Thanks.

  18. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    So is this based on 2.8.4 or the 2.8.5 branch?

  19. sparky672
    Member
    Posted 6 months ago #

    I'm using your latest, 2.8.5

  20. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    So now I'm using CSS background images for each icon. You can see in css/style.css how I did this. It's pretty simple. Now in your child theme, add the images at the same size in an images folder and reference them from your child theme CSS.

  21. sparky672
    Member
    Posted 6 months ago #

    Since it's within CSS, no problem... I just didn't think to look there first... I was searching the JS.

    All fixed and working now.

    Thanks again!

  22. Scott Smith
    Member
    Theme Author

    Posted 6 months ago #

    No problem. Thanks for changing your review too! That means a lot. If you find other issues, please open a new thread so this one doesn't get too big.

Reply

You must log in to post.

About this Theme

About this Topic