1. @importの使い方

一般公開されているCSSが@importを使用していました。

asciidoctor-skins/css/adoc-iconic.css

import.css
@import url(//fonts.googleapis.com/css?family=Lato:400,700,700italic,400italic);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.0/css/font-awesome.css);

cssをインポートしていますが”http”や”https”が省略されています。

このような記述が一般的なのか疑問に思ったので調べました。

調べた結果、推奨の記述方法がわかりました。

推奨の記述

httpsを省略しない記述が推奨

この推奨の記述方法は時期により移り変わったもので、ネット上の情報も古い記事が残っていて混沌としている状況でした。

この記事では調べた結果を整理して共有します。

2. @importで”https”を省略した場合にはローカルhtmlを開いた場合には動作しない

”https”を省略した場合と省略しない場合で動作が異なるのかHTMLファイルを作成して実験しました。

作成したHTMLです。

example.html
<html>
  <head>
    <style type="text/css">
      @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);
    </style>
  </head>
  <body>
    <span class="fa fa-frown-o fa-3x"></span>
  </body>
</html>

上記のコードからhttps:を削除したみると動作が異なり顔文字が出力されなくなりました。httpsを省略した場合に外部CSSを反映してくれません。

”https”を省略する記述方法も可能なはずなのでこの動作が異なる現象に少し驚きました。

調べて見ると原因がわかりました。

正常に動作しない原因

”https”を省略した場合にサーバ上では正常に動作するがローカルHTMLでは動作しない

ローカルHTMLでも正常に動作することを考慮すると省略しない記述が適していることになります。

3. Google HTML/CSS Style Guide

Google のStyle Guideでもhttps:を省略しないことを推奨しています。

Google HTML/CSS Style Guide

NO.css
/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';

/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';
Recommended.css
/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

この推奨ですが時期により変化したようです。古くは省略する記述方法が推奨されていたそうです。

現在は省略せずにhttps:を明示的に記述することが推奨されています。

4. まとめ

今回は@importの外部URLの記述方法について整理しました。

結論は簡単です。”https:”を省略せずに明示的に記述しましょう。

今回は以上です。