CSS snippets

Collections

• SmolCSS: Minimal snippets for modern CSS layouts and components
• Tree views in css - details open

Outlining The Page

It’s important to remember that anything you see on the screen is a box, even if it’s a circle or a 1px separator. Everything is a box.

*,
*:before,
*:after {
  outline: solid 0.5px #db6a7d;
  border: 0;
}

An outline with 0.5px width. I picked half a pixel so that it’s easier to look at the boxes. I also removed all borders as they cause confusion.

Image inside div has extra space below the image

img {
  display: block;
}

How to align the text of the last paragraph line

text-align-last

How to think about HTML responsive images

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="macos-dark.png" />
  <source media="print" srcset="macos-contrast.png" />
  <img src="macos-light.png" alt="…" />
</picture>

The Power of :has() in CSS

h1:has(+ h2) {
  color: blue;
}

Default setting

// fonts
* {
  &:lang(ko) {
    word-break: keep-all;
  }
  &:lang(en) {
    word-break: keep-all;
  }
  &:lang(ja) {
    word-break: normal;
    word-break: auto-phrase; // From Chrome 119. https://developer.chrome.com/blog/css-i18n-features?hl=en
  }
}
*,
code,
kbd,
samp,
pre {
  // 따로 지정하지 않고 *만 쓰면 나머지 tag는 tailwind 기본 reset style이 적용됨.
  font-family: "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

// #region text-wrap - https://codersblock.com/blog/nicer-text-wrapping-with-css-text-wrap/#in-closing
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}
div,
p {
  text-wrap: pretty;
}
// #endregion

// reset
@layer reset {
  @tailwind base;

  body {
    @apply text-16 text-grey-900;
  }
}

Get The Screen Width & Height Without JavaScript

@property --_w {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
@property --_h {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vh;
}
:root {
  --w: tan(atan2(var(--_w), 1px)); /* screen width */
  --h: tan(
    atan2(var(--_h), 1px)
  ); /* screen height*/ /* The result is an integer without unit */
}

A guide to image overlays in CSS

<div class="image-wrapper">
  <img src="" alt="Sample Image" width="800" height="600" />
  <div class="overlay-text">The Pros and Cons of Buying vs. Renting a Home</div>
</div>

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.image-wrapper {
  position: relative;
  /* Other styles */
}

adactio

For instance, I’m a huge fan of view transitions and I enable them by default on every new project, but I do it like this:

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

ul,
ol,
dl,
dt,
dd,
p,
figure,
blockquote {
  hanging-punctuation: first last;
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  text-wrap: balance;
}

---

Children

1. Checklist in pure CSS
2. HTML center
3. Simple tooltip using attr()
4. font