Miobiki

  1. HOME
  2. javascript
  3. 外部スタイルシートと外部スクリプトの相対パスの疑問

外部スタイルシートと外部スクリプトの相対パスの疑問

「外部スタイルシートのurl関数」と「外部スクリプトのfetch API
それぞれ相対パスで記述した時の起点が異なることに疑問を覚えました。
どちらかと言うとurl関数のほうが馴染みが深いので、fetch APIも外部スクリプトからの起点になってもおかしくないのではと思ったのが始まりです。

こういった調べものは初めてだったので、分かりやすい経緯や説明が見つけられなかったです。
なので仕様なんだと受け入れることにしました。

記述 起点
内部スタイルシートurl()
インラインスタイルurl()
ドキュメント
外部スタイルシートurl() スタイルシート
内部スクリプトfetch ドキュメント
外部スクリプトfetch ドキュメント

相対パスの確認用サンプル
https://nao5151.github.io/relative-path/


stylesheetメモ

相対 URI は スタイルシートの URL(ウェブページの URL ではありません)に基づく URI です。

https://developer.mozilla.org/ja/docs/Web/CSS/url

In order to create modular style sheets that are not dependent on the absolute location of a resource, authors should use relative URLs. Relative URLs (as defined in [URL]) are resolved to full URLs using a base URL. RFC 3986, section 3, defines the normative algorithm for this process. For CSS style sheets, the base URL is that of the style sheet itself, not that of the styled source document. Style sheets embedded within a document have the base URL associated with their container.

https://drafts.csswg.org/css-values-3/#relative-urls

google翻訳: リソースの絶対位置に依存しないモジュラースタイルシートを作成するには、作成者は相対URLを使用する必要があります。 相対URL([URL]で定義)は、ベースURLを使用して完全なURLに解決されます。 RFC 3986、セクション3は、このプロセスのための規範的なアルゴリズムを定義します。 CSSスタイルシートの場合、ベースURLはスタイルシート自体のものであり、スタイル付けされたソース文書のものではありません。 ドキュメントに埋め込まれたスタイルシートには、そのコンテナに関連付けられたベースURLがあります。

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document:

https://www.w3.org/TR/CSS1/#url

google翻訳: 部分URLはドキュメントに関係なく、スタイルシートのソースに対して相対的に解釈されます


scriptメモ

  1. Let baseURL be document’s base URL, if document was given, and environment settings object’s API base URL otherwise.

https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url

google翻訳: baseURLをdocumentのベースURL、documentが与えられていれば環境設定オブジェクトのAPIベースURLとする。

A base URL

A base URL used for resolving module specifiers. This will either be the URL from which the script was obtained, for external scripts, or the document base URL of the containing document, for inline scripts.

https://html.spec.whatwg.org/multipage/webappapis.html#concept-script-base-url

google翻訳: モジュール指定子の解決に使用されるベースURL。 これは外部スクリプトの場合はスクリプトを取得したURL、またはインラインスクリプトの場合は含まれているドキュメントのドキュメントのベースURLのいずれかになります。


スタイルシートの場合はモジュラースタイルシートを作れるようにというのは分かりました。
スクリプトの場合はドキュメントがリクエストを要求すると考えると納得できました。
ですがスタイルシートはどこか特別なように思います。
どういう経緯でそうなったのかを知りたいのですが、調べ方がよく分からず断念・・・