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については、サフィックスは付与されません。

実装例

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

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

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

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

._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);
}

._karte-g__o4ar1_ .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名を取得して下さい。

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

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

🚧

動的に挿入する要素に注意

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

composes 機能

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

<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);
}

<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 スタイルとなります。

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

実装例

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

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

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

.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 スタイルではこの課題が解消されています。

使用するCSSライブラリの設定

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