Funciones

The CSS Podcast - 020: Functions

Hasta ahora en este curso, te expusiste a varias funciones de CSS. En el módulo de cuadrícula, se te presentaron minmax() y fit-content(), que te ayudan a ajustar el tamaño de los elementos. En el módulo color, se te presentaron rgb() y hsl(), que te ayudan a definir colores.

Al igual que muchos otros lenguajes de programación, CSS tiene muchas funciones integradas a las que puedes acceder cuando las necesites.

Cada función de CSS tiene un propósito específico. En esta lección, obtendrás una descripción general de alto nivel, que te permitirá comprender mejor dónde y cómo usarlas.

¿Qué es una función?

Una función es un fragmento de código nombrado y autónomo que completa una tarea específica. Las funciones se nombran para que puedas llamarlas dentro de tu código y pasar datos a ellas. Esto se conoce como pasar argumentos.

Muchas funciones de CSS son funciones puras, lo que significa que, si les pasas los mismos argumentos, siempre te devolverán el mismo resultado, independientemente de lo que suceda en el resto del código. Estas funciones suelen volver a calcularse a medida que cambian los valores en tu CSS, similar a otros elementos del lenguaje, como los valores en cascada calculados, como currentColor.

En CSS, solo puedes usar las funciones proporcionadas, en lugar de escribir las tuyas propias, pero las funciones se pueden anidar entre sí en algunos contextos, lo que les brinda más flexibilidad. Lo veremos con más detalle más adelante en este módulo.

Selectores funcionales

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Aprendiste sobre los selectores funcionales en el módulo de pseudoclases, que detalla funciones como :is() y :not(). Los argumentos que se pasan a estas funciones son selectores CSS, que luego se evalúan. Si hay una coincidencia con los elementos, se les aplicará el resto de la regla CSS.

Propiedades personalizadas y var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Una propiedad personalizada es una variable que te permite tokenizar valores en tu código CSS. Las propiedades personalizadas también se ven afectadas por la cascada, lo que significa que se pueden manipular o redefinir de forma contextual. Una propiedad personalizada debe tener el prefijo de dos guiones (--) y distingue mayúsculas de minúsculas.

La función var() toma un argumento obligatorio: la propiedad personalizada que intentas mostrar como valor. En el fragmento anterior, la función var() tiene --base-color como argumento. Si se define --base-color, var() mostrará el valor.

.my-element {
    background: var(--base-color, hotpink);
}

También puedes pasar un valor de declaración de resguardo a la función var(). Esto significa que, si no se puede encontrar --base-color, se usará la declaración pasada, que en el caso de este ejemplo es el color hotpink.

Funciones que muestran un valor

La función var() es solo una de las funciones de CSS que muestran un valor. Las funciones como attr() y url() siguen una estructura similar a var(): pasas uno o más argumentos y los usas en el lado derecho de tu declaración de CSS.

a::after {
  content: attr(href);
}

Aquí, la función attr() toma el contenido del atributo href del elemento <a> y lo establece como el content del pseudoelemento ::after. Si cambiara el valor del atributo href del elemento <a>, esto se reflejaría automáticamente en este atributo content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

La función url() toma una URL de cadena y se usa para cargar imágenes, fuentes y contenido. Si no se pasa una URL válida o no se puede encontrar el recurso al que apunta la URL, la función url() no mostrará nada.

Funciones de color

Aprendiste todo sobre las funciones de color en el módulo color. Si aún no lo hiciste, te recomendamos que lo hagas.

Algunas funciones de color disponibles en CSS son rgb(), rgba(), hsl(), hsla(), hwb(), lab() y lch(). Todos tienen una forma similar en la que se pasan argumentos de configuración y se muestra un color.

Expresiones matemáticas

Al igual que muchos otros lenguajes de programación, CSS proporciona funciones matemáticas útiles para ayudar con varios tipos de cálculos.

calc()

Browser Support

• 26
• 12
• 16
• 7

Source

La función calc() toma una sola expresión matemática como parámetro. Esta expresión matemática puede ser una combinación de tipos, como longitud, número, ángulo y frecuencia. Las unidades también se pueden mezclar.

.my-element {
    width: calc(100% - 2rem);
}

En este ejemplo, se usa la función calc() para ajustar el ancho de un elemento al 100% de su elemento superior contenedor y, luego, quitar 2rem de ese valor calculado.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

La función calc() se puede anidar dentro de otra función calc(). También puedes pasar propiedades personalizadas en una función var() como parte de una expresión.

min() y max()

Browser Support

• 79
• 79
• 75
• 11.1

Source

La función min() muestra el valor calculado más pequeño de uno o más argumentos pasados. La función max() hace lo contrario: obtiene el valor más alto de uno o más argumentos pasados.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

En este ejemplo, width debe ser el valor más pequeño entre 20vw, que es el 20% del ancho del viewport, y 30rem. La altura debe ser el valor más alto entre 20vh, que es el 20% de la altura del viewport, y 20rem.

Nota: Abordamos unidades como vw y vh en el módulo de unidades de tamaño.

clamp()

Browser Support

• 79
• 79
• 75
• 13.1

Source

La función clamp() toma tres argumentos: el tamaño mínimo, el tamaño ideal y el máximo.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

En este ejemplo, font-size será fluido según el ancho del viewport. La unidad vw se agrega a una unidad rem para ayudar con el zoom de la pantalla, ya que, independientemente del nivel de zoom, una unidad vw tendrá el mismo tamaño. Multiplicar por una unidad rem (según el tamaño de la fuente raíz) le proporciona a la función clamp() un punto de cálculo relativo.

Puedes obtener más información sobre las funciones min(), max() y clamp() en este artículo.

Formas

Las propiedades de CSS clip-path, offset-path y shape-outside usan formas para recortar visualmente tu cuadro o proporcionar una forma para que el contenido fluya.

Existen funciones de forma que se pueden usar con ambas propiedades. Las formas simples, como circle(), ellipse() y inset(), toman argumentos de configuración para cambiar su tamaño. Las formas más complejas, como polygon(), toman pares de valores de ejes X e Y separados por comas para crear formas personalizadas.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Al igual que polygon(), también hay una función path() que toma una regla de relleno SVG como argumento. Esto permite crear formas muy complejas que se pueden dibujar en una herramienta de gráficos, como Illustrator o Inkscape, y, luego, copiarlas en tu CSS.

Transformaciones

Por último, en esta descripción general de las funciones de CSS, se encuentran las funciones de transformación, que sesgan, cambian de tamaño y hasta cambian la profundidad de un elemento. Todas las siguientes funciones se usan con la propiedad transform.

Rotación

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Puedes rotar un elemento con la función rotate(), que rotará un elemento en su eje central. También puedes usar las funciones rotateX(), rotateY() y rotateZ() para rotar un elemento en un eje específico. Puedes pasar unidades de grados, giros y radianes para determinar el nivel de rotación.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

La función rotate3d() toma cuatro argumentos.

Browser Support

• 12
• 12
• 10
• 4

Source

Los primeros 3 argumentos son números que definen las coordenadas X, Y y Z. El cuarto argumento es la rotación que, como las otras funciones de rotación, acepta grados, ángulos y giros.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Escala

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Puedes cambiar el escalamiento de un elemento con transform y la función scale(). La función acepta uno o dos números como valor que determinan una escala positiva o negativa. Si solo defines un argumento numérico, tanto el eje X como el Y se escalarán de la misma manera, y definir ambos es una forma abreviada de X y Y. Al igual que rotate(), existen las funciones scaleX(), scaleY() y scaleZ() para escalar un elemento en un eje específico.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Al igual que la función rotate, hay una función scale3d(). Esto es similar a scale(), pero toma tres argumentos: los factores de escala X, Y y Z.

Traducir

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Las funciones translate() mueven un elemento mientras mantiene su posición en el flujo del documento. Aceptan valores de longitud y porcentaje como argumentos. La función translate() traduce un elemento a lo largo del eje X si se define un argumento y traduce un elemento a lo largo de los ejes X e Y si se definen ambos argumentos.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Al igual que con otras funciones de transformación, puedes usar funciones específicas para un eje específico con translateX, translateY y translateZ. También puedes usar translate3d, que te permite definir la traducción de X, Y y Z en una función.

Skewing

Browser Support

• 1
• 12
• 3.5
• 3.1

Source

Puedes sesgar un elemento con las funciones skew() que aceptan ángulos como argumentos. La función skew() funciona de manera muy similar a translate(). Si solo defines un argumento, solo afectará al eje X y, si defines ambos, afectará al eje X e Y. También puedes usar skewX y skewY para afectar cada eje de forma independiente.

.my-element {
  transform: skew(10deg);
}

Perspectiva

Browser Support

• 36
• 12
• 16
• 9

Source

Por último, puedes usar la propiedad perspective, que forma parte de la familia de propiedades de transformación, para alterar la distancia entre el usuario y el plano Z. Esto da la sensación de distancia y se puede usar para crear una profundidad de campo en tus diseños.

En este ejemplo de David Desandro, de su artículo muy útil, se muestra cómo se puede usar, junto con las propiedades perspective-origin-x y perspective-origin-y, para crear experiencias verdaderamente 3D.

Funciones de animación, gradientes y filtros

CSS también proporciona funciones que te ayudan a animate elementos, aplicarles gradientes y usar filtros gráficos para manipular su apariencia. Para que este módulo sea lo más conciso posible, se abordan en los módulos vinculados. Todas siguen una estructura similar a las funciones que se muestran en este módulo.

Verifica tu comprensión

Pon a prueba tus conocimientos sobre las funciones

¿Con qué caracteres se pueden identificar las funciones de CSS?

[]

Estos caracteres son para arrays en JavaScript.

{}

Estos caracteres unen reglas en CSS.

()

Las funciones usan estos caracteres para unir argumentos.

::

Estos caracteres son para pseudoelementos en CSS.

:

Estos caracteres son para las pseudoclases en CSS.

¿CSS tiene funciones matemáticas integradas?

Verdadero

Hay muchos, y se agregan más a las especificaciones y los navegadores.

Falso

Vuelve a intentarlo.

Una función calc() se puede colocar dentro de otra calc(), como font-size: calc(10px + calc(5px * 3));.

Verdadero

🎉

Falso

Vuelve a intentarlo.

¿Cuáles de las siguientes opciones son funciones de forma de CSS?

ellipse()

🎉

square()

Vuelve a intentarlo.

circle()

🎉

rect()

Vuelve a intentarlo.

inset()

🎉

polygon()

🎉