CSS スタッキングコンテキストインスペクター Chrome OffiDocsで

DESCRIPTION

z-index プロパティを使用しようとして、どれだけ高く設定しても期待どおりに機能しないことがわかったことがありますか? これは、z-index プロパティが「スタッキング コンテキスト」と呼ばれる暗黙の概念に依存しているためです。

それらが何であるか、そしてそれらがどのように機能するかを調べた後 (MDN で見つけることができる情報)、この devtools 拡張機能を使用してこれらのコンテキストを検査し、直面する可能性のある z-index の問題のトラブルシューティングを行うことができます。

この拡張機能は、ツリー ビューに積み重ねられたコンテキストを表示する新しいパネルを追加し、選択した要素に関する有用な情報を含む新しいサイドバーを要素パネルに追加します。

詳細なドキュメントを確認するには、github ページ: https://github を参照してください。

com/andreadev-it/stacking-contexts-inspector 問題を報告する場合、または機能リクエストを行う場合は、前述の github リポジトリの「問題」セクションを使用してください。

変更履歴: • v.

1.1.13 - マニフェスト v3 に移動しました。 スタッキング コンテキスト パネルのサイドパンにも z-index を追加しました。

• v.

1.1.12 - スタッキング コンテキストのチェック時にベンダー プレフィックス付きプロパティが検出されないバグを修正しました。

• v.

1.1.11 - サイドバーの「コンテキストの詳細」セクションに z-index 値を追加しました。

• v.

1.1.10 - CWS セキュリティ ポリシーに準拠するために不要な許可リクエストを削除しました。

• v.

1.1.9 - iframe およびshadowDOM 内にコンテキスト DOM ノード検査を実装しました。

この拡張機能はローカル ファイル (file:/// スキーム) でも機能するようになりました。

• v.

1.1.8 - ページ変更時の警告、Shadow DOM および基本設定のサポートを追加しました。

• v.

1.1.7 - スタイルを少し修正。

コードが少し変更されたため、Firefox でも利用できるようになりました。

きれいになったコード。

• v.

1.1.5 - CSS モジュールの遷移 (スタイルのないスピナー) に関連するバグを修正しました。

• v.

1.1.4 - ダーク テーマを追加しました (以前はダーク テーマがオンになっていると使用できませんでした)。

• v.

1.1.3 - ページナビゲーションのバグを修正しました。

• v.

1.1.2 - 「src」属性のない iframe のサポートを追加しました (「src」を持つ一部の iframe は動作する可能性がありますが、期待されるべきではありません)。

また、読み込みインジケーターがサイドバー (要素パネル) にも導入され、サイドバーには独自の「コンテキストを更新」ボタンが追加されました。

• v.

1.1.1 - 表示フレックスまたはグリッドを持つ親によって作成された静的コンテキストが検出されないバグを修正しました。

• v.

1.1.0 - 拡張機能は、インストール時にすでに開いていたタブで動作するようになりました。

- 右クリックのコンテキスト メニューは、正しく動作しなかったため、コンテキスト ボタンに置​​き換えられました (将来再び追加される可能性があります)。

- スタッキング コンテキストの読み込みに時間がかかる場合、コンテキスト ツリー ページに読み込みインジケーターが表示されるようになりました。

- 開発者側では、オープンソースにするための最初のステップとして、すべてのコードが preact に移動されました。

• v.

1.0.1 - アクセシビリティの小さな変更と視覚的な調整。

追加情報：

- アンドレア・ドラゴッタ提供
- 平均評価 : 3.92 つ星 (気に入った)
-開発者 このメールアドレスは、スパムロボットから保護されています。 アドレスを確認するにはJavaScriptを有効にする必要があります。

CSS スタッキング コンテキスト インスペクター Web extension OffiDocsと統合 Chromium オンライン