aboutsummaryrefslogtreecommitdiff
path: root/posts/user-select.md
diff options
context:
space:
mode:
Diffstat (limited to 'posts/user-select.md')
-rw-r--r--posts/user-select.md48
1 files changed, 48 insertions, 0 deletions
diff --git a/posts/user-select.md b/posts/user-select.md
new file mode 100644
index 0000000..7564ea7
--- /dev/null
+++ b/posts/user-select.md
@@ -0,0 +1,48 @@
+# Using User-Select
+
+2019-06-04
+
+Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?
+
+## Introducing the CSS property
+
+Simply put, the `user-select` property is defined as follows:
+
+> `user-select` controls whether the user can select text (cursor or otherwise)
+
+## The CSS
+
+The property's available attributes are very straightforward (just remember to target specific browsers for full support!)
+
+
+ /* Default */
+ p.default {
+ user-select: auto;
+ -moz-user-select: auto;
+ -webkit-user-select: auto;
+ }
+
+ /* Disable the user from selecting text */
+ p.no-select {
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ }
+
+ /* Select all text when user clicks */
+ p.select-all {
+ user-select: all;
+ -moz-user-select: all;
+ -webkit-user-select: all;
+ }
+
+
+## Let's see it in action
+
+Try selecting the separate paragraph elements in the CodePen below:
+
+[Live CodePen Example](https://codepen.io/bradleytaunt/pen/QRooZp/)
+
+## Browser Support
+
+The great news is `user-select` is fully supported across all modern browsers (even as far back as IE10!)