Improve your code with Chrome Dev Tool - AOL Label Support

This week, I was working on a hamburger menu for a client and was trying to make it work also in AOL Webkit browsers. But I went into some problem that the AOL does not support for attribute when I was checking the FreshInbox for some CSS support look up.

For attribute in labels targeting ids in checkboxes not supported. Labels have to wrap checkboxes in order to toggle checkbox elements. - FreshInbox

FreshInbox also indicated that AOL supports @(webkit pixel ratio). So it looks like there might be something wrong with the for attribute or the id attribute.

If the label tag or input tag is removed, then it should still be working with hover in a weird way because the solution is a hybrid solution. Hover function really need to be improved as the :hover was bound on the image div instead of the wrapping div. And hover should never be applied to touch screens because it's so easy to lose focus when you scroll the screen.

Then I explored the code with the Chrome Dev Tool. And it told me everything.

That is to say, AOL adds "aolmail_" prefix on every id and class but it doesn't add anything on the for attribute. Thus, navcheckbox can't point to aolmail_navcheckbox, so every time you click on the label it's triggering nothing.

To solve that, you will need to add another input first.

If you check the FreshInbox again, it tells you that E[x(~=,*=,^=)y] selector is supported in AOL, so we can use General Sibling Selector here.

So your code will look like this:

<style>
  @media (-webkit-min-device-pixel-ratio: 0){
    #aolmail_navcheckbox:checked + div{
      height: 639px !important;
    }
    #navcheckbox:checked ~ div{
      height: 639px !important;
    }
  }
</style>

<label for="aolmail_navcheckbox">
...
</label>
<div id="menucontainer">
  <input id="navcheckbox" ...>
  <input id="aolmail_navcheckbox" ...>
...
</div>

The main idea is to add "aolmail_" on the for attribute. And another input with "aolmail_" prefix on the id.

So in AOL, the first input will be prefixed to match the label and the General sibling selectors (~) works.

In all the other clients, the second input will match to the label then Adjacent sibling selectors (+) works.

Below is what you will see after the fix.

This is tested in Outlook Mac, Apple Mail, AOL (Chrome), all iOS devices, Outlook.com iOS App (hover way no input).

By using the Chrome Dev Tool, we can very easily see what the ISP has done with our code so that we could use other ways to break the limitation. Check Rémi Parmentier's latest post for a more stunning geek way to debug your email with Chrome Dev Tool.

I've there's anything wrong or I missed. Leave a comment or find me on Twitter.