外部CSS対応

概要

これまで元コンテンツに<link>タグによる外部CSSファイルを定義しても外部CSS対応端末以外は、x-Servletが削除して出力していました。
Version 2.10以降では、外部CSSに対応した機種には<link>タグ、<style>タグによる外部CSSファイルを最適な形に変換します。
また、iモードブラウザ1.0を含む、外部CSS非対応端末の場合、style属性として出力するインライン展開を行います。
外部CSSに対応した機種、スマートフォンに対しては、表示するページで使用されていないCSSプロパティは削除します。

設定

UAGroupSetting.xmlにグルーピングされている ExternalCssUsableExternalCss を元に外部CSSの出力、CSSインライン展開の判断を行います。

xproxy.properties の separatePageType=2、supportsXhtmlInput=true および cacheMaxCountCss が1以上の場合に、外部CSS変換が有効になります。

記述について

CSSを記述に関して以下に説明します。

外部CSS機能で使用できるCSSセレクタは以下の通りとなります。

使用可能CSSセレクタ 記述例
グローバルセレクタ * { font-size: small;}
Idセレクタ #myid { font-size: small;}
div#myid { font-size: small;}
クラスセレクタ .myclass { font-size: small;}
div.myclass { font-size: small;}
タイプセレクタ div { font-size: small;}
子供セレクタ div > span { font-size: small;}
.myclass > span { font-size: small;}
#myid > span { font-size: small;}
div.myclass > span { font-size: small;}
div#myid > span { font-size: small;}
子孫セレクタ .myclass span { font-size: small;}
#myid span { font-size: small;}
div.myclass span { font-size: small;}
div span { font-size: small;}
div#myid { font-size: small;}
グループセレクタ #myid, div#yourid, .myclass, div.yourclass, p {
    font-size: small;
}

※子孫、子供セレクタは利用できません。
要素側で複数定義されているクラスは指定できません。
※リンク擬似クラスは指定できません。
リンク擬似クラス a:link、a:visited、a:focusの利用が可能です。
※リンク擬似クラスには color しか指定できません。
※リンク擬似クラスのみインライン展開を行いません。

外部CSS機能でCSSを用いて画像を指定できる要素は以下の通りとなります。

background-image list-style-image
<body> <li>
<div> <ol>
<table> <ul>
<td>
<th>

動作

外部CSS関連の扱いについて以下のような処理を行います。

各CSSプロパティの変換対応表はx-Servlet ユーザ専用ページ(https://x-users.x-servlet.com/license/do/login(別ウィンドウで開きます))にございますのでご確認下さい。

外部CSS対応端末(auのUP6.2以外)、スマートフォンの場合

<link>タグの場合

  • <link>タグに記述されhref属性で指定されたURLに対してはリンク変換が行われます。
  • 表示するページで使用されていないCSSプロパティは削除されます。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <link href="/css/color.css" rel="stylesheet"
    type="text/css" />

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>
    <link href="/css/color.css?_xpxi=xxxx" rel="stylesheet"
    type="text/css" />

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    外部CSS
    変換前 変換後
    #red {
    color: red;
    }
    #yellow {
    color: yellow;
    }
    #red {
    color: red;
    }

<style>タグの場合

  • 表示するページで使用されていないCSSプロパティは削除されます。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <style type="text/css">
    #red {color: red;}
    #yellow {color: yellow;}
    </style>
    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>
    <style type="text/css">
    #red {color: red;}

    </style>
    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>

iモードブラウザ1.0を含む外部CSS非対応端末の場合

  • style属性によるCSSのインライン展開を行います。
  • 対象となる端末は、iモードブラウザ1.0を含む外部CSS非対応端末となります。

    Willcomは、XHTML非対応として処理されるのでインライン展開は行いません。

<link>タグの場合

  • <link>タグの削除を行います。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <link href="/css/color.css" rel="stylesheet"
    type="text/css" />

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>


    </head>
    <body>
    <div style="color:red;"> 赤コンテンツ </div>
    </body>
    </html>
    外部CSS
    変換前 変換後
    #red {
    color: red;
    }
    #yellow {
    color: yellow;
    }

<style>タグの場合

  • <style>タグの削除を行います。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <style type="text/css">
    #red {color: red;}
    #yellow {color: yellow;}
    </style>

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>




    </head>
    <body>
    <div style="color:red;"> 赤コンテンツ </div>
    </body>
    </html>

auのUP6.2以下の場合

  • style属性によるCSSのインライン展開を行います。
  • auのUP6.2は外部CSS対応だが、外部CSSで無効となる一部の子供セレクタ、子孫セレクタが存在するのでインライン対象端末としブラウザ依存を救済します。

<link>タグの場合

  • <link>タグの削除を行います。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <link href="/css/color.css" rel="stylesheet"
    type="text/css" />

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>


    </head>
    <body>
    <div id="red" style="color:red;"> 赤コンテンツ </div>
    </body>
    </html>
    外部CSS
    変換前 変換後
    #red {
    color: red;
    }
    #yellow {
    color: yellow;
    }

<style>タグの場合

  • <style>タグの削除を行います。
    コンテンツ
    変換前 変換後
    <html>
    <head>
    <title>タイトル</title>
    <style type="text/css">
    #red {color: red;}
    #yellow {color: yellow;}
    </style>

    </head>
    <body>
    <div id="red"> 赤コンテンツ </div>
    </body>
    </html>
    <html>
    <head>
    <title>タイトル</title>




    </head>
    <body>
    <div id="red" style="color:red;"> 赤コンテンツ </div>
    </body>
    </html>

ページ分割(先読み)について

  • ページ分割時の先読みファイルとしてCSSファイルが追加になるため分割サイズに加算されます。
  • 旧分割(separatePageType=1)では、外部CSSの変換を行わず外部CSS対応端末に対してのみ、スルー出力を行います。
    また、ページ分割されるサイズより大きい外部CSSファイルの場合はエラーになります。
  • ページ分割が行われても、各ページのヘッダ部に<link>タグ、<style>タグは出力されます。
  • 外部CSS内に、画像プロパティが指定されている場合はコンテンツサイズとして画像サイズを加算します。
    また、画像プロパティが複数タグに適用されても、タグ毎に画像サイズを加算しません。
    但し、インライン展開された場合には、タグ毎に画像サイズを加算します。
    機能 分割方式
    旧(separatePageType=1) 新(separatePageType=2)
    外部CSS 外部CSS対応端末のみ出力する
    (スルー出力)
    CSSプロパティを変換し出力する
    CSSインライン展開 出力しない 出力する

注意点

  • 変換対象となる属性はiモードブラウザ2.0で対応している i-CSS2 となります。i-CSS2以外の属性はサポート対象外となります。
    i-CSS2については下記ページをご覧ください。
    作ろうiモード:iモードブラウザ2.0対応i-CSS2について (別ウィンドウで開きます)
    http://www.nttdocomo.co.jp/service/developer/make/content/browser/browser2/i_css2/index.html
  • CSSの優先順序を決定する「定義された作成者スタイルシート、ユーザスタイルシート、User-Agentスタイルシートの優先順位」及び「!important指定による優先順位」には対応していません。
  • <link>タグおよび<style>タグは<head>タグ内にのみ定義を記載出来ます。
  • <link>タグで外部CSSファイルを指定する場合は「rel="stylesheet"」と「type="text/css"」指定が必要です。
    詳細は「<link>タグ」をご覧ください。
  • CSSの@規則には非対応です。 また、@規則には非対応なため、@charset で指定するCSSファイルのエンコーディング指定は行うことは出来ません。
    MLファイルと同一のエンコーディングで記述することを推奨します。
  • CSSファイル内のリンク変換対象は、背景画像(background, background-image, list-style, list-style-image)のみとなります。
  • CSSファイル内のコメントはインプットとなる元ファイル(MLおよびCSSファイル)には記述可能ですが変換結果には出力されません。
    (ルートドキュメントサイズ取得の際にCSS変換を実行し、実際の分割処理時に変換結果を反映するため)
  • コメントの入子で記述することはできません。

    例:

      /* コメントの中に /* コメントを書く */ ことはできません */
  • 1つの<style>タグ内または1つのCSSファイル内に同一セレクタが定義されている場合、出力されるCSSでは1つにマージされます。
  • 外部CSSファイルに <x:raw> などの拡張タグは使用できません。
  • セレクタで要素を指定する場合は小文字で記述してください。また、id, class 属性は大文字小文字を区別します。
  • 内部的に各セレクタ条件をキーとして使用しているため、セレクタ文字列は全て大文字小文字が区別されます。そのため、要素名を記述する際は全て小文字で記述してください。
  • クローラーからのアクセスによるCSS変換については、クローラーが偽装している端末と同様の変換結果となります。
  • スルーモードにおいて、<style> タグで記述した画像の画像URLは、リンク変換されません。
  • スルーモードにおいて、インライン style 属性で定義した画像URLは、リンク変換されません。
  • スルーモードにおいて、<link> タグで指定したCSS内の画像URLは、リンク変換されません。
  • xproxy.properties の supportsXhtmlInput が "false" の場合は、<style> タグで記述した画像、CSSサイズがページサイズに加算されません。
  • UAGroupSetting.xml に外部CSS対応端末 ExternalCss を定義していますが、ユーザが任意にグループに追加を行なっても、それ以外の端末がインライン展開されません。
  • <style>タグで背景画像を指定する際、画像ファイルのURLが contentsRule.xml のルールにマッチするがHost部がhtmlと異なる場合、画像ファイルサイズはページ分割の計算に含まれません。
    ページ分割の必要がある場合は背景画像を<link>タグで呼び出す外部CSSファイルで指定してください。
  • グループ化するセレクタで、複数クラスが定義されているクラスを指定することはできません。
    使用できない記述 使用できる記述
    CSS部 <style type="text/css">
      .aaa, .bbb {
          background-color: #bbbbff;
      }
    </style>
    <style type="text/css">
      .aaa {
          background-color: #bbbbff;
      }
      .bbb {
          background-color: #bbbbff;
      }
    </style>
    html部 <div class="bbb ccc">
      styleタグのテスト
    </div>
    <div class="bbb ccc">
      styleタグのテスト
    </div>
      クラス名"bbb"がグループセレクタとして指定されているため使用できません。 クラス名"bbb"は単独のセレクタとして指定されているため使用できます。
  • CSSのキャッシュを無効(cacheMaxCountCss=0)にしている場合、CSS変換は行われません。
TOP