How to use css Calc() in safari?

Asked

Viewed 415 times

2

Calc() in safari is not working. I tried prefixes and it didn’t work either. Someone knows a solution?

I’m wearing it like this:

#myDiv{
        width: calc(100% - 160px);
        width: -webkit-calc(100% - 160px);
        width: -moz-calc(100% - 160px);
}

Solution:

Guys, I’m using safari version 5.1 and if according to Can I Use, this property does not support this version.

html css

  • With me works on Safari 6.1.1. What version of Safari are you using? Does my fiddle work for you? Maybe you are misinterpreting the meaning of the 100%, which is relative to the container.

  • According to this link strange behaviour may occur if height (height) is set in style inline. Take a look if this can be it.

  • Safari is Webkit, so if in the version you are trying to support this feature will be -webkit-calc.

2 answers

7

only works from Safari 6 and the order has to be reversed

width: -webkit-calc(100% - 100px);  /* para Chrome */
width: -moz-calc(100% - 100px);     /* para Firefox */
width: calc(100% - 100px);          /* para suporte nativo */

If you use Safari on Windows, you can forget it because Apple left Safari on version 5.1.7

  • The order of the properties does not affect the result.

  • Use on Mac even, only I am using version 10.6.8 and I think there is no upgrade from safari to the same. You know tell me if this proceeds?

  • @Kazzkiq order is important to maintain compatibility. Read this article: (in English)http://css-tricks.com/how-to-deal-with-vendor-prefixes/

  • No, it’s not @2madera. I agree that the indicated is to use in the order you proposed, but reversing the order does not change what the browser shows, since the properties that he does not know how to interpret he simply ignores and lets them be overwritten by what he understands, in this way, even if -moz-calc() is last in CSS, Safari will understand -webkit-calc() as correct, for example. VER EXEMPLO

  • @Kazzkiq, you’re right. The only rule that makes me write the way above is the organization. P

1

Check the compatibility

This and other properties can be viewed through the site Caniuse

width: -webkit-calc(100% - 100px);  /* Chrome */
width: -moz-calc(100% - 100px);     /* Firefox */
width: -ms-calc(100% - 100px);      /* microsoft */
width: -o-calc(100% - 100px);       /* Opera */
width: calc(100% - 100px);          /* Nativo */

The native property must be the last to facilitate compatibility.

The specification of the rule you find on the website of W3C (Direct link to the rule Calc)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.