GeneXus ではデジタル製品向けのスタイルを定義できます。特に、CSS ライブラリのインポートを含む CSS 言語を使用して、
デザインシステムの [ Styles ] などでスタイルを指定することが可能です。
複数のスタイルがあると、さまざまな理由によって競合が発生します。CSS でこれを解決するためには、より具体的なスタイルを使用し、それらの優先順位を設定することが可能です。もう 1 つの方法は、カスケード
レイヤーを定義することです。
カスケードは、スタイル間の競合を解決するための一連の手順です。レイヤー内に CSS を構築すると、プロジェクト内でのスタイルの優先順位を制御できます。
スタイル間の競合は、ケースに応じて解決されることを念頭に置いておく必要があります。
- 1 つのレイヤーで行われた定義
- 複数のレイヤーで行われた定義
このケースでは、すべての CSS (
ユーザーコントロール、
テーマ、および
デザインシステムの CSS) が同じレイヤー内にあります。
そのため、複数のスタイルを定義した場合は、特定性が最も高いスタイル、その後に来るスタイル、のように優先されます。これは、すべてのセレクターが同じレベルにあるため、どれが適用されるかは、セレクターの特定性によって互いに競合することになります。定義された順序に関係なく、優先順位が最も高いものが競合を制し、他のものを上書きします。
複数のレイヤーが定義されている場合、それらの間の競合は常に、優先順位が最も高いレイヤーのスタイルを使用して解決されます。つまり、セレクターの特定性は関係ありません。
GeneXus のレイヤーは次のようになっています:
- ベーススタイル (外部 CSS への参照)
優先順位が最も低いレイヤーです。そのため、ここで定義されたスタイルは、その後のレイヤーによって変更または修正される可能性があります。たとえば、[ Base CSS ] プロパティ (Design System オブジェクト) の値 Bootstrap v3 です。
- ユーザー コントロール スタイル
このレイヤーは、前のレイヤーで定義されたスタイルを変更できます。たとえば、Bootstrap v3 の値を書き換えることができます。
- Design System オブジェクト (DSO)
DSO レイヤーは常に最後に追加されるレイヤーであるため、優先順位は最も高くなります。外部ユーザーコントロールや CSS のセレクターのほうに特定性があっても、DSO を上書きすることはありません。
ユーザーコントロールをビルドする際には、これらの順序を考慮する必要があります。
また、DSO を使用する
Web パネルを定義する際にも、ここで説明した内容に留意してください。これは、DSO で生成された各 CSS がレイヤー内に置かれるためです。このレイヤーは、
[ Tokens ] エレメントと
[ Styles ] エレメントで共有されます。
CSS カスケードレイヤーの仕組みを明確に理解しておくことが重要です。以下に、留意すべきいくつかの特徴を説明します。
ブラウザーの互換性
CSS カスケードレイヤー