poad1010のブックマーク - はてなブックマーク

コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
poad1010 2023/02/17
この記事をおすすめしました

techfeed
リンク
最短2行。上下左右中央揃えにはCSS Gridが一番ラク
CSSで要素を上下左右中央揃え（以下、中央揃え）する機会は多いです。要素は1つだけの場合もありますし、複数の要素の場合もあります。 ▼ 中央揃えの4つの事例昔は多くのコードを書いていましたが、CSS Gridを使えば最短2行のコードだけで実現できます。2020年から全ブラウザ（Chrome・Firefox・Safari・Edge）で対応済みです。本記事では、単一・複数要素の中央揃えの方法、キーとなるplace-contentとplace-it emsの使い方、従来のコードとの比較についてデモを交えて解説します。結論 1つの要素の中央揃えは、次の2行のコードを使います。
poad1010 2022/12/06
CSS

techfeed
リンク
JavaScriptのES2021で追加された新機能まとめ
2022/06/22追記最新仕様ES2022がリリースされたので、新しく記事を書きました。 JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。これまでの仕様はES2020でしたが、先日2021年6月22日にES2021が正式仕様として承認されました。 22.06.2021 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2021の全機能が使えます。本記事では、ES2021すべての新機能をまとめて紹介します。大きな数値を_区切りで書け
poad1010 2021/06/26
JavaScript

Web標準

ブラウザ最新動向

techfeed
リンク
1