زمان کنونی: ۱۱-۱-۱۴۰۳, ۰۱:۰۰ صبح درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
لود کردن CSS های خاص در مرورگرهای خاص
۷-۱۱-۱۳۹۰, ۱۲:۳۰ صبح (آخرین ویرایش در این ارسال: ۷-۱۱-۱۳۹۰ ۱۲:۳۱ صبح، توسط محمدسلیمانی.)
ارسال: #1
لود کردن CSS های خاص در مرورگرهای خاص
از انجایی که بعضی از قالبهای جوملا با هر بروزیری یه جوری دیده میشوند این مقالا را در اینجا قرار میدهم تا از هر قالبی که دوست دارید فارق از این غصه که با چه برزرهایی بهینه است خودتا ان را بهینه کنید خیلی ساده

سی اس اس به طراح وب این امکان را میدهد که نمای صفحه را در حالت های مختلف نمایش ( LCD رایانه ، پرینت، صفحه موبایل) تعیین کند. بطور مثال طراح میتواند فایل های CSS مختلفی را به صفحه لینک کند ، بطوری که اگر صفحه در مرورگر در حال دیده شدن است، صفحه یک جور و با یکسری استایل لود شود و اگر صفحه در حال نمایش در دستگاه های PDA است یکجور دیگر و اگر صفحه در حال print شدن است نیز یکجور دیگر نشان داده شود.

برای تعیین CSS صفحه در حالت عادی که همان نمایش صفحه در مرورگر است ، بصورت زیر فایل CSS را در فایل HTML خود لینک میکنیم :

<link href="styles.css" rel="stylesheet" type="text/css" media="all" />

همانطور که شما در کد بالا تعیین کرده اید، این فایل CSS به ازای تمامی رسانه هایی که صفحه ی شما را نمایش میدهند ، لود میشود. اما اگر بخواهید به ازای هر رسانه (مانند مرورگر ، دستگاه های PDA و پرینترها) فایل های استایل متفاوتی استفاده شوند باید از کدهای زیر استفاده کنید


برای اعمال توسط کلیه مرورگرها :
<link href="styles1.css" rel="stylesheet" type="text/css" media="screen" />

برای اعمال فقط توسط مرورگر کروم :
<link href="styles1chrome.css" rel="stylesheet" type="text/chrome" />

برای اعمال فقط توسط مرورگر سافاری:
<link href="styles1safari.css" rel="stylesheet" type="text/safari" />

برای اعمال هنگام پرینت کردن صفحه :
<link href="styles2.css" rel="stylesheet" type="text/css" media="print" />

برای اعمال هنگام باز شدن صفحه در انواع PDA :
<link href="styles3.css" rel="stylesheet" type="text/css" media="handheld" />

برای اعمال فقط در مرورگر IE و یا نسخه خاصی از IE
در این پست
اعمال چند استایل از فایل CSS (بدون افزودن فایل CSS دیگر) فقط در مرورگر کروم
در این پست


شما میتوانید هر 5 خط فوق را زیر هم در بالای هرصفحه ی اچتمل خود بنویسید . مرورگر برای نمایش صفحه از styles1.css استفاده میکند. هنگام چاپ صفحه ، فایل styles2.css روی صفحه اعمال میشود. و هنگام بازکردن صفحه در کامپیوترهای جیبی ، فایل styles3.css صفحه را فرمت میکند. همچنین مرورگر اگر کروم باشد از فایل styles1chrome و اگر مرورگر سافاری باشد از فایل styles1safari برای رندرکردن صفحه استفاده خواهد کرد.

یکی از کاربردهای کوچک دیگه این اموزش : مثلا شما میتوانید class مربوط به ستون تبلیغات را در فایلهای css پرینت و css کامپیوترهای جیبی ، بصورت Display:none تعریف کنید تا در هنگام پرینت از روی مقالات سایت شما ، تبلیغات دیگه پرینت نشه.
امضاء محمدسلیمانی
چالش هاتو محدود نکن، محدودیت هاتو به چالش بکش

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط صدرا حسابی ، mahdi71 ، Reza Ganji ، btheme ، mal2moh ، shahnaz ، exaayaa
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان