JUMP TO:

1. Worklet commands

2. Customizable form elements

---

1. Worklet commands

---

CSS Worklet commands let CSS run small, performant pieces of JavaScript (called worklets) on a separate thread, enabling advanced visual effects, animations, and layout calculations without blocking the main thread.

---

The problem they solve

Traditionally:

• JavaScript animations and computations run on the main thread
• Complex effects can lag or drop frames
• CSS itself is limited to declarative properties

CSS worklets bring off-main-thread processing for certain CSS features:

• Paint worklets → custom painting
• Layout worklets → custom layout logic
• Animation worklets → fine-grained animation control

---

Types of Worklets

1️⃣ Paint Worklets

• Draws custom visuals in CSS
• Replaces images, gradients, patterns, etc.
• Runs on a separate thread

Example:

// my-paint.js
registerPaint('stripes', class {
  static get inputProperties() { return ['--stripe-color']; }
  paint(ctx, geom, properties) {
    ctx.fillStyle = properties.get('--stripe-color').toString();
    ctx.fillRect(0, 0, geom.width, geom.height);
    // more painting logic...
  }
});

.box {
  --stripe-color: red;
  background-image: paint(stripes);
}

---

2️⃣ Layout Worklets

• Create custom layout logic
• Example: masonry grid, timeline layouts
• Runs off main thread, so resizing/DOM changes remain smooth

Example:

registerLayout('masonry', class {
  layout(children, edges, constraints) {
    // return positions for children
  }
});

.container {
  display: layout(masonry);
}

---

3️⃣ Animation Worklets

• Control CSS animations in JavaScript but on a compositor thread
• Enables smooth, complex animations
• Often combined with typed CSS properties

Example:

registerAnimator('spin', class {
  animate(currentTime, effect) {
    effect.localTime = currentTime * 0.001;
  }
});

.box {
  animation: spin 2s linear infinite;
  animation-timeline: scroll();
}

---

Benefits

• High performance (off main thread)
• Browser-optimized
• Enables effects not possible with plain CSS
• Safe for accessibility (focus / motion preferences respected)

---

2. Customizable form elements

---

Modern CSS provides new pseudo-classes, pseudo-elements, and properties that let you style native form controls more flexibly and consistently without removing their accessibility or replacing them entirely.

---

1️⃣ accent-color

• Sets the “theme color” for checkboxes, radio buttons, sliders, progress bars
• Preserves native behavior and accessibility
• Example:

input[type="checkbox"] {
  accent-color: seagreen;
}

---

2️⃣ ::marker, ::placeholder, ::file-selector-button, ::part()

• ::placeholder → style placeholder text
• ::file-selector-button → style the file input button
• ::part() → style shadow DOM parts (used in custom elements like <input type="date"> in some frameworks)
• ::marker → for list bullets (less form, more UI-adjacent)

Example:

input::placeholder {
  color: #aaa;
  font-style: italic;
}

input[type="file"]::file-selector-button {
  background: #0073aa;
  color: white;
  border-radius: 4px;
  padding: 0.25em 0.5em;
}

---

3️⃣ :checked, :indeterminate, :valid, :invalid, :placeholder-shown, :read-only, :read-write

• New or improved pseudo-classes for states
• Allows styling based on validation or user interaction
• Example:

input:invalid {
  border-color: red;
}

input:valid {
  border-color: green;
}

---

4️⃣ ::selection (minor)

• Lets you style the highlighted text inside inputs
• Example:

input::selection {
  background: #0073aa;
  color: white;
}

---

5️⃣ appearance: none + native-reset

• Removes default browser styles to allow full custom styling
• Often combined with accent-color to maintain native interactions
• Example:

select {
  appearance: none;
  padding: 0.5em;
  border-radius: 4px;
  border: 1px solid #ccc;
}

---

6️⃣ Typed properties and @property for forms

• Combine with @property and scroll/animation features to animate form states
• Example: animate a slider thumb color smoothly

---

Why these changes matter

• Previously, styling checkboxes, radios, sliders, file inputs → required JavaScript hacks or hidden inputs
• Modern CSS allows accessible, native controls with custom look
• Works well with dark mode, themes, and responsive design