min()

This translation is incomplete. Please help translate this article from English

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  <length>, <frequency>, <angle>, <time>, <percentage>, <number>, o <integer> esté permitido.

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

Sintaxis

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como attr(), que se evaluan a un tipo de argumento válido (like <length>).

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

  • Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado auto
  • Es permitido anidar  max() y otros funciones min() como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion calc() en si.
  • La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <length>.
  • Usted puede (y con frecuencia necesitara) combinar los valores  min() y max(), o usar min() dentro de las funciones  clamp() o calc().
  • Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.

Formal syntax

min( <calc-sum># )

where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Accessibility concerns

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

Examples

Setting a maximum size for a label and input

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

Let's look at some CSS:

input, label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

<form>
  <label>Type something:</label>
  <input type="text">
</form>

Specifications

Specification Status Comment
CSS Values and Units Module Level 4
La definición de 'min()' en esta especificación.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
<min()>Chrome Soporte completo 79Edge Soporte completo 79Firefox Soporte completo 75IE Sin soporte NoOpera Soporte completo 66Safari Soporte completo 11.1WebView Android Soporte completo 79Chrome Android Soporte completo 79Firefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Soporte completo 11.3Samsung Internet Android Soporte completo 12.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

See also