بروز رسانی دی ۲۶ام, ۱۳۹۹ ۳:۰۴ بعد از ظهر
فروردین ۱۰, ۱۳۹۵ admin آموزش پیشرفته css, آموزش مقدماتی css 0
در ادامه مباحث و مطالب مرتبط به ابزار طراحان وب در گوگل کروم می خواهیم در آن مطلب اکثرا و بیشتر به موارد و نکات مرتبط به قسمت استایل نویسی و همچنین ویراش عناصر بپردازیم.
البته چند مورد از موارد و نکات, خیلی هم جدید نیستند
آن ویژگی همراه با ویژگی هایی که در مباحث و مطالب قبلی گفتن شد نشان می دهد که روز به روز ویرایش و همچنین کار با انیمیشن زیبای ها در کروم راحت تر و همچنین اصولی و کاربردی تر می می شود:
در ورژن و نسخه های جدید کروم آن قابلیت فوق العاده اصولی و کاربردی اضافه شده می باشد که می توانیم به راحتی کلاسی جهت تست و همچنین یا کاربردهای دیگر به عنصر اضافه کنیم و همچنین یا کلاس هایی را از آن هم حذف کنیم:
در خیلی از مواقع ما جهت نوشتن استایل از روش مختصر نویسی بهره بری و استفاده می کنیم. کروم آن امکان را به وجود آورده می باشد تا بتوانیم به راحتی ویژگی های مختصر نوشته شده را مو شکافی کنیم
با بهره بری و استفاده از دکمه های جهت بالا و همچنین پایین می توانیم در قسمت استایل مقادیر را تغییر دهیم. همینطور در صورتی که همزمان کلید Shift
را نگه داریم آن تغییرات ۱۰ تا ۱۰ اتفاق می افتند. نگه داشتن Alt
تغییرات اعشاری را در پی دارد. همچنین از چرخ موس هم می توانید جهت سرعت اکثرا و بیشتر بهره بری و استفاده کنید.
زمانی که استایل های مرتبط به یک عنصر را نگاه می کنیم, انتخابگرهای مختلفی که با ویرگول از هم جدا شده اند شاید رنگ متغایر و متفاوت داشته باشند.
آن هم قسمتی که خاکستری روشن می باشد به آن معنا می باشد که آن هم انتخابگر با عنصر انتخاب شده منطبق نیست ولی باید توجه داشت انتخابگری که رنگ تیره دارد منطبق بر عنصر انتخاب شده می باشد.
گاهی مستلزم و نیاز داریم که عناصر را تکرار کنیم تا متوجه شویم صفحه آرایی در کجا مستلزم و نیاز به بهبود پیدا کردن و یافتن دارد. مثلا تعداد آیتم های منوی اصلی وبسایت و مرکز خبرهای جدید را زیاد می کنیم تا چیدمان مورد آزمایش قرار گیرد. به جای عناصر DOM را ویرایش کنیم می توانیم از ترفند زیر بهره بری و استفاده کنیم:
در تصویر زیر اولین بار از منوها بهره بری و استفاده شده می باشد ولی باید توجه داشت تکرار بعدی از کلیدهای میانبر Ctrl + C
و همچنین Ctrl + V
به ترتیب جهت کپی کردن و همچنین چسباندن بهره بری و استفاده شده می باشد. در زمان چسباندن عنصر بایستی و حتما عنصر پدر را انتخاب کنید به عنوان نمونه در مثال زیر بعد از انجام عمل کپی عنصر پدر انتخاب شد و همچنین عملیات چسباندن انجام شد. نقطه جذاب و جالب آنکه می توانیم از کلید جهت چپ جهت انتخاب عنصر پدر بهره بری و استفاده کنید.
خیلی پیش می آید که دنبال عنصری هستیم که آن هم لحظه در Viewport نیست. در آن مواقع می توانیم از گزینه Scroll into view
کمک بگیریم:
متغیرهای CSS در ورژن و نسخه های جدید کروم قابل بهره بری و استفاده می باشند. ناگفته نماند که کروم از ورژن و نسخه ۴۹ شروع به پشتیبانی متغیرها کرد ولی باید توجه داشت فایرفاکس از ورژن و نسخه ۳۱٫
اول ببینید چقدر باحاله بعد می گم چطوری فعالش کنید
به آن آدرس رفته: chrome://flags/#enable-devtools-experiments
گزینه Developer Tools experiments
را فعال کنید. سپس در قسمت تنظیمات Devtools به قسمت Experiments رفت و آمد و مراجعه کنید و همچنین کلید Shift را ۶ بار فشار دهید و همچنین بعد گزینه Layout Editor را فعال کنید. از آن به بعد آیکون مرتبط به آن عملکرد در قسمت استایل دیدن کردن و نمایش داده می می شود.
آن قابلیت از ورژن و نسخه ۴۵ کروم قابل دسترس می باشد.
بهره بری و استفاده از Date URI جهت اضافه کردن تصاویر به صفحات وب می تواند در بعضی مواقع مفید باشد. دائما جهت تغییر پیدا کردن یک تصویر به فرمت Base64 (نوع رمزگذاری که جهت آن کار بهره بری و استفاده می می شود) به ابزارهای دیگر و همچنین یا وب وبسایت و مرکز خبرهای جدید هایی که جهت آن عمل ساخته شده اند رفت و آمد و مراجعه می کنیم. ولی باید توجه داشت جذاب و جالب می باشد بدانید که می توانیم آن تغییر پیدا کردن را در خود کروم انجام دهیم:
دی ۲۶, ۱۳۹۹ 0
خرداد ۰۳, ۱۳۹۹ 0
اردیبهشت ۰۹, ۱۳۹۹ 0
فروردین ۰۲, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0