Lo del doble subrayado | trucos CSS

Solía tener este jefe que amado, amado, amado, amado Esto fue mucho antes de que usáramos editores WYSIWYG y tuve que codificar manualmente esta basura.

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

(Ni siquiera entremos en los colores que usó para MORO énfasis.)

Escribir todo ese marcado nunca se sintió tan bien. El esfuerzo que tomó, por supuesto, lo que sea, pero ¿es una buena idea agregar contenido sobrecargado con el doble o más? - acentos?

Diferentes etiquetas transmiten un énfasis diferente

Para principiantes,  y  Las etiquetas están diseñadas para diferentes propósitos. Los trajimos de vuelta a HTML5 donde:

Entonces,  da más peso al contenido en el sentido de que implica que el contenido es importante o urgente. Considera una advertencia:

Atención: El siguiente contenido ha sido marcado como excelente.

Puede ser tentador acercarse  para hacer lo mismo. Después de todo, el texto en cursiva puede llamar la atención. Pero en realidad es una sugerencia para usar más énfasis al leer el contenido. Por ejemplo, aquí hay dos versiones de la misma oración con énfasis en diferentes lugares:

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

Ambos ejemplos enfatizan el estrés, pero en palabras diferentes. Y sonarían diferentes si los lees en voz alta.  una gran manera de establecer el tono en su escritura. Cambia el significado de la oración de una manera que  No.

Énfasis visual versus énfasis semántico

Estas son dos cosas a tener en cuenta al enfatizar el contenido. Por ejemplo, hay muchos casos en los que puede necesitar poner en cursiva el contenido sin afectar el significado de la oración. Pero se pueden manejar con otras etiquetas que se muestran en cursiva:

: ¡Este es el clásico! Antes de HTML5, el énfasis en cursiva se usaba en todas partes. Ahora solo se usa para inclinar visualmente el contenido sin cambiar el significado semántico.
<cite>: Citar la fuente de un hecho o figura ("Fuente: trucos CSS")
<address>: se usa para etiquetar información de contacto, no solo direcciones físicas, sino también cosas como direcciones de correo electrónico y números de teléfono. (

[email protected]

)

a el le pasara lo mismo En lugar de usarlo para darle estilo al texto que desea que parezca más pesado, es una mejor idea usar el clásico  etiqueta en negrita para evitar dar un significado adicional al contenido que no lo necesita. Y recuerda que algunos elementos, como los encabezados, ya están en negrita, gracias a los estilos predeterminados del navegador. No es necesario agregar un acento aún más fuerte.

Use cursiva en el contenido subrayado (y viceversa)

Hay casos legítimos en los que puede necesitar poner en cursiva parte de una línea que ya está resaltada. O tal vez agregar énfasis a un fragmento de texto que ya está en cursiva.

Una cita puede ser un buen ejemplo. He visto muchas veces que están en cursiva para un estilo, aunque los estilos de navegador predeterminados no lo hacen:

blockquote {
  font-style: italic;
}

¿Qué pasa si necesitamos mencionar el título de una película en esta cita? Esto debe estar en cursiva. No se necesita énfasis, así que  Pero aún es raro que algo se incline cuando ya está representado así:

<blockquote>
  This movie’s opening weekend performance offers some insight in
  to its box office momentum as it fights to justify its enormous 
  budget. In its first weekend, <i>Avatar: The Way of Water</i> made 
  $134 million in North America alone and $435 million globally.
</blockquote>

En una situación en la que ponemos en cursiva algo en un contenido en cursiva como este, deberíamos eliminar las cursivas de elemento anidado...  entonces.

blockquote i {
  font-style: normal;
}

Las consultas de estilo de contenedor serán súper útiles para detectar todos estos casos si los conseguimos:

blockquote {
  container-name: quote;
  font-style: italic;
}

@container quote (font-style: italic) {
  em, i, cite, address {
    font-style: normal;
  }
}

Este pequeño fragmento evalúa la cita en bloque para ver si es font-style se establece en italicSi es así, entonces se asegurará de que , , <cite>y <address> los elementos se representan como texto normal, preservando el significado semántico, si lo hay.

Pero volvamos al acento en el acento

yo no anidaría  adentro  como esto:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

… o nido  adentro  en cambio:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

¡El renderizado está bien! Y no importa en qué orden estén... al menos en los navegadores modernos. Jennifer Kirnin menciona que algunos navegadores muestran solo la etiqueta más cercana al textopero no me encontré con esto en ninguna parte de mis pruebas limitadas. ¡Pero hay algo a lo que prestar atención!

La razón por la que no pondría una forma de estrés sobre otra es que simplemente no es necesario. No hay ninguna regla gramatical que requiera esto. Al igual que los signos de exclamación, una forma de énfasis es suficiente, y debe usar la que se ajuste a lo que está buscando, ya sea un énfasis visual, de peso o pronunciado.

Y aunque algunos lectores de pantalla pueden anunciar contenido resaltado, no leerán el marcado con mayor importancia o énfasis, por lo que, por lo que puedo decir, no hay beneficios de accesibilidad adicionales.

¡Pero realmente quiero todos los aspectos más destacados!

Si estás en la posición en la que tu jefe es como el mío y quiere TODO en acentome acercaría a la etiqueta HTML correcta para el tipo de acento, luego aplicaría el resto de los estilos con una combinación de etiquetas que no afectan la semántica con CSS para ayudar a explicar cualquier cosa que los estilos del navegador no puedan manejar.

<style>
  /* If `em` contains `b` or `u` tags */
  em:has(b, u) {
    color: #f8a100;
  }
</style>

<p>
  I used to have this boss who <em>loved</em>, <strong>loved</strong>, 
  <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> 
  to emphasize words.
</p>

Incluso podría hacerlo con  etiquetar también como medida de protección:

/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) {
  color: #f8a100;
}

Mientras jugamos a la defensiva, podemos identificar errores en los que las tensiones están incrustadas en las tensiones resaltándolas en rojo o algo similar:

/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) {
  background: hsl(0deg 50% 50% / .25);
  border: 1px dashed hsl(0deg 50% 50% / .25);
}

Entonces, probablemente usaría este fragmento de código de la última sección, que elimina el estilo de cursiva predeterminado de un elemento cuando está anidado dentro de otro elemento en cursiva.

¿Algo más?

mayyyyyy:

Deja una respuesta Cancelar la respuesta