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 */
}

Children