Sobre la herencia y el reparto del valor de la propiedad

A veces quiero establecer el valor de una propiedad CSS al valor de una propiedad diferente, incluso si no sé cuál es el valor, e incluso si cambia más adelante. Pero desafortunadamente, esto no es posible (al menos, no existe una función CSS específica para hacer esto).

Me parece que sería muy útil tener algo como esto (para la interpolación, tal vez tirarías calc-size() también allí):

/* Totally hypothetical */
button {
  border-radius: compute(height, self);
  border-radius: compute(height, inherit);
  border-radius: compute(height, #this);
}

2021, Lea Viru explica Por qué, a pesar de haberse propuesto muchas veces, no es factible implementar una función CSS tan universal. Dicho esto, todavía tengo esperanza porque las cosas siempre están evolucionando, El proceso del CSSWG no siempre es lineal.

Al mismo tiempo, incluso si no existen funciones CSS que nos permitan obtener los valores de diferentes propiedades, puedes usar diferentes métodos para lograr tus resultados, y estos métodos son los que discutiremos hoy.

Método de atributo personalizado CSS infalible

Podemos obtener fácilmente el valor de diferentes propiedades CSS usando propiedades personalizadas, pero primero necesitamos saber cuál es ese valor para declarar la propiedad personalizada. Esto no es ideal, pero nos permite lograr Alguno resultado.

Volvamos al ejemplo de la introducción e intentemos configurar border-radius Residencia en heightsolo que esta vez sabemos cuál es la altura y la almacenamos como una propiedad personalizada de CSS para poder reutilizarla, para que podamos lograr nuestro resultado:

button {
  --button-height: 3rem;
  height: var(--button-height);
  border-radius: calc(var(--button-height) * 0.3);
}

Incluso podemos colocarlo en --button-height Propiedades personalizadas más arriba en la cascada CSS, haciéndolas disponibles en contextos más contenidos.

:root {
  /* Declare here to use anywhere */
  --button-height: 3rem;

  header {
    --header-padding: 1rem;
    padding: var(--header-padding);
  
    /* Height is unknown (but we can calculate it) */
    --header-height: calc(var(--button-height) + (var(--header-padding) * 2));
  
    /* Which means we can calculate this, too */
    border-radius: calc(var(--header-height) * 0.3);
  
    button {
      /* As well as these, of course */
      height: var(--button-height);
      border-radius: calc(var(--button-height) * 0.3);

      /* Oh, what the heck */
      padding-inline: calc(var(--button-height) * 0.5);
    }
  }
}

Creo que cuando mi profesor de matemáticas dijo que algún día necesitaría álgebra. ¡Ella no mintió!

No compatible inherit() Métodos de función CSS

este inherit() Actualmente, ningún navegador web admite una función CSS que nos permita obtener el valor de una propiedad principal. pensar: inherit Palabras clave, además de los valores que podemos obtener cualquier propiedad principal e incluso modificarla usando funciones de valor, p. calc(). este Último borrador de la especificación de nivel 5 del módulo Valores y Unidades CSS Definir cómo funciona para las propiedades personalizadas en realidad no nos permite hacer nada que no podamos hacer (como en el ejemplo anterior), pero con suerte funciona para todas las propiedades CSS para que no necesitemos usar propiedades personalizadas (solo es un poco más largo):

header {
  height: 3rem;

  button {
    height: 100%;

    /* Get height of parent but use it here */
    border-radius: calc(inherit(height) * 0.3);
    padding-inline: calc(inherit(height) * 0.5);
  }
}

Sin embargo, existe una diferencia entre este enfoque y el enfoque de propiedad personalizada. Este método depende de la altura fija del padre y, cuando se utiliza el método de propiedad personalizada, el padre o el hijo pueden tener una altura fija.

esto significa inherit() No se insertará ningún valor. Por ejemplo, un auto valor calculado 3rem todavía se heredará como auto,cuando inherit()-ed., a veces esto está bien, pero a veces puede ser un problema. Personalmente, espero que la interpolación sea posible en algún momento, haciéndola más útil que los métodos de propiedades personalizados.

Hasta entonces, existen algunas otras opciones (en su mayoría específicas de la propiedad).

este aspect-ratio Propiedades CSS

usar aspect-ratio Propiedades CSS, podemos establecer la altura en relación con el ancho y viceversa. Por ejemplo:

div {
  width: 30rem;

  /* height will be half of the width */
  aspect-ratio: 2 / 1;

  /* Same thing */
  aspect-ratio: 3 / 1.5;

  /* Same thing */
  aspect-ratio: 10 / 5;

  /* width and height will be the same */
  aspect-ratio: 1 / 1;
}

Técnicamente, no «entendemos» width o heightpero configuramos uno en función del otro, que es lo importante (dado que es una proporción, no es necesario conocer los valores o unidades reales de los dos).

este currentColor palabras clave CSS

este currentColor Las palabras clave CSS se resuelven en valores calculados color propiedad. Su tipo de datos es <color>por lo que podemos usarlo para reemplazar cualquier <color> sobre cualquier atributo del mismo elemento. Por ejemplo, si configuramos color llegar red (o algo que resolver red), o si color Calculado como red Por herencia podemos declarar border-color: currentColor Haz que el borde sea rojo también:

body {
  /* We can set color here (and let it be inherited) */
  color: red;

  button {
    /* Or set it here */
    color: red;

    /* And then use currentColor here */
    border-color: currentColor;
    border: 0.0625rem solid currentColor;
    background: hsl(from currentColor h s 90);
  }
}

Esto nos permite reutilizar colores sin tener que establecer propiedades personalizadas, por supuesto si color cambiar, currentColor se actualizará automáticamente para coincidir con él.

Si bien esto no es lo mismo que obtener el color de cualquier cosa, sigue siendo muy útil. De hecho, si algo como compute(background-color) Simplemente no es posible, me encantaría tener más palabras clave CSS como currentColor.

De hecho, currentBackgroundColor/currentBackground tener Ya propuesto. usar currentBackgroundColor Por ejemplo, podemos establecer que el color del borde sea ligeramente más oscuro que el color de fondo (border-color: hsl(from currentBackgroundColor h s calc(l - 30))), o mezcle el color de fondo con otro color y utilícelo como color de borde (border-color: color-mix(currentBackgroundColor, black, 30)).

Pero ¿por qué detenerse ahí? por qué no currentWidth, currentHeight¿etc?

este from-font palabras clave CSS

este from-font Las palabras clave CSS son propietarias text-decoration-thickness Propiedad que se puede utilizar para establecer el grosor del subrayado. Si alguna vez has odiado subrayar siempre 1px a pesar de todo font-size y font-weightEntonces text-decoration-thickness puede resolver este problema.

este from-font Sin embargo, la palabra clave no genera un valor: el fabricante de la fuente puede proporcionarla opcionalmente e incrustarla en el archivo de fuente, por lo que es posible que no le guste el valor que proporcionan (si lo proporcionan). Si no lo hacen, auto se utilizará como alternativa, los navegadores web resuelven 1px. Eso está bien si no eres quisquilloso, pero aún así no es confiable (y aparentemente es bastante específico).

Sin embargo, podemos especificar un valor porcentual, lo que garantizará que el espesor sea relativo al font-size. Entonces si text-decoration-thickness: from-font Simplemente no lo cortamos y luego lo tuvimos como respaldo (entre 8% y 12% debería hacer esto).

No subestimes las unidades CSS

puede que ya lo sepas vw y vh Unidades (unidades de ancho y alto de la ventana gráfica). Estos representan porcentajes del ancho y alto de la ventana gráfica respectivamente, por lo que 1vw Por ejemplo, el 1% del ancho de la ventana gráfica. Estas unidades se pueden utilizar individualmente o en un calc() función y se utiliza en cualquier atributo que acepte <length> unidad.

Sin embargo, Hay muchas otras unidades menos conocidas. Esto puede resultar útil de forma similar:

• 1ex: igual a la altura x calculada
• 1cap: Igual a la altura límite superior calculada
• 1ch: igual al ancho calculado 0 glifo
• 1lh: igual al calculado line-height (Siempre y cuando no recorte ni agregue nada a su cuadro de contenido, por ejemplo, usando text-box o paddingrespectivamente, lh Las unidades se pueden utilizar para determinar la altura de una caja con un número fijo de filas)

Nuevamente, puedes usarlos, sus variantes lógicas (p. ej. vi y vb), y sus variantes raíz (por ejemplo, rex y rcap) en cualquier aceptado <length> unidad.

Además, si está utilizando Consulta de tamaño de contenedortambién puede utilizar las siguientes unidades de consulta de contenedor en un contexto contenedor:

• 1cqw: Igual al 1% del ancho calculado del contenedor
• 1cqh: Igual al 1% de la altura calculada del contenedor
• 1cqi: Igual al 1% del tamaño en línea calculado del contenedor
• 1cqb: igual al 1% del tamaño del bloque de cálculo del contenedor
• 1cqmin: igual a 1cqi o 1cqbel que sea menor
• 1cqmax: igual a 1cqi o 1cqbcualquiera que sea mayor

Eso inherit() ¿Sabías que el ejemplo anterior no es compatible actualmente con ningún navegador web? Aquí ocurre lo mismo, pero con una consulta sobre el tamaño del contenedor:

header {
  height: 3rem;
  container: header / size;

  @container header (width) {
    button {
      height: 100%;
      border-radius: calc(100cqh * 0.3);
      padding-inline: calc(100cqh * 0.5);
    }
  }
}

Alternativamente, dado que estamos hablando de contenedores y sus subcontenedores directos, podemos usar la siguiente versión más corta, que no crea ni consulta el contenedor nombrado (de todos modos, no necesitamos consultar el contenedor, ya que todo lo que hacemos es robar sus unidades):

header {
  height: 3rem;
  container-type: size;

  button {
    height: 100%;
    border-radius: calc(100cqh * 0.3);
    padding-inline: calc(100cqh * 0.5);
  }
}

Sin embargo, por favor recuerda inherit() nos permitirá heredar cualquier cosay la consulta del tamaño del contenedor solo nos permite heredar el tamaño. Además, las consultas de tamaño de contenedor no funcionan con contenedores en línea (razón por la cual los contenedores se extienden horizontalmente en esta versión), por lo que no resolverán todos los problemas de todos modos.

en breve

solo voy a tirar compute() Nuevamente, porque creo que esta es una buena manera de obtener los valores de otras propiedades CSS:

button {
  /* self could be the default */
  border-radius: compute(height, self);
  /* inherit could work like inherit() */
  border-radius: compute(height, inherit);
  /* Nice to have, but not as important */
  border-radius: compute(height, #this);
}

Pero si eso no es posible, me gustaría presentar más ideas. currentColor– Palabras clave similares. Además de palabras clave como from-font El fabricante de la fuente proporciona el valor (o no, suspiro), palabras clave como currentWidth y currentHeight será muy útil. Harán que el CSS sea más fácil de leer y no tendremos que crear tantas propiedades personalizadas.

Al mismo tiempo, atributos personalizados, aspect-ratiociertas unidades CSS pueden ayudarnos en las circunstancias adecuadas, sin mencionar que obtendremos inherit() futuro. Estos son principalmente para obtener el ancho y el alto, lo cual está bien ya que ese es sin duda el mayor problema aquí, pero con suerte habrá más funciones CSS en el futuro que permitirán que los valores se usen en más lugares.