search

lucidlemon / paradeiser

small and sleek mobile navigation
http://lucidlemon.github.io/paradeiser/
500 stars 29 forks source link

Tidy imcompatibilities #2

Closed alfupe closed 9 years ago

alfupe commented 9 years ago

Hi there,

Thanks for this plugin. I'm testing it in a project that is using Tidy extension to clean and repair bad markup. The code needs some minor repairs to be fully compatible with it.

  1. "div" into "a" --> the menu buttons --> change de nested div to span
  2. "div" and "ul" into "span" --> the dropdown --> change the span to div
  3. Into the CSS: when making reference to the former structure .paradeiser > span, now it can be repaired as: .paradeiser > .paradeiser_dropdown

Regards, Alex

lucidlemon commented 9 years ago

Ok let's discuss things a bit:

  1. you suggest that this: 
<a href="#" class="paradeiser-hidden-phone">
    <div class="paradeiser_icon_canvas">
        <img src="img/menu_home.svg" alt="Navigate to Home">
    </div>
    <span>Home</span>
</a>

turns into this:

<a href="#" class="paradeiser-hidden-phone">
    <span class="paradeiser_icon_canvas">
        <img src="img/menu_home.svg" alt="Navigate to Home">
    </span>
    <span>Home</span>
</a>

Is that correct? While this is kinda ok, it does not make any semantic difference as div and span are basically the same, just that a <div> is by default a block element while a <span> is an inline-block. As the upper part is mostly an image this is semantically more valid if we have <span> and <div> together within this <a>.

In addition to this I can style the <span> without affecting the <div> (Yes, there is the :not rule in css, but its support is awful at the moment).

I would not see any improvement by changing the div.paradeiser_icon_canvas into a span.paradeiser_icon_canvas.

Pretty much the same argument is valid for changing the span.paradeiser_dropdown into div.paradeiser_dropdown. Both div and span have no semantic meaning at all. And the code is valid for both implementations.

The third point is valid. I changed that in aff783ae7d143d823d2d1d5fbac0996052d0c574

alfupe commented 9 years ago

I agree with you. The thing is that Tidy is not ready for html5 yet, so until then people using it will have to "correct" (adapt) the markup. Indeed, this is what I did to make it work (for me).

Anyhow, thanks for your comments and your plugin.

lucidlemon commented 9 years ago

No problem :) As long as it works for you it's great. Let me know if I can help you any further.

Daniel