Qrac
Qrac
2025年は新しく書き直すので、こちらはクローズ。 #131
`.grid.is-gap-{x}` からネガティブマージンを無くそうとしたが、12分割グリッドでは横方向のネガティブマージンを取り除くことは不可能だった。 - `display: flex` の `flex-basis` は `gap` の数値を含められないので100%を超えてしまう - `display: grid` は `gap` を含んだ割合を算出できるが残りを埋めるようなアバウトな幅を子要素で指定できない
Subgridは `display: grid` でしか使えない。前述の通り、グリッドCSSに `display: flex` を引き続き使う必要があるので `is-stretch` の仕様も従来のものを継続する。
`react-musubii` となるコンポーネント集も作っているが、実務で使わなそう(クラス名をタイピングするだけの方が楽)~~なのでplaygroundに内包するだけにしておく~~だし仕様変更の修正が面倒だったので削除。
以下の文字プロパティは2024年3月末現在Chrome 120あたりにしか実装されていないので見送る。 - `word-break: auto-phrase;` - `text-autospace` - `text-spacing-trim` > [CSSで句読点括弧のカーニングができるようになるぞ! 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ | コリス](https://coliss.com/articles/build-websites/operation/css/css-4-features-for-i18n.html)
`::placeholder` は全ブラウザに対応しているのでプレフィックス系はすべて削除する。 > [::placeholder - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder)
キーカラーのちょっと暗い色・透明色の算出には全ブラウザに対応した `color-mix()` を使う。filterやopacityを使う必要もなく各場所の色を変えられる。オーバーライドしやすい設計になるので良い。 > [color-mix() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/color_value/color-mix)
`select` の矢印をIEで消す `::-ms-expand` 指定は必要なくなったので削除。
`text-decoration` の表現力が向上したため、リンクの下線はborderではなくunderlineをデフォルトにする。 > - [text-decoration - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration) > - [text-underline-offset - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-offset)
文字の折り返しに `overflow-wrap: anywhere;` を採用してみる。 > - [文章の折り返し指定のCSS最新版 - ICS MEDIA](https://ics.media/entry/240411/)