7 CSS Properties you didn't know about !

These seven properties solve problems most developers still solve with hacks or JavaScript. When I first wrote this list in 2023 several of them needed WebKit prefixes; today the standard versions are Baseline, so the examples below use those and mention the old form only where you still need it.

1. ::placeholder

input::placeholder {
  color: #9aa2b1;
  font-style: italic;
  opacity: 1; /* Firefox lowers it by default */
}

Styles the placeholder text of inputs and textareas. The prefixed ::-webkit-input-placeholder is no longer needed. Widely available. Keep enough contrast: placeholders are read by people too.

2. caret-color

input, textarea { caret-color: #1d4ed8; }
.ghost-input { caret-color: transparent; }

Colours the text cursor independently of the text. The transparent trick hides it for inputs that render their own cursor, such as code editors. Widely available.

3. :not()

/* every list item except the last gets a divider */
li:not(:last-child) { border-bottom: 1px solid var(--line); }

/* any button that is not primary and not disabled */
button:not(.primary, :disabled) { background: transparent; }

Matches everything that does not match the argument. It accepts a selector list, so the two conditions above are one rule instead of two overrides. Widely available.

4. outline, and why you keep it

/* do not do this */
button:focus { outline: none; }

/* do this: a ring only for keyboard focus, shaped to your design */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

The old advice was "remove the ugly outline". The outline is how keyboard users see where they are; removing it makes the site unusable for them. :focus-visible shows the ring for keyboard navigation and hides it after a mouse click, and outline-offset lets it sit outside the element so it never clashes with borders. Widely available.

5. scrollbar-color and scrollbar-width

.panel {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent; /* thumb, track */
}

/* fallback for older Chrome and Safari */
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; }

The standard way to tint and slim a scrollbar, Baseline newly available since December 2025. scrollbar-width: none hides it while keeping the element scrollable, which is the right way to make a horizontal carousel without a visible bar.

6. text-overflow: ellipsis

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* several lines */
.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

The single-line form needs all three declarations; forget overflow: hidden and nothing happens. For a multi-line excerpt the line-clamp form is still the portable one, prefix included.

7. appearance: none

/* remove the spin buttons from number inputs */
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* reset a select or a checkbox before drawing your own */
select { appearance: none; }

Strips the platform look from a control so you can style it. The unprefixed appearance is widely available since 2024; the spin-button pseudo-elements remain WebKit-specific, which is why Firefox needs the textfield value on the input itself. Before you remove the spin buttons, consider inputmode="numeric" on a text input instead; it avoids the problem entirely.

None of these is new, but every one of them is underused. The pattern across the list is the same: the platform already has the property, and the prefix or the script you learned for it is now the fallback, not the solution.