編集

Chrome 117

#Chrome #CSS

Chrome 117 がリリース。

#New CSS features for entry and exit animations

transition-behavior: allow-discrete で離散的な CSS プロパティのアニメーションが可能になりました。次の例では fade-out クラスが付いてから、0.25s 後に display: none に切り替わります。

css
.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

また、@starting-style ルールで、要素の初期状態を指定できるようになりました。これにより今まで animation プロパティや JavaScript などを併用する必要があったアニメーションなどを transition のみで記述できるようになります。

css
/*   IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out,
    display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
}

/*   BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

#Array grouping

配列のグループ化できる Object.groupBy と Map.groupBy が追加されました。

jsx
const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "cherries", type: "fruit", quantity: 5 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
}
*/

#CSS Subgrid

Subgrid を利用すると、グリッドを入れ子にして、親行列の行や列に子行列を整列させることが出来ます。Chrome のサポートにより、ほとんどのモダンブラウザで利用できるようになりました。

css
.card-group {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: center;
}

.subgrid .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 16px;
}

子行列内の位置を揃えたいようなケースで有用です。

#参考文献

編集