CSSのモジュール化

ご注意ください

この記事は開発者向けの内容です。カスタマイズを前提としているためサポート対象外になります。事前にご理解の上ご利用ください。

CSS の影響を接客アクション内に限定する仕組み
KARTE では、サイトや他接客サービス等との CSS の競合を避けるため、接客アクションごとに CSS のモジュール化・ローカル化を行なっています。

CSS の競合・相互作用に関しては「接客アクションからサイトへの影響」「サイトから接客アクションへの影響」「複数の接客アクション間での影響」の3つが考えられますが、現在のデフォルトの方式である Simple CSS-Modules スタイルでは、配信される接客アクションが持つ CSS のセレクタを固有化することでこの問題を抑えます。

本項では、この CSS のモジュール化の仕組みについて解説します。

なお、古いテンプレートから作られた接客アクションでは、旧方式である LESS & Container スタイルを利用している場合がありますが、新規の利用は非推奨かつサポート対象外となっております。（後述の「LESS & Container スタイル (旧仕様)」をご参照ください）

Simple CSS-Modules スタイル

Simple CSS-Modules スタイルでは、CSS だけでなく HTML のclassにも自動でサフィックスを付与し、サイト内の CSS との競合を強力に防ぎます。

補足

📘 class名にサフィックスが付与されるのは、CSSが記述されたclassのみです
HTMLにしか存在しないclassについては、サフィックスは付与されません。

実装例

HTML

<div class="wrapper">
    <i class="icon" aria-hidden="true"></i>
    text
</div>

.small-text {
    font-size: 80%;
}

.icon {
    background-image: url(icon.png);
}

配信されるHTML

<div class="wrapper">
    <i class="_icon__o4ar1_" aria-hidden="true"></i>
    text
</div>

配信されるCSS

._karte-g__o4ar1_ ._small-text__o4ar1_ {
    font-size: 80%;
}

._karte-g__o4ar1_ ._icon__o4ar1_ {
    background-image: url(icon.png);
}

CSS に定義されたclass名、id は自動的にユニークな値に変換され、HTML の側でもclass名や id が同様のルールで変換されます。

上記例の _o4ar1 の部分は接客アクションごとに異なります。
なお、CSS に含まれていないclassや id は変換されないので注意が必要です。（例ではwrapperは変換されていません）

変換を行いたくない場合

以下のように global で明示的に指定することで、変換させない事も可能です。

:global(.class-name) { ... }
:global(#id) { ... }

また、li a { ... } のように要素に直に指定する場合は変換は行われません。

実装例

:global(.icon) {
    background-image: url(icon.png);
}

配信されるCSS

.small-text {
    font-size: 80%;
}

.icon {
    background-image: url(icon.png);
}

global を指定した場合も .karte-g のスコープ内の制御になります。HTML の変換は行われないため、CSS の優先度を調整する事で接客サービスの外側から同じ要素にCSS を設定したり JavaScript で要素を選択できるようになります。

補足

🚧 変換を行わない場合の注意
変換を行わない場合は、サイトからの影響が発生する場合がございますので、十分に長い固有の名称をつけるなど、利用ケースに応じて対処してください。

補足

📘 :global() 指定に関する注意
複数のスタイル指定に使われているclassや id の変換を防ぐには、それら全てのスタイル指定のセレクタに :global() を設定してください。

JavaScript で要素を選択したい場合

CSS に .wrapper { /*...*/ } と書くと、 HTML 上の wrapper classも変換されます。そのため、例えばスクリプトで jquery(".wrapper") と記述しても要素は選択できません。
変換テーブルである styles オブジェクトが定義済みの状態になっているので、下記のように利用して変換後のclass名を取得してください。

JavaScript

jquery("."+styles["wrapper"])

より良い方法は <a class="js-karte-close">...</a> のように、要素のセレクタとして CSSに記述しない classを利用することです。この場合はclass名が変換されないので、styles オブジェクトを参照する必要はありません。

補足

🚧 動的に挿入する要素に注意
JavaScript で動的に挿入される CSS や HTML には、上記のプリフィックス・サフィックスが付与されず、CSS が反映されないなどの問題がある場合があります。ご注意ください。

composes 機能

複数のclassの設定を混ぜ合わせるために使用することができます。
機能としては、LESS の extends 機能によく似ており、コードをコンパクトにすることが可能です。

HTML

<div class="wrapper">
    <i class="icon" aria-hidden="true"></i>
    text
</div>

.small-text {
    font-size: 80%;
}

.icon {
    composes: small-text;
    background-image: url(icon.png);
}

配信されるHTML

<div class="wrapper">
    <i class="_icon__o4ar1_ _small-text__o4ar1_" aria-hidden="true"></i>
    text
</div>

.icon に、composes: small-text を追加することによって、元の HTML には記述していない small-text classが配信 HTML に追加されます。

補足

📘 参考
基礎となっている手法のより詳しい情報はこちらをご参照ください。
『CSS Modules Welcome to the Future 』（翻訳記事）

LESS & Container スタイル (旧仕様)

旧テンプレートの手法を LESS & Container スタイルと呼んでいます。

補足

🚧 今後の LESS & Container スタイル利用について
LESS & Container スタイルで作られた接客アクションは現在、新規の作成は非推奨かつサポート対象外となっております。 (ご利用いただく事自体は引き続き可能です。)

CSS モジュール化スタイルの確認方法

接客サービスの編集画面で「表示設定」のタブ中の下部に、下記の画像のような表記がある場合 LESS & Container スタイルとなります。

null

何も表示されていない場合は Simple CSS-Modules スタイルとなります。

実装例

LESS & Container スタイルでは、下記のような変換が行われて配信されます。

.karte-temp-small-text {
    font-size: 80%;
}

.karte-temp-icon {
    background-image: url(icon.png);
}

配信されるCSS

.karte-g .karte-temp-small-text{
    font-size: 80%;
}

.karte-g .karte-temp-icon {
    background-image: url(icon.png);
}

これにより .karte-g というclass下の要素にのみ CSS が適応されるため、接客アクションの CSS が配信先のサイトに影響を及ぼすことはありません。

一方で、サイト内の CSS が KARTE の接客サービスに影響を与える可能性があるため、class名に手動でプリフィックスをつけてユニークな値にすることで対応してきました。
（例: .karte-temp-small-text や .karte-temp-icon など）

現行仕様である Simple CSS-Modules スタイルではこの課題が解消されています。

エンドユーザ側でのスクリプトのロード速度向上のため、デフォルトでは FontAwesome を読み込みません。
FontAwesomeを使用する場合は、アクション・テンプレートのカスタマイズで、プレビューボタン横のライブラリ設定ボタンから該当のライブラリを有効化してください。
（KARTE for App SDKに配信された接客アクションに限り、通信状態が悪くFontAwesomeのCSSの取得に失敗した場合、接客アクションにCSSが適用されない場合があります。）

ライブラリ名: FontAwesome
ロードされるバージョン: 4.7.0
CSS内での表記: FontAwesomeKarte

CSSのモジュール化