Clever Geek Handbook

は有害です。

ブラウザーに相対リンクを解決するための基本パスが指定される<base>



は有害であり、適切なレイアウトで使用しないでください。 代わりに、リソースパスを指定するためのかなり厳密で柔軟な方法があります。

CNCモードの普及により、Web技術者は次の問題に直面する可能性が高くなります-サーバー上のレイアウトテンプレートのある次のフォルダーにあるファイル（CSSや画像など）は、相対パスでアドレス指定できなくなります。 非常に分岐したサイトにページを自動的に作成する場合、表示されている古いページのアドレスに応じてリソースへの相対パスを自動的に変更する方法は事実上なく、通常の相対パスは機能しなくなります。



彼は何について話しているのですか？



アドレスブラウザ example.com/blog/record1



example.com/blog/record1



は、 ../css/blog.css



リンクを解決しようとします example.com/blog/css/blog.css



example.com/blog/css/blog.css



おそらくこれはそれほど悪くはありませんが、アドレスが次のようなものになる状況では example.com/blog/tags/test



example.com/blog/tags/test



、同じリンクは example.com/blog/tags/css/blog.css



example.com/blog/tags/css/blog.css



明らかに、複数のURLに同じファイルが存在することは実装できますが、これは明らかに価値がありません。 css



フォルダーがレイアウトテンプレートと同じ場所にある場合でも、相対的なアドレス指定の問題はなくなりません。

そのような場合に通常そうであるように



世界中のWebプログラマーおよび技術者は、この困難な状況で<base>



タグを思い出しました。 仕様によると：

BASE



要素を使用すると、作成者はドキュメントのベースURIを明示的に指定できます。

BASE



要素を指定する場合、外部リソースを参照する要素の前に、HTMLドキュメントのHEAD



セクションに存在する必要があります。 BASE



要素で指定されたパス情報は、その要素が存在するドキュメント内のURIのみに影響します。


解決策は見事に単純なようです： base href="http://example.com/templates/"



要素でbase href="http://example.com/templates/"



指定することにより、ブラウザーに上記のすべての相対URLを同じ場所にある実際のファイルへのリンクに解決させます。 相対パスでディレクトリツリーを上に移動する習慣を取り除くと、これらの問題を完全に取り除くことができます。

何が悪いの？



このような目的で<base>



を使用するときに発生する問題の簡単なリストを以下に示します。

  1. サイトは他のドメインからの動作を停止します-閲覧しようとしても www.example.com



    www.example.com



    ブラウザーは、リソースをプルしようとします example.com



    example.com



    （ wwwなし ）。 CSSと画像の場合、これはまだ恐ろしいことではありませんが、スクリプト（特にInternet ExplorerのHTC）、Cookie、ActiveX、Flash（サーバーとの相互作用を意味する場合）、およびhttps経由のアクセスの場合、ユーザーは多かれ少なかれ深刻になります問題。 また、サイトを別のドメインに移動する（または別のサイトにそのエンジンを使用する）ことの難しさについても考えてください。
  2. <Base>



    は、リンクで使用される相対アドレスにも影響します。これは、ベースパスに従って解決されるようになりました。 base href="



    を指定しても example.com



    example.com



    /"



    、最初の問題で指定されたドメイン間の衝突が残ります。
  3. 心理的計画の問題：大きな分岐、モジュール構造のテンプレート、または大量のコードを含むプロジェクトで与えられる基本的な経路は、プロジェクトに慣れていないがページにいくつかの画像を挿入するタスクを持っている「新鮮な」レイアウトデザイナーを混乱させる可能性があります。
  4. 最も驚くべき問題：表示されているドキュメントに<base>



    タグがあり、指定されたCSS float



    プロパティを持つマークアップ要素がある場合（たとえば、 <div style="float: left;"> !</div>



    ）このような要素でマウスを使用してテキストを選択できます。 どんなつながりがあるのか​​は明らかではありませんが、事実です。
  5. CSSフィルター（AlphaImageLoaderなど）で使用されるパスを解決するときの同じIEは、ベースパスを無視し、 <base>



    がないかのように相対リンクを解決しようとします。 サイトのルートをベースパスとして指定した場合、これに気付くことはありませんが、この容量で他のフォルダーを使用すると、PNGの標準の "薬"が機能しなくなります。


結論として、サーバールートをベースパスとして使用することをお勧めしますが、これによりIEでいくつかの問題が発生し、サイトが複数のドメインで動作するための深刻な問題が発生します。 相対パスで問題を解決したので、私たちは自分用にさらにいくつかを作成しました。

上記の問題に関連して、 <base>



タグを完全に拒否する方が良いように思えます。 また、主な問題を解決するには、相対リンクを操作する他の方法を使用します。

半絶対アドレス指定



実際、 /



（「スラッシュ」）記号で始まるサーバールートからのリソースに単純に対処する場合、 <base>



なしで実行できますが、サイトはどのドメインからでも動作し、いくつかの利点があります。 一般的に使用される相対アドレスとは対照的に、このアドレス指定を「半絶対」と呼びます（実際の絶対アドレス指定とは異なり、プロトコルとドメインが指定されていないためです）。

つまり、問題のある例で指定されているCSSファイルは、 /templates/css/blog.css



としてアドレス指定する必要があります。 デフォルトのブラウザは、呼び出されたドキュメントのディレクトリをベースディレクトリとして使用するため（たとえば、 example.com/blog/record1



example.com/blog/record1



ブラウザの場合、このパスはインデックスドキュメントを表示するディレクトリのように見えます）。 スラッシュで始まる相対リンクには、使用されるプロトコルとURLの他のすべての部分が先行し、現在のドメイン（およびポートが指定されている場合はポート）で終わります。 したがって、リソースのアドレス指定の問題は、ドメインに関する不必要な問題なしに解決されます。

同時に、細心の注意を要するシーケンスを呼び出します。CSSのurl()



コンストラクトとフィルター、およびドキュメント間のハイパーリンクを含むすべての場所で、この表記法を使用する必要があります（同じドメイン内で作業する場合）。 これにより、コードの厳密な順序とパフォーマンスを維持しながら、ファイルの処理をある程度自由にできます（たとえば、CSSファイルをimages



フォルダーにフックしたり、別のフォルダーに分離したりできます）。 残念ながら、Web開発で使用される多くのIDEには適切なリソースアドレッシング設定がありません。相対的なアドレッシング（特にディレクトリツリーのハイク）にふけり、「半絶対」メソッドによってファイルが存在しないことを示します。 ツールに依存しないでください。頭で考えてください。

ただし、「半絶対」アドレス指定を使用しても、問題なく実行できます（そして、あなたはどう思いましたか）。 私の練習では、Flashで問題が発生しました。ToRによれば、ビデオをスピンするだけでなく、時々1つのファイルのいくつかのフラッシュファイルをサーバーに頼りました。 フラッシュドライブファイルは、「現在のディレクトリ」からロードされ、 file.txt



としてアドレス指定されることになっていfile.txt



。 CNCエンジンが使用されていたため、各ページには独自のディレクトリがあり、フラッシュドライブは機能しませんでした。

そのとき、このファイルを/flash/file.txt



としてアドレス指定するようFlash技術者に依頼することで問題を解決し/flash/file.txt



。 これでサーバー上の問題は解決しましたが、Flash技術者自身の生活を台無しにしました（ローカルファイルシステムで作業する場合、このようなアドレス指定はC:/flash/file.txt



ようなパスで許可されます）。 もちろん、より良い解決策があります。

彼女の場所にフラッシュを向ける



httpを介してサーバーと通信する必要があるFlashムービーを実装する場合（たとえば、Web経由でファイルを読み取る場合）、 <base>



を使用せずにデプロイされる各ムービー専用のベースディレクトリを指定できます。 これを行うには、フラッシュドライブの埋め込みコードで、「半絶対」形式で目的のディレクトリのアドレスに等しい値を持つベースパラメータを指定する必要があります。 つまり、私の場合、フラッシュドライブの埋め込みコードは次のようになりました。

<object …>

<param name="base" value="/flash/">

…

<embed base="/flash/" src="/flash/01.swf" …>

…





コードを公開する「便利な」手段について、Habrahabrの著者に感謝します





実際、ベースディレクトリはまだ設定していますが、プロトコルとドメイン名を指定せずに1つのFlashムービーに対してのみ設定しました（これらは「半絶対」リンクを解決する場合と同じ方法で置き換えられます）。 次のクリップでは、別のディレクトリを指定できます。サーバーのWebスペースのルートディレクトリに慣れている場合は、単に「 /



」を指定できます。 フラッシュ技術者は、Webサーバースペース内のフラッシュドライブの位置を常に確認し、便利な方法でリソースへのパスを示すことができます（オプションで「半絶対」として）。

PS



それでもまだ誰にもわからない場合は、自分の権限の枠内で、自分の実践に基づいて、そのような方法を排他的に使用することをお勧めします。 そのため、私はトピックを個人のブログで公開し、対応する集合では公開しませんでした。



あなたが私を信頼していない場合、または何らかの理由でこの問題についてあなた自身の意見を持っている場合-私はあまり議論を提起するのではなく、あなたの個人的なブログであなたの意見を表現することをお勧めします。 ここに、私自身のIMHO、<base>が有害である理由、およびそれがない場合の対処方法のみを記載します。


More articles:


All Articles