Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/supports.html Secret

Created October 9, 2017 19:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hteumeuleu/520b9d295ab8730fe443db431704102a to your computer and use it in GitHub Desktop.
Save hteumeuleu/520b9d295ab8730fe443db431704102a to your computer and use it in GitHub Desktop.
Download ZIP
@supports test in emails
Raw
supports.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@supports in emails</title>
<style type="text/css">
body { font:1em sans-serif; }
.test { display:inline-block; width:100px; height:100px; margin:10px; padding:10px; vertical-align:bottom; text-align:left; font:bold 14px sans-serif; background:#ddd; }
@supports (display:flex) {
.test1 { background:#2ecc40 !important; }
}
@supports not (display:flex) {
.test2 { background:#2ecc40 !important; }
}
@supports (background-attachment:fixed) {
.test3 { background:#2ecc40 !important; }
}
@supports (font-synthesis:none) {
.test8 { background:#2ecc40 !important; }
}
@supports (position:fixed) {
.test9 { background:#2ecc40 !important; }
}
@media (-webkit-transform-3d) {
.test4 { background:#2ecc40 !important; }
}
@media (-webkit-transform-2d) {
.test5 { background:#2ecc40 !important; }
}
@media (-webkit-transition) {
.test6 { background:#2ecc40 !important; }
}
@media (-webkit-animation) {
.test7 { background:#2ecc40 !important; }
}
</style>
</head>
<body>
<div class="test">
default
</div>
<div class="test test2">
@supports not (display:flex)
</div>
<div class="test test1">
@supports (display:flex)
</div>
<div class="test test3">
@supports (background-attachment: fixed)
</div>
<div class="test test8">
@supports (font-synthesis:none)
</div>
<div class="test test9">
@supports (position:fixed)
</div>
<div class="test test4">
@media (-webkit-transform-3d)
</div>
<div class="test test5">
@media (-webkit-transform-2d)
</div>
<div class="test test6">
@media (-webkit-transition)
</div>
<div class="test test7">
@media (-webkit-animation)
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment