CSS
前回の続きで、@position-tryを使って、Anchor Positioningによって配置された要素が見切れた始めた時に、配置をどうするかを指定することができる uga-box.hatenablog.com 例 例えば、以下のhtmlとcssでこのような動きにすることができる <div class="anchor">⚓︎</div> <div class="infobox"> <p>This is an in</p></div>…
State of CSS 2024 にあった CSS Anchor Positioning について調べた developer.chrome.com CSS Anchor Positioningは、CSSの新しいレイアウト機能で、要素を特定の「アンカー」に基づいて配置することができる 主な用途 ツールチップやポップオーバーの動的…
State of CSS 2024 にあった Stepped Value Functions について調べた web.dev Stepped Value Functions は、与えられた値を別のステップ値に基づいて変換する関数 これにより、滑らかに変化する値を特定の区切りでステップ状に変更できる 主に以下の３つの…
State of CSS 2024 にあった font-display について調べた developer.mozilla.org @font-displayはフォントがダウンロードされ使用可能になるタイミングに基づいて、フォントの表示方法を決定する記述子 指定されたフォントをダウンロードして利用しようとし…
State of CSS 2024 にあったprefers-reduced-motionについて調べた prefers-reduced-motionは前庭運動障害などがある人たちのための機能 前庭運動障害とは、平衡感覚や身体のバランスを保つために重要な役割を果たす前庭系に影響を及ぼす障害を指す これには…
先日 @starting-style を調べている時に、interpolate-size と calc-size() というCSSプロパティを知ったので調べた uga-box.hatenablog.com interpolate-size と calc-size() に関しては、以下の記事がわかりやすかった zenn.dev interpolate-size と calc-…
@starting-style という、主にアニメーションやトランジションの開始時の状態を設定するのに役立つ機能がすべてのブラウザにサポートされた模様 coliss.com @starting-style の使用例 .fade-in { opacity: 1; transition: opacity 1s; } @starting-style { .…
any-hoverというメディア特性を知らなかったので調べた developer.mozilla.org any-hover は CSS のメディア特性で、要素の上で停止することができる入力メカニズムが何らか利用できるかどうかを検査するために使用することができます。 mdnのドキュメントは…
ICSさんのfont-familyに関する記事を読んだ font-familyは昔考えたまま更新してなかったので、こちらの記事で2024年に相応しいfont-familyを学んだ ics.media 記事の結論を拝借すると、以下の組み合わせがオススメとのこと body { font-family: "Helvetica N…
styled-components から CSS Modules に移行後に、Panda CSSというゼロランタイムのcssライブラリを知った panda-css.com なぜ Panda CSS なのかを読むと Panda は、サーバーファースト時代における CSS-in-JS の課題を解決することを目的とした新しい CSS-i…
結構前にState of CSSで知ったSubgridが全ブラウザ対応になった uga-box.hatenablog.com これまで使うアテがなかったのだが、使うのに相応しいUIを実装することになったので使ってみる 詳細は鹿野さんのこちらの記事が参考になった zenn.dev 要するにSubgrid…
CSSのgrid周りのプロパティを毎回忘れてしまうので、自分なりに見返せるようにまとめる grid-template-columns 行の数と幅を定義 // 左から200px、auto、100pxの幅を持つ grid-template-columns: 200px auto 100px; //1frの幅を３回繰り返す grid-template-c…
dialogのshowModal()とshow()の違いがわからなかったので調べた developer.mozilla.org showModal()とshow()は、JavaScriptでダイアログボックスやモーダルウィンドウを表示するための関数 違いをざっと書き出す showModal() モーダルダイアログを表示するた…
view-transitionを使うとスムーズなモーダル表現ができることを知って調査した developer.mozilla.org 詳細は以下の記事が参考になる ics.media 具体的には一覧のサムネイルをクリックすると、そのサムネイル画像が拡大し、モーダルの要素になるというものを…
State of CSS 2022 を眺めていて知らなかったことについて調べた @supports @supportsはブラウザーが特定のCSS機能をサポートしている場合に定義することができるクエリ developer.mozilla.org 以下の記事にあるように、確かにCSSはブラウザが理解できない機…
State of CSS 2022 を眺めていてアクセシビリティに関する知らなかったことを調べた color-schme ライトテーマとダークテーマを切り替えるプロパティ developer.mozilla.org その要素が両方サポートする場合以下のようにし、 color-scheme: light dark; ライ…
State of CSS 2022 を眺めていて知らなかったことのうち、scrollbar-gutterについて調べた scrollbar-gutter scrollbar-gutterプロパティはWeb でスクロールバーを表示する際の余白を制御することができる developer.mozilla.org スクロールバーは種類によっ…
State of CSS 2022 を眺めていて知らなかったことのうち、object-view-boxについて調べた object-view-box object-view-boxプロパティは、chrome104で実装された機能で、画像要素のズームまたはパンを可能にする drafts.csswg.org First Look At The CSS obj…
State of CSS 2022 を眺めていて知らなかったことのうち、@containerについて調べた @container @containerはコンテナクエリといい、@media（メディアクエリ）と似た使い方になるが@mediaと異なる点は、ビューポートサイズではなく親コンポーネントサイズに…
State of CSS 2022 を眺めていて知らなかったことのうち、論理プロパティについて調べた CSSの論理プロパティ CSSの論理プロパティとは従来の左上を開始位置にするのではなく、言語によってその開始位置などが切り替わるというもの 例えば、縦書きの日本語は…
CSSの新しい単位で「lv*, sv*, dv*」がChrome108に実装されたとのこと Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!I2S announcement: https://t.co/3JGCpfKQjr pic.twitter.com/u8AOuREiD…
Chrome 105で:has()がサポートされるようになったので使い方を調べた developer.mozilla.org :has()は引数として渡されたセレクターに該当する要素をもつ要素にスタイルをあてることができる 例えば、直子要素がimgであるa要素を選択する場合は次のようにな…
Chrome 104、Microsoft Edge 104のリリースから、transformをバラバラに書けるようになった web.dev 具合的には .box { transform: translate(50%, 50%) rotate(45deg) scale(1.5); } これを以下のように書くことができるようになった .box { translate: 50%…
<select>でつくるプルダウンの右のアイコンをsvgでつくりたい 画像としてbackground-imageで読み込ませればできるかもしれないがダウンロードさせたくなく、マークアップされたsvg要素をどうにか使えないか調べたところ同じようなことを試みている人がいた stackover</select>…
ある要素にbackground-imageで画像を敷いているが、この画像を少し暗くしたい 元々は以下であるが、文字が白色なので画像を少し暗くしたいのが意図 いわゆる黒背景をオーバーレイをしたいのだが、どうやるか調べたところ、以下の記事が参考になった css-tric…
鹿野さんのスライドを拝読した speakerdeck.com ブラウザのvupで何が使えるようになるのか追っていないので、こういう情報は本当にありがたい みていて知らなかったのは、左右上下中央揃えが二行でできるようになったこと .container { display: grid; place…
ツイッターで見つけたおしゃれなイメージギャラリーの作り方が気になったのでメモ ✨ CSS Tip! ✨You can create an expanding <img> gallery view with a lil display:flex and the flex property .container { display: flex; }img { flex: 1; }img:hover { flex:…
横スクロールをしてコンテンツを見せるときにscroll-snapというCSSを使うとカルーセルのようにピタッといい感じのところで止めてくれるCSSを知って感動した How do Nike and Apple make such smooth and touch friendly carousels with pure CSS?/* tl;dr */…
2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときの鹿野さんのセッションで知ったCSSについてのメモ scroll-margin-top これまでアンカーリンクでページ内遷移をした際に、アンカー要素の上部にスクロールするた…
モーダルを表示している時、手前のレイヤーのスクロールが下までいくと後ろのレイヤーがスクロールしてしまう問題 いままで、bodyにposition: fixedつけたり、overflow: hiddenつけたりしていたが、overscroll-behaviorで解決できることを知ったので調べる d…
