9 Propiedades Y Selectores CSS Infravalorados Que Deberías Conocer En 2025

Aquí reunimos nueve funciones infravaloradas, tres selectores/pseudoclases y seis propiedades, con ejemplos reales, buenas prácticas y enlaces técnicos para profundizar.

Índice

• Antes de empezar: recordatorio rápido de selectores y especificidad
• 1) accent-color
• 2) caret-color
• 3) currentColor
• 4) ::marker
• 5) :placeholder-shown
• 6) :user-valid
• 7) all: unset
• 8) text-wrap: balance
• 9) inset
• Compatibilidad, progressive enhancement y fallbacks
• Preguntas frecuentes
• Siguiente paso

Antes de empezar: recordatorio rápido de selectores y especificidad

Un selector CSS indica qué nodos del DOM recibirán los estilos. Tipos más comunes:

• Básicos: etiqueta (h1), clase (.btn) e id (#menu).
• Combinadores: descendiente (ul li), hijo (ul > li), hermano adyacente (h2 + p) y hermano general (h2 ~ p).
• De atributo: input[type="email"].
• Pseudoclases: :hover, :focus, :nth-child(), :placeholder-shown, :user-valid.
• Pseudoelementos: ::before, ::after, ::marker.

Consejo de snippet: para consultas genéricas sobre “selectores CSS”, abrir con una definición breve y una lista de tipos —como la anterior— suele ganar fragmento destacado. A partir de aquí, el valor diferencial está en los nueve ítems prácticos.

1) accent-color

Permite colorear controles nativos (checkboxes, radios, progress, range) sin “re-skin” complejo.

/* Marca corporativa directa sobre inputs nativos */
input[type="checkbox"],
input[type="radio"],
progress,
input[type="range"] {
  accent-color: #0a7cff; /* azul corporativo */
}

• Cuándo usar: coherencia visual rápida, accesibilidad mantenida y menor coste de mantenimiento que recrear el control.
• Detalles: respeta estados deshabilitado/activo del sistema.
• MDN: accent-color

2) caret-color

Cambia el color del cursor parpadeante en cajas de texto, útil en temas oscuros o fondos personalizados.

/* Cursor legible sobre fondos oscuros */
input, textarea {
  caret-color: limegreen;
}

• Consejo: combinar con color y background para contraste claro.
• MDN: caret-color

3) currentColor

Valor mágico que reutiliza el color de texto (color) en otras propiedades sin repetir valores.

.btn {
  color: #1f2937;            /* texto */
  border: 2px solid currentColor; /* mismo color sin duplicar */
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
}

• Ventaja: consistencia temática y menor deuda técnica.
• MDN: currentColor

4) ::marker

Estiliza los bullets o números de elementos de lista (li) sin pseudo‑elementos extra ni imágenes.

/* Listas de características con identidad visual */
.features li::marker {
  color: #ff3b81;
  font-size: 1.15em;
  content: "✦ "; /* opcional en listas con 'list-style-type: none' */
}

• Truco: cambiar list-style-type y combinar con ::marker para numeraciones personalizadas.
• MDN: ::marker

5) :placeholder-shown

Se activa cuando el placeholder es visible (es decir, el campo está vacío). Ideal para micro‑interacciones y estados iniciales.

/* Formulario con estado inicial discreto */
input:placeholder-shown {
  opacity: 0.7;
  border-color: color-mix(in srgb, gray 40%, transparent);
}

/* Label flotante sin JS */
input:placeholder-shown + label {
  transform: translateY(8px);
  opacity: .6;
}

• Atajo mental: pensar en “campo vacío” más que en el placeholder en sí.
• MDN: :placeholder-shown

6) :user-valid

Aplica estilos solo cuando el usuario ha interactuado y el valor cumple la validación del navegador. Evita “falsos positivos” al cargar la página.

/* Validación accesible post-interacción */
input[required]:user-valid    { border-color: #22c55e; }
input[required]:user-invalid  { border-color: #ef4444; }

/* Mensajes solo tras interacción */
input[required]:user-invalid ~ .error {
  display: block;
}

• Recomendación: combinar con :user-invalid y :focus-visible para una UX clara.
• MDN: :user-valid

7) all: unset

Resetea de golpe todas las propiedades del elemento a su estado “no especificado” (heredables pasan a inherit, el resto a initial). Útil para crear componentes desde cero sin arrastrar estilos de UA o de herencia.

/* Botón-hipervínculo limpio, listo para un style system */
.button-reset {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

• Precaución: restaurar explícitamente estados de accesibilidad (por ejemplo, outline en foco).
• MDN: all

8) text-wrap: balance

Equilibra los saltos de línea en títulos y encabezados multilínea de forma automática, mejorando la legibilidad sin scripts.

/* Titulares con ritmo tipográfico estable */
h1, h2, h3 {
  text-wrap: balance;
}

• Escenario ideal: CMS con títulos variables, cards y hero headings.
• MDN: text-wrap

9) inset

Shorthand de top, right, bottom y left. Reduce ruido y deja clara la intención en layouts posicionados.

.modal__backdrop {
  position: fixed;
  inset: 0;         /* equivale a top:0; right:0; bottom:0; left:0; */
  background: color-mix(in srgb, black 60%, transparent);
}

• Ventajas: sintaxis compacta, menos errores de mantenimiento y fácil lectura.
• MDN: inset

Compatibilidad, progressive enhancement y fallbacks

La mayoría de estas funciones cuentan con soporte amplio en navegadores modernos. Para proyectos con audiencias heterogéneas, conviene aplicar progressive enhancement y prever retrocompatibilidad simple:

• accent-color: si no está disponible, el control nativo seguirá funcionando con el tema del sistema. No romperá la UI.
• caret-color: degradado seguro; el cursor usa el color por defecto.
• currentColor: ampliamente soportado; usarlo reduce repetición de valores.
• ::marker: si faltase, el marcador por defecto sigue visible. Evitar sustituirlo por imágenes decorativas sin texto alternativo.
• :placeholder-shown: si no aplica, el estilo inicial no variará; mantener contratos de contraste AA.
• :user-valid/:user-invalid: basarse en validación nativa HTML5 y ofrecer mensajes accesibles vinculados a los campos.
• all: unset: tras el reset, reponer outline para foco visible y roles ARIA cuando corresponda.
• text-wrap: balance: en ausencia de soporte, el título se mostrará con saltos “normales”.
• inset: si se necesita, duplicar con las cuatro propiedades tradicionales en hojas críticas.

Enlaces de referencia y lecturas recomendadas

• MDN Web Docs: CSS
• Can I use
• MDN: Pseudoclases CSS
• MDN: Pseudoelementos CSS

Siguiente paso

Aplicar estas nueve funciones no exige reescribir la base del proyecto. Un plan razonable es empezar por currentColor (consistencia), text-wrap: balance (legibilidad) y accent-color (coherencia UI). Para proyectos que requieren velocidad y una capa de marketing sólida, el equipo de Fonsi trabaja diseño, rendimiento y SEO técnico en conjunto. Más información en diseño de tiendas online con WordPress o en la página de contacto.

Conclusión

El ecosistema de selectores CSS y propiedades CSS sigue creciendo, y conocer funciones poco utilizadas marca la diferencia entre un código básico y uno profesional. Recursos como accent-color, caret-color, currentColor o ::marker simplifican tareas comunes y mejoran la accesibilidad. Pseudoclases como :placeholder-shown o :user-valid, junto a propiedades modernas como all: unset, text-wrap: balance e inset, ayudan a mantener proyectos más limpios y sostenibles. Adoptar estas prácticas no es solo una cuestión de estilo, también impacta en la experiencia de usuario y en la percepción de calidad de cualquier interfaz web.

Preguntas frecuentes

¿Pseudoclase y pseudoelemento son lo mismo?

No. La pseudoclase describe un estado (:hover, :user-valid), mientras que el pseudoelemento representa una parte del elemento (::marker, ::before).

¿Por qué usar currentColor en lugar de repetir valores?

Porque reduce la repetición, facilita tematizar y evita desajustes cromáticos al cambiar la paleta.

¿all: unset es un reset global recomendable?

Es una herramienta quirúrgica para componentes concretos. Usarlo de forma masiva puede ocultar estilos de accesibilidad importantes.

¿text-wrap: balance afecta al SEO?

No. Es una propiedad de presentación. Mejora la legibilidad y la experiencia de lectura, lo que suele correlacionar con mejores métricas de comportamiento.

¿Qué diferencia hay entre :user-valid y :valid?

:valid se aplica aunque el usuario no haya interactuado todavía. :user-valid solo entra en acción tras la interacción, evitando mensajes prematuros.

¿Cuál es la ventaja de accent-color frente a rehacer un checkbox con CSS?

accent-color mantiene accesibilidad, rendimiento y coherencia con el sistema operativo, mientras que rehacer controles nativos suele ser más costoso y frágil.

¿Qué navegadores soportan ::marker?

Todos los navegadores modernos principales (Chrome, Edge, Firefox, Safari). En versiones antiguas el marcador volverá al estilo por defecto.

¿Es recomendable depender de caret-color?

Sí, siempre que se combine con pruebas de contraste. En navegadores sin soporte, el cursor se verá con el color por defecto.

¿Cuándo conviene usar inset en vez de top/right/bottom/left?

En layouts donde se quiera claridad y menos repetición. Ahorrar líneas evita errores y facilita leer bloques de posicionamiento.

¿Qué errores comunes se cometen al usar :placeholder-shown?

Usar el placeholder como sustituto de una etiqueta real. El placeholder es un apoyo visual, no debe reemplazar a la etiqueta accesible <label>.