UiBinder中的不同風格

Question

我有一個用UiBinder中的style屬性定義的styledefinition。 例子：

<ui:style 
    type="example.client.SomeClass.Style"> 

     .div1b { 
      margin: 10px;    
     } 
    </ui:style> 
<g:HTMLPanel 
    <g:Widget styleName="{style.div1b}" ui:field="widget"> 
    </g:Widget> 
</g:HTMLPanel> 

這種風格的作品在谷歌chrome罰款，但在Firefox（後來IE）我想用不同的風格。所以我想爲Firefox定義另一種風格。

現在據我所知，Google建議爲firefox風格創建一個全新的類，並在* gwt.xml中使用replace參數。喜歡的東西：

<replace-with class="example.client.SomeClassFireFox"> 
    <when-type-is class="example.client.SomeClass" /> 
    <any> 
     <when-property-is name="user.agent" value="gecko1_8" />  </any> 
</replace-with> 

這是正確的做法，或有更簡單的一個，在這裏我只定義裏面UiBinder的新的風格？

問候， 斯特凡

Answer 1

它實際上比這更容易：您可以在ui:style使用@if ... @else塊的基礎上，user.agent屬性：

/* Use padding in Firefox and margin in other browsers. */ 
@if user.agent gecko1_8 { 
    .div1b { 
     padding: 10px; 
    } 
} 
@ else { 
    .div1b { 
     margin: 10px; 
    } 
} 

見http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Conditional_CSS