Funções

Até agora, você conheceu várias funções CSS. No módulo sobre grades, você conheceu minmax() e fit-content(), que ajudam a dimensionar elementos. No módulo cor, você conheceu rgb() e hsl(), que ajudam a definir cores.

Como muitas outras linguagens de programação, o CSS tem muitas funções integradas que podem ser acessadas sempre que necessário.

Cada função do CSS tem uma finalidade específica. Nesta lição, você vai ter uma visão geral de alto nível, para entender melhor onde e como usá-las.

O que é uma função?

Uma função é um código nomeado e independente que conclui uma tarefa específica. Uma função é nomeada para que você possa chamá-la no código e transmitir dados para ela. Isso é conhecido como transmissão de argumentos.

Um diagrama de uma função, conforme descrito acima

Muitas funções do CSS são funções puras, o que significa que, se você transmitir os mesmos argumentos para elas, elas sempre vão retornar o mesmo resultado, independentemente do que está acontecendo no restante do código. Essas funções geralmente são calculadas novamente quando os valores mudam no CSS, semelhante a outros elementos no idioma, como valores em cascata calculados, como currentColor.

No CSS, só é possível usar as funções fornecidas, em vez de escrever as próprias, mas as funções podem ser aninhadas umas nas outras em alguns contextos, mais flexibilidade a elas. Vamos abordar isso com mais detalhes mais adiante neste módulo.

Seletores funcionais

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

Você aprendeu sobre os seletores funcionais no módulo de pseudoclasses, que detalha funções como :is() e :not(). Os argumentos transmitidos para essas funções são seletores CSS, que são avaliados. Se houver uma correspondência com os elementos, o restante da regra de CSS será aplicado a eles.

Propriedades personalizadas e var()

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

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

Uma propriedade personalizada é uma variável que permite tokenizar valores no código CSS. As propriedades personalizadas também são afetadas pela cascata, o que significa que elas podem ser manipuladas ou redefinidas de forma contextual. Uma propriedade personalizada precisa ter dois hifens (--) como prefixo e diferencia maiúsculas de minúsculas.

A função var() usa um argumento obrigatório: a propriedade personalizada que você está tentando retornar como um valor. No snippet acima, a função var() tem --base-color transmitido como um argumento. Se --base-color for definido, var() vai retornar o valor.

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

Também é possível transmitir um valor de declaração substituto para a função var(). Isso significa que, se --base-color não for encontrado, a declaração transmitida será usada, que, no caso deste exemplo, é a cor hotpink.

Funções que retornam um valor

A função var() é apenas uma das funções do CSS que retornam um valor. Funções como attr() e url() seguem uma estrutura semelhante à var(): você transmite um ou mais argumentos e os usa no lado direito da declaração de CSS.

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

A função attr() aqui está usando o conteúdo do atributo href do elemento <a> e o definindo como o content do pseudoelemento ::after. Se o valor do atributo href do elemento <a> fosse alterado, isso seria refletido automaticamente nesse atributo content.

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

A função url() usa um URL de string e é usada para carregar imagens, fontes e conteúdo. Se um URL válido não for transmitido ou se o recurso para o qual o URL aponta não for encontrado, nada será retornado pela função url().

Funções de cor

Você aprendeu tudo sobre funções de cores no módulo cor. Se você ainda não leu, recomendamos que o faça.

Algumas funções de cor disponíveis no CSS são rgb(), rgba(), hsl(), hsla(), hwb(), lab() e lch(). Todos eles têm uma forma semelhante em que os argumentos de configuração são transmitidos e uma cor é retornada.

Expressões matemáticas

Assim como muitas outras linguagens de programação, o CSS oferece funções matemáticas úteis para ajudar em vários tipos de cálculo.

calc()

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 7.

Source

A função calc() usa uma única expressão matemática como parâmetro. Essa expressão matemática pode ser uma mistura de tipos, como comprimento, número, ângulo e frequência. As unidades também podem ser misturadas.

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

Neste exemplo, a função calc() está sendo usada para dimensionar a largura de um elemento como 100% do elemento pai que o contém e, em seguida, removendo 2rem desse valor calculado.

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

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

A função calc() pode ser aninhada dentro de outra função calc(). Também é possível transmitir propriedades personalizadas em uma função var() como parte de uma expressão.

min() e max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

A função min() retorna o menor valor calculado de um ou mais argumentos transmitidos. A função max() faz o oposto: extrai o maior valor de um ou mais argumentos transmitidos.

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

Neste exemplo, a largura precisa ser o menor valor entre 20vw, que é 20% da largura da janela, e 30rem. A altura precisa ser o maior valor entre 20vh, que é 20% da altura da janela, e 20rem.

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

A função clamp() usa três argumentos: o tamanho mínimo, o tamanho ideal e o máximo.

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

Neste exemplo, o font-size será fluido com base na largura da janela de visualização. A unidade vw é adicionada a uma unidade rem para ajudar no zoom da tela, porque, independentemente do nível de zoom, uma unidade vw vai ter o mesmo tamanho. A multiplicação por uma unidade rem, com base no tamanho da fonte raiz, fornece à função clamp() um ponto de cálculo relativo.

Saiba mais sobre as funções min(), max() e clamp() neste artigo.

Formas

As propriedades clip-path, offset-path e shape-outside do CSS usam formas para cortar visualmente a caixa ou fornecer uma forma para o conteúdo fluir.

Há funções de forma que podem ser usadas com essas duas propriedades. Formas simples, como circle(), ellipse() e inset() usam argumentos de configuração para definir o tamanho. Formas mais complexas, como polygon(), usam pares separados por vírgulas de valores dos eixos X e Y para criar 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%);
}

Assim como polygon(), há também uma função path() que usa uma regra de preenchimento SVG como argumento. Isso permite formas altamente complexas que podem ser desenhadas em uma ferramenta gráfica, como o Illustrator ou o Inkscape, e depois copiadas para o CSS.

Transformações

Por fim, nesta visão geral das funções CSS, estão as funções de transformação, que distorcem, redimensionam e até mudam a profundidade de um elemento. Todas as funções a seguir são usadas com a propriedade transform.

Rotação

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

É possível girar um elemento usando a função rotate(), que gira um elemento no eixo central. Também é possível usar as funções rotateX(), rotateY() e rotateZ() para girar um elemento em um eixo específico. É possível transmitir unidades de grau, volta e radiano para determinar o nível de rotação.

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

A função rotate3d() usa quatro argumentos.

Browser Support

  • Chrome: 12.
  • Edge: 12.
  • Firefox: 10.
  • Safari: 4.

Source

Os três primeiros argumentos são números, que definem as coordenadas X, Y e Z. O quarto argumento é a rotação que, como as outras funções de rotação, aceita graus, ângulos e voltas.

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

Escala

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

É possível mudar a escala de um elemento com transform e a função scale(). A função aceita um ou dois números como um valor que determina uma escala positiva ou negativa. Se você definir apenas um argumento numérico, os eixos X e Y serão dimensionados da mesma forma, e definir ambos é uma abreviação para X e Y. Assim como rotate(), existem as funções scaleX(), scaleY() e scaleZ() para dimensionar um elemento em um eixo específico.

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

Assim como a função rotate, há uma função scale3d(). Ela é semelhante a scale(), mas recebe três argumentos: o fator de escalonamento X, Y e Z.

Traduzir

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

As funções translate() movem um elemento enquanto ele mantém a posição no fluxo do documento. Eles aceitam valores de comprimento e porcentagem como argumentos. A função translate() translada um elemento ao longo do eixo X se um argumento for definido e translada um elemento ao longo dos eixos X e Y se ambos os argumentos forem definidos.

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

Assim como em outras funções de transformação, é possível usar funções específicas para um eixo específico, usando translateX, translateY e translateZ. Também é possível usar translate3d, que permite definir a tradução X, Y e Z em uma função.

Skewing

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

É possível distorcer um elemento usando as funções skew(), que aceitam ângulos como argumentos. A função skew() funciona de maneira muito semelhante à translate(). Se você definir apenas um argumento, ele afetará apenas o eixo X. Se você definir os dois, ele afetará os eixos X e Y. Também é possível usar skewX e skewY para afetar cada eixo de forma independente.

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

Perspectiva

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Por fim, você pode usar a propriedade perspective, que faz parte da família de transformação de propriedades, para alterar a distância entre o usuário e o plano Z. Isso dá a sensação de distância e pode ser usado para criar uma profundidade de campo nos seus designs.

Este exemplo de David Desandro, do artigo muito útil dele, mostra como ele pode ser usado, com as propriedades perspective-origin-x e perspective-origin-y para criar experiências verdadeiramente em 3D.

Funções de animação, gradientes e filtros

O CSS também oferece funções que ajudam a animate elementos, aplicar gradientes a eles e usar filtros gráficos para manipular a aparência deles. Para manter este módulo o mais conciso possível, ele é abordado nos módulos vinculados. Todas elas seguem uma estrutura semelhante às funções demonstradas neste módulo.

Teste seu conhecimento

Testar seus conhecimentos sobre funções

Quais caracteres identificam as funções CSS?

{}
:
::
[]
()

O CSS tem funções matemáticas integradas?

Falso
Verdadeiro

Uma função calc() pode ser colocada dentro de outra calc(), como font-size: calc(10px + calc(5px * 3));

Falso
Verdadeiro

Quais das opções a seguir são funções de forma CSS?

circle()
rect()
square()
polygon()
inset()
ellipse()