3 useful CSS properties to customize your web interactions
Tags: webdev, css
Published: 2022-06-10 21:15:32

---
title: 3 useful CSS properties to customize your web interactions
published: true
date: 2022-06-10 21:03:19 UTC
tags: #webdev #css
canonical_url: https://blog.shimin.io/3-things-you-didnt-know/
---

 ![3 useful CSS properties to customize your web interactions](https://blog.shimin.io/content/images/2022/06/niranjan-_-photographs-4cVfDseo2e0-unsplash.jpg)

A CSS complaint I often see online — one that I largely agree with — is there are too many properties to learn. After learning the basics, it feels like you are then asked to 'memorize the rest of the dictionary'.

Like building a vocabulary, it's easier to add to your CSS knowledge slowly over time than reading the entire spec over a weekend. Today, I want to share 3 of my favorite "new to me" CSS properties from the last year.

## user-select

There are few things more frustrating than site owners disabled text selection with `user-select: none;`. This is usually done with the intent of copy-prevention. Doing so not only violates web conventions but it doesn't even work since one can always access the HTML directly.

`user-select: none` is not what I want to focus on. I want to mention the lesser-known value: `user-select: all;`. The `all` value causes any selection inside the element to select all element text, even with a single click.

This means you can use HTML elements as semantic 'highlight sections' to group related content together. Some interesting use-cases:

- `<address>` it makes sense to wrap an entire name/address /telephone in a single copy section. So the user can copy an entire address in a rental listing into Google Maps to lookup commute distance.
- `<code>` you can wrap sections of code in its own `<div>` to make copy/pasting easier. 

{% codepen https://codepen.io/shimin-zhang/pen/GRQwmmw %}

Like all techniques, `user-select: all` involves some tradeoff, it can make common copy/highlights tasks easier but comes at a cost of breaking existing user expectations.

## pointer-events

Pointer event is yet another CSS property that affects interactions, you can use it to change how an element interacts with mouse events.

The most common use case for pointer events is adding `pointer-events:none` to an element so that it can no longer be clicked on — see [this example](https://davidwalsh.name/css-facts) from David Walsh. This way, you can use CSS selectors to determine whether some elements should be transparent to the hit-testing algorithm, a better alternative to adding checks inside the click event handler for its current target and manually calling `preventDefault()`.

Aside from using it to disable buttons and links,  `pointer-events:none` is helpful when you have some overlapping components and want to pass the click event through one layer to another one underneath. See this example where inline SVG icons overlap with a `<select>` element, yet clicking on the icons will pass the event through to the select.

{% codepen https://codepen.io/shimin-zhang/pen/vYdQJGy %}

## Resize

The last CSS property I want to point out is `resize`, the `resize` prop allows users to modify an HTML element's size — hence the name.

You are probably already familiar with the resizing behavior in the context of the `<textarea>` element. Resize behavior works well with textarea because we do not know in advance how much content a user will supply. You can disable this default behavior via `resize: none`.

But `resize` is not limited to just `<textarea>` elements. You can make all content without `overflow: visible` resizable. Either in the `horizontal`, `vertical` or `both` directions.

Here's a demo of a resizable reading window with a resizable range input that allows you to change the reading font size.

{% codepen https://codepen.io/shimin-zhang/pen/bGLQoeJ %}

Depending on the input range, a resizable range input could be a more intuitive approach than using the keyboard or clicking with the mouse for a pixel-perfect value.  

## Conclusion

While we generally consider HTML to be about a document's semantics, CSS for its look and feel, and JS for user interaction, this categorization is not absolute.

Just as the `disabled` HTML attributes can affect an element's interactivity, there are a number of  CSS properties that handle more than styling. Following the [Rule of Least Power](https://en.wikipedia.org/wiki/Rule_of_least_power), we should look for HTML and CSS solutions before reaching for a pure JS one.

If you are not familiar with the `resize`, `user-select`, and `pointer-events` properties — or it's been a while since you last looked them up — I encourage you to take a look at the examples and maybe look up the docs to refresh your memory.