クラスのプロパティを画面サイズに応じて定義することはできるのでしょうか。同じクラスを複数回宣言したらどうなるのでしょうか。
コントロールのレンダリング時には、どのプロパティが優先されるのでしょうか。
クラスは、条件を満たしたときにのみ宣言が有効になるよう、条件を設定できます。現時点で、条件は出力メディア (画面のサイズや向きなど) のみを参照し、CSS と同様の
@media ルールで設定します。また、
Design System オブジェクトを Web に使用した場合にのみ考慮されます。
例: この例では、H1 クラスは、コントロールが幅 767px 以内の画面でこのクラスを使用してレンダリングされるときにピンク色の宣言を使用します。
@media screen and (max-width:767px)
{
.H1
{
color: pink;
}
}
構文の表記規則を見る
この条件の詳細については、「
デザインシステムのスタイルのルール」を参照してください。
DSO では、インポートする DSO (「拡張」DSO) の Styles のセクションに既存するクラスを宣言できます。インポートする DSO のプロパティが使用され、それに現在の DSO のプロパティが追加されます。一致するプロパティがある場合、現在の DSO のほうが適用されます。
例: TravelAgencyExtended のスタイルの
Web パネル内にクラス H1 を持つテキストブロックがある場合、色はピンク、フォントサイズは 95px で表示されます。
styles TravelAgency
{
.H1
{
color: green;
font-size: 95px;
}
}
styles TravelAgencyExtended
{
@import TravelAgency;
.H2
{
color: blue;
}
.H1
{
color: pink;
}
}
同様に、クラスが複製され、一方では条件なしで宣言され、他方では条件付きで (@media ルールを使用して) 宣言されている場合も、前の例と同様になります。ルールの条件を満たしたときにプロパティが追加されます。
例: Web パネルの画面サイズが 768px に満たない場合、クラス H1 のテキストブロックは、色はピンク、サイズは 95px で表示されます。画面サイズが 768px 以上の場合、色は緑、サイズは 95px になります。
styles TravelAgency
{
.H1
{
color: green;
font-size: 95px;
}
.H2
{
color: blue;
}
@media screen and (max-width:767px)
{
.H1
{
color: pink;
}
}
}
いずれかがインポートした DSO のものでも同様です。
例: 画面サイズが 768px に満たない場合、テキストブロックはサイズが 95px、色がピンクになります。それ以外の場合は緑色になります。
styles TravelAgency
{
.H1
{
color: green;
font-size: 95px;
}
}
styles TravelAgencyExtended
{
@import TravelAgency;
.H2
{
color: blue;
}
@media screen and (max-width:767px)
{
.H1
{
color: pink;
}
}
}
同じクラスが同じ DSO または同じ条件 (@media) で複数回宣言されている場合 (推奨されない状況)、現時点では最初のものが適用されます。この動作は、最後のものが適用される CSS の動作に合わせて今後のアップグレードで変わる可能性があります。
例: この場合、H1 クラスのテキストブロックは、色は緑、サイズは既定値 (95px ではない) でレンダリングされます。
styles TravelAgency
{
.H1
{
color: green;
}
.H2
{
color: blue;
}
.H1
{
color: pink;
font-size: 95px;
}
}
GeneXus 17 Upgrade 6 以降。
コントロールのレンダリングに関する考慮事項を確認してください。