From dc6db80fa72286704849ef61ee0e5ccb5841cb09 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:28:49 -0400 Subject: Conversion to barf for testing purposes --- _posts/2019-06-04-user-select.md | 51 ---------------------------------------- 1 file changed, 51 deletions(-) delete mode 100644 _posts/2019-06-04-user-select.md (limited to '_posts/2019-06-04-user-select.md') 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!) -- cgit v1.2.3-54-g00ecf