ノーシック時代

あなたが2020年の前にいつでもCSSを学んだならば、チャンスはあなたが道に沿って多くの少しのハッキングを集めたということです.あなたが知っている、センタリングのようなもの、スタイルのフォームの要素は、画像をサイジング、テキストを包む….ブラックマジック.信じられないほど具体的な行動は、Googleでは、誰かがそれについてのブログ記事を書いて、それ以外のあなたの日を台無しに期待している.
私の同僚はCSSを全く疑惑をもって見ています.なぜなら、10年前にバックエンド・プログラミング、プロジェクト・マネージメント、デザイン、あるいは「JSオンリーフロントエンド」に移行する前に、彼らはそれを学ばなければならなかったからです.
多くの人々も、奇妙な生き物、獣を飼った人、CSSハッキングの浸透できないジャングルを通して見ることができて、彼ら自身の健康を犠牲にしてそれを理解することができたもののようなCSSを使っている開発者を見ます.
しかし、真実はこうです.

我々は、CSSハックが嫌いです

個人的には、私は彼らが嫌いです.彼らは奇妙なレイアウトの動作のビットに苦しんでいる学生や同僚に示すために楽しいかもしれません!しかし、私はそれらにもかかわらず、これは単なる回避策、またはこれのために作られたことがないプロパティを使用する醜い非標準的な方法です.彼らは決して良いコードではない.彼らは謎めいたコード、メンテナンスの悪夢であり、おそらくより悪い、彼らは最終的には生態系全体を傷つけるCSSに向けて不信感を作成します.
そして、それはどのようにピーターグリフィンは、CSS、垂直方向のアライメントジョークに苦しんで取得する方法です.ヘック、私も、私のTwitterカバーイメージとして皮肉な「CSSはものすごい」マグを持ちます.

これらのジョークは私たちが長年のCSSの厳しい現実に対処するのを助けました、しかし、真実は彼らが現在時代遅れであるということです.何かをするなら、それらを使用することは公に発表するようです

I learned CSS 10 years ago, hated it and never tried again! (insert miracle CSS-in-JS library presentation here)

うん、そのTwitterの旗は間違いなく行かなければならない.

ウィル2022は、CSSの時代を開始します？

最近CSSにはたくさんのことが起こっています.そして、2022年はCSSのハッキングを取り除かれた年になるかもしれません.
ちょっとexempleのために見てください.

ブラムス

🔥 2022年1月にすべてのブラウザで出荷することを期待しています.コンテナ問い合わせ2カスケードレイヤ3 .4色.ビューポートunits 5 :His ()オーバースクロール動作7.Subgrid8. アクセントカラー9 .メディアクエリ範囲
午後21時43分- 2021年12月27日
ものは速く動いています、そして、CSSは成熟した言語になっています.ブラウザーコミュニティさえ、CSSレベルを最高の方法でアップするために、組織化しています.参照Interop 例えばイニシアティブ.

アクセント色の例

The accent-color プロパティは非常に簡単で、私の好きな新しいものの一つです.
そのユニークな目的は、ネイティブフォームの入力の色を変更できるようにすることです:チェックボックス、ラジオボタン、範囲セレクタ.チェックアウト:

:root {
  accent-color: crimson;
}

それはCSSとゼロハックの1行です.
何年にもわたって(私は何十年も言うでしょうか?CSS開発者は、実際にネイティブの入力を隠し、希望の外観で偽の入力を作成することによって実現しました.両方とも良い老人とつながっていた:checked 擬似クラス.これは通常のコードではありませんでした.それは汚いとエラーがちなハック、辛抱強く解決するためにきれいに解決を待っている.

ハッキングを残すこともあなたの責任です

The accent-color プロパティはその良い例です.はい、それは新しいですnot supported by every browser .
さて、私はこれについて気にかけることができませんでした.
CSSがものすごいので、それは単に無視しますaccent-color 古いブラウザで、デフォルトのシステム色を使用します.どれが非常に良いですか(あなたの背景が白でないならば、対照をテストしてください).
さらに時間が経つにつれて、より多くの人々がこれをサポートしているブラウザを持っており、意図された最終的なデザインが表示されます.それは進歩的な魔法です:あなたが働いていない間、あなたのウェブサイトはよりよくなっています.
私はこれについて気にしないではなく、誰もがする必要はありません.デザイナーやマネージャーは、以前のブラウザでも入力のためのブランドの色を持っているといいだろうと判断し、私はそれを尊重します.しかし、それはデザインの質問だけでなく、彼らはコストと利益です.
それで、私は観客(それはいずれにしろ、ものすごい失策があるでしょう、そして、時間とともに減少する分数)の分数のためにCSSをハッキングする立場を守るでしょう.
私も、Flexboxのものが好きですgap 空間管理を容易にするプロパティ

body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

ブラウザの減少分はそれをサポートしていないし、アイテム間のギャップを表示します.あなたがこれらのケースを扱うためにセットアップAに喜んでいるかどうかは、あるもう一つの議論です.
私は、小さい(そして、再び、減少している)ユーザーの割合がスペースを持たないという事実で、平和を作り始めました.コンテンツが完全に読みやすい限り、これは私を悩まない.

さよならハッキング

もちろん、私はまだ時々ハッキングを使用しています.しかし、私は彼らに共通のCSSを考慮するのを止めました.
CSSは我々の巧妙なハックに追いつくと、標準的な、堅牢な機能を提供することによってそれらを根絶している.あなたがあなたの内容がまだ意図されたCSSのあらゆる行なしでまだアクセス可能であるということを知っている進歩的な強化技術を使う(そして、擁護する)ならば、あなたは意志でこれらの新機能を使うことができます.あなたは自由に感じ、長く生きて、私は信じて、より良いウェブサイトを作る.
CSSを嫌う同僚にこれを共有すること私はあなたを非難することはできません.しかし、これは2022です、そして、CSSは変わりました.