Less known CSS Tips - 02

Unselectable Text

It’s interesting, some blogs don’t let you select text. I was wondering how did they do it. We do have CSS to avoid selecting the text, but once you know it, you could flip it and select - may be?

.unselectable {
  user-select: none;
}

Last line alignment

Imagine you are reading a nicely formatted paragraph. But the last line seems to be odd - it’s neither long to justify, short to left aligned. I wish I could make it centered. Here’s how you do it.

.summary {
  text-align: justify;
  text-align-last: center;
}

Reset all styles

Long ago, there was a reset styles script which was added to reset all the native styles that come along with different browsers. But you can do that for specific interested elements using unset on the styles.

.reset-styles {
  all: unset;
}

Snapshot and re-use elements

This one is my favorite. Imagine one person is editing, and other should see a readonly view of that! This use element method to pick an HTML element, and show a image kind of view. Pretty cool - isn’t it?

.custom-quote::before {
  content: element(quote);
}

Dynamic queries Dark Scheme

You can check if the user is preferring Dark theme, and accordingly adjust your CSS base colors to give better experience using media queries with prefers-color-scheme.

:root {
  --bg-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}

body {
  background-color: var(--bg-color);
}

Will share some more, as I keep learning! Have fun!