{"id":456,"date":"2017-03-20T17:15:59","date_gmt":"2017-03-20T20:15:59","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=456"},"modified":"2017-04-27T12:04:05","modified_gmt":"2017-04-27T15:04:05","slug":"como-usar-a-funcao-calc-de-css","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/como-usar-a-funcao-calc-de-css\/","title":{"rendered":"Como usar a fun\u00e7\u00e3o Calc de CSS"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/TZgmjIBmdXc?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Uma das novas fun\u00e7\u00f5es de CSS que mais utilizo \u00e9 o calc, para bom entendedor de CSS o simples c\u00f3digo abaixo ir\u00e1 te revelar o poder dessa fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-css\">\n.grid-6 {\n margin: 0 10px;\n width: calc(50% - 20px);\n}\n<\/code><\/pre>\n<p>N\u00e3o entendeu o que tem de t\u00e3o bom ainda? Deixa eu explicar:<\/p>\n<p>Imagina que voc\u00ea possui um container com 2 elementos, cada um deles ocupando metade desse container. Ou seja, voc\u00ea deseja que ambos ocupem cerca de 50%, um na esquerda e outro na direita.<\/p>\n<p>Por\u00e9m voc\u00ea n\u00e3o quer que eles fiquem grudados um no outro, voc\u00ea deseja uma certa margem para dar um espa\u00e7o para os elementos respirarem. Ai que surge o problema, pois utilizar margens em porcentagem, nem sempre criam um espa\u00e7amento t\u00e3o agrad\u00e1vel. Pois caso o container (que estou assumindo ser fluido, assim como elementos dentro dele, ou seja aumentam e diminuem de acordo com o tamanho da tela) diminua muito, as margens podem ficar muito pequenas e vice-versa.<\/p>\n<p>Geralmente as margens devem se comunicar com a tipografia do site e isso se perde caso voc\u00ea utilize a mesma em porcentagem.<\/p>\n<p>Com isso surge a necessidade de se utilizar um valor fixo como o Pixel ou que seja flex\u00edvel de acordo com a tipografia como o EM. O uso deste valor junto a um container com a dist\u00e2ncia definida em porcentagem, torna o c\u00e1lculo manual imposs\u00edvel, pois n\u00e3o podemos assumir o valor dessa porcentagem, j\u00e1 que ela muda em cada tela.<\/p>\n<p>Um container com:<\/p>\n<pre><code class=\"language-css\">\n.grid-6 {\n margin: 0 10px;\n width: 50%;\n}\n<\/code><\/pre>\n<p>Possui uma largura total de 50% + 20px (10px de margin-left e 10px de margin-right), ao lado de outro com as mesmas caracter\u00edsticas, ter\u00e1 um total de 100% + 40px, e isso n\u00e3o cabe em um container, fazendo com que o segundo elemento quebre e v\u00e1 para baixo do primeiro.<\/p>\n<p>Com o calc, basta diminuirmos esses 20px da porcentagem definida que o CSS far\u00e1 o c\u00e1lculo automaticamente. Ahhhhh mas \u00e9 certo que isso vai deixar o meu site lento!!! N\u00e3o assuma nada antes de testar, at\u00e9 hoje n\u00e3o existe nenhum estudo que mostre o impacto do calc na velocidade de um site (na verdade eu vejo constantemente diversos projetos do Google utilizando calc sem restri\u00e7\u00f5es).<\/p>\n<p>A fun\u00e7\u00e3o \u00e9 bem suportada, pode usar ela sem medo. \u00c9 bem simples criar um fallback (um plano B caso o browser n\u00e3o seja atual):<\/p>\n<pre><code class=\"language-css\">\n.grid-6 {\n margin: 0 2%;\n margin: 0 calc(10px);\n width: 46%;\n width: calc(50% - 20px);\n}\n<\/code><\/pre>\n<p>Caso o calc n\u00e3o funcione ele ir\u00e1 utilizar os 46% e 2% nas margens.<\/p>\n<p>Essa \u00e9 apenas uma das possibilidades, que te permite criar um sistema de grid bem flex\u00edvel. Por\u00e9m n\u00e3o para por ai, d\u00ea uma olhada no exemplo abaixo:<\/p>\n<pre><code class=\"language-css\">\n.sidebar {\n width: 200px;\n position: absolute;\n}\n.content {\n width: calc(100% - 200px);\n margin-left: 200px;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Uma das novas fun\u00e7\u00f5es de CSS que mais utilizo \u00e9 o calc, para bom entendedor de CSS o simples c\u00f3digo abaixo ir\u00e1 te revelar o poder dessa fun\u00e7\u00e3o: .grid-6 { margin: 0 10px; width: calc(50% &#8211; 20px); } N\u00e3o entendeu o que tem de t\u00e3o bom ainda? Deixa eu explicar: Imagina que voc\u00ea possui um [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/456"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=456"}],"version-history":[{"count":4,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/456\/revisions"}],"predecessor-version":[{"id":472,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/456\/revisions\/472"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}