1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Styling and Customization Questions' started by TsinJu, Jul 21, 2013.

  1. TsinJu

    TsinJu Well-Known Member

    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?
     
  2. Arty

    Arty Well-Known Member

    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 likes this.
  3. TsinJu

    TsinJu Well-Known Member

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

    Arty Well-Known Member

    No. It is done by style properties parser.

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

    TsinJu Well-Known Member

    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
     
  6. Arty

    Arty Well-Known Member

    If many of them are the same and used within same templates, you can use <xen:set> to clone it:
    Code:
    <xen:set var="$myTransform">
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    </xen:set>
    
    #foo
    {
        {$myTransform}
    }
    
    #bar
    {
        {$myTransform}
    }
    or
    Code:
    <xen:set var="$myTransform">scale(0.5)</xen:set>
    #foo
    {
       -moz-transform: {$myTransform};
       -webkit-transform: {$myTransform};
       transform: {$myTransform};
    }
     
  7. TsinJu

    TsinJu Well-Known Member

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

    Arty Well-Known Member

    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 likes this.
  9. TsinJu

    TsinJu Well-Known Member

Share This Page