2

ウィジェットをパッケージ化して、任意のプロジェクトに簡単に含めることができるようにしたいと考えています。ユーザーが自分のホスト ページで個人的に作成したスタイル シートにリンクする必要はありません。コードを使用するときに css が魔法のように挿入されるようにしたいだけです。

CssResource がこの夢に向かっていくことができることは理解していますが、ドキュメントを精査した後、自然型セレクターへの参照が見つかりませんでした。たとえば、<tr>各ウィジェットにクラス名を追加せずに、ウィジェットで s のスタイルを設定したいと考えています。

これはGWTで達成できますか? GWT 独自のウィジェットはすべてかなり徹底的にスタイル設定されていますが、DOM のすべての要素にスタイル クラスが追加されているようです。

4

3 に答える 3

3

あなたは正しい道を進んでいます -CssResourceまたは UiBinder のインライン<ui:style>は、探しているものを達成します。クラスではなくタイプによる要素のスタイリングに関しては、確かに実行できます。

<ui:UiBinder>
  <ui:style>
    .myTable tr {
      color: red;
    }
  </ui:style>

  <table class="{style.myTable}">
    <tr><td>A row!</td></tr>
  </table>
</ui:UiBinder>

ただし、GWT には、子孫セレクターよりも明示的なクラス名を優先する理由があります。たとえば、上記のスタイルを使用している場合、ブラウザーが要素をレンダリングするたびに<tr>、DOM を調べてその要素のすべての祖先にアクセスして、それらのいずれかに.myTableクラスがあるかどうかを確認します。アプリケーションが多くの<tr>要素 (<div>ここではより良い例です) を使用し、そのほとんどが祖先を持たない場合.myTable、レンダリング パフォーマンスが著しく低下する可能性があります。

于 2011-04-01T19:47:18.850 に答える
2

私は、UiBinder を使用し、次のように最も外側の要素にのみクラス名を付けると思います。

<ui:style>
    .outer tr {
        ...
    }
</ui:style>
<div class="{style.outer}">
    ...
      <tr>...</tr>
    ...
</div>

これで、各 tr にクラスを割り当てる必要がなくなりました。セレクター " " を使用するだけで済みます。これは、class 属性でマークされた要素内の s に.outer trのみ適用されます(ちなみに、a である必要はありません)。もちろん、UiBinder がなくても同じ原則が機能します。<tr>{style.outer}<div>

于 2011-04-01T19:41:25.883 に答える
0

質問全体を本当に理解していませんでしたが、まだ理解していないかもしれませんが、具体性から「CSSを防弾」する方法を求めていると思います-他の回答を見た後、CSSビットを取得しました

すべてに追加された一意のクラス名（ちょっとした撞着語はCSS用語ですが、heyho）は、ルールがどれほど具体的（重み付け）であっても、サイト（あなたではない）CSSができるだけ早く失敗するようにすることをお勧めします

ただし、ウィジェットのCSSを完全に一意にすることができます。つまり、セレクターにIDがいくつあっても、非常に面倒で、すべてを具体的に分類しなくても、サイトのCSSによって上書きされないようにすることができます。

たとえば#mywidget div {}、サイトCSSによって非常に簡単に却下される可能性があり#wrapper #content div {}ます-あなたdivもこれら2つのIDの子孫であり、ルールには2つのIDがあるため、CSSは失われます-サイトCSSのすべての順列を推測することは不可能です。最も簡単なのは、これらすべての「追加」クラスと、YUIとBlueprintがそのままである理由を追加することです。

ただし、CSSを作成する場合：#mywidget>div {}CSSでターゲットとなるdivがウィジェットIDの直接の子になることはないため、常に勝つ可能性があります（もちろん、CSSをカスタマイズすることを選択しない限り、 「すべてを分類する」メソッドも）

したがって、すべてにクラスを追加せずにCSSを防弾するために..ウィジェットにはすでに一意のiDラッパーがあると思いますか？次に、内部divラッパーがまだない場合は、追加します。クラスは必要ありませんが、クラスを指定すると、この手法に防弾の追加レイヤーが配置されます。

次に、すべてのルールにプレフィックスを付けます。#mywidget>div.myclassたとえば#mywidget>div.myclass td {}、サイト独自のルールは、どれほど重要な重みが付けられていても（セレクター内の多くのIDとクラスによってセレクターの重みが大きくなります）、特定の組み合わせに一致しなくなるとすぐに失敗します。したがって、trは安全です。サイトからのCSS乗っ取り;）

1つのdivまたはクラスを追加し、CSSを検索して置き換え、すべてにプレフィックスを追加します。パッケージ化の方法についてはわかりません。

于 2011-04-01T20:25:03.683 に答える