CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む
CSSのメディアクエリでcalc()が使用できるの知ってた？
CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む
画面幅、メディアクエリに依存した要素の表示切り替え React + CSS Modules を使っている前提イメージ JSX 上で表示・非表示の分岐が明示されてほしい CSS を掘らないと分からないのは見通しが悪く感じる matchMedia() ベースの Hooks にすると SSR で難儀する 一貫性のためにサーバーサイドコードで頑張るのも億劫である 表示・非表示だけなら純粋な CSS で実現したい display: contents を使ってみた メディアクエリで display: none と block を切り替えれば良いという単純な話ではなく、親要素が Flexbox や Grid だった場合を想定する必要があるので、表示されている状態ではボックスモデル的に虚無になってほしい。 contents これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボック
2023年08月23日20:16 カテゴリ日記 今更に外部CSS読ませずのメディアクエリの指定方法を知る mixiチェック Style要素のmedia属性に書けば良かったのですねー Style属性 にも TEXT/CSS にも書けなかったので、前の記事で margin-leftの幅調整に難儀しました。 PC版ページのみ最適化したつもりです（笑） 【追記】 なぜかビューポートの向きを調べる記述はTEXT/CSSでも 正常に動作する事を確認しています。 調整したいDIV要素に適当なCLASS付けて、幅1024px以下で区切りたかったので <style media="screen and (max-width: 1024px)"> .CLASS名 { margin-left: 指定幅em !important; } </style> という感じ。 訂正！ ID名の場合は直前に # 、CLASS
@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。 例えば Surface Duo の2画面デバイス表示では以下の値になります。 水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数 各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メディアクエリに依存した要素の表示切り替えを `display: contents` でユーティリティコンポーネント化
今更に外部CSS読ませずのメディアクエリの指定方法を知る : 田舎で娯楽
2画面折りたたみデバイスに対応したCSSメディアクエリ - Qiita