TAK's banner
TAK's profile picture

TAK

@tak_dcxi • 16,601 subscribers

Webデザイン&マークアップ&フロントエンドをしていたWeb制作者 → 自社開発サービスのフロントエンドエンジニア | 個人サイト https://t.co/Lo8MxRqeQQ | Zenn https://t.co/bs9kcK7xvJ

Shorts

全モダンブラウザで使える`zoom` ・@\propertyとtan(atan2())を使い縮小率を単位を取り除いたpx数値に変換 ・zoomの値にclamp()で最小倍率、推奨倍率、最大倍率1を設定 cqi等を使わずにテーブルやヘッダーをviewportに応じて自動収縮が可能になるので便利かも🫵 #Web制作

全モダンブラウザで使える`zoom` ・@\propertyとtan(atan2())を使い縮小率を単位を取り除いたpx数値に変換 ・zoomの値にclamp()で最小倍率、推奨倍率、最大倍率1を設定 cqi等を使わずにテーブルやヘッダーをviewportに応じて自動収縮が可能になるので便利かも🫵 #Web制作

43,813 Aufrufe

scroll-hintみたいなJSを使わずともscroll-stateで横スクロールのプロンプトを表示できるようになったのは大きい `@\container scroll-state((scrollable: inline-start) or (not (scrollable: inline-end)))`でインライン軸のスクロールが可能かつスクロールされていない場合の条件分岐ができる🫵

scroll-hintみたいなJSを使わずともscroll-stateで横スクロールのプロンプトを表示できるようになったのは大きい `@\container scroll-state((scrollable: inline-start) or (not (scrollable: inline-end)))`でインライン軸のスクロールが可能かつスクロールされていない場合の条件分岐ができる🫵

34,736 Aufrufe

details要素の開閉アニメーション、現状ChromeのみだけどたったこれだけのCSSで対応可能。 ::details-content疑似要素はsummary以外のdetailsの子要素を包含するので、コンテンツのラッパーdiv等を増やさなくてもOK。 Chrome 133からは:open擬似クラスで開閉の状態分岐が可能に。 #Web制作

details要素の開閉アニメーション、現状ChromeのみだけどたったこれだけのCSSで対応可能。 ::details-content疑似要素はsummary以外のdetailsの子要素を包含するので、コンテンツのラッパーdiv等を増やさなくてもOK。 Chrome 133からは:open擬似クラスで開閉の状態分岐が可能に。 #Web制作

19,249 Aufrufe

Videos

LIVE
1.2k

Anya Rossi

sweetdream.ai

SweetDream.aiSponsored•Livecam
Streaming Now

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

HD live stream
Exclusive private shows
1.2k viewers online

Free preview available • Premium content

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作
0:26
tak_dcxi's profile picture

来月リリースのChrome 135でサポートされる`::scroll-marker`、`::scroll-marker-group`、`::scroll-button()`疑似要素。 動画のようなスライダーが「CSSのみ」で作成可能となる😱 それでいて記述量もそこまで多くない。 #Web制作

TAK

31,722 Aufrufe • vor 1 Jahr

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample:
0:46
tak_dcxi's profile picture

✏️ #QuickTips たった1行で背景色を画面いっぱいにするCSS 横スクロールなし Sample:

TAK

14,922 Aufrufe • vor 10 Monaten

Keine weiteren Inhalte verfügbar