{"id":4005,"date":"2018-07-17T15:14:53","date_gmt":"2018-07-17T18:14:53","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=4005"},"modified":"2018-12-04T09:47:12","modified_gmt":"2018-12-04T11:47:12","slug":"css-4-recursos-incriveis-que-voce-ja-pode-usar","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/css-4-recursos-incriveis-que-voce-ja-pode-usar\/","title":{"rendered":"CSS: 4 recursos incr\u00edveis que voc\u00ea j\u00e1 pode usar!"},"content":{"rendered":"<p>Frequentemente nos deparamos com efeitos, transi\u00e7\u00f5es, recursos e muita coisa maner\u00edssima e \u00fatil sendo desenvolvida com CSS, por\u00e9m, muitas vezes, automaticamente nosso primeiro pensamento \u00e9:<\/p>\n<p class=\"font-italic font-bold\">&#8211; \u201cAhh, mas isso a\u00ed deve funcionar s\u00f3 na \u00faltima vers\u00e3o do Chrome&#8230;\u201d<\/p>\n<p>Sim, antigamente isto era uma verdade, mas ultimamente vou lhe dizer que nem tanto. Eu e outros muitos desenvolvedores que v\u00eam de \u00e9pocas obscuras do desenvolvimento, na qual t\u00ednhamos que construir sites pra rodar perfeitamente no IE 6, podem compartilhar deste sentimento de \u201cauto sabotagem\u201d. Mas os tempos mudaram e, na minha vis\u00e3o, hoje tudo est\u00e1 bem mais prazeroso e tranquilo de se fazer, acredite.<\/p>\n<p>Ent\u00e3o, a ideia deste artigo \u00e9 trazer recursos CSS \u00fateis e que possuam um bom suporte cross-browser e, portanto, uma maior probabilidade de uso nos seus projetos. Alguns recursos citados abaixo podem at\u00e9 ser novidade para alguns, mas lembrem-se: n\u00e3o h\u00e1 nenhum recurso novo por aqui, at\u00e9 porque se tivesse, fugiria um pouco da proposta do artigo, pois ele provavelmente seria pouco compat\u00edvel. Vamos l\u00e1!<\/p>\n<p><b>Falaremos sobre:<\/b><\/p>\n<ul>\n<li><a class=\"js-anchor\" href=\"#css-variaveis-nativas\">Vari\u00e1veis nativas<\/a><\/li>\n<li><a class=\"js-anchor\" href=\"#css-supports\">A regra @supports<\/a><\/li>\n<li><a class=\"js-anchor\" href=\"#css-grid-layout\">CSS Grid<\/a><\/li>\n<li><a class=\"js-anchor\" href=\"#css-calc\">A fun\u00e7\u00e3o calc()<\/a><\/li>\n<\/ul>\n<h2 id=\"css-variaveis-nativas\">Vari\u00e1veis nativas<\/h2>\n<p>Quando falamos em vari\u00e1veis, para muitos, \u00e9 bem comum pensarmos em linguagens como Javascript, Ruby, PHP e outras, pois armazenar um valor e utiliz\u00e1-lo em diversos lugares \u00e9 um recurso bem comum e tamb\u00e9m extremamente \u00fatil. Pois bem, saiba que este recurso tamb\u00e9m est\u00e1 dispon\u00edvel no CSS, sim \\o\/.<\/p>\n<p>Em 2015 foi escrito o release candidate desta feature pela W3C (<a href=\"https:\/\/www.w3.org\/TR\/css-variables\/\" target=\"_blank\" rel=\"nofollow noopener\">voc\u00ea pode ver aqui<\/a>). Desde ent\u00e3o, o seu suporte em rela\u00e7\u00e3o aos browsers melhorou constantemente, ao ponto que nos permite implement\u00e1-los em nossos pr\u00f3ximos projetos. Maneiro, n\u00e9?<\/p>\n<p><a href=\"https:\/\/giphy.com\/gifs\/retro-thumbs-up-XreQmk7ETCak0\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/media3.giphy.com\/media\/XreQmk7ETCak0\/giphy.gif\" alt=\"Great Job Reaction GIF - Find &amp; Share on GIPHY\" width=\"320\" height=\"240\" \/><\/a><\/p>\n<p class=\"font-italic font-bold\">&#8211; \u201cEii, eu j\u00e1 uso vari\u00e1veis no meu CSS h\u00e1 tempos. Utilizo Sass e todas as suas vantagens em todos os meus projetos.\u201d<\/p>\n<p>Bem, pr\u00e9-processadores CSS como Sass, Less, Stylus e todo seu repert\u00f3rio de funcionalidades com as vari\u00e1veis, mixins, placeholders, imports, etc, utilizados com sabedoria trazem \u00f3timos benef\u00edcios, mas seria lindo n\u00e3o precisarmos deles, n\u00e3o seria!?<\/p>\n<p>A tend\u00eancia \u00e9 que, naturalmente, estas outras tantas funcionalidades sejam implementadas nativamente, mas se tratando especificamente de vari\u00e1veis, devemos lembrar que uma grande vantagem das vari\u00e1veis nativas do CSS \u00e9 que elas se mant\u00eam dispon\u00edveis no browser e podem ser usadas posteriormente a qualquer momento via CSS, JS, diferente do CSS gerado via algum pr\u00e9-processador.<\/p>\n<h4>Declarando vari\u00e1veis<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">:root {\r\n  --color-primary: #557cf2;\r\n  --color-accent: #f26b7a;\r\n  --svg-width: 200px;\r\n  --svg-height: 200px;\r\n}<\/code><\/pre>\n<p>Neste exemplo, notem que as vari\u00e1veis est\u00e3o declaradas dentro do seletor <code>:root<\/code>, que \u00e9 a raiz do documento, ou seja, a pr\u00f3pria p\u00e1gina. Sendo assim as vari\u00e1veis declaradas ali podem ser atribu\u00eddas em qualquer elemento da p\u00e1gina.<\/p>\n<h4>Utilizando as vari\u00e1veis<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">svg {\r\n  height: var(--svg-height);\r\n  width: var(--svg-width);\r\n}<\/code><\/pre>\n<p>Bem simples!<\/p>\n<h4>Voila!<\/h4>\n<p class=\"codepen\" data-height=\"350\" data-theme-id=\"0\" data-slug-hash=\"eKKjLO\" data-default-tab=\"css,result\" data-user=\"pixelcriativo\" data-embed-version=\"2\" data-pen-title=\"CSS Variables \/ example\">See the Pen <a href=\"https:\/\/codepen.io\/pixelcriativo\/pen\/eKKjLO\/\">CSS Variables \/ example<\/a> by Adriano Costa (<a href=\"https:\/\/codepen.io\/pixelcriativo\">@pixelcriativo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h3>Suporte dos browsers<\/h3>\n<p>Funciona em praticamente todos os browsers (\u00f3bvio que o IE n\u00e3o est\u00e1 nesta lista, mas ningu\u00e9m d\u00e1 bola pra ele mesmo, hehe &lt;\/ piada do IE&gt;)<br \/>\n<a href=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-variables.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4008\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-variables.png\" alt=\"\" width=\"1272\" height=\"559\" \/><\/a><\/p>\n<hr \/>\n<h2 id=\"css-supports\">A regra @supports (feature queries)<\/h2>\n<p>Antes de explicar o que \u00e9 este recurso, \u00e9 interessante darmos um passo para tr\u00e1s e estarmos por dentro destas duas abordagens, que provavelmente voc\u00ea j\u00e1 deve ter visto alguma vez na vida:<\/p>\n<ul>\n<li><span class=\"font-bold\">Graceful Degradation:<\/span> na Graceful Degradation (degrada\u00e7\u00e3o suave) desenvolve-se com a melhor <a href=\"https:\/\/blog.umbler.com\/br\/avancos-em-ia-generativa\/\">tecnologia<\/a> levando em considera\u00e7\u00e3o o browser mais moderno, melhores funcionalidades, plugins, entre outros. Ou seja, entrega-se a melhor experi\u00eancia para os usu\u00e1rios que podem usufruir dela e, posteriormente, preocupa-se em entregar as mesmas funcionalidades em browser mais antigos, mesmo que de forma mais b\u00e1sica, por\u00e9m sem comprometer a experi\u00eancia.<\/li>\n<li><span class=\"font-bold\">Progressive Enhancement:<\/span> o Progressive Enhancement (melhoramento progressivo) se preocupa em desenvolver um projeto para funcionar em todos os browsers e suas vers\u00f5es poss\u00edveis para que numa etapa seguinte, ap\u00f3s a experi\u00eancia nestes ambientes estiver satisfat\u00f3ria, trabalhar no melhoramento da experi\u00eancia para os browsers mais modernos.<\/li>\n<\/ul>\n<p>Portanto, s\u00e3o dois caminhos a trilhar e, sobre qual n\u00f3s vamos percorrer, vai depender do escopo do projeto no qual estamos trabalhando.<\/p>\n<p>Inclusive, por muito tempo se usou &#8211; e ainda se usa &#8211; a conhecida biblioteca Javascript Modernizr para que possamos consultar se determinado recurso est\u00e1 dispon\u00edvel no browser e assim ter um maior controle da aplica\u00e7\u00e3o que o usu\u00e1rio est\u00e1 acessando.<\/p>\n<p class=\"font-italic font-bold\">&#8211; \u201cE por que eu devo saber disso?\u201d<\/p>\n<p>Por dois motivos: Primeiro \u00e9 porque isso vai de encontro com essa feature do CSS, a <code>@supports<\/code>. Segundo motivo \u00e9 que, c\u00e1 entre n\u00f3s, conhecimento nunca \u00e9 o bastante n\u00e9?!<\/p>\n<h3>O que faz a regra @supports?<\/h3>\n<p>Atrav\u00e9s dele \u00e9 poss\u00edvel consultar quais propriedades de estilo s\u00e3o suportadas pelo browser que est\u00e1 exibindo sua aplica\u00e7\u00e3o. Ent\u00e3o torna-se uma boa alternativa aos polyfills de terceiros para detec\u00e7\u00e3o de recursos, como o <a href=\"https:\/\/modernizr.com\/\" target=\"_blank\" rel=\"nofollow noopener\">Modernizr<\/a>.<\/p>\n<h3>Show me the code!<\/h3>\n<h4>Declara\u00e7\u00e3o simples<\/h4>\n<p>Exemplo de verifica\u00e7\u00e3o mais b\u00e1sica (lembre-se de informar propriedade e valor):<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">@supports (filter: grayscale(1)) {\r\n  img {\r\n    filter: grayscale(1);\r\n    \/* ... *\/\r\n  }\r\n}<\/code><\/pre>\n<h4>Declara\u00e7\u00e3o com \u201cnot\u201d<\/h4>\n<p>Al\u00e9m de verificar se um recurso \u00e9 suportado, podemos utilizar o operador <code>not<\/code> e verificar qual recurso <b>n\u00e3o \u00e9 suportado<\/b>.<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">@supports not (filter: grayscale(1)) {\r\n  img {\r\n    filter: invert(1);\r\n    \/* ... *\/\r\n  }\r\n}<\/code><\/pre>\n<h4>Declara\u00e7\u00e3o com m\u00faltiplas condi\u00e7\u00f5es<\/h4>\n<p>Tamb\u00e9m podemos fazer verifica\u00e7\u00f5es de recursos utilizando os operadores <code>and<\/code>e <code>or<\/code>.<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-scss\">@supports ((prop1: val1) or\r\n          (-webkit-prop1: val1)) and\r\n          (prop2: val2) {\r\n  element {\r\n    -webkit-prop1: val1;\r\n    prop1: val1;\r\n    prop2: val2;\r\n    \/* ... *\/\r\n  }\r\n}<\/code><\/pre>\n<h3>Suporte dos browsers<\/h3>\n<p>Suporte bem bacana e adivinha quem ainda n\u00e3o suporta?! Ele mesmo, nosso querid\u00edssimo amigo IE \ud83d\ude09<br \/>\n<a href=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-supports.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4007\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-supports.png\" alt=\"\" width=\"1272\" height=\"615\" \/><\/a><\/p>\n<hr \/>\n<h2 id=\"css-grid-layout\">CSS Grid<\/h2>\n<p>Este \u00e9 um dos itens mais legais desta lista e que muito provavelmente voc\u00ea j\u00e1 deve ter visto por a\u00ed, mas me diz <b>voc\u00ea j\u00e1 est\u00e1 estruturando seus layouts com CSS Grid? Hein, hein?<\/b><\/p>\n<figure id=\"attachment_4124\" aria-describedby=\"caption-attachment-4124\" style=\"width: 350px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4124 size-full\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/rex-sad.gif\" alt=\"\" width=\"350\" height=\"420\" \/><figcaption id=\"caption-attachment-4124\" class=\"wp-caption-text\">Tudo bem se ainda n\u00e3o estiver utilizando, codificar com bra\u00e7os t\u00e3o curtos deve ser complicado mesmo xD<\/figcaption><\/figure>\n<h3>Em meados do s\u00e9culo XX&#8230;<\/h3>\n<p>Ok, estou sendo um pouco exagerado, mas antigamente a cria\u00e7\u00e3o dos layouts se dava atrav\u00e9s de tabelas de uma forma bem <em>gambiarrenta<\/em>, posteriormente come\u00e7amos a utilizar os floats, divs, lembram do clearfix?! Oh c\u00e9us, t\u00ednhamos muitas limita\u00e7\u00f5es! Eis surge o Flexbox nos dando mais op\u00e7\u00f5es para posicionamento e sendo muito amado por todos, mas ele ainda ainda n\u00e3o resolve todos os problemas de layout. Por fim, temos um sistema de layout muito poderoso e flex\u00edvel a nossa disposi\u00e7\u00e3o, apresento-lhes o CSS Grid! \\o\/<\/p>\n<h3>Sobre o CSS Grid<\/h3>\n<p>Basicamente com CSS Grid \u00e9 poss\u00edvel dimensionar e posicionar elementos dentro de um sistema de grade de maneira inteligente. \u00c9 indicado para estruturar elementos de n\u00edvel mais macro, containers como: cabe\u00e7alhos, rodap\u00e9s, sidebar, entre outros.<\/p>\n<p>Uma d\u00favida que j\u00e1 presenciei \u00e9 em rela\u00e7\u00e3o ao Flexbox vs CSS Grid, algo como:<\/p>\n<p class=\"font-italic font-bold\">&#8211; Qual a diferen\u00e7a entre os dois? Eu realmente preciso aprender CSS Grid?<\/p>\n<p>Sempre \u00e9 bom aprender e dependendo do que voc\u00ea deseja fazer, sim, precisa! Pois eles s\u00e3o parecidos, mas \u00f3bvio que n\u00e3o s\u00e3o iguais e lembre-se que o CSS Grid, mesmo que mais recente, n\u00e3o tem o objetivo de ocupar o espa\u00e7o do Flexbox.<\/p>\n<p>O uso de Flexbox \u00e9 recomendado quando tu precisa posicionar algo em linha, ou seja, para layout unidimensionais, ent\u00e3o alinhar elementos, como por exemplo os links de um menu, \u00e9 com ele mesmo. Do outro lado temos o CSS Grid que \u00e9 destinado a criar layouts bidimensionais, o que significa que podemos lidar com colunas e linhas. Ele \u00e9 ideal para definir a estrutura (header, sidebar, footer) de uma p\u00e1gina, por exemplo. Sua documenta\u00e7\u00e3o possui itens muito \u00fateis como, minmax(), auto layout, repeat(), auto-fill, entre outros.<\/p>\n<p>Muito se confunde entre os dois, pois h\u00e1 situa\u00e7\u00f5es que tanto o Flexbox, quanto o CSS Grid podem ser capazes de solucionar, mas antes de meter a m\u00e3o na massa devemos sempre nos perguntar: neste contexto, com qual deles faz mais sentido eu trabalhar? Quem sabe os dois? Lindo! s2<\/p>\n<h3>Vamos dar uma espiada&#8230;<\/h3>\n<p>Irei abordar alguns exemplos b\u00e1sicos que n\u00e3o passam nem perto de mostrar o qu\u00e3o poderoso \u00e9 este recurso de layout, mas talvez conven\u00e7a alguns a dar uma aten\u00e7\u00e3o maior, caso ainda n\u00e3o estejam utilizando.<\/p>\n<h4>B\u00e1sico do b\u00e1sico<\/h4>\n<p>Abaixo temos uma estrutura simples com 6 elementos associados a um elemento pai com a classe <code>.container<\/code>.<\/p>\n<p class=\"codepen\" data-height=\"350\" data-theme-id=\"0\" data-slug-hash=\"vrvBVr\" data-default-tab=\"css,result\" data-user=\"pixelcriativo\" data-embed-version=\"2\" data-pen-title=\"CSS Grid \/ example 1\">See the Pen <a href=\"https:\/\/codepen.io\/pixelcriativo\/pen\/vrvBVr\/\">CSS Grid \/ example 1<\/a> by Adriano Costa (<a href=\"https:\/\/codepen.io\/pixelcriativo\">@pixelcriativo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h4>Entendendo algumas partes<\/h4>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.container {\r\n  display: grid;\r\n  grid-template-columns: 100px 100px 100px;\r\n  grid-template-rows: 100px 100px;\r\n  grid-gap: 1rem;\r\n}<\/code><\/pre>\n<p>Conforme podemos ver, adicionamos 3 valores de 100px para <code>grid-template-columns<\/code> e portanto obtemos 3 colunas. Abaixo com os valores de <code>grid-template-row<\/code> (100px 100px) temos 2 linhas. Total de 6 elementos com largura e altura em 100px. Na \u00faltima linha de c\u00f3digo definimos o <code>grid-gap<\/code>, ele nos possibilita controlar o espa\u00e7amento entre os blocos da grid.<\/p>\n<h4>Variando um pouquinho<\/h4>\n<p>Criamos uma pequena varia\u00e7\u00e3o abaixo um pouco mais interessante:<\/p>\n<p class=\"codepen\" data-height=\"350\" data-theme-id=\"0\" data-slug-hash=\"OEaJvN\" data-default-tab=\"css,result\" data-user=\"pixelcriativo\" data-embed-version=\"2\" data-pen-title=\"CSS Grid \/ example 2\">See the Pen <a href=\"https:\/\/codepen.io\/pixelcriativo\/pen\/OEaJvN\/\">CSS Grid \/ example 2<\/a> by Adriano Costa (<a href=\"https:\/\/codepen.io\/pixelcriativo\">@pixelcriativo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\nAdicionamos mais um item (100px) no <code>grid-template-rows<\/code> e agora temos 3 linhas tamb\u00e9m.<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.container {\r\n  display: grid;\r\n  grid-template-columns: 100px 100px 100px;\r\n  grid-template-rows: 100px 100px 100px;\r\n  grid-gap: 1rem;\r\n}<\/code><\/pre>\n<p>Foram adicionadas as classes: <code>.item2<\/code>, <code>.item3<\/code> e <code>.item6<\/code> para que possamos adicionar alguns estilo nelas. Vamos analisar apenas esta classe abaixo, pois as demais seguem a mesma l\u00f3gica.<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.item2 {\r\n   grid-column-start: 2;\r\n   grid-column-end: 4;\r\n}<\/code><\/pre>\n<p>Determinamos que o <code>.item2<\/code> inicia na coluna 2 e termina na coluna 4. Agora compare este bloco e os demais no exemplo ali acima, faz sentido pra voc\u00ea?<\/p>\n<h4>Ainda n\u00e3o?<\/h4>\n<p>\u00c9 poss\u00edvel que voc\u00ea esteja com dificuldade em entender as linhas da grade (pelo menos eu me perguntei isso na \u00e9poca). Por exemplo, por que a <code>grid-column-end: 4<\/code> se na imagem parece ter apenas 3 colunas?!<\/p>\n<p>Se essa for a d\u00favida, essa imagem vai te ajudar a clarear as ideias:<\/p>\n<figure id=\"attachment_4084\" aria-describedby=\"caption-attachment-4084\" style=\"width: 564px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4084 size-full\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/grid-lines.png\" alt=\"\" width=\"564\" height=\"562\" \/><figcaption id=\"caption-attachment-4084\" class=\"wp-caption-text\">Observe que agora parece fazer mais sentido \ud83d\ude09<\/figcaption><\/figure>\n<p>Bom, assim como comentei ali no in\u00edcio, esta \u00e9 apenas uma breve introdu\u00e7\u00e3o ao CSS Grid, que \u00e9 um recurso fant\u00e1stico e h\u00e1 muito, mas muito conte\u00fado sobre o tema espalhado por a\u00ed. Abaixo coloquei 3 refer\u00eancias que julgo ser muito boas para o seu aprendizado:<\/p>\n<h4>Links e refer\u00eancias<\/h4>\n<ul>\n<li><a href=\"https:\/\/learncssgrid.com\/\" rel=\"nofollow\">Learn CSS Grid \/ by @jonsuh<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" rel=\"nofollow\">A Complete Guide to Grid \/ CSS Tricks<\/a><\/li>\n<li><a href=\"https:\/\/scrimba.com\/g\/gR8PTE\" rel=\"nofollow\">Learn CSS Grid for free \/ Scrimba<\/a><\/li>\n<\/ul>\n<h3>Suporte dos browsers<\/h3>\n<p><a href=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-grid-layout.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4012\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-grid-layout.png\" alt=\"\" width=\"1272\" height=\"683\" \/><\/a><\/p>\n<hr \/>\n<h2 id=\"css-calc\">A fun\u00e7\u00e3o calc()<\/h2>\n<p>\u00c9 uma fun\u00e7\u00e3o poderosa e bem interessante na qual se consegue definir valores CSS atrav\u00e9s de express\u00f5es matem\u00e1ticas. Algo muito bacana \u00e9 que no seu uso o \u00fanico limite \u00e9 sua pr\u00f3pria criatividade, pois ela pode ser muito \u00fatil em cen\u00e1rios variados.<\/p>\n<p>Os operadores matem\u00e1ticos suportados s\u00e3o: + (soma), \u2013 (subtra\u00e7\u00e3o), * (multiplica\u00e7\u00e3o) e \/ (divis\u00e3o). Abaixo temos um exemplo de uso da fun\u00e7\u00e3o calc():<\/p>\n<h3>Show me the code!<\/h3>\n<p class=\"codepen\" data-height=\"350\" data-theme-id=\"0\" data-slug-hash=\"jKKjeX\" data-default-tab=\"css,result\" data-user=\"pixelcriativo\" data-embed-version=\"2\" data-pen-title=\"CSS Calc() \/ example\">See the Pen <a href=\"https:\/\/codepen.io\/pixelcriativo\/pen\/jKKjeX\/\">CSS Calc() \/ example<\/a> by Adriano Costa (<a href=\"https:\/\/codepen.io\/pixelcriativo\">@pixelcriativo<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\nA grande jogada est\u00e1 aqui:<\/p>\n<pre class=\"code-highlighter line-numbers theme-dark\"><code class=\"language-css\">.main {\r\n  height: calc( 100% - 100px );\r\n}<\/code><\/pre>\n<p class=\"mt-3\">Neste exemplo, somando a altura dos elementos <code>.header<\/code> (50px) + <code>.footer<\/code> (50px), temos um total de 100px. Para setar uma altura ao conte\u00fado principal <code>.main<\/code> sem levar em considera\u00e7\u00e3o o header e o footer devemos apenas subtrair estes 100px (resultado da soma) por 100%.<\/p>\n<p>Maneiro n\u00e9? Bom, este \u00e9 apenas um caso de uso da fun\u00e7\u00e3o calc(), mas podemos implement\u00e1-la em diversos contextos.<\/p>\n<h3>Suporte dos browsers<\/h3>\n<p><a href=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-calc.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4010\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/caniuse-css-calc.png\" alt=\"\" width=\"1272\" height=\"638\" \/><\/a><\/p>\n<hr \/>\n<h2>Conclus\u00e3o<\/h2>\n<p>Por mais tentador que seja, a ideia deste artigo n\u00e3o \u00e9 esmiu\u00e7ar cada um dos recursos mencionados, mas sim mostrar que cada um deles j\u00e1 roda consideravelmente bem nos principais browsers do mercado. Espero que tenha sido \u00fatil. \ud83d\ude09<\/p>\n<p class=\"font-italic font-bold\">E voc\u00ea, j\u00e1 conhecia todos estes recursos? Adicionaria algum nesta lista? Ent\u00e3o, n\u00e3o deixe de comentar! o\/<\/p>\n<p>At\u00e9 a pr\u00f3xima!<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-4121\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2018\/07\/rascals-goodbye.gif\" alt=\"\" width=\"420\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Frequentemente nos deparamos com efeitos, transi\u00e7\u00f5es, recursos e muita coisa maner\u00edssima e \u00fatil sendo desenvolvida com CSS, por\u00e9m, muitas vezes, automaticamente nosso primeiro pensamento \u00e9: &#8211; \u201cAhh, mas isso a\u00ed deve funcionar s\u00f3 na \u00faltima vers\u00e3o do Chrome&#8230;\u201d Sim, antigamente isto era uma verdade, mas ultimamente vou lhe dizer que nem tanto. Eu e outros [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[355,356,213],"class_list":["post-4005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","tag-cross-browser","tag-css","tag-front-end"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/4005"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=4005"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/4005\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5028"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=4005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=4005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=4005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}