Add CSS Variables feature

hteumeuleu · Aug 23, 2019 · 2e829d5 · 2e829d5
1 parent 965f867
commit 2e829d5
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 0 deletions.
diff --git a/_features/css-variables.md b/_features/css-variables.md
@@ -0,0 +1,99 @@
+---
+title: "CSS Variables (Custom Properties)"
+category: css
+last_test_date: "2019-08-23"
+test_url: "/tests/css-variables.html"
+test_results_url: "https://app.emailonacid.com/app/acidtest/3viCexhHsrjaP9YS8RwzNwikbf4C0akxPFhK8xgyltxpe/list"
+stats: {
+    apple-mail: {
+        macos: {
+            "10.3":"y"
+        },
+        ios: {
+            "10.3":"y",
+            "12.2":"y"
+        }
+    },
+    gmail: {
+        desktop-webmail: {
+            "2019-08":"n #1"
+        },
+        ios: {
+            "2019-08":"n #1 #2"
+        },
+        android: {
+            "2019-08":"n #1 #2"
+        }
+    },
+    orange: {
+        desktop-webmail: {
+            "2019-08":"y"
+        },
+        ios: {
+            "2019-08":"y"
+        },
+        android: {
+            "2019-08":"y"
+        }
+    },
+    outlook: {
+        windows: {
+            "2003":"n",
+            "2007":"n",
+            "2010":"n",
+            "2013":"n",
+            "2016":"n",
+            "2019":"n"
+        },
+        macos: {
+            "2011":"y",
+            "2016":"n"
+        },
+        outlook-com: {
+            "2019-08":"n"
+        },
+        ios: {
+            "2019-08":"n"
+        },
+        android: {
+            "2019-08":"n"
+        }
+    },
+    samsung-email: {
+        android: {
+            "6.0":"y"
+        }
+    },
+    sfr: {
+        desktop-webmail: {
+            "2019-08":"y"
+        },
+        ios: {
+            "2019-08":"y"
+        },
+        android: {
+            "2019-08":"y"
+        }
+    },
+    thunderbird: {
+        macos: {
+            "60.3":"y"
+        }
+    },
+    yahoo: {
+        desktop-webmail: {
+            "2019-08":"n"
+        },
+        ios: {
+            "2019-08":"n"
+        },
+        android: {
+            "2019-08":"n"
+        }
+    }
+}
+notes_by_num: {
+    "1": "Partial. The `var()` function is supported, but not the variable declaration.",
+    "2": "Partial. Not supported with non Gmail accounts."
+}
+---
diff --git a/tests/css-variables.html b/tests/css-variables.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<head>
+	<title>css variables</title>
+</head>
+<body>
+	<table border="0" cellpadding="0" cellspacing="0">
+		<tr>
+			<td style="--test1: green; padding:10px; color:#fff; background:red; background:var(--test1);">
+				--test1: green; on td
+			</td>
+		</tr>
+	</table>
+	<table border="0" cellpadding="0" cellspacing="0" style="--test2: green;">
+		<tr>
+			<td style="padding:10px; color:#fff; background:red; background:var(--test2);">
+				--test2: green; on parent table
+			</td>
+		</tr>
+	</table>
+</body>
+</html>