CSS-Stacking-Kontextinspektor in Chrome mit OffiDocs

BESCHREIBUNG:

Führen Sie den CSS Stacking Context Inspector der Chrome-Online-Webshop-Erweiterung mit OffiDocs Chromium online aus.

Haben Sie jemals versucht, die Z-Index-Eigenschaft zu verwenden, nur um dann festzustellen, dass sie nicht wie erwartet funktioniert, egal wie hoch Sie sie einstellen? Das liegt daran, dass die Z-Index-Eigenschaft auf einem impliziten Konzept namens „Stacking-Kontexte“ basiert.

Nachdem Sie herausgefunden haben, was sie sind und wie sie funktionieren (Informationen finden Sie auf MDN), können Sie diese Devtools-Erweiterung verwenden, um diese Kontexte zu überprüfen und eventuell auftretende Z-Index-Probleme zu beheben.

Diese Erweiterung fügt ein neues Panel hinzu, das Stapelkontexte in einer Baumansicht anzeigt, und fügt außerdem eine neue Seitenleiste mit einigen nützlichen Informationen zum ausgewählten Element an das Elementpanel an.

Eine ausführliche Dokumentation finden Sie auf der Github-Seite: https://github.

com/andreadev-it/stacking-contexts-inspector Wenn Sie ein Problem melden oder eine Funktionsanfrage stellen möchten, verwenden Sie bitte den Abschnitt „Problem“ im oben genannten Github-Repository.

CHANGELOG: • v.

1.

1.

13 – Auf Manifest v3 verschoben.

Z-Index wurde auch zum Sidepan des Stapelkontextfensters hinzugefügt.

• v.

1.

1.

12 – Fehler behoben, bei dem herstellerpräfixierte Eigenschaften bei der Prüfung auf Stapelkontexte nicht erkannt wurden.

• v.

1.

1.

11 – Z-Index-Wert zum Abschnitt „Kontextdetails“ in der Seitenleiste hinzugefügt.

• v.

1.

1.

10 – Unnötige Berechtigungsanfragen zur Einhaltung der CWS-Sicherheitsrichtlinie entfernt.

• v.

1.

1.

9 – Kontext-DOM-Knoteninspektion in Iframes und ShadowDOM implementiert.

Jetzt funktioniert die Erweiterung auch auf lokalen Dateien (Schema file:///).

• v.

1.

1.

8 – Warnung hinzugefügt, wenn sich die Seite ändert, Unterstützung für Schatten-DOM und Grundeinstellungen.

• v.

1.

1.

7 – Kleine Stilkorrekturen.

Aufgrund einiger kleiner Codeänderungen ist es jetzt auch für Firefox verfügbar.

Bereinigter Code.

• v.

1.

1.

5 – Fehler im Zusammenhang mit dem Übergang von CSS-Modulen behoben (ungestylter Spinner).

• v.

1.

1.

4 – Dunkles Thema hinzugefügt (zuvor war es mit aktiviertem dunklen Thema unbrauchbar).

• v.

1.

1.

3 – Fehler in der Seitennavigation behoben.

• v.

1.

1.

2 – Unterstützung für Iframes ohne das „src“-Attribut hinzugefügt (einige Iframes mit „src“ könnten funktionieren, aber das sollte nicht erwartet werden).

Außerdem wurde die Ladeanzeige auch in der Seitenleiste (Elementbereich) eingeführt, und die Seitenleiste verfügt jetzt über eine eigene Schaltfläche „Kontexte aktualisieren“.

• v.

1.

1.

1 – Fehler behoben, bei dem statische Kontexte, die von ihrem übergeordneten Element mit einem Anzeigeflex oder -raster erstellt wurden, nicht erkannt wurden.

• v.

1.

1.

0 – Jetzt funktioniert die Erweiterung auf Tabs, die bei der Installation bereits geöffnet waren.

- Das Rechtsklick-Kontextmenü wurde durch Kontextschaltflächen ersetzt, da es nicht richtig funktionierte (es könnte in Zukunft wieder hinzugefügt werden).

- Auf der Kontextbaumseite wird jetzt eine Ladeanzeige angezeigt, wenn das Laden des Stapelkontexts lange dauert.

– Auf Entwicklerseite wurde der gesamte Code nach Preact verschoben, als erster Schritt, um ihn als Open Source zu veröffentlichen.

• v.

1.

0.

1 – Kleine Änderungen an der Barrierefreiheit und visuelle Optimierungen.

Zusätzliche Information:

- Angeboten von Andrea Dragotta
- Durchschnittliche Bewertung: 3.92 Sterne (gefiel mir)
- Entwickler Diese E-Mail-Adresse ist gegen Spambots geschützt. Sie müssen JavaScript aktivieren, damit Sie sie sehen können.

CSS Stacking Context Inspector-Weberweiterung, integriert in OffiDocs Chromium online