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

- visibility ۱ mode_comment

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

6. تنظیم مجدد استایلها

استایلهای مورد نیاز برای پرینت گرفتن با استایلهای مورد نیاز برای نمایش در مرورگر خیلی تفاوت دارند. به عنوان مثال رنگ یا سایه یا پس زمینه و ... برای پرینت گرفتن لازم نیست و باید این موارد رو در نظر داشته باشید. کد زیر رو در نظر بگیرید:

همونطور که میبینید برای همه المنتها و همچنین کلاسهای کاذبشون، ویژگی های background و color و box-shadow و text-shadow رو reset کردیم و صفحه رو برای حالت پرینت آماده سازی کردیم. کدهای بالا از HTML5 Boilerplate گلچین شده اند. شما میتونین از کل کدهای مربوط به پرینت این ابزار استفاده کنید. همونطور که در کدها میبینید از !important استفاده شده است. میدونین که بهتره تا حدی که میشه از این دستور استفاده نشه. اما برای استایلهای پرینت اشکالی نداره و میتونین برای اون استثناء قائل بشید.

7. حذف محتوای غیر ضروری

برای صرفه جویی در مصرف جوهر پرینتر، شما باید موارد تصویری، تبلیغات، منوها و ... رو با استفاده از display: none مخفی کنید.

همچنین اگر بخواید فقط المنت main رو نمایش بدین و همه چیز بجز اون رو مخفی کنید، میتونین از کد زیر استفاده کنید:

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

8. نمایش دادن URL در لینکها

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

با اینکار مقدار URL هر لینک گرفته میشه و بعد از متن لینک نمایش داده میشه. البته باید این رو در نظر داشته باشید که لینکهای نسبی، مطلق و # و ... نیز نمایش داده خواهند شد. اگر بخواید میتونین این کد رو کمی ارتقاء بدین و خروجی رو بهینه تر بکنید:

کد بالا یه مقدار سخت بنظر میاد. بیاید کد بالا رو با هم معنی کنیم. در ابتدا همه لینکهایی که ویژگی href دارند و مقدار اونا با http شروع میشه و آدرس سایت خودمون هم داخل URL اون نیست انتخاب میشن و مقدار URL بعد از متن لینک قرار داده میشه.

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

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

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

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

یا علی

Source

comment دیدگاه کاربران
لقمان آوند

تست متن

تست کد

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.