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

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。従来の C

o_hiroyuki 2023/07/13

リンク

ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ

筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？未満のときはどうするの？ and で繋げなきゃいけないの？長くない？と疑問に思いながら、今日まで長い年月を過ごしてきました。本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定

o_hiroyuki 2023/03/29

css

リンク

コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

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

o_hiroyuki 2023/02/15

css

リンク

CSSのsvh・dvhが全ブラウザ対応。iOS・Androidの画面いっぱいに要素を広げる最適解

iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。本日（2022/11/30）リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え

o_hiroyuki 2022/12/01

css

リンク

Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

（2023/08/29）全ブラウザでネストに対応したので記事を更新しました。本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。

o_hiroyuki 2022/11/19

css
chrome

リンク

正式仕様リリース！ JavaScriptの最新仕様ES2022で追加された「全」新機能

JavaScriptの仕様はECMAScriptで、ECMAScript 2015（ES2015）、ECMAScript 2016（ES2016）...というように毎年進化を続けています。これまでの仕様はES2021でした。本日6月22日、ES2022は正式仕様として承認され、ES2022が最新仕様となりました。 22.06.2022 Ecma International approves new standards - Ecma International ブラウザ対応も完了しており、全モダンブラウザ（Google Chrome・Firefox・Safari・Microsoft Edge）でES2022の全機能が使えます。本記事では、ES2022すべての新機能を紹介します。「何が使えるようになったのか？」「どうしてそれが必要だったのか？」が、できるだけわかりやすいように解説しました

o_hiroyuki 2022/06/23

javascript

リンク

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すべての新機能をまとめて紹介します。大きな数値を_区切りで書け