بسمة مصرية

بسمة مصرية

تسجيل عضوية جديدةنسيت كلمة المرور

جميع الحقوق محفوظة - Egybasma.com


 معهد بسمة مصرية , منتديات بسمة مصرية | خطوات فى عالم الإبداع >>

الملاحظات

قسم الشروحات الخاصة بـ لغات البرمجة [ القسم متخصص فى طرح جميع الشروحات الخاصة بلغات البرمجة و التطوير ]

حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

قسم الشروحات الخاصة بـ لغات البرمجة

1 معجبون
 
أدوات الموضوعانواع عرض الموضوع
قديم 2016-12-10, 04:35 PM المشاركة : ( 1 )
.:: ! HTML PROF ::.
WRONG WAY
.:: EGY BASMA ::.
الصورة الرمزية WRONG WAY

Technical Support
Post حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى
أهلا و مرحبا بكم أعضاء و زوار معهد بسمة مصرية الكرام ,,
*-.-**-.-**-.-**-.-*
حل مشكلة - التخلص من عناصر CSS التى تحظر عرض المحتوى فى الجزء العلوى .
How To Fix Eliminate render-blocking CSS in above-the-fold content
كثرت الأسئلة حول هذه الجملة فى الآونة الاخيرة وخصوصا بعد تحديث Mobilegeddon الذى استهدف المواقع المتوافقة مع الهواتف الذكية والاجهزة الكفية لرفع ترتيبها في نتائج بحث الجوال .
*-.-**-.-**-.-**-.-*
فالمشكلة لا تكمن فى ان يكون التصميم متوافق مع جميع شاشات العرض بل فى سرعة الموقع ايضاً بل سرعة تحميل صفحات الموقع بالتحديد ,,
وفى هذا الشرح سنتعرف على كيفية التخلص من عناصر الـ CSS التى تحظر المحتوى فى الجزء العلوى .
ولنفترض انك تستخدم مكتبة ايقونات Font Awesome ,, على سبيل المثال فى موقعك فـ ان جوجل سيرى ان ملف الـ CSS الخاص بتعريف الايقونات فى منطقة الـ Head يحظر المحتوى فى الجزء العلوى اثناء الاختبار .
كود بلغة HTML:
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="screen" />
توجد الكثير من الحلول على الانترنت منها اضافة الملف فى الفوتر والبعض الاخر يجزم بان اضافتها بعد نهاية وسم الـ Body سيحل المشكلة ولكن جميع هذه الحلول تنتهى بالفشل وعدم التوافق مع المعايير القياسية فـ من غير المسموح اضافة السمة link فى منطقة غير الـ Head !
كل هذه الحلول بلا جدوى فالحل النهائى هو عن طريق استدعاء الملف بعد تحميل الصفحة !
ويمكن عمل ذلك باستخدام الـ Media Types والتبديل بين print و screen بواسطة onload Event .
وهذا مثال بسيط على ما تم شرحه بالاعلى .
*-.-**-.-**-.-**-.-*
* قبل التطبيق :-

حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

*-.-**-.-**-.-**-.-*
* بعد التطبيق :-

حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

*-.-**-.-**-.-**-.-*
اذن كيف نقوم بتطبيق هذا الشرح !

بداية سنقوم بالذهاب الى كود استدعاء المكتبة فى منطقة الـ Head والذى سيكون بالشكل التالى ,,
كود بلغة HTML:
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="screen" />
وسنقوم بتعديل بسيط على الكود بتغيير الـ Media Types بدلا من screen الى print واضافة onload Event للكود ,, ليصبح بالشكل التالى ,,
كود بلغة HTML:
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" media="print" onload="if(media!='screen')media='screen'" />
*-.-**-.-**-.-**-.-*
والى هنا اكون قد انتهيت من شرح اليوم ,, على ان القاكم فى شرح قادم بـ إذن الله تعالى ,,
دمتم بود ,,
تحياتى للجميع ,,
حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى
الـمـصـدر : معهد بسمة مصرية - مـن : قسم الشروحات الخاصة بـ لغات البرمجة - كـاتـب الـمـوضـوع : WRONG WAY

مـن مـواضـيع WRONG WAY
موافقة مجلس المديرين التنفيذيين للبنك الدولي على مساندة 1.5 مليون أسرة فقيرة في مصر
إصابة مجند وإتلاف سيارة شرطة فى مظاهرة ببني سويف
حدث فى مثل هذا اليوم ( 26 رمضان )
اتصالات مكثفة مع السلطات السودانية للإفراج عن الصيادين
شكري يلتقي رئيس معهد بكين لتكنولوجيا المعلومات
إنتل تطلق عصا السيلفى الأكثر تطورا فى العالم مزودة بـ 6 كاميرات
بدء أعمال صيانة الطريق الدائرى والانتهاء خلال 3 أيام
وزارة الداخلية - الاحد 26/4 ضبط 45 اخوانى فى قضايا شغب
اتحاد الفلاحين يحذر من تلاعب البترول بصناعة السماد لحساب الكهرباء
علماء يتوصلون لبروتينات تمكن النبات من النمو فى تربة مالحة ومجهدة
مساحة إعلانية
قديم 2017-01-03, 12:04 AM المشاركة : ( 2 )
Kurd-Sat Admin
FOR SAT
.:: مـشـرف ::.
الصورة الرمزية FOR SAT

مـشـرف الـمـنـتـدى الـعـامـ
افتراضي رد: حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى
شرح رااائع
عاشت ايدك

الكلمات الدلالية (Tags)
مشكلة, المحتوى, التي, التخلص, الجزء, العمود, css, تحظر, حـل, عناصر
حل مشكلة التخلص من عناصر css التى تحظر عرض المحتوى فى الجزء العلوى

أدوات الموضوع
انواع عرض الموضوع

الانتقال السريع

المواضيع المتشابهه
الموضوع
Apple تتراجع عن التخلص من مساحة تخزين 16GB فى هواتف IPhone المقبلة
إيفا مانديز في الجزء 8 من فيلم فاست فيريوس
ضبط 3 من عناصر جماعة الإخوان الإرهابية بقنا
جراح مصرى بالنمسا يستبدل فقرات العمود الفقرى التالفة بأخرى من التيتانيوم .
جامعة القاهرة تحظر التدخين داخل مبانيها وتطبق غرامة على المخالفين


الساعة الآن 02:29 PM.


Powered by vBulletin® Version 3.8.7 Copyright ©2000 - 2017, vBulletin Solutions, Inc
Like, Share System By Weblanca.com
HTMLMAPXMLRSS 2.0RSS