CSS Targeting for AOL Mail
Among webmail clients, I would say AOL Mail is the most friendly when it comes to processing CSS. Unlike Gmail and Yahoo! Mail, AOL Mail allows a lot more CSS styles and it allows developers to be more adventurous with their designs in AOL Mail. This is especially true for advanced CSS like animation and absolute positioning.
However AOL Mail has its own quirks so its important to be able to target AOL Mail in our CSS styles so we can address this client.
Table of content
Targeting Techniques
The star or unicode id and class name technique
Mark Robbins discovered a clever hack to target AOL Mail using unicode characters in class names. You can use the following selector to target AOL Mail, by putting the same unicode character as the id and class of an element and then creating a selector that will match a class with the unicode character but not the id.
<style>
.★:not(#★){
background-color:red;
}
</style>
<div class="★" id="★">TEST</div>The attribute selector technique
AOL Mail appends aolmail_ to classes and ids as well as CSS selectors including exact attribute selectors (x=y). However it doesn't append aolmail_ to other attribute selector types (x~=y, x^=y, x$=y). So we can target a selector to be only active in AOL Mail by using an attribute selector like (~=) and manually appending the aolmail_ string to the class name.
<style>
div[class~="aolmail_foo"]{
background-color:red;
}
</style>
<div class="foo">TEST</div>AOL Mail does not support "for" attribute in labels
The question now, is why would we target AOL Mail? One key reason to target AOL Mail is that AOL Mail responds to common techniques we use to test for interactive email support, yet there are certain capabilities that are not supported by the client.
Specifically there are certain cases where methods we use to test for interactive support will "pass" in AOL Mail (using the -webkit-min-device-pixel-ratio media query and the checked checkbox technique) yet AOL Mail does not support the techniques used. For example, AOL Mail does not support techniques using the "for" attribute in labels which means that we need a way to hide interactive content using the "for" attribute in AOL Mail.
We can selectively hide the interactive block in AOL Mail with the "aolmail_" string in an attribute selector technique described earlier
<style>
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.cbox-support:checked ~ .interactive{
display:block!important;
}
/* Hide interactive portion from AOL Mail */
input[class~="aolmail_cbox-support"]:checked ~ .interactive{
display:none !important;
}
}
</style>
<input type=checkbox class="cbox-support" style="display:none" checked>
<div class="interactive">INTERACTIVE</div>Don’t Guess, Test!
At Email on Acid, testing is at the core of our mission. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices.
Try us free for 7 days and get unlimited access to email, image and spam testing to ensure you get delivered and look good doing it!
