user-select: support data

hteumeuleu · Feb 18, 2024 · b21ef0a · b21ef0a
1 parent e1b70ed
commit b21ef0a
Show file tree

Hide file tree

Showing 2 changed files with 246 additions and 0 deletions.
diff --git a/_features/css-user-select.md b/_features/css-user-select.md
@@ -0,0 +1,181 @@
+---
+title: "user-select"
+description: "Controls whether the user can select text."
+category: css
+keywords: select, copy
+last_test_date: "2024-02-14"
+test_url: "/tests/css-user-select.html"
+test_results_url: "https://testi.at/proj/9zjptajgcxyzc74ockp"
+stats: {
+  apple-mail: {
+    macos: {
+      "2024-02": "y #1"
+    },
+    ios: {
+      "2024-02": "a #1 #2"
+    }
+  },
+  gmail: {
+    desktop-webmail: {
+      "2024-02": "n #3",
+    },
+    ios: {
+      "2024-02": "n #3"
+    },
+    android: {
+      "2024-02": "n"
+    },
+    mobile-webmail: {
+      "2024-02": "u"
+    }
+  },
+  orange: {
+    desktop-webmail: {
+      "2024-02":"u",
+      "2024-02":"u"
+    },
+    ios: {
+      "2024-02":"u"
+    },
+    android: {
+      "2024-02":"u"
+    }
+  },
+  outlook: {
+    windows: {
+      "2013": "n",
+      "2016": "n",
+      "2019": "n",
+      "2021": "n"
+    },
+    windows-mail: {
+      "2024-02": "n"
+    },
+    macos: {
+      "2024-02": "n #3"
+    },
+    outlook-com: {
+      "2024-02": "n #3"
+    },
+    ios: {
+      "2024-02": "n #3"
+    },
+    android: {
+      "2024-02": "n"
+    }
+  },
+  yahoo: {
+    desktop-webmail: {
+      "2024-02": "n #3"
+    },
+    ios: {
+      "2024-02": "n"
+    },
+    android: {
+      "2024-02": "n"
+    }
+  },
+  aol: {
+    desktop-webmail: {
+      "2024-02": "n #3"
+    },
+    ios: {
+      "2024-02": "n"
+    },
+    android: {
+      "2024-02": "n"
+    }
+  },
+  samsung-email: {
+    android: {
+      "2024-02": "y"
+    }
+  },
+  sfr: {
+    desktop-webmail: {
+      "2024-02":"u"
+    },
+    ios: {
+      "2024-02":"u"
+    },
+    android: {
+      "2024-02":"u"
+    }
+  },
+  thunderbird: {
+    macos: {
+      "2024-02": "u"
+    }
+  },
+  protonmail: {
+    desktop-webmail: {
+      "2024-02":"u"
+    },
+    ios: {
+      "2024-02":"u"
+    },
+    android: {
+      "2024-02":"u"
+    }
+  },
+  hey: {
+    desktop-webmail: {
+      "2024-02":"u"
+    }
+  },
+  mail-ru: {
+    desktop-webmail: {
+      "2024-02":"y"
+    }
+  },
+  fastmail: {
+    desktop-webmail: {
+      "2024-02": "u"
+    }
+  },
+  laposte: {
+    desktop-webmail: {
+      "2024-02": "u"
+    }
+  },
+  gmx: {
+    desktop-webmail: {
+      "2024-02": "n #3"
+    },
+    ios: {
+      "2024-02":"u"
+    },
+    android: {
+      "2024-02":"u"
+    }
+  },
+  web-de: {
+    desktop-webmail: {
+      "2024-02": "n #3"
+    },
+    ios: {
+      "2024-02":"n"
+    },
+    android: {
+      "2024-02":"u"
+    }
+  },
+  ionos-1and1: {
+    desktop-webmail: {
+      "2024-02": "u"
+    },
+    android: {
+      "2024-02": "u"
+    }
+  }
+}
+notes_by_num: {
+  "1": "Works with `-webkit` prefix",
+  "2": "`all` value does not work",
+  "3": "Property is stripped from style tag"
+}
+links: {
+  "Can I use: CSS user-select":"https://caniuse.com/?search=user-select",
+  "MDN: user-select":"https://developer.mozilla.org/en-US/docs/Web/CSS/user-select"
+}
+---
diff --git a/tests/css-user-select.html b/tests/css-user-select.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="x-apple-disable-message-reformatting">
+  <!--[if mso]><xml>
+  <o:OfficeDocumentSettings>
+  <o:AllowPNG/>
+  <o:PixelsPerInch>96</o:PixelsPerInch>
+  </o:OfficeDocumentSettings>
+  </xml><![endif]-->
+  <title>user-select</title>
+  <style>
+    h1 { margin-bottom: 40px; }
+    h2 { font-family: monospace; }
+    p { 
+      margin-bottom: 40px;
+      font-size: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>user-select CSS property</h1>
+
+  <h2>user-select: auto</h2>
+  <p style="font-size:18px; user-select: auto; -webkit-user-select:auto;">
+    This text is selectable based on user-select value of the parent.
+  </p>
+
+  <hr>
+
+  <h2>user-select: text</h2>
+  <p style="font-size:18px; user-select:text; -webkit-user-select:text;">
+    This text is selectable.
+  </p>
+
+  <hr>
+
+  <h2>user-select: all</h2>
+  <p style="font-size:18px; user-select:all; -webkit-user-select:all;">
+    Clicking once will select all of this text
+  </p>
+
+  <hr>
+
+  <h2>user-select: none</h2>
+  <p style="font-size:18px; user-select:none; -webkit-user-select:none;">
+    This text is not selectable.
+  </p>
+
+  <hr>
+
+  <h2>user-select: contain</h2>
+  <p style="font-size:18px; user-select:contain; -webkit-user-select:contain;">
+    This text is selectable.
+  </p>
+
+
+</body>
+
+</html>