問題タブ [css]

ウェブデザインに関して言えば、私はリモートで見栄えの良いものを作るのが恐ろしいです。ありがたいことに、デザインテンプレートの無料のソースがたくさんあります。ただし、これらのデザインの問題は、1ページしかカバーしておらず、多くのユースケースをカバーしていないことです。CSS Zen Gardensを見ると、1つのHTMLファイルがあり、CSSファイルを変更するだけで根本的に異なるスタイルを設定できます。

今、私は、多くのユースケースをカバーし、Zen GardenのようなさまざまなCSSファイルで一般的にテーマを設定できる標準のHTMLレイアウト（タグとID）があるかどうか疑問に思っています。私が想像しているのは、HTMLの記述方法と、使用することになっているボックス、リスト、メニュー、およびスタイルに関する一連のルールです。さまざまな用途をカバーする一連の標準テストページを作成できます。また、新しいCSSファイルを作成し、さまざまなページをすべて適切なビューでサポートする必要があります。

私が説明しているものに似たものをカバーするプロジェクトはありますか？

次のコードを前提として、ラジオボタンのスタイルをラベルの横に配置し、選択したラジオボタンのラベルのスタイルを他のラベルとは異なる方法にするにはどうすればよいですか。

また、私はyuicssスタイルをベースとして使用していることを述べさせてください。あなたがそれらに精通していない場合、それらはここで見つけることができます：

• reset-fonts-grids.css
• base-min.css

両方のドキュメントはこちら：Yahoo！UIライブラリ

@pkaeding：ありがとう。ぐちゃぐちゃに見えた両方を浮かせてみました。アクティブなラジオボタンのスタイリングは、一部のinput [type = radio]：google検索でのアクティブな指名で実行できるように見えましたが、正しく機能しませんでした。ですから、私が推測する質問はもっとあります。これは、今日のすべての最新のブラウザーで可能ですか。そうでない場合、必要な最小限のJSは何ですか。

たとえば、次のような（不自然な）例がある状況があります。

どの要素にも幅が設定されておらず、私が望むのは#inner1, で#inner2あり、#inner3内部で水平に隣り合って表示されます#outerが、起こっているのは#inner1と#inner2が隣り合って表示#inner3され、次の行に折り返されていることです。

これが発生している実際のページでは、さらに多くのことが行われていますが、Firebug を使用してすべての要素を非常に注意深く調べましたが、要素がandと#inner3同じ行に表示されず、幅が広くなる理由がわかりません。#inner1#inner2#outer

だから、私の質問は次のとおりです:ブラウザが#outerのサイズを変更している理由、または前の「行」に配置する十分なスペースがあるにもかかわらず、なぜラップを選択しているのかを判断する方法はありますか? #inner3この問題に対する具体的な解決策を明らかにした上で、HTML/CSS/Web UI の専門家が、フロントエンドで作業していることに気付いた貧弱なバックエンド開発者のために、どのようなヒントやテクニックを持っていますか?

クラス内の子要素のクラスに基づいて親要素を選択する方法はありますか？http://drupal.orgの素敵なメニュープラグインによるHTML出力に関連する私に関連する例。出力は次のようにレンダリングされます。

私の質問は、アクティブなクラスを持つアンカーを含むリストアイテムにスタイルを適用できるかどうかです。明らかに、リストアイテムをアクティブとしてマークすることをお勧めしますが、生成されるコードを制御することはできません。javascriptを使用してこの種のことを実行できますが（JQueryが頭に浮かびます）、CSSセレクターを使用してこれを実行する方法があるかどうか疑問に思いました。

明確にするために、アンカーではなく、リストアイテムにスタイルを適用したいと思います。

この HTML を考えると:

そしてこのCSS：

topnavリストをインラインリストに変換するにはどうすればよいですか?

短いバージョン：Web開発者とWeb開発者のエンドユーザーの両方が使用するすべてのブラウザーで一貫したプレゼンテーションとAJAX機能を実現するための最もクリーンで保守しやすい手法は何ですか？

• IE 6、7、8
• Firefox 2、3
• サファリ
• グーグルクローム
• オペラ

ロングバージョン：他のWeb開発者向けのWebアプリを作成しました。私のアプリは、プレゼンテーションとAJAXの動作の両方で主要なWebブラウザー（およびGoogle Chrome）をサポートする必要があります。

Firefox / Firebugから始めて、IE 6および7で一貫したスタイルを設定するための条件付きコメントを追加しました。次に、驚いたことに、jQueryがIEで同じように動作しないことを発見しました。そこで、条件付きで純粋性の低いjQueryを使用して、JavascriptをFFとIEで移植できるように変更しました。

今日、私はWebkitとGoogle Chromeでテストを開始し、スタイルがFFとIEの両方と矛盾しているだけでなく、おそらく構文エラーまたは解析エラーが原因でJavascriptがまったく実行されていないことを発見しました。CSSが機能することを期待していましたが、今ではJavascriptのデバッグが増えています。この時点で、私は一歩下がって、あらゆる状況に対応する特別なケースの山を書く前に考えたいと思います。

私は特効薬を探しているのではなく、物事を可能な限り理解し、維持できるようにするためのベストプラクティスを探しています。これがサーバー側のインテリジェンスなしで機能する場合は、私が好みます。ただし、たとえば、ユーザーエージェントを確認してから、さまざまなファイルをさまざまなブラウザーに返すという利点がある場合は、Webアプリの全体的な理解度と保守性が低い場合は問題ありません。どうもありがとうございました！

HTML で次のようなことをしている人々を見てきました。

これは最新のすべてのブラウザーで機能しますか? また、その種の if ステートメントで機能するブラウザーの種類のリストはありますか?

編集

ありがとうロス。gt、lt、gte、および lteについて調べるのは興味深いことです。

を使い始めたばかりですがGoogle Chrome、サイトの一部 (ページ上のすべてのリンクなど) が真っ赤になっていることに気付きました。それらは、点線の下線が付いた黒である必要があります。

WebKitスタイルに関係なく、すべてのリンクを赤くするレンダリングの落とし穴はありますか?

何度も試行錯誤を繰り返した結果、CSS2でそれを行うための満足のいく方法を見つけることができませんでした。

これを実現する簡単な方法は<table>、以下のサンプルに示すように、それを便利なものにラップすることです。テーブルのレイアウトを避け、風変わりなトリックを避ける方法を知っていますか？

私が知りたいのは、固定幅なしで、またブロックである方法です。

Webアプリケーションのパフォーマンスを向上させようとしています。メインのHTMLページを返すのにかかる時間を最適化するために使用できるメトリックがありますが、これらのHTMLページから含まれる外部のCSSファイルとJavaScriptファイルが心配です。これらは、HTTP Expiresヘッダーを使用して静的に提供されますが、アプリケーションのすべてのページ間で共有されます。

ブラウザは表示されるページごとにこれらのCSSファイルとJavaScriptファイルを解析する必要があるため、サイトのすべてのCSSファイルとJavaScriptを共通ファイルに共有すると、パフォーマンスに悪影響が出るのではないかと心配しています。これらのファイルを分割して、各ページからそのページに必要なCSSとJavaScriptのみにリンクする必要がありますか、それとも努力の成果がほとんどありませんか？

このためのメトリックを生成するのに役立つツールはありますか？