ترفندهای بهینه سازی قالب سایت برای Print گرفتن - قسمت 5

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

9. نمایش کامل کلمات اختصار در حالت پرینت

همونطور که اطلاع دارید در HTML5 میتونیم با استفاده از تگ abbr عنوان کامل یک کلمه اختصار رو تعریف کنیم. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید یک جمله نوشته شده و یک کلمه مخفف WHO درون اون قرار گرفته. برای اینکه کاربران مفهموم این کلمه اختصار رو متوجه بشن، از تگ abbr استفاده کردیم و درون ویژگی title اون، کامل شده اون کلمه مختصر رو قرار میدیم و کاربران با همچنین چیزی روبرو خواهند شد:

همونطور که میبینید زیر اون کلمه مخفف شده یک خط چین کشیده شده و همچنین زمانی که بر روی اون هاور میکنید، توضیحات کامل مربوط به این کلمه مخفف نمایش داده میشه و کاربران متوجه میشن که منظور از این مخفف دقیقا چی هست. خب حالا که با تگ abbr آشنا شدیم، باید این رو در نظر بگیریم که این تگ در حالت پرینت پشتیبانی نمیشه و باید اون رو بهینه سازی کنید. برای اینکار در استایل مربوط به پرینت، کد زیر رو قرار میدیم:

میبینید که در اینجا هم از ترفندی شبیه به لینکها استفاده کردیم و درون کلاس کاذب after و ویژگی content، به مقدار title دسترسی پیدا کردیم و اون رو قرار دادیم. با اینکار در حالت پرینت، مقداری که برای title در نظر گرفتید، بصورت اتوماتیک بعد از کلمه مخفف شده و درون پرانتز قرار میگیره. خروجی در حالت پرینت بصورت زیر خواهد بود:

به همین راحتی.

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

همونطور که میدونین مرورگرها در حالت پرینت معمولا رنگها و تصاویر پس زمینه رو چاپ نمیکنن و این همون چیزی هست که اکثر ما در بیشتر مواقع نیاز داریم. یعنی بیشتر مواقع بهتر هست که پس زمینه چاپ نشه. مثلا فرض کنید که یک تگ header داریم و مقداری متن رو درون اون قرار دادیم. قصد داریم در حالت پرینت، رنگ پس زمینه این تگ قرمز باشه. برای اینکار کد زیر رو قرار میدیم:

اما زمانی که به حالت پرینت وارد میشیم، میبینیم که پس زمینه header قرمز نمیشه و مرورگر بیخیال اون شده. بصورت زیر:

در این مواقع هست که میتونیم از یک ویژگی بنام print-color-adjust که هنوز استانداردسازی نشده، استفاده کنیم. این ویژگی فعلا برای مرورگرهای برپایه webkit مانند chrome و opera و safari پشتیبانی میشه و بقیه مرورگرها از اون پشتیبانی نمیکنن. پس بصورت زیر عمل میکنیم:

میبینید که مقدار اون رو برابر با exact قرار دادیم. با اینکار اگر مجددا وارد محیط پرینت بشیم، بصورت زیر خواهد بود:

میبینید که پس زمینه قرمز شد و در حالت پرینت نیز نمایش داده شد. به همین راحتی.

در جلسات بعد با ادامه این مبحث در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source