2016-03-29 9 views
11

なぜ異なるブラウザーがファイルをブラウズするために異なる<input type="file">ボタンを持っているのか不思議です。それらをスタイルする方法を尋ねる多くの質問があります。明らかに、それらを変更するために何らかの "ハック"が使われています。しかし、ブラウザーがそれを制御する理由は誰も実際に説明していませんでした。ブラウザが入力タイプのファイルボタンを制御するのはなぜですか?

+0

& - - webkit-file-upload-buttonと&:: - ms-browsive psuedo-classesを使ってこれらのボタンを整形するのですが、これについて学ぶ前に苦労しなければなりませんでした。ボタンのスタイルを設定するために、主に[ファイル入力のスタイル設定](http://mrme.me/lio/blog)のブログ記事を書きました。 –

答えて

8

まだブラウザが1つしかないときは覚えていますか?スタイリングでフォントが使用されていない場合、ブラウザーはデフォルトのフォントを設定する必要があります。フォントにはデフォルト値が設定されているだけでなく、ボタンにもデフォルト値が設定されています。スタイリングが使用されていなくても要素を表示する必要があります。

時間が経つにつれて、より多くのブラウザが表示され、同じデフォルトフォントを使用できますが、お互いに区別したいと考えています。

開発者がボタンのスタイルを忘れ、ボタンのデフォルトがないとします。 <input>はどのように見えるのですか?フォームの下に浮かぶテキスト?それほど目障りではない。

質問:ファイル入力ボタンに戻る。最初は固定名が与えられ、現在のブラウザは最初に実装されていたものだけを継続しています。当時、人々はブラウザに表示されているテキストをアップロードするファイルに慣れていました。下記の参考文献のように、高齢者や他のブラウザを使用していないコンピュータ(限定されない)には適していない人など、別の文字列を見ると混乱することがあります。

参考:Change default text in input type="file"?

ので言ってコントロールが少し強すぎます。フォールバックははるかに良いと思います。 :)

+0

しかし、デフォルトのボタンテキストを持つことは、 "file"というタイプのケース – Dray

+0

私は、いくつかの "ハッキング"が利用可能であり、それを認識していることを述べました。 – Dray

+0

私はあなたの応答に感謝し、私はもっと情報を収集することができるまで待つでしょう。もしあなたがもっと多くを見つけてもいいのですか?ありがとうございます:) – Dray

4

既に述べたように、これはHTMLとブラウザの初期段階(モザイクブラウザを覚えていますか?)にまでさかのぼります。

このとき、ページデータとブラウザとのやりとりは、HTML構文とセマンティクスに制限されていました。 JavaScriptの変更は利用できませんでした。

それにもかかわらず、(ブラウザにローカルな)ファイル(ページを提供した)へのファイルのアップロードをサポートする必要性が広く受け入れられました。行く方法は、その目的のために論理buttonのバージョンを提供していた。ボタンは、ブラウザ側から(リンクの他に)起源の活動を可能にする種類のHTML要素でした。

その時点では、ページ上の要素は「ウィジェット」とは考えられない場所に表示されていたため、ウィジェットの選択やアップロードに関連するすべての視覚的および相互作用の側面に影響を及ぼすために、ファイル。

"ページ"とjavascriptの表現としてDOMを後で標準化することで、さまざまな面をプログラム的に変更する仕組みとして、「ユーザー」がスタイリングや視覚的な表現をより多くコントロールできるようになりました。そのような種類のボタン。

一方、現在のページ表現に影響を及ぼす可能性が増している(そして、ほぼ爆発的に)可能性は、現在のHTML要素構文を「拡張する」というプレッシャーも軽減します。 (私はいくつかのJavaScriptを使用してdivの賛成で最も標準的なHTML要素を使用しないようWebページをたくさん見てきました。)

だから、ブラウザ制御<input type="file"/>、彼らはこの要素の適切な表現を提供する必要があるため。この要素の実装には内部表現がないため、このような要素を使用せずに機能を実現するにはいくつかの選択肢がありますが、ブラウザのベンダーはページ開発者の内部状態を公開して(そしてこのようにしてより多くの制御を可能にする)。

ファイル入力ボタンの視覚的表現は、他のボタンとは異なり、さまざまなビジュアルコンポーネントのセットです。 1つはボタンそのものです。もう1つは、選択したファイルを表示するフィールドです。また、(少なくとも論理的に)利用可能なファイルを表示するポップアップウィンドウと、いくつかのフィルタロジックやその他のボタンがあります。 (後の部分が通常ウィンドウやオペレーティングシステムの環境から持ち込まれたとしても、これは実装の詳細です)。

単なるHTML要素では、十分な詳細でスタイリングを指定することはできません。例えば。背景色を指定する:これは、ボタン要素またはフィードバック領域(選択したファイル)に適用するのか、ファイル選択ポップアップに適用するのか?ブラウザ開発者は、「ユーザー」に使用されているコンポーネントの内部構造の一部を展示することに決めた可能性がありますが、形式的な日には「面白い」とは言えず、今日は他のメカニズムを使用することがあります。

+0

あなたの意見を知るには、 'input =" file "'は他の型と違って、特定の視覚化を与えなければならないのです。 – Dray

+0

文字のグループが一緒に属し、特別な視覚化を使用することは、読者がそのトークンを認識して、そのトークンを単一の用語として「解析」するのを助けるかもしれない。 – rpy

+0

私はあなたを怒らせるわけではありませんが、あなたの返信は抽象的なものです。そして、私が尋ねたものに答えることはできません。あなたはもう一度見て、もう少し明確にしようと思いますか?私はあなたの応答に感謝します。 – Dray

関連する問題