Recreando el efecto de texto cruzado de MDN | trucos CSS

No es ningún secreto que MDN lanzó un nuevo diseño de vuelta en marzo. ¡Es maravilloso! Y tiene algunas lindas gemas CSS-y que son divertidas de ver. Una de esas gemas es cómo los componentes del mapa manejan el texto abreviado.

Bastante genial, ¿verdad? Quiero desglosarlo un poco, pero algunas cosas realmente me atraen a este enfoque:

• Este es un ejemplo de interrupción intencional de contenido. En otros lugares lo llamamos pérdida de datos CSS. Y aunque la pérdida de datos suele ser algo malo, me gusta cómo se usa aquí, ya que los fragmentos están destinados a ser una burla del contenido completo.
• Esto es diferente de abreviar texto con text-overflow: ellipsisun tema que surgió hace relativamente poco cuando Eric Eggert compartió sus preocupaciones al respecto. El principal argumento en contra es que no hay forma de recuperar el texto que está truncado: las tecnologías de asistencia lo anunciarán, pero los usuarios videntes no tienen forma de restaurar. El enfoque MDN proporciona un poco más de control en este departamento, ya que la reducción es solo visual.

Entonces, ¿cómo lo hizo MDN? Nada demasiado elegante aquí en lo que respecta a HTML, solo un contenedor de párrafo.

<div class="card">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

Podemos agregar algunos estilos básicos para ajustar las cosas.

Una vez más, nada demasiado lujoso. Nuestro objetivo es truncar el contenido después de, por ejemplo, la tercera línea. podemos establecer max-height en el párrafo y ocultar el desbordamiento para él:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
}

wow wow que pasa con eso calc() Note que puse un --base variable al frente que se puede usar como un multiplicador común. lo uso para calcular font-size, line-height, padding para el mapa, y ahora max-height del párrafo. Me resulta más fácil trabajar con valores constantes, especialmente cuando el tamaño que necesito realmente se basa en una escala como esta. Noté que MDN usa uno similar --base-line-height variable, probablemente con el mismo propósito.

¿Hacer desaparecer esa tercera línea de texto? es un clasico linear-gradient() del párrafo :after un pseudoelemento que está anclado en la esquina inferior derecha del mapa. Entonces podemos configurarlo:

.card p:after {
  content: ""; /* Needed to render the pseudo */
  background-image: linear-gradient(to right, transparent, var(--background) 80%);
  position: absolute;
  inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}

Note que estoy llamando a un --background variable que se establece en el mismo valor de color de fondo que se utiliza en .card De esta manera, el texto parece desvanecerse en el fondo. Y descubrí que tenía que ajustar la segunda parada de color en el degradado porque el texto no está completamente oculto cuando el degradado se mezcla al 100%. encontré 80% ser un lugar dulce para mis ojos.

Y si, :after necesita un height y width, height es donde esta --base las variables vuelven a entrar en juego porque queremos que esto se escale al párrafo line-height para cubrir el texto con la altura de :after.

.card p:after {
  /* same as before */
  height: calc(1rem * var(--base) + 1px);
  width: 100%; /* relative to the .card container */
}

Agregar un píxel adicional en altura pareció funcionar, pero MDN pudo arreglárselas sin él cuando eché un vistazo a DevTools. Por otro lado, no uso top (o inset-block-start) para compensar el gradiente en esa dirección también. 🤷‍♂️

Ahora que p:after está absolutamente posicionado, debemos declarar explícitamente el posicionamiento relativo en el párrafo para preservarlo :after en su caudal. De lo contrario, :after se extraerá por completo del flujo de documentos y desaparecerá del mapa. Esto se convierte en el CSS completo para .card párrafo:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
  position: relative; /* needed for :after */
}

Estamos listos, ¿verdad? ¡No! El maldito gradiente simplemente no parece estar en la posición correcta.

Admito que me metí en esto y encendí DevTools de MDN para ver qué demonios me estaba perdiendo. Oh sí, :after debe mostrarse como un elemento de bloque. Es claro como el agua cuando le agregas un borde rojo. 🤦‍♂️

.card p:after {
  content: "";
  background: linear-gradient(to right, transparent, var(--background) 80%);
  display: block;
  height: calc(1rem * var(--base) + 1px);
  inset-block-end: 0;
  position: absolute;
  width: 100%;
}

¡Todos juntos ahora!

Y si, parece parece que VoiceOver respeta el texto completo. Sin embargo, no he probado otros lectores de pantalla.

También noté que la implementación de MDN elimina pointer-events de p:after. Probablemente sea una buena táctica de seguridad para evitar un comportamiento extraño de selección de texto. Lo agregué y seleccionar texto se siente un poco más suave, al menos en Safari, Firefox y Chrome.