aboutsummaryrefslogtreecommitdiff
path: root/_posts/2019-06-04-user-select.md
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
committerBradley Taunt <bt@btxx.org>2024-07-02 14:28:49 -0400
commitdc6db80fa72286704849ef61ee0e5ccb5841cb09 (patch)
tree9235d796229d49211c27a07b9d18585d503baa94 /_posts/2019-06-04-user-select.md
parent088c87bcb58be576308da503d4f11a68843c5013 (diff)
Conversion to barf for testing purposes
Diffstat (limited to '_posts/2019-06-04-user-select.md')
-rw-r--r--_posts/2019-06-04-user-select.md51
1 files changed, 0 insertions, 51 deletions
diff --git a/_posts/2019-06-04-user-select.md b/_posts/2019-06-04-user-select.md
deleted file mode 100644
index 8b332ab..0000000
--- a/_posts/2019-06-04-user-select.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: "Using User-Select"
-date: 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!)