Article components

.box {
  position: absolute;
  inset: 0.5rem;
}
Hello!
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
CSSisreallyawesomeandgetsbettereveryday!
The content isn't fitting into the box and you can't scroll to the beginning. This is again data loss.
.container {
  display: flex;
  flex-direction: column;
  align-items: safe center;
  width: 50%;
}
CSSisawesome!!!
Decrease the container width to force an overflow situation.
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}
CSSisawesome!!!
Decrease the container width to force an overflow situation.
a link target without tabindex
a link target with tabindex
Click the links above to see what document.activeElement becomes after interacting with a local link.
HTML
CSS
Preview
hsl(46 91% 66%)
oklch(87.5% 0.143 92)

Change the hue angle of these almost identical colors, and see that a hsl() color can drastically change its lightness, while the oklch() color stays almost the same.

And to prove the point, here's a color palette rotating hue angles of hsl() and oklch() colors...

hsl()
oklch()

... and here are two CSS color gradients spanning a 180 degree hue angle.

hsl()
oklch()
// Extend the `EventTarget` class to get all the goodies
export class MyEventEmitter extends EventTarget {
  #list;

  constructor(list = []) {
    super();
    this.#list = list;
  }

  getItems() {
    return this.#list;
  }

  addItem(item) {
    this.#list = [...this.#list, item];
    // Dispatch a new event to notify listeners
    this.dispatchEvent(new Event("update"));
  }
}

Relative colors can be used to create entire color palettes.

.wheel {
  --base: #dd55aa;
  --swatch1: hsl(from var(--base) h s 0%);
  --swatch2: hsl(from var(--base) h s 20%);
  --swatch3: hsl(from var(--base) h s 40%);
  --swatch4: hsl(from var(--base) h s 60%);
  --swatch5: hsl(from var(--base) h s 80%);
  --swatch6: hsl(from var(--base) h s 100%);
}
HTML
CSS
Preview
Edit me, please!
.preview {
  font-family: Shantell;
  font-variation-settings: "ital" 0.5,"INFM" 50,"BNCE" 20,"SPAC" 10;
}
Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggosuch treat, blep very hand that feed shibe doggo.
Bold hover styles leading to a heavy reflow.

This jump, obviously, isn't great. But variable fonts help out here. Play around with a relative font weight below.

p {
  font-family: Roboto;
  font-variation-settings: 'GRAD' 0;
}

Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggo such treat, blep very hand that feed shibe doggo.

Isn't it fancy that text can be displayed in bold without getting bigger?

Doggo ipsum tungg yapper he made many woofs I am bekom fat long doggosuch treat, blep very hand that feed shibe doggo.

Bold styles done with relative font weight.

And relative boldness works great with buttons, too!

.background-grid {
  background-image: linear-gradient(#1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px)), linear-gradient(90deg, #1c7cbb 1.5px, transparent 1.5px, transparent calc(100% - 1.5px), #1c7cbb calc(100% - 1.5px));
  background-size: 10% 10%;
  border: 1.5px solid #1c7cbb;
}
Playground
Choose a writing mode
Choose size properies
Choose a unit type
.👋 {
  writing-mode: horizontal-tb;
  width: 50vw;
  height: 20vh;
}
Preview
Inline Axis
Block Axis

Text is lined out horizontally and flows from top to bottom.

The container's horizontal size is 50% viewport width and its vertical size is 20% viewport height.

There's nothing fancy here. It's pretty much the default.
Playground
Loading...
Playground
Choose the CSS property to toggle
Preview
display: block
display: block
display: block
There are no surprises when using display.

Elements with display: none and all its descendants are hidden and don't take up any space.

Playground
1234
.red-square {
  clip-path: polygon(
    -20% 20%,
    20% -20%,
    120% 80%,
    80% 120%
  );
};

WIP

Playground
Choose your gutter
Preview

Doggo ipsum such treat big ol pupper what a nice floof sub woofer lotsa pats big ol shoober dat tungg tho, lotsa pats pupperino most angery pupper I have ever seen clouds thicc.

Full width

Line-clamp

Playground
Choose after how many lines an ellipsis should be shown
Preview

I'm an example paragraph! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob. Bork ur givin me a spook pupper pats long bois very hand that feed shibe, you are doing me the shock adorable doggo shibe you are doin me a concern.

Playground
Playground
A div with contentEditable
Playground
Playground

inert

Playground

The example demo below shows how to make elements inaccessible.
This functionality is easy to misuse, make sure to read about inert use cases before implementing it.

Preview

You can't select me!

image-grid

DiceBear Avatars
  • Generated avatar for https://avatars.dicebear.com/api/croodles/stefan.svgavatars.dicebear.com/api/croodles/stefan.svg
  • Generated avatar for https://avatars.dicebear.com/api/bottts/stefan.svgavatars.dicebear.com/api/bottts/stefan.svg
  • Generated avatar for https://avatars.dicebear.com/api/open-peeps/stefan.svgavatars.dicebear.com/api/open-peeps/stefan.svg

Dialog intro

HTML
CSS
Preview

Dialog focus trap

Playground

dialog.show() opens an absolute position non-modal dialog.

Hello world from the dialog

Playground

dialog.showModal() opens a fixed positioned modal dialog, it's closeable by pressing ESC and all other elements become inaccessible.

Hello world from the dialog

Playground

dialog.showModal() opens a fixed positioned modal dialog, it's closeable by pressing ESC and all other elements become inaccessible.

Hello world from the dialog

Accent color explainer

Playground
Choose an accentColor
Choose a colorScheme
Preview

Text align last

Playground
Choose a text-align-last option
Choose a direction option
Preview

I'm a paragraph with text-align: justify;! 👋 Doggo ipsum shoob long water shoob h*ck smol fat boi, vvv wow very biscit. shibe heckin good boys and girls shoob.

Code golf

HTML
Preview

Background transition

HTML
CSS
Preview

hwb picker

Playground
.preview {
  background: hwb(222deg 25% 10%);
}
Keep playing...

playground

HTML
CSS
Preview