El podcast de CSS (2020): Funciones
Hasta ahora, en este curso, estuviste expuesto a varias funciones de CSS.
En el módulo de cuadrícula, te presentamos minmax() y fit-content(), que te ayudan a determinar el tamaño de los elementos.
En el módulo color, te presentamos 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 siempre que 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 brindará una mejor comprensión de dónde y cómo usarlas.
¿Qué es una función?
Una función es un fragmento de código independiente y con nombre que completa una tarea específica. Se asigna un nombre a una función para que puedas llamarla dentro de tu código y pasar datos a la función. 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, sin importar lo que suceda en el resto de tu código.
A menudo, estas funciones se volverán a calcular a medida que los valores cambien en tu CSS, de manera similar a otros elementos en el lenguaje, como los valores calculados en cascada como currentColor.
En CSS, solo puedes usar las funciones proporcionadas, en lugar de escribir tus propias, pero las funciones se pueden anidar entre sí en algunos contextos, lo que les da más flexibilidad. Veremos eso en detalle más adelante en el módulo.
Selectores funcionales
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Aprendiste sobre los selectores funcionales en el módulo de seudoclases, 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 algunos elementos, se les aplicará el resto de la regla de CSS.
Propiedades personalizadas y var()
:root {
--base-color: #ff00ff;
}
.my-element {
background: var(--base-color);
}
Una propiedad personalizada es una variable que te permite asignar valores de token a los valores de 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 un prefijo con dos guiones (--) y distingue mayúsculas de minúsculas.
La función var() toma un argumento obligatorio: la propiedad personalizada que intentas mostrar como un valor.
En el fragmento anterior, la función var() tiene --base-color pasado como argumento.
Si se definió --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 devuelven un valor
La función var() es solo una de las funciones de CSS que devuelve 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);
}
La función attr() toma el contenido del atributo href del elemento <a> y lo configura como el content del seudoelemento ::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 todavía no leíste este, te recomendamos que lo hagas.
Algunas funciones de color disponibles en CSS son rgb(), rgba(), hsl(), hsla(), hwb(), lab() y lch().
Todos ellos tienen un formato similar, es decir, se pasan argumentos de configuración y se devuelve 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()
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 combinar.
.my-element {
width: calc(100% - 2rem);
}
En este ejemplo, la función calc() se usa para ajustar el tamaño del ancho de un elemento como el 100% del elemento superior que lo contiene y, luego, quita 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()
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 los argumentos que se pasaron.
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
En este ejemplo, el ancho 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 equivale al 20% de la altura de la ventana de visualización, y 20rem.
clamp()
La función clamp() toma tres argumentos: el tamaño mínimo, el 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.
La multiplicación por una unidad rem, según el tamaño de la fuente raíz, proporciona la función clamp() con 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 fluya el contenido.
Hay funciones de forma que se pueden usar con ambas propiedades.
Las formas simples, como circle(), ellipse() y inset(), toman argumentos de configuración para ajustar su tamaño.
Las formas más complejas, como polygon(), toman pares de valores del eje 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 de SVG como argumento.
Esto permite formas muy complejas que se pueden dibujar en una herramienta de gráficos, como Illustrator o Inkscape, y luego copiarse en tu CSS.
Transformaciones
Por último, en esta descripción general de las funciones CSS, están las funciones de transformación, que sesgan, cambian el tamaño y hasta cambian la profundidad de un elemento.
Las siguientes funciones se usan con la propiedad transform.
Rotación
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.
Los primeros 3 argumentos son números, que definen las coordenadas X, Y y Z. El cuarto argumento es la rotación que, al igual que las otras funciones de rotación, acepta grados, ángulos y giros.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
escalabilidad
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 un escalamiento positivo o negativo.
Si solo defines un argumento numérico, tanto el eje X como el eje Y se escalarán de la misma manera y definir ambos es una abreviatura de X e Y.
Al igual que rotate(), hay funciones scaleX(), scaleY() y scaleZ() para escalar un elemento en un eje específico.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
También hay una función scale3d(), como la rotate.
Es similar a scale(), pero toma tres argumentos: el factor de escala X, Y y Z.
Traductor
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);
}
Puedes usar funciones específicas para un eje específico, al igual que con otras funciones de transformación, mediante translateX, translateY y translateZ.
También puedes usar translate3d, que te permite definir la traslación de X, Y y Z en una función.
Desviación
Puedes sesgar un elemento con las funciones skew() que aceptan los ángulos como argumentos.
La función skew() funciona de manera muy similar a translate().
Si solo defines un argumento, solo afectará el eje X y, si defines ambos, afectará al eje X e Y.
También puedes usar skewX y skewY para modificar cada eje de forma independiente.
.my-element {
transform: skew(10deg);
}
Perspectiva
Por último, puedes usar la propiedad perspective, que forma parte de la familia de propiedades de transformación, para modificar la distancia entre el usuario y el plano Z.
Esto brinda la sensación de distancia y se puede utilizar 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 realmente 3D.
Funciones de animación, gradientes y filtros
CSS también proporciona funciones que te ayudan a animar 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. Todos siguen una estructura similar a las funciones que se mostraron en este módulo.
Verifica tus conocimientos
Pon a prueba tu conocimiento sobre funciones
¿A través de qué caracteres se pueden identificar las funciones de CSS?
[]{}():::¿CSS tiene funciones matemáticas integradas?
Se puede colocar una función calc() dentro de otra calc(), como font-size: calc(10px + calc(5px * 3));
¿Cuáles de las siguientes son funciones de forma CSS?
ellipse()square()circle()rect()inset()polygon()