CSS 設計の間違い (翻訳)_html/css_WEB-ITnose

CSS ワーキング グループによって作成された、CSS の設計における間違いに関する不完全なリスト。翻訳は良くありませんが、ご容赦ください。

翻訳:

誰かがタイムマシンを発明したら、それは修正されるべきです :P 誰かがタイムマシンを発明したら、これらは修正されるべきです。 :P

• white-space: nowrap は、white-space: no-wrap である必要があります。
  • 行の折り返し動作は、white-space に追加すべきではありません
• white-space: nowrap は、white-space: no-wrap
  • である必要があり、コンテナを超えてラップするかどうかは、white-space
• vertical- で設定しないでください。 align はテーブルのセルには適用できません。代わりに、CSS3 の配置プロパティがレベル 1 に存在する必要があります。
• vertical-align はテーブル要素に適用すべきではありません。同様に、CSS 1 には CSS3 の配置プロパティが必要です。
• vertical-align: middle は実際には中央ではないため text-middle にする必要があります。
• vertical-align は実際には中央ではないため text-middle にする必要があります。
• パーセンテージの高さは、自動状況で未定義になるのではなく、fill-available に対して計算される必要があります。
• それをどのように翻訳すればよいかわかりません。
• テーブル レイアウトは合理的である必要があります。
• テーブル レイアウトは合理的である必要があります。
• 要素と裸のテキストを混合することはできません。すべての生のテキストには、必要に応じて CSS によって作成された、アドレス指定可能でスタイル可能な要素が含まれている必要があります。
• プレーン テキストを要素と混合することはできません。すべてのプレーン テキストは、必要に応じて CSS で作成できる、位置決め可能でスタイル設定可能な要素でラップする必要があります。
• Box-sizing はデフォルトで border-box である必要があります。
• Box-sizing のデフォルト値は border-box である必要があります。
• background-size の 1 つの値は、その値を複製する必要があり、2 番目の値はデフォルトで auto ではありません。
• background-size 値が 1 つだけ設定されている場合は、2 番目の値が設定値である必要があります。自動である必要があります。
• background-position と border-spacing (すべての 2 軸プロパティ) は、margin などの 4 方向のプロパティと一致するように、最初に垂直方向を取得する必要があります。
• background-position と border-spacing は次のとおりです。 margin と同じです。最初に垂直方向の値を取得し、次に水平方向の値を取得します。
• z-index は z-order または Depth と呼ばれる必要があり、すべての要素に対して機能する必要があります (フレックス項目の場合と同様)。
• z-index は z-order または Depth と呼ばれる必要があります。 、すべての要素で有効である必要があります (現在、位置が静的ではない要素でのみ有効です。翻訳者注) (フレックス項目と同様)。
• word-wrap/overflow-wrap は存在しないでください。代わりに、overflow-wrap は、nowrap (no-wrap) のような「空白」のキーワードである必要があります。
• word-wrap / オーバーフローラップは存在してはいけません。 overflow-wrap は、nowrap (ラップなし) と同じ、「空白」の値である必要があります。
• ボックスの上部と下部のマージンは、マージン崩壊の諸悪の根源であるため、ボックスの上部と下部のマージンが自動的に一緒に崩壊することは決して許可されるべきではありません。
• ボックス間上下の余白は自動的に折りたたまれてはなりません。これが 間隔折り地獄 の根源です。
• 高さの最小/最大を処理するための奇妙なルールの代わりにマージンが部分的に折りたたまれますか?
• 高さの最小/最大を処理するための奇妙なルールの代わりにマージンが部分的に折りたたまれますか?
• テーブル (および他の非ブロック、例えばフレックス コンテナー) は、疑似スタッキング コンテキストを形成する必要があります。
• currentcolor キーワードにはダッシュ (current-color) が必要です。
• キーワード currentcolor の中央にはセミコロン (current-color) が必要です。
• 任意の X11 名の代わりに、予測可能な色の命名システムがあるべきでした。
• 任意の X11 名の代わりに、予測可能な色の命名システムがあるべきでした。
• border-radius は、corner-radius である必要があります。
• border-radius は、corner-radius である必要があります。
• 絶対的に配置された置換要素は、開始位置揃えではなく、反対のオフセット プロパティ (例: 左+右) が設定されている場合にストレッチする必要があります。
• 反対のオフセット プロパティ (例: 左と右) が設定されている場合、設定すると、開始値に基づいて配置されるだけでなく、絶対的に配置された要素が引き伸ばされる必要があります。
• hyphens プロパティは hyphenate と呼ばれる必要があります (XSL:FO の人がハイフネーションに反対したため、hyphens と呼ばれます)。
• hyphens プロパティは hyphenate と呼ばれる必要があります。 (ハイフンの使用を拒否するため、ハイフン属性と呼ばれます) (どう考えても奇妙に感じます...翻訳者注)) 代わりにオプションの 4 番目のパラメーターを取得する必要がありました (アルファ値は R、G、およびB または S および L)。
• rgba() および hsla() は存在してはならず、rgb() および hsl() にはオプションの 4 番目の引数が必要です (アルファ値は R と同じ形式である必要があります) 、G と B、または S と L）。
• 子孫コンビネータは » である必要があり、間接兄弟コンビネータは ++ である必要があるため、セレクタのアスキー アート間には論理的な関係があります
• 子孫コンビネータは次である必要があります » そして間接兄弟コンビネータは次のとおりですは ++ であるため、セレクターのアスキー アート間には論理的な関係があります。セレクターを介して要素間の論理関係がわかるように、セレクターは ++ である必要があります。
• -blend-mode プロパティは -blend にする必要がありました
• -blend-mode プロパティは -blend にする必要がありました。
• Unicode 範囲の構文は、CSS の残りの部分 (u0001 ～ u00c8 など) と一致している必要があります。
• font-family では、フォント名を引用符で囲む必要がありました (CSS の「外部」から取得される他のすべての値と同様)。曖昧さ回避のためのフォント サイズの値。
• フォント設定名は二重引用符で囲む必要があります (「外部」の他の CSS と同様)。このルールにより、フォント サイズの値があいまいになるため、二重引用符で囲まれていないフォントを解析する愚かな方法が発生します。
• Flexbox は、flex-basis と幅/高さについてあまり気にしなかったはずです。幅/高さが自動の場合は、flex-basis を使用し、それ以外の場合は、幅/高さを柔軟性のないサイズとして使用します。最小/最大幅/高さの動作が一般的な定義から外れます。)
• それをどう翻訳すればよいかわかりません。
• :empty は :void である必要があり、:empty は空白のみを含む項目を選択する必要があります
• :empty は :void である必要があり、:empty は空白のみを含む項目を選択する必要があります。
• table-layout: fixed; width: auto は、固定レイアウト列を含む埋め込み可能なテーブルになるはずです。
• それを翻訳する方法がわかりません。
• 'text-orientation' は初期値として upright を持っているはずです ('writing-mode' への最新の変更を考えると、それをどのように翻訳すればよいかわかりません)。
• @import ルールは、(a) キャッシュ ヘッダーを指定しない限り、常にネットワークにアクセスし、(b) たとえ同一であっても、インポートごとに新しい CSSStyleSheet オブジェクトを構築するために必要です。積極的な URL ベースの重複排除とスタイルシート オブジェクトの共有を許可しました。
• 翻訳方法がわかりません。
• セレクターにはひどい将来性があります。最上位のカンマで分割し、全体ではなく不明または無効なセグメントのみを無視する必要がありました。
• セレクターにはひどい将来性があります。 。セレクターをカンマで区切って、すべてではなく、不明な部分または不正な部分のみを無視する必要があります。
• :link は最初から :any-link セマンティクスを持つべきでした。
• :link は最初から :any-link セマンティクスを持つべきでした。 (:any-link の概要については、「:any-link 擬似クラスは何ですか? 翻訳者向けノート」を参照してください)。
• flex の省略記法 (および flex-shrink および flex-grow の記法) は、フレックスの分数を表すために、裸の数値ではなく fr 単位を受け入れる必要があります。
• flex の略語 (完全な略語は flex- Shhrink と Flex-Grow) では、スケーリングの重みを表す単なる数値ではなく、fr 単位 (何ということだろう) を導入する必要があります。
• 表示プロパティは、display-type という名前にする必要があります。
• 表示プロパティは、display-type という名前にする必要があります。
• この記事はクリエイティブ コモンズ CC BY-NC-SA 4.0 契約に準拠しています
ネットワーク プラットフォームで再版する必要がある場合は、確認のために私に連絡してください。

---