7

CSS の多くの制限と互換性の問題に苛立ち、Web ページを思い通りにレイアウトするために JavaScript コードを常に記述する必要があることに気づき、ページ構造化のために CSS を完全に捨てることで、将来のプロジェクトを合理化できるのではないかと考えました。

私は、XML ファイルで指定されたレイアウトを解析する JavaScript ライブラリを作成し、それらを絶対位置とサイズの、ネストされていない div を使用して HTML ドキュメントに適用しました。つまり、各ページには、すべてのコンテンツを含む HTML ファイル、そのコンテンツをページ上でどのように配置するかを指定する XML ファイル、および表面的なスタイリング用の CSS スタイル シートが含まれているということです。

ここに例があります。(ボタンを押してレイアウトを膨張させます。すべての主要なブラウザーの最新バージョンでテスト済みです。) もう 1 つ。

このシステムはプレーンな html に適切に分解され、javascript が無効になっている場合に個別のスタイル設定を行うことさえできます。

このアプローチにより、多くのクロスブラウザーの問題が解消されるだけでなく、より少ない作業でより複雑なレイアウトを実現できるように思えます。たとえば、私の理解では、少なくともネストされた div の混乱なしでは、CSS だけでは次のことを行うことはできません。

  1. 親コンテナー内で使用可能な幅または高さを埋めるように要素を設定します。(親コンテナーに他の要素がある場合、これは width/height:100% と同じではありません。)
  2. サイズが不明な場合でも、任意のコンテナ内で任意の要素を上/中央/下、左/中央/右に揃えます。
  3. 要素のサイズを大きくせずに、サイズが不明な要素をパディングします (たとえば、div がウィンドウ サイズの 100% に設定されている場合、ウィンドウをオーバーフローさせずにパディングすることはできません)。
  4. 親要素内のすべての要素が等間隔になるように自動的に設定します。
  5. 浮動要素の高さを設定します。同様に、シュリンク ラッピング動作を水平および垂直に個別に設定します。
  6. 要素を行ではなく列でフロートするように設定します (CSS3 は列をサポートしているようですが、ブラウザーの互換性は良くありません)

それにもかかわらず、これは冒涜的であると考えられていると確信しています。では、このシステムを使用して Web ページをレイアウトする際の潜在的な問題は何でしょうか?

編集：コードはgithubにあります

4

4 に答える 4

4

あなたは本質的に、CSS よりもうまく機能すると感じる方法で、CSS を書き直そうとしています。これで問題ないかもしれませんが、あなたにとってはうまくいくかもしれませんが、限界に直面するでしょう。

残りの世界では CSS が使用されます。通常、1 人の人 (あなた) に標準を学習させて従わせる方が、他の人に標準を学習させて従わせようとするよりも簡単です。他の人と一緒に開発する場合、CSS と HTML の知識をテーブルに持ち込むことができる代わりに、彼らはあなたの Web 開発の方法を学ばなければなりません。

他の場所で働く場合は、世界標準の CSS を使用するのではなく、自分のメソッドをテーブルに持ち込むことができるように彼らを説得する必要があります (これは通常、企業環境ではうまくいきません)。次に、CSS を適切に使用する方法を学習する必要があります。

他の人 (ここのスタックオーバーフローなど) から助けを得ようとしても、誰もが CSS を使用しているため、できません。ただし、CSS に問題がある場合は、私たちがお手伝いします。

そのため、「冒涜的」と見なされる可能性があります。そのアプローチの潜在的な技術的問題についてフィードバックを受け取ることを意図してこの質問を書いたと思いますが、政治/コミュニティの問題も同様に重要だと思います.

于 2013-06-20T19:14:59.227 に答える
1

「CSS の多くの制限と互換性の問題に不満を感じており、Web ページを希望どおりにレイアウトするために JavaScript コードを常に記述しなければならないことに気づきました」 これは、CSS を間違って使用しているか、実際に十分な時間を割いていないことを示唆していますCSS の内外を学習して、必要な機能を実現します (適切で普遍的な CSS をセットアップするのは、JS のプログラミングと同じように困難であり、JS のプログラミングと同じように、何百万通りもの間違った方法があります)。

あなたの例は、高さ 100% のページに基づいて機能しているようです。これは、たとえば height:100% に設定するhtmlと、実際には比較的簡単です。bodyこれを行うと、ボックスの h/valigning が非常に簡単になります。

次に、あなたの質問への答えとして、JS 呼び出しを使用してすべてのスタイリングを行うと、CSS を使用するよりもはるかにコストがかかるため、優れた CSS または CSS+JS ソリューションよりもパフォーマンスがはるかに悪いと強く思います。ブラウザには、CSS によってトリガーされるリフローを実行するための非常に最適化されたコードがあり、JavaScript で同じことを行うと数倍遅くなります。CSSには、例のようにボックスの位置合わせを行うなどの機能がないため、特定のスタイリングにJSを使用することは通常必要ですが、実行するたびに、ネイティブコンパイラを使用するのではなく、JSコードで完全なアルゴリズムを再実行する必要があります実現したいレイアウトの一部またはすべてで使用できる、はるかに高速なリフロー ライブラリ。

于 2013-06-20T19:03:50.977 に答える
0

サポートすることを選択したすべてのブラウザーに対して同じ出力を保証する必要があるという事実を除けば、これに問題はないと思います。さらに、フォト ギャラリーやコメント ページなど、ページ上の要素の量が変化する状況に対処する必要があります。経験上、多数の小さな要素を完全に配置すると、ページのパフォーマンスが大幅に低下することがわかります。要素数が 50 ～ 100 に達したときに、ウィンドウをスクロールしてサイズを変更すると、これに気付くでしょう。代わりに、この状況で Google 画像が行うことを行います。要素を に設定しdisplay: inline-blockて幅を制御し、自然に折り返すことができます。

position: relativeまた、ポイント 1 と 2 は CSSで親とposition: absolute子に使用することで簡単に実行でき、ポイント 3 は子に設定することで解決できることを指摘しておく必要があると思いbox-sizing: border-boxます。使用できますpadding-boxが、十分にサポートされていません。

あなたの懸念のいくつかは、CSS3 でも対処されています。CSS3列について言及しました。calcも参照してください。たとえば、動的なサイズの要素を中央に配置するためにこれを行うことができます。

left: 50%;
top: 50%;
margin-left: calc(-width / 2)
margin-top: calc(-height / 2)
于 2013-06-20T19:09:32.697 に答える