Making a template cross browser

[AlirezaM]

Hello to everyone reading this!

I’m working on a template which will be cross browser (showing everything the same in

all major browsers).

now I have finished it and want to touch css files for the properties below:

opacity , transition , border-radius , box-shadow and gradient

how shoud I make these properties cross browser?

I have seen they add some text like “-moz-” before the properties names.

what about these?

thanks!

Alireza.M

[JohnMotylJr]

CSS3 sometimes requires what is called ‘Vendor Prefixes’, if you google that you can read a shload of documentation. Search this site alone and you can read some relevant stuff.

Basically, you add vendor prefixes such as

-webkit- // Safari Chrome

-moz- // Firefox

-ms- // Microsoft

-o- // Opera (not sure if they are switching to webkit or not)

You can also use the prefix free plugin in order to have the js do all the vendor prefixes for you. I would suggest researching and see what vendor prefixes are a must and include those rather then using an additional http request for a plugin.

[CrocoDillon]

http://css3please.com/

http://caniuse.com/ <- they list which browser versions require prefix, really handy.

[AlirezaM]

Thanks CrocoDillon!

Second website was really helpful.

[Author]

Posts