نحوه استفاده از گوگل کروم برای اشکال زدایی CSS

مرورگر شما شامل مجموعه ای قدرتمند از ابزارهای توسعه و طراحی وب است. بیاموزید که چگونه سبک هر صفحه وب را که به آن نگاه می کنید تغییر دهید.

ابزار Inspect Element زمانی که نوبت به اشکال زدایی صفحات وب شما در زمان واقعی می رسد عالی است. شما می توانید از این ابزار برای کمک به پیش نمایش و تغییر طراحی یک وب سایت استفاده کنید. همچنین به شما این امکان را می دهد که این کار را بدون نیاز به بارگذاری مجدد صفحه انجام دهید و تغییرات CSS خود را بلافاصله نمایش دهید.

در این مقاله نحوه مشاهده کلاس‌های CSS و سبک‌های کاربردی آن‌ها در پنجره Inspect Element توضیح داده می‌شود. همچنین نحوه استفاده از آن را برای پیش نمایش تغییراتی که در CSS خود ایجاد می کنید در زمان واقعی پوشش می دهد.

باز کردن Inspect Element در Google Chrome

می توانید از هر وب سایتی دیدن کنید و پنجره Inspect Element را باز کنید تا ببینید کد HTML یا CSS آن چگونه است. این آموزش از یک وب سایت نمونه برای نشان دادن استفاده می کند.

با فشردن کلید F12 می توانید پنجره Inspect Element را در گوگل کروم باز کنید. همچنین می توانید در هر نقطه از صفحه کلیک راست کرده و بر روی Inspect کلیک کنید.

پنجره Inspect Element به کد HTML بخشی از وب سایت که در آن راست کلیک کرده اید باز می شود. اینجاست که می توانید متن وب سایت را با استفاده از Google Chrome ویرایش کنید.

تب Styles در پنجره Inspect Element

در خود پنجره Inspect Element، در زیر تب Elements، مکانی برای مشاهده کدهای HTML و CSS وجود دارد. می توانید کد HTML را در سمت چپ پنجره Inspect Element مشاهده کنید. می‌توانید کد CSS را در سمت راست، زیر تب Styles پیدا کنید.

فرض کنید یک عنصر HTML با کلاسی به نام “card-padding” داشتید، با padding سمت راست و چپ روی آن اعمال شده است:

.card-padding {
    padding-right: 0vh;
    padding-left: 0vh;
}

اگر پیش نمایش این وب سایت را در مرورگر مشاهده کرده باشید، می توانید عنصر div را با کلاس “card-padding” انتخاب کنید. هر سبکی که در کلاس “card-padding” اعمال شود، در سمت راست، زیر برگه Styles نشان داده می شود.

هنگامی که ماوس را روی یک عنصر در نمای کد HTML نگه می دارید، آن قسمت از صفحه وب در مرورگر وب برجسته می شود. نوع عنصر HTML به همراه نام هر کلاس نیز در کادر محاوره ای در کنار عنصر نمایش داده می شود.

در این حالت، محفظه div را با نام‌های کلاس “row”، “card-padding” و “pb-5” در صفحه برجسته می‌بینید.

نحوه ایجاد تغییرات در CSS در زمان واقعی

می توانید CSS را مستقیماً از تب Styles تغییر دهید:

1. با استفاده از این وب سایت، روی عنوان اول کلیک راست کنید.
2. در آن عنوان خاص h4، کلاسی به نام “text-grey” با رنگ #8a8a8a روی آن اعمال می شود.
3. به جای آن رنگ را به چیز دیگری تغییر دهید، مانند نارنجی. شما فقط می خواهید خود مقدار را تغییر دهید، نه نام ویژگی، “color”.
4. تغییر عنوان را از خاکستری تیره به نارنجی خواهید دید.
5. اگر می‌خواهید یک سبک CSS خاص را غیرفعال کنید، تیک کادر سمت چپ استایل را بردارید.
6. همچنین می توانید سبک های بیشتری را به مجموعه اصلی اضافه کنید. برای شروع اضافه کردن ملک جدید، درست در زیر یا سمت راست یک ملک کلیک کنید. هنگام اضافه کردن سبک های جدید باید از همان نحوی که در یک فایل CSS معمولی استفاده می کنید استفاده کنید.
7. اگر در حال پیش‌نمایش یک وب‌سایت محلی هستید، می‌توانید به اعمال تغییرات CSS ادامه دهید تا زمانی که به ظاهر و احساس مورد نیاز برای رابط کاربری خود نزدیک شوید. پس از آن، می توانید تغییرات CSS که ایجاد کرده اید را دوباره در کد محلی خود کپی کنید.

نحوه تغییر CSS از کتابخانه ها یا چارچوب های شخص ثالث

همچنین اگر از کتابخانه های شخص ثالث یا چارچوب هایی مانند بوت استرپ استفاده می کنید، می توانید در عناصر HTML تغییراتی ایجاد کنید.

1. با استفاده از این وب سایت، روی یکی از دکمه های Bootstrap در صفحه کلیک راست کنید.
2. دو کلاس “btn” و “btn-primary” روی دکمه اعمال می شود. بوت استرپ در حال حاضر استایل مخصوص به خود را دارد که برای هر دوی این کلاس ها اعمال شده است. رنگ هایی که به عنوان رنگ های پس زمینه و حاشیه استفاده می شوند #007bff هستند. این را به چیز دیگری مانند بنفش تغییر دهید.
3. اگر در حال پیش نمایش یک وب سایت محلی هستید، می توانید تغییرات جدید خود را دوباره به کد محلی خود اضافه کنید. بسته به ترتیب CSS خود، ممکن است لازم باشد از یک انتخابگر CSS خاص تری استفاده کنید. برای مثال، پیشوند انتخابگر را با “.btn” قرار دهید. این کار استایل اصلی Bootstrap را لغو می کند..btn.btn-primary {    background-color: violet; رنگ حاشیه: بنفش؛}

.btn.btn-primary {
    background-color: violet;
    border-color: violet;
}

element.style در برگه Styles به چه معناست؟

هر عنصر HTML که در پنجره Inspect Element برجسته می کنید دارای یک بلوک element.styles است. این معادل افزودن یک استایل درون خطی به عنصر HTML به جای هدف قرار دادن آن با استفاده از انتخابگر است.

1. روی یک عنصر HTML کلیک راست کنید. هر استایلی را به بخش element.style اضافه کنید، مانند:color: whitesmoke;
2. خواهید دید که کد عنصر HTML نیز تغییر کرده است. کد درون عنصر HTML اکنون دارای خط جدید است:style=”color: whitesmoke;”

color: whitesmoke;

style="color: whitesmoke;"

چگونه عناصر HTML کودک استایل را به ارث می برند

اگر دو مقدار سبک متفاوت برای یک عنصر والد و یک عنصر فرزند اعمال کنید، مقدار عنصر فرزند اولویت دارد.

1. با استفاده از این وب سایت، در هر نقطه از لبه های بیرونی وب سایت کلیک راست کنید.
2. در بخش HTML پنجره Inspect Element، روی دو عنصر خاص HTML تمرکز کنید. یک عنصر div والد با کلاس “محتوا” به آن اعمال شده است. این عنصر HTML دارای یک عنصر فرزند h4 است که یک کلاس “text-grey” روی آن اعمال می شود.
3. عنصر فرزند h4 HTML را انتخاب کنید و یک ظاهر طراحی رنگ را در کلاس “text-grey” غیرفعال کنید.
4. عنصر HTML والد را با کلاس “content” انتخاب کنید. سبک CSS زیر را به کلاس اضافه کنید:color: red; تمام متن در قسمت والد قرمز می شود. این تغییر به عناصر فرزند نیز آبشاری می کند، به این معنی که h4 نیز یک رنگ قرمز خواهد داشت.
5. عنصر فرزند h4 HTML را انتخاب کنید و یک سبک جدید به “text-grey” class:color: green; این امر استایل هر کلاس والد را لغو می کند. عنصر h4 HTML از قرمز به سبز تبدیل می شود.
6. همچنین اگر استایل کلاس «محتوا» را مشاهده کنید، یک خط‌مشی را مشاهده خواهید کرد. این تأیید می کند که عنصر فرزند h4 بر رنگ والد غلبه دارد.

color: red;

color: green;

مزایای اشکال زدایی CSS در مرورگر

اشکال زدایی CSS در مرورگر شما می تواند در زمان زیادی صرفه جویی کند و گردش کار کدنویسی شما را سرعت بخشد. این امر مخصوصاً زمانی صادق است که بخواهید ببینید تغییرات جدید CSS شما چگونه بر رابط کاربری وب سایت شما در زمان واقعی تأثیر می گذارد.

شما می توانید به جای ایجاد تغییرات در کد محلی خود و بارگیری مجدد برنامه از این تکنیک استفاده کنید. این شما را از حدس زدن مقادیر CSS نجات می دهد، زیرا اکنون می توانید تغییرات UI خود را در حین ایجاد آنها مشاهده کنید.

می توانید تا زمانی که به طرح دلخواه خود نزدیک شوید، در پنجره Inspect Element تغییراتی ایجاد کنید. پس از انجام این کار، می توانید کد را از پنجره Inspect Element کپی کنید و دوباره به کد محلی خود بازگردانید. همچنان می‌توانید برنامه خود را مجدداً اجرا کنید تا بررسی کنید که تغییرات جدید CSS شما همچنان کار می‌کنند.

سایر ابزارهای مفید بازرسی عنصر

این آموزش اصول اولیه نحوه اشکال زدایی CSS یک وب سایت را با استفاده از پنجره Inspect Element شامل مکان یافتن CSS در تب Styles را پوشش می دهد.

همچنین نحوه ایجاد تغییرات در CSS و مشاهده تغییرات بصری در UI را در زمان واقعی توضیح داد. امیدواریم، شما همچنین می‌دانید که چگونه می‌توانید وقتی CSS از کتابخانه شخص ثالث استفاده می‌کند، تغییرات ایجاد کنید، و نحوه وراثت استایل چگونه کار می‌کند.

بسیاری از کارهای جالب دیگر وجود دارد که می توانید با پنجره Inspect Element انجام دهید.

منبع مقاله