はじめに
現在、Front-end Developer Specialist (OutSystems 11)の試験勉強をしている中で、OutSystemsのCSSの優先順位について公式ドキュメント（カスケーディングスタイルシート - CSS）を読んでいたところ、
「このスタイルってどれのことを指してて、ブラウザやServiceStudioではどう出力されるの？」
という疑問が湧きました。
自動生成されるスタイルシートも含まれるので、普段の開発ではあまり意識しない部分があったりします。
そこで、Service Studioの画面とブラウザの開発者ツール（DevTools）を使って、各スタイルの適用箇所と出力結果を実例付きで深掘りしてみました！
今回の対象のスタイルシートは以下の二つです。
- グリッドのContainerウィジェットのシステムスタイルシート
- グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
こちらの2つは自動生成されるスタイルシートなので、普段の開発ではあまり意識しない部分があったりします。
試験ではそこまで具体的に深堀りされないかもしれないですが、イメージの助けになればいいなと思っています。
公式ドキュメントのスタイル適用順序
OutSystemsでは、以下の順序でスタイルが適用されます（後のものほど優先されます）：
- グリッドのContainerウィジェットのシステムスタイルシート
- ブロックスタイルシート
- 基本テーマを含むテーマスタイルシート（指定された場合）
- 画面またはメールスタイルシート
- グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
- スタイルエディタ使用時にService Studioによって生成されるスタイル
- Attributes または Extended Properties で定義したインラインスタイル
使用環境
- OutSystemsバージョン：11
- Service Studioバージョン：11.55.22
- ブラウザ：Google Chrome（DevTools使用）
- アプリ種別：Reactive Web App
各項目をService StudioとDevToolsで確認してみた
① グリッドのContainerウィジェットのシステムスタイルシート
疑問:
システムスタイルシートってどれのことでしょうか。
結論:
公式ドキュメントでシステムスタイルシートがどれを指しているのか明確な記載は見つけられませんでした。
調べた結果としては自動で生成されているBasic.cssというスタイルシートのことを指しているのかなと思っています。
このcssで定義されているクラスはブロックのスタイルシートで上書きできるからです。
- Service Studioでの編集の仕方：恐らくできない。
- 適用順序：1番目
-
DevToolsでの出力例：
DevToolsのSourceタブから見ると、生成されているスタイルシートを見ることができます。
赤枠で囲ったcssが今回の対象です。
中身を見てみると、以下のようなクラスが定義されています。
ThemeGrid_ContainerはReactive Web Appでデフォルトで作成されるLayoutBaseブロックのContainerなどで使用されています。
Basic.cssがブロックのスタイルシートで上書きできることの確認
-
Basic.cssで定義されているクラス(ThemeGrid_Container)が適用されているときの表示の確認
Block内に配置したContainerにThemeGrid_Containerを適用してみました。
実装
ブラウザでどのように表示されるかを見てみます。
border-boxなので黒いボーダーを設定している親要素に子要素が収まってますね。
適用されているCSSをDevToolsのElementsタブでBasic.cssが適用されていることを確認できます。
-
Basic.cssで定義されているクラス(ThemeGrid_Container)をブロックのスタイルシートで上書きしたときの表示の確認
BlockのスタイルシートでBasic.cssで定義されているクラス(ThemeGrid_Container)を上書きしてみました。
実装
Style Sheet EditorでブロックのスタイルシートにThemeGrid_Containerクラスを定義します。
ThemeGrid_Containerを適当にTextを表示するContainerに適用します。
ブラウザでどのように表示されるかを見てみます。
子要素が親要素を突き抜けていて、ブロックのスタイルシートで上書きしたcontent-boxが適用されていることが見た目でもわかるかと思います。
適用されているCSSをDevToolsのElementsタブから確認します。
ブロックのスタイルシートが適用され、Basic.cssが上書きされていますね。
② グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート
疑問:
これも自動生成されるシートなので普段の開発ではあまり意識しない部分です。
どのシートのことを指しているのでしょうか。
結論:
Themeプロパティでグリッド設定を設定したときの内容が反映されています。
-
Service Studioでの場所：ThemeプロパティでColumnsを設定する
- 読み込みタイミング：5番目
-
DevToolsでの出力例：
DevToolsのSourceタブから、生成されているスタイルシートを確認します。
赤枠で囲ったcssが今回の対象です。
中身を見ると、ThemeプロパティでColumnsを25に設定したため、ThemeGrid_Widthクラスが25まで作成されています。
画面のスタイルシートがDebugTest.extra.cssで上書きできることの確認
一応文章からすると「グリッド設定がThemeプロパティに定義されているテーマエクストラスタイルシート」がDebugTest.extra.cssを指していることは間違いないと思うのですが、
公式の記載を見つけたわけではないので実際に上書きできるか確かめてみます。
- 画面のスタイルシートで定義されているクラス(ThemeGrid_Width25)をDebugTest.extra.cssで上書きしたときの表示の確認
こちらがDebugTest.extra.cssで自動作成されたThemeGrid_Width25です。
実装
Style Sheet Editorで画面のスタイルシートにThemeGrid_Width25クラスを定義します
ThemeGrid_Width25を適当にTextを表示するContainerに適用します。
ブラウザでどのように表示されるかを見てみます。
cssの名前が省略されているのでわかりづらいですが、画面のスタイルシートで設定されたwidth:5%が打ち消されていますね。
適用されているCSSをDevToolsのElementsタブから確認します。
- 画面のスタイルシートで定義されているクラス(ThemeGrid_Width25)の名前を変更したときの表示の確認
一応先ほど画面で設定したクラスの名前をDebugTest.extra.cssと異なるものに変えてみて表示を確認します。
実装
Style Sheet Editorで画面のスタイルシートにThemeGrid_Width25クラスの名前をThemeGrid_Width251に変更します。
Containerに適用します。
ブラウザでどのように表示されるかを見てみます。
適用されているCSSをDevToolsのElementsタブから確認します。
画面のスタイルシートで定義したwidth:5%が上書きされずに効いていることが分かりますね。
まとめ
今回はOutsystemsの自動生成されるスタイルシートについて調べてみました。
フロントエンドについて勉強している方の勉強の参考になれば幸いです。