CSS Stacking Context Inspector در Chrome با OffiDocs

شرح

آیا تا به حال سعی کرده اید از ویژگی z-index استفاده کنید، فقط برای اینکه بفهمید، مهم نیست که چقدر آن را بالا تنظیم کنید، آن طور که انتظار می رود کار نمی کند؟ به این دلیل که ویژگی z-index بر یک مفهوم ضمنی به نام «متن‌های انباشته» متکی است.

پس از بررسی این که آنها چیستند و چگونه کار می کنند (اطلاعاتی که می توانید در MDN پیدا کنید)، می توانید از این پسوند ابزارهای توسعه برای بررسی این زمینه ها و عیب یابی هر مشکل z-index که ممکن است با آن مواجه شوید استفاده کنید.

این برنامه افزودنی یک پانل جدید اضافه می کند که زمینه های انباشته را در نمای درختی نشان می دهد، و همچنین یک نوار کناری جدید با اطلاعات مفید در مورد عنصر انتخاب شده به پانل عناصر اضافه می کند.

برای بررسی مستندات عمیق لطفاً به صفحه github مراجعه کنید: https://github.

com/andreadev-it/stacking-contexts-inspector اگر می‌خواهید مشکلی را گزارش کنید یا درخواست ویژگی ارائه دهید، لطفاً از بخش Issue در مخزن github فوق‌الذکر استفاده کنید.

تغییرات: • v.

1.1.13 - به manifest v3 منتقل شد. همچنین z-index به صفحه کناری پانل زمینه انباشته اضافه شد.

• v.

1.1.12 - رفع اشکال با ویژگی‌های پیشوند فروشنده که هنگام بررسی زمینه‌های انباشته شناسایی نشدند.

• v.

1.1.11 - مقدار z-index را به قسمت "جزئیات زمینه" در نوار کناری اضافه کرد.

• v.

1.1.10 - درخواست مجوز غیر ضروری برای مطابقت با سیاست امنیتی CWS حذف شد.

• v.

1.1.9 - بازرسی گره زمینه DOM را در iframe و shadowDOM پیاده سازی کرد.

اکنون افزونه روی فایل‌های محلی نیز کار می‌کند (طرح file:///).

• v.

1.1.8 - اضافه شدن هشدار هنگام تغییر صفحه، پشتیبانی از shadow DOM و تنظیمات اولیه.

• v.

1.1.7 - اصلاح سبک های کوچک.

اکنون به دلیل تغییرات کمی در کد، در فایرفاکس نیز در دسترس است.

کد پاک شده

• v.

1.1.5 - رفع اشکال مربوط به انتقال ماژول های css (اسپینر بدون استایل).

• v.

1.1.4 - اضافه شدن تم تیره (قبلا با روشن بودن تم تیره غیر قابل استفاده بود).

• v.

1.1.3 - رفع اشکال در ناوبری صفحه.

• v.

1.1.2 - اضافه شدن پشتیبانی از iframes بدون ویژگی "src" (برخی از iframe با "src" ممکن است کار کنند، اما نباید انتظار داشت).

همچنین، نشانگر بارگذاری در نوار کناری (پانل عناصر) نیز معرفی شده است و اکنون نوار کناری دکمه "Refresh contexts" خود را دارد.

• v.

1.1.1 - رفع اشکال که در آن زمینه های ایستا ایجاد شده توسط والدین آنها دارای انعطاف پذیری نمایشگر یا شبکه هستند که در آن شناسایی نشده است.

• v.

1.1.0 - اکنون افزونه روی برگه هایی کار می کند که از قبل در هنگام نصب باز بودند.

- منوی زمینه کلیک راست با دکمه های متنی جایگزین شده است، زیرا به درستی کار نمی کند (ممکن است در آینده دوباره اضافه شود).

- اکنون صفحه درخت زمینه یک نشانگر بارگذاری را نشان می دهد که زمان زیادی برای بارگذاری متن انباشته طول می کشد.

- در سمت توسعه‌دهنده، تمام کدها به عنوان اولین گام برای متن‌باز کردن آن به preact منتقل شده‌اند.

• v.

1.0.1 - تغییرات کوچک دسترسی و ترفندهای بصری.

اطلاعات اضافی:

- ارائه شده توسط آندره آ دراگوتا
- میانگین امتیاز: 3.92 ستاره (پسندیدم)
- توسعه دهنده این آدرس ایمیل در مقابل هرزنامه ها محافظت می شود. دیدن شما نیاز به جاوا اسکریپت دارید

CSS Stacking Context inspector web extension با OffiDocs یکپارچه شده است Chromium آنلاین