Capitulo 2. Trabajando con unidades relativas

2.1 EL PODER DE LOS VALORES RELATIVOS

CSS trae una vinculación tardía de estilos a la página web: el contenido y sus estilos no se juntan hasta que se completa la creación de ambos. Esto agrega un nivel de complejidad al proceso de diseño que no existe en otros tipos de diseño gráfico, pero también proporciona más poder: una hoja de estilo se puede aplicar a cientos, incluso miles, de páginas. Además, el usuario puede modificar directamente la representación final de la página, que, por ejemplo, puede cambiar el tamaño de fuente predeterminado o cambiar el tamaño de la ventana del navegador.

En el desarrollo temprano de aplicaciones informáticas (así como en la publicación tradicional), los desarrolladores (o editores) conocían las limitaciones exactas de su medio. Una ventana de programa en particular puede tener 400 px de ancho por 300 px de alto, o una página puede tener 4 pulgadas de ancho por 6½ pulgadas de alto. En consecuencia, cuando los desarrolladores se dispusieron a diseñar los botones y el texto de la aplicación, sabían exactamente qué tan grandes podían hacer esos elementos y exactamente cuánto espacio les dejaría trabajar para otros elementos en la pantalla. En la web, este no es el caso.

2.11 La lucha por un diseño perfecto en píxeles

En el entorno web, el usuario puede tener la ventana de su navegador configurada en cualquier número de tamaños, y el CSS debe aplicarse a ella. Además, los usuarios pueden cambiar el tamaño de la página después de que se abre y el CSS debe adaptarse a las nuevas restricciones. Esto significa que los estilos no se pueden aplicar cuando crea su página; el navegador debe calcularlos cuando la página se muestra en pantalla.

Esto agrega una capa de abstracción a CSS. No podemos diseñar un elemento de acuerdo con un contexto ideal; necesitamos especificar reglas que funcionarán en cualquier contexto en el que se pueda colocar ese elemento. Con la web actual, su página deberá procesarse en un formato de 4 pulgadas pantalla del teléfono, así como en una pantalla de 30 pulgadas.

Durante mucho tiempo, los diseñadores mitigaron esta complejidad centrándose en diseños de "píxeles perfectos". Crearían un contenedor bien definido, a menudo una columna centrada de unos 800px de ancho. Luego, dentro de estas limitaciones, se dedicarían a diseñar más o menos como lo hicieron sus predecesores con aplicaciones nativas o publicaciones impresas.

2.1.2. El fin de la web de píxeles perfectos

A medida que la tecnología mejoraba y los fabricantes introducían monitores de mayor resolución, el enfoque de píxeles perfectos lentamente comenzó a fallar. A principios de la década de 2000, se debatió mucho sobre si los desarrolladores podíamos diseñar de forma segura para pantallas de 1.024px de ancho en lugar de 800px de ancho. Entonces, tendríamos la misma conversación de nuevo por 1.280px. Tuvimos que tomar decisiones de juicio. ¿Era mejor hacer nuestro sitio demasiado ancho para computadoras más antiguas o demasiado estrecho para las nuevas?

Cuando surgieron los teléfonos inteligentes, los desarrolladores se vieron obligados a dejar de fingir que todos podían tener la misma experiencia en sus sitios. Tanto si lo amamos como si lo odiamos, tuvimos que abandonar columnas de un número conocido de píxeles y comenzar a pensar en el diseño receptivo. Ya no podíamos escondernos de la abstracción que viene con CSS. Tuvimos que abrazarlo.

Responsive: en CSS, esto se refiere a estilos que "responden" de manera diferente, según el tamaño de la ventana del navegador. Esto implica una consideración intencional para pantallas de dispositivos móviles, tabletas o computadoras de escritorio de cualquier tamaño. Examinaremos detenidamente el diseño receptivo en el capítulo 8, pero en este capítulo sentaré algunas bases importantes antes de llegar allí.

La abstracción adicional significa una complejidad adicional. Si le doy a un elemento un ancho de 800px, ¿cómo se verá eso en una ventana más pequeña? ¿Cómo se verá un menú horizontal si no cabe todo en una línea? A medida que escribe su CSS, debe ser capaz de pensar simultáneamente en aspectos específicos, así como en generalidades. Cuando tenga múltiples formas de resolver un problema en particular, deberá favorecer la solución que funcione de manera más general en múltiples y diferentes circunstancias.

Las unidades relativas son una de las herramientas que proporciona CSS para trabajar en este nivel de abstracción. En lugar de establecer un tamaño de fuente en 14px, puede configurarlo para escalar proporcionalmente al tamaño de la ventana. O puede establecer el tamaño de todo en la página en relación con el tamaño de fuente base y luego cambiar el tamaño de toda la página con una sola línea de código. Echemos un vistazo a lo que proporciona CSS para hacer posible este tipo de enfoque.

CSS admite varias unidades de longitud absoluta, la más común de las cuales, y la más básica, es el píxel (px). Las unidades absolutas menos comunes son mm (milímetro), cm (centímetro), pulgada (pulgada), pt (punto: término tipográfico para 1/72 de pulgada) y pc (pica: término tipográfico para 12 puntos) Cualquiera de estas unidades se puede traducir directamente a otra si desea calcular las matemáticas: 1 pulgada = 25,4 mm = 2,54 cm = 6 pc = 72 pt = 96 px. Por lo tanto, 16 px es lo mismo que 12 pt (16/96 × 72). Los diseñadores a menudo están más familiarizados con el uso de puntos, donde los desarrolladores están más acostumbrados a los píxeles, por lo que es posible que tenga que hacer alguna traducción entre los dos cuando se comunique con un diseñador.

Pixel es un nombre un poco engañoso: un píxel CSS no equivale estrictamente al píxel de un monitor. Este es especialmente el caso de las pantallas de alta resolución (“retina”). Aunque las medidas de CSS se pueden escalar un poco, según el navegador, el sistema operativo y el hardware, 96px generalmente se encuentra en el estadio de béisbol de 1 pulgada física en pantalla, aunque esto puede variar en ciertos dispositivos o con la configuración de resolución del usuario.

2.2 EMS Y REMS

Ems, la unidad de longitud relativa más común, es una medida utilizada en tipografía, que se refiere a un tamaño de fuente específico. En CSS, 1em significa el tamaño de fuente del elemento actual; su valor exacto varía según el elemento al que lo esté aplicando. La figura 2.1 muestra un div con 1em de relleno.

Fig 2.1. Elemento con relleno de 1 em (líneas discontinuas agregadas para ilustrar el relleno)

El código para producir esto se muestra en la siguiente lista. El conjunto de reglas especifica un tamaño de fuente de 16px, que se convierte en la definición local del elemento para 1em. Luego, el código usa ems para especificar el relleno del elemento. Agregue esto a una nueva hoja de estilo y coloque algo de texto en un <div class = "padded">; para verlo en su navegador.

          
.padded {
  font-size: 16px;
  padding: 1em;
}
          
          List 2.1. Aplicar ems al padding
        

Este padding tiene un valor especificado de 1em. Esto se multiplica por el tamaño de la fuente, lo que produce un relleno renderizado de 16px. Esto es importante: el navegador evalúa los valores declarados usando unidades relativas a un valor absoluto, llamado valor calculado.

En este ejemplo, editar el relleno a 2em produciría un valor calculado de 32px. Si otro selector apunta al mismo elemento y lo reemplaza con un tamaño de fuente diferente, cambiará el significado local de em, y el relleno calculado cambiará para reflejar eso.

El uso de ems puede ser conveniente al configurar propiedades como padding, height, width o border-radius porque se escalarán de manera uniforme con el elemento si hereda diferentes tamaños de fuente o si el usuario cambia la configuración de fuente.

La Figura 2.2 muestra dos cajas de diferentes tamaños. El tamaño de fuente, el relleno y el radio del borde en cada uno no es el mismo.

Fig 2.2. Elementos con un acolchado y un radio de borde de tamaño relativo

Puede definir los estilos para estos cuadros especificando el padding y el border-radius usando ems. Al dar a cada uno un radio de relleno y borde de 1 em, puede especificar un tamaño de fuente diferente para cada elemento, y las otras propiedades se escalarán junto con la fuente.

En su HTML, cree dos cuadros como se muestra a continuación. Agregue las clases box-small y box-large a cada una, respectivamente, como modificadores de tamaño.

          
<span class="box box-small">Small</span>
<span class="box box-large">Large</span>
          
          List 2.2. Aplicar ems a diferentes elementos (HTML)
        

Ahora, agregue los estilos que se muestran junto a su hoja de estilo. Esto define una caja usando ems. También define modificadores pequeños y grandes, cada uno de los cuales especifica un tamaño de fuente diferente.

          
.box {                        
    padding: 1em;
    border-radius: 1em;
    background-color: lightgray;
  }
  
  .box-small {                    1
    font-size: 12px;              
  }
  
  .box-large {                    1
    font-size: 18px;              
  }
          
          List 2.3. Aplicación de ems aplicados a diferentes elementos <CSS>
        

1. Diferentes tamaños de fuente, que definirán el tamaño em de los elementos.

Esta es una característica poderosa de ems. Puede definir el tamaño de un elemento y luego escalar todo hacia arriba o hacia abajo con una sola declaración que cambia el tamaño de fuente. Construirá otro ejemplo de esto en un momento, pero primero, hablemos de ems y tamaños de fuente.

2.2.1. Usando ems para definir el tamaño de fuente

Cuando se trata de la propiedad de font-size, ems se comporta de manera un poco diferente. Como dije, los ems se definen por el tamaño de fuente del elemento actual. Pero, si declaras el font-size: 1.2em, ¿qué significa eso? Un tamaño de fuente no puede ser igual a 1,2 veces él mismo. En cambio, los ems de tamaño de fuente se derivan del tamaño de fuente heredado.

Para ver un ejemplo básico, consulte la Fig 2.3. Esto muestra dos fragmentos de texto, cada uno con un tamaño de fuente diferente. Los definirá usando ems en el List 2.4.

Fig 2.3. Dos tamaños de fuente diferentes usando ems

Cambie su página para que coincida con la siguiente lista. La primera línea de texto está dentro de la etiqueta <body>;, por lo que se procesará con el tamaño de fuente del cuerpo. La segunda parte, el lema, hereda ese tamaño de fuente.

          
<body>
    We love coffee
    <p class="slogan">We love coffee</p>  1
</body>
          
        

1. El lema hereda su tamaño de fuente de <body>.

El CSS de la siguiente lista especifica el tamaño de fuente del cuerpo. He utilizado píxeles aquí para mayor claridad. A continuación, utilizará ems para ampliar el tamaño del eslogan.

          
  body {
    font-size: 16px;
  }
  
  .slogan {               1
    font-size: 1.2em;     1
  }                       1
          
          Lista 2.5. Aplicar ems al tamaño de fuente
        

1. Calcula hasta 1,2 veces el tamaño de fuente heredado del elemento

El tamaño de fuente especificado para el eslogan es de 1.2em. Para determinar el valor de píxel calculado, deberá consultar el tamaño de fuente heredado de 16 px: 16 por 1.2 es igual a 19.2, por lo que el tamaño de fuente calculado es 19.2px.

Si conoce el tamaño de fuente basado en píxeles que le gustaría, pero desea especificar la declaración en ems, aquí tiene una fórmula simple: divida el tamaño de píxel deseado por el tamaño de píxel principal (heredado). Por ejemplo, si desea una fuente de 10px y su elemento hereda una fuente de 12px, 10/12 = 0.8333 em. Si desea una fuente de 16px y la fuente principal es de 12px, 16/12 = 1.3333 em. Haremos este cálculo varias veces a lo largo de este capítulo.

Es útil saber que, para la mayoría de los navegadores, el tamaño de fuente predeterminado es 16px. Técnicamente, es el valor medium de la palabra clave que se calcula en 16px.

Ahora ha definido ems para el tamaño de fuente (basado en un tamaño de fuente heredado). Y ha definido ems para otras propiedades como padding y border-radius (según el tamaño de fuente del elemento actual). Lo que hace que ems sea complicado es cuando los usa tanto para el tamaño de fuente como para cualquier otra propiedad en el mismo elemento. Al hacer esto, el navegador debe calcular primero el tamaño de la fuente y luego usar ese valor para calcular los otros valores. Ambas propiedades pueden tener el mismo valor declarado, pero tendrán diferentes valores calculados.

En el ejemplo anterior, calculamos que el tamaño de fuente era de 19.2px <el tamaño de fuente heredado de 16 px multiplicado por 1,2 em>. La Figura 2.4 muestra el mismo elemento de lema, pero con un relleno adicional de 1,2em y un fondo gris para hacer más evidente el tamaño del padding. Este relleno es un poco más grande que el tamaño de la fuente, aunque ambos tienen el mismo valor declarado.

Fig 2.4. Elemento con fuente 1.2 em y relleno 1.2 em

Lo que está sucediendo aquí es que el párrafo hereda un tamaño de fuente de 16px del cuerpo, produciendo un tamaño de fuente calculado de 19,2px. Esto significa que 19,2 px es ahora el valor local para un em, y ese valor se usa para calcular el padding|. El CSS para esto se muestra a continuación. Actualice su hoja de estilo para ver esto en su página de prueba.

          
  body {
    font-size: 16px;
  }
  
  .slogan {
    font-size: 1.2em;             1
    padding: 1.2em;               2
    background-color: #ccc;
  }
          
          Lista 2.6. Aplicar ems al tamaño de fuente y al relleno
        

1. Evalúa a 19,2 px
2. Evalúa a 23,04 px

En este ejemplo, el padding tiene un valor especificado de 1,2em. Esto multiplicado por 19,2 px (el tamaño de fuente del elemento actual) produce un valor calculado de 23,04px. Aunque el font-size y el padding tienen el mismo valor especificado, sus valores calculados son diferentes.

Ems puede producir resultados inesperados cuando los usa para especificar los tamaños de fuente de varios elementos anidados. Para conocer el valor exacto de cada elemento, necesitará conocer su tamaño de fuente heredado, que, si se define en el elemento padre en ems, requiere que conozca el tamaño heredado del elemento padre, y así sucesivamente en el árbol.

Esto se hace evidente rápidamente cuando usa ems para el tamaño de fuente de las listas y luego anida las listas a varios niveles de profundidad. Casi todos los desarrolladores web en algún momento de su carrera cargan su página para encontrar algo parecido a la figura 2.5. ¡El texto se encoge! Este es exactamente el tipo de problema que deja a los desarrolladores temiendo el uso de ems.

La reducción del texto ocurre cuando anida listas de varios niveles de profundidad y aplica un tamaño de fuente basado en em a cada nivel. Los listados 2.7 y 2.8 proporcionan un ejemplo de esto al establecer el tamaño de fuente de las listas desordenadas en .8em. El selector apunta a cada <ul> en la página; así que cuando estas listas heredan su tamaño de fuente de otras listas, el ems compuesto.

          
  body {
    font-size: 16px;
  }
  
  ul {
    font-size: .8em;
  }
          
          List 2.7. Aplicar ems a una lista
        

          
<ul>
    <li>Top level
      <ul>                                   
        <li>Second level                     
          <ul>                              
            <li>Third level                   
              <ul>                            
                <li>Fourth level              
                  <ul>
                    <li>Fifth level</li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
          
          List 2.8. Listas anidadas
        

Cada lista tiene un tamaño de fuente 0,8 veces mayor que el de su principal. Esto significa que la primera lista tiene un tamaño de fuente de 12,8px, pero la siguiente hacia abajo es de 10,24 px (12,8 px × 0,8), y el tercer nivel es de 8,192px, y así sucesivamente. De manera similar, si especificaste un tamaño mayor a 1em, el texto aumentaría continuamente en su lugar. Lo que queremos es especificar la fuente en el nivel superior, luego mantener el mismo tamaño de fuente hasta abajo, como en la figura 2.6.

Una forma de lograr esto es con el código del listado 2.9. Esto establece el tamaño de fuente de la primera lista en .8em como antes (listado 2.7). El segundo selector de la lista se dirige a todas las listas desordenadas dentro de una lista desordenada, todas excepto el nivel superior. Las listas anidadas ahora tienen un tamaño de fuente igual al de sus padres, como se muestra en la figura 2.6.

          
  ul {
    font-size: .8em;
  }
  
  ul ul {                1
    font-size: 1em;      1
  }                      1
          
          List 2.9. Corregir el texto que se encoge
        

1. Las listas dentro de las listas deben tener el mismo tamaño de fuente que su padre.

Esto soluciona el problema, aunque no es ideal; está estableciendo un valor y luego lo reemplaza inmediatamente con otra regla. Sería mejor si pudiera evitar anular las reglas aumentando poco a poco la especificidad de los selectores.

A estas alturas, debería estar claro que ems puede escapar de ti si no tienes cuidado. Son agradables para el relleno, los márgenes y el tamaño de los elementos, pero cuando se trata del tamaño de fuente, pueden complicarse. Afortunadamente, hay una opción mejor: rems.

2.2.2. Usar rems para el tamaño de fuente

Cuando el navegador analiza un documento HTML, crea una representación en la memoria de todos los elementos de la página. Esta representación se llama DOM (Modelo de objetos de documento). Es una estructura de árbol, donde cada elemento está representado por un nodo. El elemento <html> es el nodo de nivel superior (o raíz). Debajo están sus nodos secundarios, <head> y <body>. Y debajo de ellos están sus hijos, luego sus hijos, y así sucesivamente.

El nodo raíz es el antepasado de todos los demás elementos del documento. Tiene un selector especial de pseudoclases (: root) que puede usar para apuntar. Esto es equivalente a usar el selector de tipo html con la especificidad de una clase en lugar de una etiqueta.

Rem es la abreviatura de root em. En lugar de ser relativos al elemento actual, rems son relativos al elemento raíz. No importa dónde lo aplique en el documento, 1.2rem tiene el mismo valor calculado: 1.2 veces el tamaño de fuente del elemento raíz. La siguiente lista establece el tamaño de fuente raíz y luego usa rems para definir el tamaño de fuente para listas desordenadas relativas a eso.

          
  :root {                1
    font-size: 1em;      2
  }
  
  ul {
    font-size: .8rem;
  }
          
          List 2.10. Especificar el tamaño de fuente usando rems
        

1. La pseudoclase: root es equivalente al selector de tipo HTML.
2. Utiliza el tamaño predeterminado del navegador (16 px)

En este ejemplo, el tamaño de fuente raíz es el predeterminado del navegador de 16px (un em en el elemento raíz es relativo al predeterminado del navegador). Las listas desordenadas tienen un tamaño de fuente especificado de .8 rem, que se calcula en 12.8px. Debido a que esto es relativo a la raíz, el tamaño de fuente permanecerá constante, incluso si anida listas.

Algunos navegadores ofrecen dos formas para que el usuario personalice el tamaño del texto: zoom y un tamaño de fuente predeterminado. Al presionar Ctrl-más (+) o Ctrl-menos (-), el usuario puede hacer zoom en la página hacia arriba o hacia abajo. Esto escala visualmente todas las fuentes e imágenes y generalmente hace que todo en la página sea más grande o más pequeño. En algunos navegadores, este cambio solo se aplica a la pestaña actual y es temporal, lo que significa que no se transfiere a pestañas nuevas.

Establecer un tamaño de fuente predeterminado es un poco diferente. No solo es más difícil encontrar dónde establecer esto (generalmente en la página de configuración del navegador), sino que los cambios en este nivel permanecen permanentes, hasta que el usuario regresa y cambia el valor nuevamente. El problema es que esta configuración no cambia el tamaño de las fuentes definidas mediante píxeles u otras unidades absolutas. Debido a que un tamaño de fuente predeterminado es vital para algunos usuarios, particularmente aquellos que tienen problemas de visión, siempre debe especificar los tamaños de fuente con unidades relativas o porcentajes.

Rem simplifica muchas de las complejidades relacionadas con ems. De hecho, ofrecen un buen término medio entre píxeles y ems al proporcionar los beneficios de las unidades relativas, pero es más fácil trabajar con ellos. ¿Significa esto que debes usar rems en todas partes y abandonar las otras opciones? No.

En CSS, de nuevo, la respuesta suele ser "depende". Los rems son solo una herramienta en su bolsa de herramientas. Una parte importante de dominar CSS es aprender cuándo usar qué herramienta. Mi opción predeterminada es usar rems para tamaños de fuente, píxeles para bordes y ems para la mayoría de las otras medidas, especialmente rellenos, márgenes y radio de borde (aunque prefiero el uso de porcentajes para anchos de contenedor cuando sea necesario).

De esta manera, los tamaños de fuente son predecibles, pero aún obtendrá el poder de ems escalando su relleno y márgenes, en caso de que otros factores alteren el tamaño de fuente de un elemento. Los píxeles tienen sentido para los bordes, especialmente cuando desea una buena línea fina. Estas son mis unidades de referencia para las distintas propiedades, pero nuevamente, son herramientas y, en algunas circunstancias, una herramienta diferente hace el trabajo mejor.

En caso de duda, utilice rems para el tamaño de fuente, píxeles para los bordes y ems para la mayoría de las demás propiedades.

2.3 DEJA DE PENSAR EN PIXELES

Un patrón, o mejor dicho, antipatrón, que ha sido común durante los últimos años es restablecer el tamaño de fuente en la raíz de la página a .625em o 62.5%.

          
  html {
    font-size: .625em;
  }
          
          List 2.11. restableciendo globalmente el tamaño de fuente a 10 px
        

No recomiendo esto. Esto toma el tamaño de fuente predeterminado del navegador, 16px, y lo reduce a 10px. Esta práctica simplifica las matemáticas: si su diseñador le dice que haga la fuente de 14px, puede dividir fácilmente por 10 en su cabeza y escribir 1.4rem, todo mientras sigue usando la unidad relativa

Inicialmente, esto puede ser conveniente, pero hay dos problemas con este enfoque. Primero, te obliga a escribir muchos estilos duplicados. Diez píxeles es demasiado pequeño para la mayoría del texto, por lo que tendrá que anularlo en toda la página. Te encontrarás configurando párrafos en 1.4 rem y aparte en 1.4rem y enlaces de navegación en 1.4rem y así sucesivamente. Esto introduce más lugares de error, más puntos de contacto en su código cuando necesita cambiar y aumenta el tamaño de su hoja de estilo.

El segundo problema es que cuando haces esto, sigues pensando en píxeles. Puede escribir 1.4 rem en su código, pero en su mente, todavía está pensando en "14 píxeles". En una web receptiva, debe sentirse cómodo con los valores "difusos". No importa a cuántos píxeles se evalúe 1.2 em; todo lo que necesita saber es que es un poco más grande que el tamaño de fuente heredado. Y, si no se ve como lo desea en pantalla, cámbielo. Esto requiere algo de prueba y error, pero en realidad, también lo es trabajar con píxeles. (En el capítulo 13, veremos reglas concretas adicionales para refinar este enfoque).

Cuando se trabaja con ems, es fácil empantanarse obsesionándose con exactamente cuántos píxeles se evaluarán las cosas, especialmente los tamaños de fuente. Te volverás loco dividiendo y multiplicando los valores em sobre la marcha. En cambio, te desafío a que adquieras el hábito de usar ems primero. Si está acostumbrado a usar píxeles, usar valores em puede requerir práctica, pero vale la pena.

Esto no quiere decir que nunca tendrá que trabajar con píxeles. Si está trabajando con un diseñador, probablemente necesitará hablar con algunos números de píxeles concretos, y eso está bien. Al comienzo de un proyecto, deberá establecer un tamaño de fuente base (y, a menudo, algunos tamaños comunes para títulos y notas al pie de página). Los valores absolutos son más fáciles de usar cuando se habla del tamaño de las cosas.

La conversión a rems implicará aritmética, así que tenga una calculadora a mano. Poner un tamaño de fuente raíz en su lugar define un rem. A partir de ese momento, trabajar en píxeles debería ser la excepción, no la norma.

2.3.1. Establecer un tamaño de fuente predeterminado sensato

Supongamos que desea que el tamaño de fuente predeterminado sea 14px. En lugar de establecer un valor predeterminado de 10px y luego anularlo en toda la página, establezca ese valor en la raíz. El valor deseado dividido por el valor heredado (en este caso, el predeterminado del navegador) es 14/16, que equivale a 0,875.

Agregue la siguiente lista en la parte superior de una nueva hoja de estilo, ya que la estará construyendo. Esto establece la fuente predeterminada en la raíz (<html>).

          
  :root {                1
    font-size: 0.875em;  2
  }
          
          List 2.12. Establecer el verdadero tamaño de fuente predeterminado
        

1. O usa el selector de HTML
2. 14/16 (px deseado / px heredado) es igual a .875

Ahora el tamaño de fuente deseado se aplica a toda la página. No es necesario que lo especifique en otro lugar. Solo tendrá que cambiarlo en los lugares donde el diseño se desvía de esto, como los títulos.

Creemos el panel que se muestra en la figura 2.7. Construirá este panel en función del tamaño de fuente de 14px, utilizando medidas relativas.

El marcado para esto se muestra aquí. Agregue esto a su página.

          
  <div class="panel">
    <h2>Single-origin</h2>
    <div class="panel-body">
      We have built partnerships with small farms around the world to
      hand-select beans at the peak of season. We then carefully roast
      in <a href="/batch-size">small batches</a> to maximize their
      potential.
    </div>
  </div>
          
          List 2.13. Marcado para un panel
        

La siguiente lista muestra los estilos. Utilizará ems para el relleno y el radio del borde, rem para el tamaño de fuente del encabezado y px para el borde. Agrégalos a tu hoja de estilo.

          
  .panel {
    padding: 1em;                 1
    border-radius: 0.5em;         1
    border: 1px solid #999;       2
  }
  
  .panel > h2 {
    margin-top: 0;                3
    font-size: 0.8rem;            4
    font-weight: bold;            4
    text-transform: uppercase;    4
  }
          
          List 2.14. Panel con unidades relativas
        

1. Utiliza ems para relleno y radio de borde
2. Usa 1 px para un borde delgado
3. Elimina espacio adicional de la parte superior del panel; más sobre esto en el capítulo 3
4. Diseña la fuente del título usando rems para el tamaño de fuente

Este código coloca un borde delgado alrededor del panel y le da estilo al encabezado. Opté por un encabezado más pequeño, pero en negrita y todo en mayúsculas. ( hacer este tipo de letra más grande o diferente si su diseño lo requiere).

El > en el segundo selector es un combinador descendiente directo. Se dirige a un h2 que es un elemento secundario de un elemento a.panel. Consulte el apéndice A para obtener una referencia completa de los selectores y combinadores.

En el listado 2.13, agregué una clase de cuerpo de panel-body principal del panel para mayor claridad, pero notará que no necesita usarlo en su CSS. Debido a que este elemento ya hereda el tamaño de fuente raíz, ya aparece como desea que se vea.

2.3.2. Haciendo al panel responsive

Llevemos esto un poco más lejos. Puede utilizar algunas media queries para cambiar el tamaño de fuente base, según el tamaño de la pantalla. Esto hará que el panel se renderice en diferentes tamaños según el tamaño de la pantalla del usuario (que se muestra en la figura 2.8).

Media query: una regla @media utilizada para especificar estilos que se aplicarán solo a determinados tamaños de pantalla o tipos de medios (por ejemplo, impresión o pantalla). Este es un componente clave del diseño responsive. Consulte el listado 2.15 para ver un ejemplo; Cubriré esto con mayor profundidad en el capítulo 8.

Para ver este resultado, edite esta parte de su hoja de estilo para que coincida con esta lista.

          
  :root {                        1
    font-size: 0.75em;           1
  }                              1
  
  @media (min-width: 800px) {    2
    :root {                      2
      font-size: 0.875em;        2
    }                            2
  }                              2
  
  @media (min-width: 1200px) {   3
    :root {                      3
      font-size: 1em;            3
    }                            3
  }     
          
          List 2.15. Tamaño de fuente base responsive
        

1. Se aplica a todas las pantallas, pero se anula para pantallas más grandes
2. Se aplica solo a pantallas de 800 px y más anchas, anulando el valor original
3. 3 Se aplica solo a pantallas de 1200 px y más grandes, anulando ambos valores

Este primer conjunto de reglas especifica un tamaño de fuente predeterminado pequeño. Este es el tamaño de fuente que queremos aplicar en pantallas más pequeñas. Luego usó media queries para anular ese valor con tamaños de fuente incrementalmente más grandes en pantallas con un ancho de 800 px y 1200 px o más.

Al aplicar estos tamaños de fuente en la raíz de su página, ha redefinido de manera receptiva el significado de em y rem en toda la página. Esto significa que el panel ahora responsive, aunque no le hizo ningún cambio directamente. En una pantalla pequeña, como un teléfono inteligente, la fuente se reducirá (12 px) del mismo modo, el acolchado y el radio del borde serán más pequeños para coincidir. Y, en pantallas más grandes de más de 800 px y 1200 px de ancho, el componente escala hasta un tamaño de fuente de 14 px y 16 px, respectivamente. Cambie el tamaño de la ventana de su navegador para ver cómo se llevan a cabo estos cambios.

Si eres lo suficientemente disciplinado como para diseñar toda tu página en unidades relativas como esta, toda la página se ampliará y reducirá según el tamaño de la ventana gráfica. Esto puede ser una gran parte de su estrategia de respuesta. Estas dos media queries cerca de la parte superior de su hoja de estilo pueden eliminar la necesidad de docenas de media queries en el resto de su CSS. Pero no funciona si define sus valores en píxeles.

Del mismo modo, si su jefe o su cliente decide que las fuentes del sitio que creó son demasiado pequeñas o demasiado grandes, puede cambiarlas globalmente con solo tocar una línea de código. El cambio se extenderá por el resto de su página, sin esfuerzo.

2.3.3. Cambiar el tamaño de un solo componente

También puede usar ems para escalar un componente individual en la página. A veces, es posible que necesite una versión más grande de la misma parte de su interfaz en ciertas partes de la página. Hagamos esto con nuestro panel. Agregará una clase grande al panel: <div class = "panel large">.

La Figura 2.9 muestra tanto el panel normal como el grande a modo de comparación. El efecto es similar al de los paneles receptivos, pero ambos tamaños se pueden usar simultáneamente en la misma página.

Hagamos un pequeño cambio en la forma en que definió los tamaños de fuente del panel. Seguirás usando unidades relativas, pero ajustarás a qué son relativas. Primero, agregue la declaración font-size: 1rem al elemento principal de cada panel. Esto significa que cada panel establecerá un tamaño de fuente predecible para sí mismo, sin importar dónde se coloque en la página.

En segundo lugar, redefina el tamaño de fuente del encabezado usando ems en lugar de rems para que sea relativo al tamaño de fuente de los padres que acaba de establecer en 1rem. El código para esto es el siguiente. Actualice su hoja de estilo para que coincida.

          
  .panel {
    font-size: 1rem;             1
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0.5em;
  }
  
  .panel > h2 {
    margin-top: 0;
    font-size: 0.8em;            2
    font-weight: bold;
    text-transform: uppercase;
  }
          
          List 2.16. Creando una versión más grande del panel
        

1. Establece un tamaño de fuente predecible para el componente.
2. Utiliza ems para crear otras fuentes en relación con el tamaño de fuente principal establecido

Este cambio no tiene ningún efecto en la apariencia del panel, pero ahora lo configura para hacer la versión más grande del panel con una sola línea de CSS. Todo lo que tiene que hacer es anular el rem 1 del elemento principal con otro valor. Debido a que todas las medidas del componente son relativas a esto, anularlo cambiará el tamaño de todo el panel. Agregue el CSS en la siguiente lista a su hoja de estilo para definir una versión más grande.

          
  .panel.large {            1
    font-size: 1.2rem;
  }
          
          List 2.17. Escalar todo el panel con una declaración
        

1. Selector compuesto apunta a elementos con panel y clases grandes

Ahora, puede usar class="panel" para un panel normal y class="panel large" para uno más grande. Del mismo modo, puede definir una versión más pequeña del panel estableciendo un tamaño de fuente más pequeño. Si el panel fuera un componente más complicado, con varios tamaños de fuente o rellenos, solo se necesitaría esta única declaración para cambiar su tamaño, siempre y cuando todo el interior esté definido mediante ems.

2.4 UNIDADES VIEWPORT-RELATIVE

Ha aprendido que ems y rems se definen en relación con el font-size, pero estos no son el único tipo de unidades relativas. También hay unidades relativas a la ventana gráfica para definir longitudes relativas a la ventana gráfica del navegador.

Viewport: el área enmarcada en la ventana del navegador donde se ve la página web. Esto excluye la barra de direcciones, las barras de herramientas y la barra de estado del navegador, si están presentes.

Si no está familiarizado con las unidades viewport-relative, aquí hay una breve explicación.

• vh-1/100 de la altura de la ventan gráfica
• vw-1/100 de el ancho de la ventana gráfica
• vmin-1/100 de le dimensión, la altura o el ancho más pequeños (IE9 admite vm en lugar de vmin)
• vmx-1/100 de la dimensión, la altura o el ancho mayores

Por ejemplo, 50vw es igual a la mitad del ancho de la ventana gráfica y 25vh equivale al 25% de la altura de la ventana gráfica. vmin se basa en cuál de los dos <alto o ancho> es más pequeño. Esto es útil para garantizar que un elemento quepa en la pantalla independientemente de su orientación: si la pantalla es horizontal, se basará en la altura; si es vertical, se basa en el ancho.

La figura 2.10 muestra un elemento cuadrado tal como aparece en varias ventanas gráficas con diferentes tamaños de pantalla. Se define con una altura y un ancho de 90vmin, lo que equivale al 90% de la menor de las dos dimensiones: el 90% de la altura en las pantallas horizontales o el 90% del ancho en las verticales.

La figura 2.10 muestra un elemento cuadrado tal como aparece en varias ventanas gráficas con diferentes tamaños de pantalla. Se define con una altura y un ancho de 90 vmin, lo que equivale al 90% de la menor de las dos dimensiones: el 90% de la altura en las pantallas horizontales o el 90% del ancho en las verticales.

El listado 2.18 muestra los estilos para este elemento. Produce un cuadrado grande que siempre cabe en la ventana gráfica sin importar el tamaño del navegador. Puede agregar un <div class = "cuadrado"> a su página para ver esto.

          
  .square {
    width: 90vmin;
    height: 90vmin;
    background-color: #369;
  }
          
          List 2.18. Elemento cuadrado dimensionado usando vmin
        

Las longitudes relativas a la ventana gráfica son excelentes para cosas como hacer que una gran imagen de héroe llene la pantalla. Su imagen puede estar dentro de un contenedor largo, pero establecer la altura de la imagen en 100 vh, hace que sea exactamente la altura de la ventana gráfica.

Las unidades relativas a la ventana gráfica son una característica más nueva para la mayoría de los navegadores, por lo que hay algunos errores extraños cuando las usa en combinaciones más exóticas con otros estilos. Consulte "Problemas conocidos" en https://caniuse.com/#feat=viewport-units para obtener una lista.

Varios de los tipos de unidades de este capítulo no estaban en versiones anteriores de CSS (en particular, rems y unidades relativas a la ventana gráfica). Se agregaron en medio de una serie de cambios en el lenguaje, que a menudo se llama CSS3.

A finales de la década de 1990 y principios de la de 2000, después del trabajo inicial en la especificación CSS, poco cambió durante mucho tiempo. El W3C (World Wide Web Consortium) publicó la especificación CSS 2 en mayo de 1998. Poco después, se comenzó a trabajar en la versión 2.1 para corregir problemas y errores en la versión 2. El trabajo en CSS 2.1 continuó durante muchos años, con pocas adiciones significativas al lenguaje. . No se finalizó como recomendación propuesta hasta abril de 2011. En este punto, los navegadores ya habían implementado la mayoría de los cambios de CSS 2.1 y estaban en camino de agregar nuevas funciones bajo el nombre de CSS3.

El "3" es un número de versión informal; no hay ninguna especificación CSS3. En cambio, la especificación se dividió en módulos individuales, cada uno con versiones independientes. La especificación para fondos y bordes ahora está separada de la de los modelos de caja y de la de cascada y herencia. Esto permite que el W3C realice nuevas revisiones en un área de CSS sin actualizar innecesariamente áreas que no cambian. Muchas de estas especificaciones permanecen en la versión 3 (ahora llamada nivel 3), pero algunas, como la especificación de selectores, están en el nivel 4 y otras, como una caja flexible, están en el nivel 1.

Esto significa que ya no estamos trabajando con una versión particular de CSS. Es un estándar de vida. Cada navegador agrega continuamente soporte para nuevas funciones. Los desarrolladores trabajan con esos cambios y se adaptan a ellos. No habrá CSS4, excepto quizás como un término de marketing más genérico. Aunque este libro cubre las características de CSS3, no necesariamente las llamo como tales porque, en lo que respecta a la web, todo es CSS.

2.4.1 Usando VH para el tamaño de fuente

Una aplicación para las unidades relativas a la ventana gráfica que puede no ser inmediatamente obvia es el tamaño de fuente. De hecho, encuentro este uso más práctico que aplicar vh y vw a las alturas o anchos de los elementos.

Considere lo que sucedería si aplicara font-size: 2vw a un elemento. En un monitor de escritorio a 1200 px, esto se evalúa en 24px (2% de 1200). En una tableta con un ancho de pantalla de 768 px, se evalúa en aproximadamente 15px (2% de 768). Y lo bueno es que el elemento se escala suavemente entre los dos tamaños. Esto significa que no hay cambios repentinos en los puntos de interrupción; cambia gradualmente a medida que cambia el tamaño de la ventana gráfica.

Desafortunadamente, 24px es demasiado grande en una pantalla grande. Y lo que es peor, escala hasta 7.5px en un iPhone 6. Lo que sería bueno es este efecto de escala, pero con los extremos un poco menos severos. Puede lograr esto con la función calc() de CSS.

2.4.2 Usando calc() para el tamaño de la fuente

La función calc() le permite realizar operaciones aritméticas básicas con dos o más valores. Esto es particularmente útil para combinar valores que se miden en diferentes unidades. Esta función admite la suma (+), la resta (-), la multiplicación (*) y la división (*). Los operadores de suma y resta deben estar rodeados de espacios en blanco, por lo que sugiero que se acostumbre a agregar siempre un espacio antes y después de cada operador; por ejemplo, calc(1em + 10px).

Utilizará calc() en la siguiente lista para combinar ems con unidades vw. Elimine el tamaño de fuente base anterior (y las media queries) de su hoja de estilo. Agregue esto en su lugar.

          
  :root {
    font-size: calc(0.5em + 1vw);
  }
          
          Listado 2.19. Usando calc() para definir el tamaño de fuente en unidades ems y vh
        

Ahora, abra la página y cambie lentamente el tamaño de su navegador. Verá la escala de fuente sin problemas a medida que lo hace. El 0.5em aquí funciona como una especie de tamaño de fuente mínimo, y el 1vw agrega un escalar sensible. Esto le dará un tamaño de fuente base que se escala desde 11,75px en un iPhone 6 hasta 20px en una ventana del navegador de 1200px. Puede ajustar estos valores a su gusto.

Ahora ha logrado una gran parte de su estrategia de responsive sin una sola media queries. En lugar de tres o cuatro puntos de interrupción codificados, todo en su página se escalará de manera fluida de acuerdo con la ventana gráfica.

2.5. NÚMEROS SIN UNIDADES Y ALTURA DE LÍNEA

Algunas propiedades permiten valores sin unidades (es decir, un número sin unidad especificada). Las propiedades que admiten esto incluyen line-height, z-index y font-weight (700 es equivalente a negrita; 400 es equivalente a normal, etc.). También puede usar el valor sin unidades 0 en cualquier lugar donde se requiera una unidad de longitud (como px, em o rem) porque, en estos casos, la unidad no importa: 0 px es igual a 0% es igual a 0 em.

Un 0 sin unidades solo se puede utilizar para valores de longitud y porcentajes, como en rellenos, bordes y anchos. No se puede utilizar para valores angulares, como grados o valores basados en el tiempo como segundos.

La propiedad line-height es inusual porque acepta tanto unidades como valores sin unidades. Por lo general, debe usar números sin unidades porque se heredan de manera diferente. Pongamos texto en la página y veamos cómo se comporta. Agregue el código en la siguiente lista a su hoja de estilo.

          
  <body>
    <p class="about-us">
      We have built partnerships with small farms around the world to
      hand-select beans at the peak of season. We then carefully roast in
      small batches to maximize their potential.
    </p>
  </body>
          
          List 2.20. Marcado de altura de línea heredado
        

Deberá especificar una altura de línea para el elemento del cuerpo y permitir que el resto del documento lo herede. Esto funcionará como se esperaba, sin importar lo que haga con los tamaños de fuente en la página (figura 2.11).

Agregue el listado 2.21 a su hoja de estilo para estos estilos. El párrafo hereda una altura de línea de 1,2. Debido a que el tamaño de la fuente es de 32 px (2 em × 16 px, el valor predeterminado del navegador), la altura de la línea se calcula localmente a 38,4 px (32 px × 1,2). Esto dejará una cantidad adecuada de espacio entre líneas de texto.

          
  body {
    line-height: 1.2;               1
  }
  
  .about-us {
    font-size: 2em;
  }
          
          List 2.21. Altura de la línea con un número sin unidad
        

1. Los elementos descendientes heredan el valor sin unidades.

Si, en cambio, especifica la altura de la línea usando una unidad, puede encontrar resultados inesperados, como el que se muestra en la figura 2.12. Las líneas de texto se superponen entre sí. El listado 2.22 muestra el CSS que generó la superposición.

          
  body {
    line-height: 1.2em;             1
  }
  
  .about-us {
    font-size: 2em;                 2
  }
          
          List 2.22. La altura de la línea con unidades da como resultado una salida inesperada
        

1. Los elementos descendientes heredan el valor calculado (19,2 px).
2. Evalúa a 32 px

Estos resultados se deben a una peculiaridad de la herencia: cuando un elemento tiene un valor definido usando una longitud (px, em, rem, etc.), su valor calculado es heredado por elementos secundarios. Cuando se especifican unidades como ems para una altura de línea, se calcula su valor y ese valor calculado se transmite a los hijos heredados. Con la propiedad line-height, esto puede provocar resultados inesperados si el elemento secundario tiene un tamaño de fuente diferente, como el texto superpuesto.

Length: el nombre formal de un valor CSS que denota una medida de distancia. Es un número seguido de una unidad, como 5px. La longitud viene en dos sabores: absoluto y relativo. Los porcentajes son similares a las longitudes, pero estrictamente hablando, no se consideran longitudes.

Cuando usa un número sin unidades, ese valor declarado se hereda, lo que significa que su valor calculado se vuelve a calcular para cada elemento secundario heredado. Este será casi siempre el resultado que desea. El uso de un número sin unidades le permite establecer la altura de la línea en el cuerpo y luego olvidarse de ella durante el resto de la página, a menos que haya lugares específicos en los que desee hacer una excepción.

2.6. PROPIEDADES PERSONALIZADAS (CSS VARIABLES)

En 2015, se publicó como recomendación candidata una especificación CSS largamente esperada titulada Propiedades personalizadas para variables en cascada. Esta especificación introdujo el concepto de variables en el lenguaje, lo que permitió un nuevo nivel de estilos dinámicos basados en el contexto. Puede declarar una variable y asignarle un valor; luego puede hacer referencia a este valor en toda su hoja de estilo. Puede usar esto para reducir la repetición en su hoja de estilo, así como algunas otras aplicaciones beneficiosas, como verá en breve.

Si utiliza un preprocesador de CSS que admite sus propias variables, como Sass (hojas de estilo sintácticamente impresionantes) o Less, puede tener la tentación de ignorar las variables de CSS. No lo hagas. Las nuevas variables CSS son de naturaleza diferente y son mucho más versátiles que cualquier cosa que pueda lograr un preprocesador. Tiendo a referirme a ellos como "propiedades personalizadas" en lugar de variables para enfatizar esta distinción.

Para definir una propiedad personalizada, debe declararla como cualquier otra propiedad CSS. El listado 2.23 es un ejemplo de declaración de variable. Inicie una nueva página y hoja de estilo, y agregue este CSS.

          
  :root {
    --main-font: Helvetica, Arial, sans-serif;
  }
          
          List 2.23. Definición de una propiedad personalizada
        

Esta lista define una variable llamada --main-font y establece su valor en un conjunto de fuentes sans-serif comunes. El nombre debe comenzar con dos guiones (--); para distinguirlo de las propiedades CSS, seguido del nombre que desee utilizar.

Las variables deben declararse dentro de un bloque de declaración. He usado el selector :root aquí, que establece la variable para toda la página. Explicaré esto en breve.

Por sí misma, esta declaración de variable no hace nada hasta que la usamos. Aplicémoslo a un párrafo para producir un resultado como el de la figura 2.13.

Una función llamada var() permite el uso de variables. Utilizará esta función para hacer referencia a la variable --main-font que acaba de definir. Agregue el conjunto de reglas que se muestra en la siguiente lista para utilizar la variable.

          
  :root {
    --main-font: Helvetica, Arial, sans-serif;
  }
  
  p {                                    1
    font-family: var(--main-font);       1
  }                                      1
          
          List 2.24. Usar una propiedad personalizada
        

1. Establece la familia de fuentes para párrafos en Helvetica, Arial, sans-serif

Las propiedades personalizadas le permiten definir un valor en un lugar, como una "fuente única de verdad", y reutilizar ese valor en toda la hoja de estilo. Esto es particularmente útil para valores recurrentes como colores. La siguiente lista agrega una propiedad personalizada brand-color. Puede usar esta variable decenas de veces en su hoja de estilo, pero si desea cambiarla, solo tiene que editarla en un lugar.

          
  :root {
    --main-font: Helvetica, Arial, sans-serif;
    --brand-color: #369;                           1
  }
  
  p {
    font-family: var(--main-font);
    color: var(--brand-color);
  }
          
          List 2.25. Usar propiedades personalizadas para colores
        

1. 1 Define una variable de brand-color azul

La función var() acepta un segundo parámetro, que especifica un valor de respaldo. Si la variable especificada en el primer parámetro no está definida, se utiliza el segundo valor en su lugar.

          
  :root {
    --main-font: Helvetica, Arial, sans-serif;
    --brand-color: #369;
  }
  
  p {
    font-family: var(--main-font, sans-serif);         1
    color: var(--secondary-color, blue);               2
  }
          
          List 2.26. Proporcionar valores alternativos
        

1. Especifica un valor de respaldo de sans-serif
2. La variable de color secundario no está definida, por lo que se utiliza el valor de reserva azul.

Este listado especifica valores de respaldo en dos declaraciones diferentes. En el primero, --main -font se define como Helvetica, Arial, sans-serif, por lo que se usa este valor. En el segundo, --secondary-color es una variable indefinida, por lo que se utiliza el valor de reserva blue.

Si una función var() se evalúa como un valor no válido, la propiedad se establecerá en su valor inicial. Por ejemplo, si la variable en padding: var (- brand -color) se evalúa como un color, sería un valor de relleno no válido. En ese caso, el relleno se establecería en 0 en su lugar.

2.6.1. Cambiar propiedades personalizadas de forma dinámica

En los ejemplos hasta ahora, las propiedades personalizadas son simplemente una buena conveniencia; pueden ahorrarle mucha repetición en su código. Pero lo que los hace particularmente interesantes es que las declaraciones de propiedades personalizadas se transmiten en cascada y heredan: puede definir la misma variable dentro de múltiples selectores, y la variable tendrá un valor diferente para varias partes de la página.

Puede definir una variable como negra, por ejemplo, y luego redefinirla como blanca dentro de un contenedor en particular. Luego, cualquier estilo basado en esa variable se resolverá dinámicamente en negro si está fuera del contenedor y en blanco si está dentro. Usemos esto para lograr un resultado como el que se muestra en la figura 2.14.

Este panel es similar al que vio anteriormente (figura 2.7). El HTML para esto se muestra en el listado 2.27. Tiene dos instancias del panel: una dentro del cuerpo y otra dentro de una sección oscura. Actualice su HTML para que coincida con esto.

          
  <body>
    <div class="panel">                       1
      <h2>Single-origin</h2>
      <div class="body">
        We have built partnerships with small farms
        around the world to hand-select beans at the
        peak of season. We then careful roast in
        small batches to maximize their potential.
      </div>
    </div>
  
    <aside class="dark">                      2
      <div class="panel">                     2
        <h2>Single-origin</h2>
        <div class="body">
          We have built partnerships with small farms
          around the world to hand-select beans at the
          peak of season. We then careful roast in
          small batches to maximize their potential.
        </div>
      </div>
    </aside>
  </body>
          
          List 2.27. Dos paneles en diferentes contextos en la página.
        

1. Un panel normal en la página
2. El segundo panel dentro de un recipiente oscuro

Redefinamos el panel para usar variables para el texto y el color de fondo. Agregue la siguiente lista a su hoja de estilo. Esto establece el color de fondo en blanco y el texto en negro. Explicaré cómo funciona esto antes de agregar estilos para la variante oscura.

          
  :root {
    --main-bg: #fff;                  1
    --main-color: #000;               1
  }
  
  .panel {
    font-size: 1rem;
    padding: 1em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: var(--main-bg);  2
    color: var(--main-color);          2
  }
  
  .panel > h2 {
    margin-top: 0;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
  }
          
          List 2.28. Usar variables para definir los colores del panel
        

1. Define las variables de color de fondo y texto como blanco y negro, respectivamente
2. Usa las variables en los estilos del panel

Nuevamente, ha definido las variables dentro de un conjunto de reglas con el selector :root. Esto es importante porque significa que estos valores se establecen para todo en el elemento raíz (la página completa). Cuando un elemento descendiente de la raíz usa las variables, estos son los valores a los que se resolverán.

Tiene dos paneles, pero aún se ven iguales. Ahora, definamos las variables nuevamente, pero esta vez con un selector diferente. La siguiente lista proporciona estilos para el contenedor oscuro. Establece un fondo gris oscuro en el contenedor, así como un poco de relleno y margen. También redefine ambas variables. Agregue esto a su hoja de estilo.

          
  .dark {
    margin-top: 2em;         1
    padding: 1em;
    background-color: #999;  2
    --main-bg: #333;         3
    --main-color: #fff;      3
  }
          
          Listado 2.29. styling el dark container
        

1. Pone un margen entre el contenedor oscuro y el panel anterior
2. Aplica un fondo gris oscuro al contenedor oscuro
3. Redefine las variables --main-bg y --main-color dentro del alcance del contenedor

Vuelva a cargar la página y el segundo panel tendrá un fondo oscuro y texto blanco. Esto se debe a que cuando el panel usa estas variables, se resolverán en los valores definidos en el contenedor oscuro, en lugar de en la raíz. Tenga en cuenta que no tuvo que cambiar el estilo del panel ni aplicar clases adicionales.

En este ejemplo, ha definido propiedades personalizadas dos veces: primero en la raíz (donde --main-color es negro) y luego en el contenedor oscuro 6#40;donde --main-color es blanco). Las propiedades personalizadas se comportan como una especie de variable de ámbito porque los valores son heredados por elementos descendientes. Dentro del recipiente oscuro, --main-color es blanco; en el resto de la página, es negro.

2.6.2. Cambiar propiedades personalizadas con JavaScript

También se puede acceder a las propiedades personalizadas y manipularlas en vivo en el navegador usando JavaScript. Debido a que este no es un libro sobre JavaScript, le mostraré lo suficiente para familiarizarse con el concepto. Dejaré que usted lo integre en sus proyectos de JavaScript.

La siguiente lista muestra cómo acceder a una propiedad en un elemento. Agrega un script a la página, que registra el valor de la propiedad --main-bg del elemento raíz.

          
  <script type="text/javascript">
    var rootElement = document.documentElement;
    var styles = getComputedStyle(rootElement);              1
    var mainColor = styles.getPropertyValue('--main-bg');    2
    console.log(String(mainColor).trim());   3              
  </script>
          
          List 2.30. Acceder a una propiedad personalizada en JavaScript
        

1. Obtiene el objeto de estilos para un elemento
2. Obtiene el valor --main-bg del objeto styles
3. 3 Asegura que mainColor es una cadena y recorta los espacios en blanco; registra "#fff"

Debido a que puede especificar nuevos valores para propiedades personalizadas sobre la marcha, puede usar JavaScript para establecer un nuevo valor para --main-bg dinámicamente. Si lo configura en azul claro, aparecerá como se muestra en la figura 2.15.

El código de la siguiente lista establece un nuevo valor en --main-bg en el elemento raíz. Agregue esto al final de la etiqueta <script>.

          
  var rootElement = document.documentElement;
  rootElement.style.setProperty('--main-bg', '#cdf');    1
          
          List 2.31. Establecer una propiedad personalizada en JavaScript
        

1. Establece --main-bg en azul claro en el elemento raíz

Si ejecuta este script, cualquier elemento que herede la propiedad --main-bg se actualizará para usar este nuevo valor. En su página, esto cambia el fondo del primer panel a azul claro. El segundo panel permanece sin cambios, ya que sigue heredando la propiedad del contenedor oscuro.

Con esta técnica, puede usar JavaScript para cambiar el tema de su sitio, en vivo en el navegador. O bien, puede resaltar ciertas partes de la página o realizar cualquier número de otros cambios sobre la marcha. Con solo unas pocas líneas de JavaScript, puede realizar cambios que afectarán a una gran cantidad de elementos de la página.

2.6.3. Experimentar con propiedades personalizadas

Las propiedades personalizadas son un área completamente nueva de CSS que los desarrolladores recién están comenzando a explorar. Debido a que la compatibilidad con el navegador ha sido limitada, aún no se ha visto mucho uso en "horario de máxima audiencia". Estoy seguro de que, con el tiempo, verá surgir mejores prácticas y usos novedosos. Esto es algo que debe vigilar. Experimente con propiedades personalizadas y vea qué se le ocurre.

Tenga en cuenta que cualquier declaración que utilice var() será ignorada por los navegadores antiguos que no la comprendan. Proporcione un comportamiento alternativo para esos navegadores cuando sea posible:

          
  color: black;
  color: var(--main-color);
          
        

RESUMEN

• Adopte el uso de unidades relativas, permitiendo que la estructura de la página determine el significado de sus estilos.
• Favorezca el uso de rems para el tamaño de fuente, pero use selectivamente ems para escalar los componentes de la página de manera simple.
• Puede hacer que toda su página se amplíe de manera receptiva sin ninguna media queries.
• Utilice valores sin unidades al especificar la altura de la línea.
• Puede comenzar a familiarizarse con una de las características más nuevas de CSS, las propiedades personalizadas.