initial-letter es una propiedad de CSS que selecciona la primera letra del elemento donde se aplica y especifica el número de líneas que ocupa la letra.
Es posible que haya visto algo como esto en sitios de noticias, donde la primera letra de un párrafo inicial es más grande que el resto del contenido.
El truco de diseñar la primera letra de contenido solía tomar un pequeño truco en el que envolver la letra en a y aplicar una clase para darle estilo:
/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )Once upon a time in a faraway land…
Eso funciona, pero es más marcado HTML de lo que queremos y divide nuestro contenido. Además, es doloroso tener que aplicar esa clase manualmente cada vez que desee utilizarla.
Ahí donde initial-letterentra:
/* Style that first letter! */ .subhead ( initial-letter: 2; )Once upon a time in a faraway land…
¡Eso es más limpio! Otro enfoque es aplicarlo al ::first-letterpsuedo-selector en su lugar:
/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )¿Viste eso? ¡La initial-letterpropiedad calcula automáticamente tanto el tamaño de fuente como el número de líneas necesarias para crear nuestra letra mayúscula estilizada! ¿Quiere que ocupe exactamente 2, 3, 4 o más líneas? Dígale a la propiedad y hará el trabajo pesado.
Sintaxis y valores
initial-letter: normal | ( );initial-letter acepta los siguientes valores:
normal: No aplica un efecto de escala en la primera letra. Esto puede resultar útil para restablecer el valor en el que uno podría heredarse de la cascada.: Cuántas líneas debe ocupar la letra donde no se permiten valores negativos.: Cuántas líneas debe hundirse la letra donde no se permiten valores negativos. Esto es útil si necesita colocar la letra más abajo para adaptarse a problemas de espaciado difíciles, pero, si no se especifica, toma el valor de
Ejemplos
El estilo de la letra inicial se puede utilizar para lograr algunos métodos de diseño tipográfico sofisticados. Tenga en cuenta que los siguientes ejemplos solo son compatibles actualmente con Safari.
Las letras mayúsculas son probablemente el caso de uso más familiar:
Vea la letra inicial de Pen: Drop Cap de Geoff Graham (@geoffgraham) en CodePen.
Las tapas elevadas son otro ejemplo:
Vea la letra inicial de Pen: Raised Cap de Geoff Graham (@geoffgraham) en CodePen.
Block Caps se remonta a los viejos cuentos de hadas:
Vea la letra inicial de Pen: Block Cap de Geoff Graham (@geoffgraham) en CodePen.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| No | No | No | No | TP * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| No | No | No | 14,0-14,4 * |
Relacionado
::first-letter- Fragmento de letras mayúsculas
Más información
- Módulo de diseño en línea de CSS, nivel 3: las especificaciones oficiales
- Jen Simmons Labs: demostraciones y ejemplos de casos de uso
- Ticket de Firefox: ticket abierto para admitir la función
- Ticket de Internet Explorer: ticket abierto para admitir la función