repository·main·Indexed 21 days ago
https://github.com/hteumeuleu/caniemailA Jekyll-based site providing support tables for HTML and CSS features across various email clients. It includes a comprehensive support matrix for features such as AMP for Email, BIMI, @font-face, @import, and various CSS properties like aspect-ratio and animations, mapping support by client, platform, and version.
The color-scheme CSS property allows you to change the default colors of HTML elements. This is useful in email development when you want to force an email to display in a specific color scheme (either only dark or only light), regardless of the user's system settings.
Note on implementation:
When using this property, it currently only works when applied to the html or root element in supported clients.
This feature tracks the support for various HTML list elements across different email clients. Supported elements include:
<ul>, <li><ol>, <li><dl>, <dt>, <dd>When designing emails that use these elements, be aware of the following partial support issues in certain clients:
<ol> reversed attribute: The reversed attribute on <ol> elements is not supported in some clients.<ol> list item value attribute: Setting the value attribute on an <li> within an <ol> may result in behavior that differs from standard web browsers. In some clients, the <ol> tag is closed before the <li value=""> and a new <ol> is automatically added with the start attribute set to that value.The CSS media queries @media (hover) and @media (any-hover) are used to test whether the user's input device(s) (such as a mouse or trackpad) can hover over elements. This is useful for applying specific styles (like hover effects) only when the user has a pointing device capable of hovering, rather than a touch-only interface.
@media (hover): Tests if the primary input mechanism can hover.@media (any-hover): Tests if any available input mechanism can hover.Refer to the MDN documentation for detailed specifications:
The lang attribute allows you to declare the language of the content within an HTML element. This is useful for internationalization (i18n) and accessibility purposes.
Support for this attribute varies significantly across email clients. While many modern clients like Apple Mail, Gmail, and Outlook (recent versions) support it, some webmail clients (like Hey or certain versions of GMX/Web.de) may not support it or have specific limitations (e.g., AOL and Yahoo support it with caveats, such as not supporting it on <td> elements).
<!-- Example usage of the lang attribute -->
<html lang="en">
<body>
<p>This content is declared as English.</p>
</body>
</html>The light-dark() CSS function allows you to define two colors for a single property: one for light mode and one for dark mode. This simplifies managing color schemes without manually writing multiple @media (prefers-color-scheme: dark) queries.
Note on Support: Support is highly fragmented across email clients. While it works in some modern environments (like Apple Mail on macOS 16.0+ or iOS 17.5.1+), it is widely unsupported in Gmail, Outlook, and most webmail providers. Always provide a fallback color for clients that do not support this function.
The mailto: URL scheme allows you to create HTML links that, when clicked, open a new outgoing email message in the user's default email client. You can include parameters to pre-fill various header fields.
Supported parameters include:
cc: Carbon copy recipients.bcc: Blind carbon copy recipients.subject: The subject line of the email.body: The main content/body of the email.Note on Compatibility: While most modern webmail and mobile clients support these links, support for specific parameters like cc and bcc varies by client. For example, some clients may only support partial implementation (e.g., supporting subject but not cc).
The CSS attribute selector ([attr]) allows you to target elements based on the presence or value of specific attributes. Support for this feature varies significantly across email clients and depends heavily on the specific syntax used.
When checking compatibility, note that different clients support different variations of the attribute selector:
[attr]: Targets elements with the attribute present.[attr="value"]: Targets elements where the attribute exactly matches the value.[attr~="value"]: Targets elements where the value is a whitespace-separated list of words, one of which is the specified value.[attr|="value"]: Targets elements where the value is exactly the specified value or begins with it followed by a hyphen (-).[attr^="value"]: Targets elements where the attribute value begins with the specified string.[attr$="value"]: Targets elements where the attribute value ends with the specified string.[attr*="value"]: Targets elements where the attribute value contains the specified string.[attr~="value"] or only support the class attribute. Support may also vary depending on whether the user is using a Google account..test[class] might fail, requiring you to use [class] or td[class] instead).class="x_test"), while the attribute selector remains unprefixed ([class="test"]), causing a mismatch.The align attribute is a deprecated HTML attribute used to indicate how an element is aligned. It supports horizontal alignment (left, center, or right) and vertical alignment for specific elements like images (top, middle, or bottom).
While widely supported across most major email clients (including Gmail, Outlook, Apple Mail, and Yahoo), there are specific partial support cases to be aware of:
left and right values have no effect on <img> elements if they are wrapped in a <span>.<img> elements.left and right do not work on <table> elements; use float:left or float:right CSS styles instead.The project is organized into data and layout directories:
_data: Contains site settings and labels._features: Contains data for all HTML and CSS feature support tables._posts: Contains data for the latest news.tests: Contains HTML test files used to verify HTML and CSS features._includes: Partial files included in theme files._layouts: The primary site layouts._sass: Sass source files. These are compiled into a single file in assets/css/.assets: Contains the final CSS, images, and JavaScript files.When checking support for the <audio> element, be aware of these specific client behaviors noted in the compatibility data:
src attribute is transformed into proton-src.<audio> element and all its content is removed.src attribute is replaced by data-src.CSS selector chaining (e.g., .foo.bar) allows you to apply styles to elements that match all specified selectors simultaneously.
Support Status:
<style> elements to be in a second <head> element because the first <head> is removed./* Example of selector chaining */
.foo.bar {
color: red;
}
/* This targets an element that has BOTH the 'foo' and 'bar' classes */