Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能
Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サポートされていない機能を含む@containerクエリは一致しない CSSの::backdrop擬似要素は初期値を継承します CSSの@importのsupport()条件をサポートします はじめに 2/21にリリースされたChrome 122で3つのCSSの新しい機能が追加されました。対象となるChrome 122は、Andro
11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome拡張なのにOS……だと!? スゴすぎてもはや説明しきれない「VisiOS」の衝撃／タブとブックマークを極めたらOSになった？ アプリのインストール・実行まで可能【やじうまの杜】
Chromeのデベロッパーツールで、CSSの詳細度が表示されて便利になります
簡単にすぐできる！ Chrome デベロッパーツールの新機能、ブラウザ外でもスポイトでカラーを取得できるようになりました