CSS スプライトとユニット_html/css_WEB-ITnose

(1). CSS スプライト テクノロジについて

例:

1. フォーラム チャネルには、フォーラムのサイズに基づいて、フォーラム固有のいくつかの小さなアイコン (ファイア、いいねなど) があります。サイト全体の小さなアイコン 統一感を出すために、これらの小さなアイコンはアイコンの背景画像にも配置されています。しかし、数年後、フォーラムのいくつかのアイコンがサイト全体に使用されており、冗長であり、トラフィックの無駄であることがわかりました。典型的な「敷地の 100% を占有します。トイレではうんちをしません。」
2. 数年後、いくつかのアイコンを調整する必要があります。ここで問題が発生します。いくつかのアイコンが他の場所で使用されているかどうかを覚えていないため、削除したり置き換えたりすることはできません。この保守性はすぐに大幅に低下します。

改善点:

1. 属性のグループ化: たとえば、すべての共有シリーズ アイコンのコレクション (Sina Weibo、Penguin Weibo の小さなアイコン)
2. 機能のグループ化: レストランの割引ステータスを表すすべてのアイコン (オファー、クーポンなど) ) 集まれ
3. 直接自立: 身寄りのない小さなアイコンとの関係構築に固執せず、ただ自立してください

まとめ:
あるヒントに執着しても壊れない(私はリクエストの最小数など）全体的な状況を検討します。

(2). 絶対単位と相対単位

input、textarea、select コントロール要素自体はテキスト サイズを持ち、デフォルトでは body などの親タグを直接継承しません。したがって、リセットする必要があります。そうしないと、16 ピクセルのテキストがユーザーを怖がらせることになります。

最初は、いくつかの大きなウェブサイトの影響を受けて、次のように設定されていました:

input, textarea, select { font-size: 12px; }

私がそれを見てみると、Weibo はまだこんな感じでした (//zxx: 無数の事実が示しています。反例については、Weibo で目で見て正しいものを見つけることができます):

ただし、この設定は非常に悪いです。上の「カニとタコの物語」のカニの運命を見てください。柔軟性が低く、自動的に適応できなければ、罠にかかった獣となり、他人に虐殺されるだけです。

グッドプラクティスは次のとおりです:

input, textarea, select { font-size: 100%; }

この 100% のベストプラクティスは、言うまでもなく、くだらない経験とは何の関係もありません。なぜこのように設定されているのでしょうか？使ってみればわかります。

ところで、私は別のことを思いつきました。2 層のラベル ボタンを作成するときに、多くの人が次のようなコードを作成することがわかりました。高さを書き込みます。次のように書くことができます:

.redbtn { height: 24px; ... }.redbtn .btn { height: 24px; ... }

実際には、高さは冗長です。これで十分です:

.redbtn { height: 24px; ... }.redbtn .btn { height: 100%; ... }

内側と外側のラベルが同じ高さの場合は、高さを持たないでください。同じ定義が同時に表示されます。