Initial commit

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!)