はてなダイアリーって@import使えるのね - 聴く耳を持たない(片方しか)

スタイルシート内で @import の指定があった場合、指定されたファイルをはてなダイアリーが取得し、表示を行う擬似import機能を追加しました。
スタイルシートの擬似import機能 - はてなダイアリー日記

という機能があるのは知らなかった。
つまり

@import url("http://www.foobar.ne.jp/hoge.css");

という形式で外部ファイルを指定できる。
これを使わなくても普通に書くことが出来るので、個人で使う分には正直あまりメリットはないのだけれど、公開デザインなんかでは便利かなぁ、と思った。
公開デザインに登録しているものを、登録してから後日修正を加えることがあるのだけれど、その場合それ以前にインポートした方には修正を反映してもらうために、再度インポートかコピペをお願いすることになるので、気になっていた部分ではある。
でも、外部ファイルが使えるのであれば、それを修正するだけで利用者の手を煩わせることなく、最新の状態を提供できるのが大きなメリット。

デメリット

逆にデメリットとしては、いつでも好きなように管理者が書き換えることができるため、ある日急に意図しないデザインになったり、場合によっては真っ白になったり、グロ画像に差し換えられてしまったり……というちょっとしたテロてきな悪戯を受ける可能性もある。

参考リンク

あと、他に大きなデメリットしては

@import url("http://www.foobar.ne.jp/hoge.css");
という指定があった場合、http://www.foobar.ne.jp/hoge.css の取得を試みます。

ファイルの取得に成功し

返された content-type が「text/css」の場合で、

取得回数が10回以内

の場合は、その内容をスタイルシート内に追加して表示します。
なおこの機能は、はてなアンテナでのXSS脆弱性対策の施行の際の混乱を防ぐための措置であり、ページの表示速度も低下する事から、ご利用をお勧めしません。
スタイルシートの擬似import機能 - はてなダイアリー日記

(強調は引用者による)
という点。

具体的にはスタイルシートに

@import url("http://www.foobar.ne.jp/hoge.css");

こう書いた場合でも

/*
imported from http://www.foobar.ne.jp/hoge.css
*/  

div.section p{
  color: red;
}

こんな風に展開されるので、無駄に余計に時間がかかることに。
そういうところを鑑みると実用的じゃないかなー、という辺り*1。

*1:さらに言えば、公開デザインに登録されるのは @import の指定なのか、外部ファイルを展開された結果なのかは検証してないので不明。後者ならば上で挙げたメリットは全く意味無いし。