Rediseño de la estructura y apariencia básica de un sitio web (IV)

Previamente en esta serie:

• Definí y apliqué más propiedades personalizadas CSS para interlineados, dimensiones y variaciones de los colores que ya había definido previamente.
• Definí una “bajada” para el título y un párrafo más para el nombre del autor del artículo y su fecha de publicación (todo dentro de un hgroup).
• Asigné estilos a los primeros dos párrafos del artículo para que el primero hiciera las veces de una introducción (le definí un recuadro con color de fondo, etc.) y que el segundo fuera, propiamente, el primer párrafo del artículo (le asigné una letra capitular).
• Finalmente, en el área de la cabecera, agregué el nombre del sitio, el lema y el icono hamburguesa (que representa al menú cerrado), todo dispuesto dentro de una grilla CSS.
  

Comencé esta cuarta parte de la serie definiendo los estilos para elementos del artículo que, aunque no se utilicen continuamente, es necesario tenerlos predefinidos.

Empecé con las listas.

Al selector article p con la declaración de margin-bottom: var(--distancia); le agregué los selectores de las listas ordenadas, desordenadas y de definición. Y también el de tablas, blockquote y la clase .notas para ir adelantando trabajo. Pero, a continuación, sobreescribí ese valor para los casos de listas ordenadas y desordenadas hijas de un elemento con la clase .notas.

A los términos (dt) de las listas de definición (dl) les asigné tipo de letra negrita.
Además establecí en 1.25rem los paddings izquierdos de las listas ordenas y desordenadas y en 0.6rem el de los elementos que componen a los tres tipos de lista, como se ve en el siguiente código del archivo estilos.css, resaltado con rojo:

:root { ... }

* { ... }

body { ... }

header { ... }

.logo-principal { ... }

header hgroup h1 { ... }

header hgroup h1+p { ... }

header hgroup { ... }

header nav { ... }

article { ... }

h1, h2, h3 { ... }

h1 { ... }

h2 { ... }

h3 { ... }

article hgroup h1+p { ... }

article hgroup p:nth-child(3), article hgroup p:nth-child(3) a, article hgroup p:nth-child(3) time { ... }

article hgroup p:nth-child(3) a { ... }

article hgroup p:nth-child(3) { ... }

article .intro { ... }

article .intro::first-line { ... }

figcaption, table caption {
  font-family: var(--tipografia-con-serifa), serif;
  font-size: var(--figcaption-size);
  font-style: italic;
  margin-top: calc(var(--distancia) * 0.5);
  margin-bottom: var(--distancia);
  margin-left: var(--distancia);
}

article p.primer-parrafo::first-letter { ... }

article p, ol, ul, dl, table, blockquote, .notas {
 margin-bottom: var(--distancia);
}

.notas > ol, .notas > ul {
margin-bottom: 0;    
}

dl dt {
  font-weight: bold;
}

ol, ul {
  padding-left: 1.25rem;
}

ol li, ul li, dl dd {
  padding-left: 0.6rem;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid var(--color-principal);
}

th, td {
  padding: 1rem;
}

thead th, tfoot th, tfoot td {
  background: var(--color-principal);
  color: var(--color-de-fondo);
  border: 1px solid var(--color-secundario);
}

thead th, tfoot th {
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: var(--color-secundario);
}

tbody tr:nth-child(even) {
  background-color: var(--color-secundario-claro);
}

table caption {
  caption-side: bottom;
  text-align: left;
  border-bottom: 1px solid var(--color-principal);
}

footer a, footer a:visited { ... }

footer { ... }

Luego (y como se muestra coloreado en azul en el código precedente) seguí con las tablas:

Al selector figcaption con el que definí (en la parte anterior) el formateo de las leyendas de las imágenes, le agregué el selector table caption.

Además, definí:

• que la tabla se centrara en la horizontal,
• el borde de la tabla, 
• el color de fondo y de los textos de la cabecera (y del pie),
• un color de fondo para las filas pares y otro para las impares,
• una regla al selector table caption para que sobrescriba la alineación y dos reglas más para ubicar la leyenda de la tabla del lado de abajo de la tabla y agregarle una línea por debajo a la leyenda.

En tercer lugar vi de crear los estilos para la representación visual de teclas y combinaciones de teclas (múy útiles en los artículos de tutoriales).

Haciendo la búsqueda de información para este rediseño es que me enteré de la existencia de las etiquetas kbd que se pueden utilizar individualmente o anidadas en otras etiquetas kbd o samp.

Para probarlo, en el archivo HTML agregué los siguientes párrafos, a continuación del Subtítulo nivel 3:

[ ... ]

<p>Un consejo infaltable cuando de editar achivos digitales se trate: <strong>¡guarde seguido!</strong></p>

<p>Para ello puede ir a <kbd
    ><kbd><samp>Archivo</samp></kbd>&gt;<kbd><samp>Guardar</samp></kbd></kbd> o pulsar las teclas <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
<p>Si cierra el archivo sin haberlo guardado se le presentará una advertencia con un texto similar a este:</p>

<blockquote>
   <samp><kbd>Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó.</kbd></samp>
</blockquote>

<p>Y deberá pulsar sobre uno de los tres botones al pie con la advertencia:</p>
<ul>
   <li><kbd><samp>Cerrar sin guardar</samp></kbd></li>
   <li><kbd><samp>Cancelar</samp></kbd></li>
    <li><kbd><samp>Guardar</samp></kbd></li>
</ul>

[ ... ]

Y, en la hoja de estilos, introduje estas reglas:

[ ... ]

table caption { ... }

kbd, kbd > samp {
  font-family: monospace;
  font-size: var(--figcaption-size);
}

kbd > kbd:not(:has(>samp)) {
  border-radius: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--color-texto-base);
  margin: 0.2rem;
}

kbd > samp {
  border-radius: 0.3rem;
  padding: 0.2rem 0.5rem;
  color: var(--color-de-fondo);
  background-color: var(--color-principal-claro);
}

kbd > :is(kbd) :is(samp) {
  color: var(--color-texto-base);
  font-style: italic;
  padding: 0;
  background: none;
  margin: 0.4rem;
}

blockquote:has(>samp) {
  background: var(--color-principal-oscuro);
  color: var(--color-de-fondo);
  padding: 0.5rem;
  font-weight: bold;
}

blockquote {
  margin-left: var(--distancia);
  width: 90%;
}

footer a, footer a:visited { ... }

[ ... ]

Al momento de escribir esto y, según Can I use... la pseudoclase :has() tiene un uso global de casi 83%. Pero, de forma predefinida aún no es reconocida por Firefox. Por lo tanto, esa parte de la página, se veía diferente en, por ejemplo, Chromium (a la izquierda) y en Firefox (a la derecha):

Igualmente, en la configuración de Firefox se puede activar una opción para que sí la reconozca, pero funciona parcialmente y el resultado no es igual al de los demás navegadores. Espero que próximas versiones de Firefox sí reconozcan esa pseudoclase, sino buscaré alguna forma alernativa de lograr el mismo diseño para Firefox. 

Luego, estilicé las notas al pie.

Normalmente, las notas al pie consistirían en una lista ordenada dentro de un recuadro al final del artículo. Así que copié varias de las reglas de estilo que tendía definidas para el párrafo de introducción del artículo y las agregué en el archivo estilos.css como se ve a continuación:

[ ... ]

blockquote { ... }

article .notas {
   padding: var(--distancia);
   background-color: var(--color-secundario-claro);
}

article .notas ol li {
   font-family: var(--tipografia-con-serifa), serif;
   font-size: var(--figcaption-size);
   font-style: italic;
}

sup {
  font-size: 65%; 
  font-weight: bold;  
}

footer a, footer a:visited { ... }

[ ... ]

Para terminar esta parte, me enfoqué en estilizar las citas. Y por citas me refiero a las de párrafo (etiqueta blockquote), a las inline (la etiqueta q) y a la que referencia al autor o fuente de tales citas (cite).

En la hoja de estilos ya tenía algunas reglas que afectaban al selector blockquote y que le definían un ancho (de 90%) y un margen a la izquierda y abajo.

En la declaración de estilo agregué la regla resaltada en azul en el próximo código para que el texto dentro de las etiquetas q, cite y blockquote se mostraran en itálica. Además, para el selector blockquote agregué las definiciones de estilos que se ven destacadas en rojo:

[ ... ]

blockquote {
  margin-left: var(--distancia);
  width: 90%;
  font-family: var(--tipografia-con-serifa), serif;
  font-size: var(--h3-size);
  background: linear-gradient(var(--color-secundario-claro),var(--color-de-fondo));
  border-radius: var(--distancia);
  padding: 1em 2em 1em 3em;
  text-align: right;
  position: relative;
}

blockquote cite {
  font-family: var(--tipografia-sin-serifa), sans-serif;
  display: block;
  font-size: var(--figcaption-size);
  font-style: normal;
}

blockquote::before {
  content:'“';
  font-size: 8em;
  color: var(--color-de-fondo);
  font-weight: bold;
  font-style: normal;
  position: absolute;
  top: calc(-0.35 * var(--distancia));
  left: 0;
}

q, cite, blockquote {
  font-style:italic;
}

q::before, q::after {
  content: '';
}

article .notas { ... }

[ ... ]

La etiqueta q, de forma predefinida, le agrega al texto que contiene unas comillas angulares de apertura y de cierre. Para evitar comillas duplicadas, decidí quitárselas al selector q (como se ve en el código precedente coloreado en verde), ya que, normalmente, cuando incluyo el texto de una cita ya lo hago con sus correspondientes comillas.

Para visualizar el efecto de los estilos agregados hasta ahora sobre las tablas, las citas y las notas al pie hice lo siguiente en el código HTML:

• dividí en dos el párrafo bajo el “Subtítulo nivel 2” y entre los nuevos dos párrafos agregué el código resaltado con rojo en el próximo código.
• agregué el código marcado en azul para crear unos superíndices con vínculos a notas al pie. 
• antes de la etiqueta de cierre del artículo coloqué un recuadro con las notas al pie (el código marcado con verde).
• agregué, antes del “Subtítulo nivel 3”, el código de una tabla (coloreado en anaranjado)
  

[ ... ]

<h2>Subtítulo nivel 2</h2>
<p>Sit amet consectetur adipiscing elit ut aliquam purus sit<a id="nota1" href="#nota1pie"><sup>1</sup></a>. Libero enim sed faucibus turpis in eu mi. Est ullamcorper eget nulla facilisi etiam dignissim. Velit scelerisque in dictum non consectetur a erat nam at. Diam sit amet nisl suscipit adipiscing bibendum est.</p>
<blockquote>
  “Mauris vitae ultricies leo integer. Vitae nunc sed velit dignissim sodales”.
  <cite>Nisi Porta</cite>
</blockquote>
<p>Tempor nec feugiat nisl pretium fusce id velit ut tortor. Ipsum dolor sit amet consectetur. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Mattis ullamcorper<a id="nota2" href="#nota2pie"><sup>2</sup></a> velit sed ullamcorper morbi tincidunt ornare. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod.</p>
<table>
  <caption>Población de las ciudades capitales de los Estados miembros del Mercosur.</caption>
  <colgroup span="3"></colgroup>
  <thead>
    <tr><th>País</th><th>Capital</th><th>Población</th></tr>
  </thead>
  <tbody>
    <tr><td>Argentina</td><td>Buenos Aires</td><td>3:075.646</td></tr>
    <tr><td>Brasil</td><td>Brasilia</td><td>3:015.268</td></tr>
    <tr><td>Paraguay</td><td>Asunción</td><td>520.917</td></tr>
    <tr><td>Uruguay</td><td>Montevideo</td><td>1:319.108</td></tr>
  </tbody>
</table>
<h3>Subtítulo nivel 3</h3>
<p>Un consejo infaltable cuando de editar achivos digitales se trate: <strong>¡guarde seguido!</strong></p>
<p>Para ello puede ir a <kbd><kbd><samp>Archivo</samp></kbd>&gt;<kbd><samp>Guardar</samp></kbd></kbd> o pulsar las teclas <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
<p>Si cierra el archivo sin haberlo guardado se le presentará una advertencia con un texto similar a este:</p>
<blockquote>
  <samp><kbd>Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó.</kbd></samp>
</blockquote>
<p>Y deberá pulsar sobre uno de los tres botones al pie con la advertencia:</p>
<ul>
  <li><kbd><samp>Cerrar sin guardar</samp></kbd></li>
  <li><kbd><samp>Cancelar</samp></kbd></li>
  <li><kbd><samp>Guardar</samp></kbd></li>
</ul>
<p>A scelerisque purus semper eget duis at tellus at. Facilisi morbi tempus iaculis urna id volutpat. Faucibus in ornare quam viverra orci sagittis. Tempor commodo ullamcorper a lacus vestibulum sed. Sit amet facilisis magna etiam tempor orci eu lobortis. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Augue eget arcu dictum varius. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.</p>
<div class="notas">
  <h3>Notas</h3>
  <ol>
    <li id="nota1pie"><a href="#nota1" aria-label="Volver al contenido al que refiere la nota 1.">&uarr;</a> Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod.</li>
    <li id="nota2pie"><a href="#nota2" aria-label="Volver al contenido al que refiere la nota 2.">&uarr;</a> Faucibus in ornare quam viverra orci sagittis.</li>
 </ol>
</div>
</article>

[ ... ]

Y el resultado fue el siguiente:

Como se ve en la captura de pantalla sobre estas líneas, los agregados en la hoja de estilo también afectan al blockquote que tiene como hijo una etiqueta samp (la que definí para presentar mensajes del sistema y que en este caso muestra el siguiente texto: Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó).

Entonces, para que volviera a tener la misma apariencia que le había definido anteriormente, moví todo el bloque de reglas de estilo del selector blockquote:has(>samp) y lo coloqué luego del último que afectaba a los blockquote (q, cite, blockquote {... }) y, además, le agregué las reglas que se muestran en rojo a continuación:

[ ... ]

q, cite, blockquote { ... }

blockquote:has(>samp) {
  background: var(--color-principal-oscuro);
  color: var(--color-de-fondo);
  padding: 0.5rem;
  padding-left: 1em;
  font-weight: bold;
  border-radius: 0;
  text-align: left;
  font-style: normal;
 }

blockquote:has(>samp)::before {
  content:'';
}

q::before, q::after { ... }

[ ... ]


Vínculos

Luego, para los vínculos dentro del artículo decidí que no quería que se mostraran con el subrayado predefinido, pero sí con un border-bottom y les asigné un color de fondo según el estado del vínculo:

[ ... ]

q::before, q::after { ... }

a {

  text-decoration: none;
}

article a:link {
  color: var(--color-principal);
  border-bottom: 1px solid var(--color-principal);
}

article a:visited {
  color: var(--color-principal-claro);
  border-bottom: var(--color-principal-claro);
}

article a:hover {
  color: var(--color-de-fondo);
  background-color: var(--color-secundario);
}

article a:active {
  color: var(--color-principal-oscuro);
  border-bottom: 1px solid var(--color-secundario-oscuro);
  background-color: var(--color-secundario-claro);
  font-style: italic;
}

article .notas { ... }

[ ... ]


El orden en el que se escriben los estados del vínculo sí importa para que funcionen como se desea. El orden debe ser este:

:link → :visited → :hover → :active. 

(Más informaciónen https://developer.mozilla.org/es/docs/Web/CSS/:link)

---

Bueno, ya se hizo bastante larga esta entrada, así que lo que me había planteado de revisar y corregir el código html (con respecto al que sugiere html5boilerplate) y de comentar y separar en archivos más pequeños la hoja de estilo (que ya va superando las 300 líneas), quedará para la próxima entrega.