XF 1.1 xenforo -webkit- -moz- -ms-

[TsinJu]

I just would like to know if i have to add every of the CSS Code below to xenforo, to make it compatible for every Browser, or is one of them enough?
I think I read somewhere that XenForo adapts this kind of code for other browsers itself?

-webkit-transform:
-moz-transform:
-ms-transform:
transform:

 

[Arty]

If you use it in style property, XF will clone some rules and add prefix to it. It depends on rule. Check CSS in browser after adding rule to see if it worked.

If you use it in template file, you need to make all copies yourself.

 

[TsinJu]

Thanks Arty
Is it possible to get it working for Templates.css/Extra.css too?

 

[Arty]

No. It is done by style properties parser.

You shouldn't really need it. Only few rules need extensive copying: transition, transform and animation

 

[TsinJu]

well i am working on a new kind of FAQ and it needs a lot of them
But well, it is as it is.
Thanks a lot for your Help

 

[Arty]

If many of them are the same and used within same templates, you can use <xen:set> to clone it:

<xen:set var="$myTransform">
-webkit-transform: scale(0.5);
transform: scale(0.5);
</xen:set>

#foo
{
    {$myTransform}
}

#bar
{
    {$myTransform}
}

or

<xen:set var="$myTransform">scale(0.5)</xen:set>
#foo
{
   -moz-transform: {$myTransform};
   -webkit-transform: {$myTransform};
   transform: {$myTransform};
}

 

[TsinJu]

just found out that the transition Effect is not working for mobiles.
Thanls for your help Arty

 

[Arty]

What effect are you trying to do?

If its transformation, try using 3d transformations. Most phones have hardware acceleration for that and WebKit browsers support it.

 

[TsinJu]

I wanted this http://tympanus.net/Development/ModalWindowEffects/
Buts not working, at least not with iphone.

I now handle it with a normal, vertical content slider. Saves me spaces and is compatible too.