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.