10th Jul 2018

Cool CSS tricks

By Huseyin Kaya

We collected some css snippets that can be usefull for different situations.

Here a curated collection of css snippets that you can use for determinate situations or just for fun.

Image rendering

img.QRcode {
  image-rendering: pixelated;
}

This property is useful to render QR codes and image thumbnails to increase their quality.

Run style on Safari 11+

@supports (padding: env(safe-area-inset)) {
  /* Your code for Safari 11+ */
}

The env() function and the environment variables is implemented by Safary 11+ to support Apple iPhone X screens. You can read more info here

Check empty nodes

my-component:empty {
  display: none;
}

Hide your element when have no content inside. Returns and white spaces are considered as content.

Shape your text

p {
  shape-outside: polygon(0 0, 0 200px, 300px 600px);
}

Change the way how content will wrap around your floated elements.

Plain SVG as background

my-component {
  background-image: url('data:image/svg+xml;utf8,<svg>...</svg>');
}

Use <svg> as css background without convert it to base64.

Disable all user interactions

[data-untouchable] {
  pointer-events: none;
}

Disable all user interactions, even js events, with just one property.

Clean and self-contained component

my-component {
  all: initial;
  contain: content;
}

Create a style-cleaned and self-contained component with two properties. With contain: content will be created a new stacking-context and position fixed coordinates will reference to this property.

Overflow snapping

my-component {
  scroll-snap-type: mandatory;
  scroll-snap-destination: 50% 50%;
}

Control scroll snapping for elements with overflow.

System Font Stack

my-component {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, Ubuntu, sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Use the system font to provide a consistent typography experience.

Check if input have a value

.Note {
  opacity: 0;
  transition: opacity 200ms ease-out;
}

input:not(:placeholder-shown) + .Note {
  opacity: 1;
}

This pseudo class allows you to check if the input have a value. Example HTML:

<main>
  <input ne-textfield type="text" placeholder="Type your email">
  <span class="Note">Email for notifications</span>
</main>

Repeat Gradients

.repeat-linear {
  background:
    repeating-linear-gradient(
      45deg,
      lime,
      lime 10px,
      pink 10px,
      pink 20px
    );
}

.repeat-radial {
  background:
    repeating-conic-gradient(
      circle at 0 0,
      tomato,
      limegreen 50px
    );
}

You can repeat gradients instead of mess with mixins.

Float based on document direction

img {
  float: inline-start; /* ...or inline-end */
}

Float an element based on the text direction (rtl or ltr).

Target default form element

input:default {
  opacity: 0.2;
}
<input type="radio" name="season" id="default" disabled checked>
<label for="default">Default</label>

<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer">
<label for="summer">Summer</label>

<input type="radio" name="season" id="fall">
<label for="fall">Fall</label>

<input type="radio" name="season" id="winter">
<label for="winter">Winter</label>

Target the default selected input in a gruop.

Import your css when you need it

@import url('portrait.css') screen and (orientation: portrait);

You can conditionally import your css like you can do inline with the <link>. Please consider that vanilla css imports are a bad thing in terms of performance because they start an potentially infinite calls chain.).

Improve touchable elements based on pointer precision

@media (any-pointer: fine) { /* I'm default */ }
@media (any-pointer: coarse) { /* I'm a bit larger. I have a less precise pointer method */ }

Improve your touchable elements if the main pointer input is precise (mouse) or less precise (touch).