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

البته چند مورد از موارد و نکات, خیلی هم جدید نیستند

ویرایش مستقیم keyframe@

آن ویژگی همراه با ویژگی هایی که در مباحث و مطالب قبلی گفتن شد نشان می دهد که روز به روز ویرایش و همچنین کار با انیمیشن زیبای ها در کروم راحت تر و همچنین اصولی و کاربردی تر می می شود:

اضافه و همچنین یا حذف کردن کلاس

در ورژن و نسخه های جدید کروم آن قابلیت فوق العاده اصولی و کاربردی اضافه شده می باشد که می توانیم به راحتی کلاسی جهت تست و همچنین یا کاربردهای دیگر به عنصر اضافه کنیم و همچنین یا کلاس هایی را از آن هم حذف کنیم:

دیدن جزییات ویژگی های مختصر نوشته شده

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

تغییر سریع مقادیر

با بهره بری و استفاده از دکمه های جهت بالا و همچنین پایین می توانیم در قسمت استایل مقادیر را تغییر دهیم. همینطور در صورتی که همزمان کلید Shift را نگه داریم آن تغییرات ۱۰ تا ۱۰ اتفاق می افتند. نگه داشتن Alt تغییرات اعشاری را در پی دارد. همچنین از چرخ موس هم می توانید جهت سرعت اکثرا و بیشتر بهره بری و استفاده کنید.
 

 

تشخصیص کلاس های منطبق بر عنصر

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

تکرار کردن عناصر به روشی ساده تر

گاهی مستلزم و نیاز داریم که عناصر را تکرار کنیم تا متوجه شویم صفحه آرایی در کجا مستلزم و نیاز به بهبود پیدا کردن و یافتن دارد. مثلا تعداد آیتم های منوی اصلی وبسایت و مرکز خبرهای جدید را زیاد می کنیم تا چیدمان مورد آزمایش قرار گیرد. به جای عناصر DOM را ویرایش کنیم می توانیم از ترفند زیر بهره بری و استفاده کنیم:

در تصویر زیر اولین بار از منوها بهره بری و استفاده شده می باشد ولی باید توجه داشت تکرار بعدی از کلیدهای میانبر Ctrl + C و همچنین Ctrl + V به ترتیب جهت کپی کردن و همچنین چسباندن بهره بری و استفاده شده می باشد. در زمان چسباندن عنصر بایستی و حتما عنصر پدر را انتخاب کنید به عنوان نمونه در مثال زیر بعد از انجام عمل کپی عنصر پدر انتخاب شد و همچنین عملیات چسباندن انجام شد. نقطه جذاب و جالب آنکه می توانیم از کلید جهت چپ جهت انتخاب عنصر پدر بهره بری و استفاده کنید.

دیدن کردن و نمایش سریع تر عنصر در Viewport

خیلی پیش می آید که دنبال عنصری هستیم که آن هم لحظه در Viewport نیست. در آن مواقع می توانیم از گزینه Scroll into view کمک بگیریم:
 

 

متغیرها در کروم پشتیبانی می شوند

متغیرهای CSS در ورژن و نسخه های جدید کروم قابل بهره بری و استفاده می باشند. ناگفته نماند که کروم از ورژن و نسخه ۴۹ شروع به پشتیبانی متغیرها کرد ولی باید توجه داشت فایرفاکس از ورژن و نسخه ۳۱٫

Layout Editor

اول ببینید چقدر باحاله بعد می گم چطوری فعالش کنید

به آن آدرس رفته: chrome://flags/#enable-devtools-experiments گزینه Developer Tools experiments را فعال کنید. سپس در قسمت تنظیمات Devtools به قسمت Experiments رفت و آمد و مراجعه کنید و همچنین کلید Shift را ۶ بار فشار دهید و همچنین بعد گزینه Layout Editor را فعال کنید. از آن به بعد آیکون مرتبط به آن عملکرد در قسمت استایل دیدن کردن و نمایش داده می می شود.

آن قابلیت از ورژن و نسخه ۴۵ کروم قابل دسترس می باشد.

تغییر پیدا کردن تصویر به data URI

بهره بری و استفاده از Date URI جهت اضافه کردن تصاویر به صفحات وب می تواند در بعضی مواقع مفید باشد. دائما جهت تغییر پیدا کردن یک تصویر به فرمت Base64 (نوع رمزگذاری که جهت آن کار بهره بری و استفاده می می شود) به ابزارهای دیگر و همچنین یا وب وبسایت و مرکز خبرهای جدید هایی که جهت آن عمل ساخته شده اند رفت و آمد و مراجعه می کنیم. ولی باید توجه داشت جذاب و جالب می باشد بدانید که می توانیم آن تغییر پیدا کردن را در خود کروم انجام دهیم: