@import

@import (CSS)

仕様書

歴史

[406] 2009年頃の CSS3 を見ると代替スタイル・シートの名前を指定することができたようです。

実装

[3] Complex @import rules <http://hail2u.net/documents/cairs.html>

@import の各 UA の対応表。たしかに IE の対応状況は複雑怪奇。 (名無しさん 2004-03-30 08:15:47 +00:00)

[4] New Internet Explorer @import hack - Anne’s Weblog about Markup & Style <http://annevankesteren.nl/2005/10/ie-import-hack> (名無しさん 2005-10-17 23:42:31 +00:00)

[7] Useful CSS Snippets - webSemantics (Mike Foskett 著, 2007-01-13 16:06:46 +09:00 版) <http://www.websemantics.co.uk/tutorials/useful_css_snippets/#flashing>

[18] cssRulesスタイル・シートの読み込まれていない @import (CSSImportRules) を含んでいる (スタイル・シートの読み込みの途中の場合や、 404 等の場合、あるいは無奇癖モードtext/css 以外の場合。) と、Firefox 2 では cssRules 自体へのアクセスが拒否されます。

Opera 9 や WinIE 6 では、単にその参照されているスタイル・シートが空になるだけです。

[19] Firefox 2 では、絶対URI相対参照 (空文字列) で自分自身 (または素片識別子だけ違う URI) を指定しても、 特別な扱いはされません。

Opera 9 では、絶対URIまたは相対参照で自分自身 (または素片識別子だけ違う URI) を指定すると、 @規則全体が無視されます (CSSOM に現れず、 レンダリングにも影響しません)。

WinIE 6 では、絶対URI で自分自身 (または素片識別子だけ異なる URI) を指定しても、特別な扱いはされません。 空文字列を指定すると、CSSOM には反映されますが、 imports からそのスタイル・シートにアクセスしようとすると、エラーが出て拒否されます。レンダリングにも影響しません。 素片識別子だけを指定すると、エラーは出ないのですが、空のスタイル・シートを指定したかのような結果になります (CSSOM 上、レンダリング上)。

(名無しさん)

[20] >>19 以外の場合について、 素片識別子のついた URI を指定すると、 3ブラウザとも素片識別子のない URI が指定された場合と同じように処理します。

Firefox 2 と WinIE 6 では CSSOM 上の URI にも素片識別子がついたままですが、 Opera 9 では素片識別子部が除去されたものになります。

Opera 9 では background-image でも素片識別子が除去されます。

(名無しさん)

[21] 3ブラウザとも、 " で括られていたとしても、 URI の先頭と末尾の空白を除去して処理します。

Opera 9 と WinIE 6 では、 CSSOM 上の URI空白を除去したものになります。

Opera 9 では絶対URI解決されたものになります。

Firefox 2 では CSSOM 上の URI空白が残ったものになります。

>>19-20 は空白を除去した結果に適用されます。

(名無しさん)

[22] 3ブラウザとも、 " で括られていたとしても、 URI の先頭と末尾の空白を除去して処理します。

Opera 9 と WinIE 6 では、 CSSOM 上の URI空白を除去したものになります。

Opera 9 では絶対URI解決されたものになります。

Firefox 2 では CSSOM 上の URI空白が残ったものになります。

>>19-20 は空白を除去した結果に適用されます。

(名無しさん)

[23] >>18 訂正:

(名無しさん)

[24] Firefox 2 では、輸入されたスタイル・シートの中の selectorText に、なぜか @namespace がなくても *| が補完されることがあるようです。 (詳しい再現条件は不明。一旦読み込んだスタイル・シートを再度読み込んだとき?)

(名無しさん)

[25] WinIE 6媒体照会の指定に対応しておらず、 URI の一部として無理矢理解釈しようとします。 (名無しさん)

[26] Opera 9 や Firefox 2 は構文解析直列化@media と同じように媒体照会を処理するようです。 (名無しさん)

[27] >>26 mediaTextall が明示的に指定されたときだけ all] となり、 省略されたときには空文字列になるようです。 (名無しさん)

[28] WinIE 6 では @media 内でも @import が使えますが、 媒体型に関係なく適用されるようです。 (名無しさん)

[29] >>21 のテスト用 <http://suika.fam.cx/gate/2007/cssom/viewer?c=%40import%20url(%22%20style%20%22)%3B%0D%0A;h=%3Cp%3EThis%20paragraph%20should%20not%20be%20blue.%3C%2Fp%3E;p=n;x=style-element;i=html-div>

[407] @import@charset 以外の他の規則より前になければなりませんが、 Gecko でも Chrome でも、非妥当規則が前にあっても問題ないようです。

不思議解釈

[15] XHTML BasicとCSS Mobile Profileを徹底マスターする (2007-06-10 21:04:09 +09:00 版) <http://www.atmarkit.co.jp/fmobile/rensai/xhtml03/xhtml03.html>

※リンクとインポートの違い

一見すると、リンクとインポートには違いがないように見える。実はスタイルを1 つだけ定義する場合には、どちらを使っても同じ結果になるのだ。ところが、1つのドキュメントに複数のスタイルを次々にリンクした場合、またはインポートした場合には事情が変わってくる。複数のリンクでは、次々と定義を上書きしていってしまう。これに対して、インポートではスタイルはマージされる。設定したスタイルで矛盾が発生する場合は、より後方で設定されたスタイルが使用される。

意味がわからない。

[408] IRC logs: freenode / #whatwg / 20130820 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130820#l-472>

[409] IRC logs: freenode / #whatwg / 20130823 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20130823#l-706>

[410] Re: [webcomponents] Seeking status and plans ( (Dimitri Glazkov 著, 版)) <http://lists.w3.org/Archives/Public/public-webapps/2013OctDec/0042.html>

[411] Parsing (Windows) ( ( 版)) <http://msdn.microsoft.com/en-us/library/ie/hh673554(v=vs.85).aspx>

[412] Flash of Unstyled Content (FOUC) ( ( 版)) <http://bluerobot.com/web/css/fouc.asp/>

[413] HTML Imports ( ( 版)) <http://www.w3.org/TR/2014/WD-html-imports-20140311/>

[414] Chromium Blog: Chrome 36 Beta: element.animate(), HTML Imports, and Object.observe() ( ( 版)) <http://blog.chromium.org/2014/05/chrome-36-beta-elementanimate-html.html>

[415] Understanding the 'normalize' Loader hook ( ( 版)) <https://mail.mozilla.org/pipermail/es-discuss/2014-August/038776.html>

[416] [whatwg] Preloading and deferred loading of scripts and other resources ( (Ian Hickson 著, 版)) <http://lists.w3.org/Archives/Public/public-whatwg-archive/2014Aug/0177.html>

[417] ES6 Loader proposed changes ( ( 版)) <http://esdiscuss.org/topic/es6-loader-proposed-changes>

[418] ES6 Loader proposed changes ( ( 版)) <http://esdiscuss.org/topic/es6-loader-proposed-changes>

[419] IRC logs: freenode / #whatwg / 20141127 ( ( 版)) <http://krijnhoetmer.nl/irc-logs/whatwg/20141127#l-106>

[420] Mozilla and Web Components: Update ✩ Mozilla Hacks – the Web developer blog ( ( 版)) <https://hacks.mozilla.org/2014/12/mozilla-and-web-components/>

[421] Re: HTML imports in Firefox ( (Boris Zbarsky 著, 版)) <http://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0614.html>

[2] 26546 – importing style sheets and HTML imports from ES6 modules ( 版) <https://www.w3.org/Bugs/Public/show_bug.cgi?id=26546>