فهم كيفية عمل IFrames في تصميم موقع الويب
عند تضمين عنصر في HTML ، لديك فرصتان لإضافة أنماط CSS إليه:
- يمكنك تصميم IFRAME نفسه.
- يمكنك نمط الصفحة داخل IFRAME (تحت شروط معينة).
استخدام CSS لوضع نمط IFRAME
أول شيء يجب مراعاته عند تصميم iframe الخاص بك هو IFRAME نفسها. في حين أن معظم المتصفحات تتضمن إطارات iframe بدون الكثير من الأنماط الإضافية ، فلا يزال من المستحسن إضافة بعض الأنماط للحفاظ على ثباتها.
إليك بعض أنماط CSS التي أدرجها دائمًا في إطارات iframe الخاصة بي:
- الهامش: 0؛
- الحشو: 0؛
- الحدود: لا شيء ؛
- العرض: القيمة ؛
- الطول: القيمة ؛
مع ضبط العرض والارتفاع على الحجم الذي يتناسب مع المستند. في ما يلي أمثلة لإطار لا يتضمن أنماطًا وواحدًا يحتوي فقط على الأساسيات. وكما ترون ، فإن هذه الأنماط في الغالب تعمل فقط على إزالة الحدود حول iframe ، ولكنها تضمن أيضًا أن جميع المتصفحات تعرض أن iframe بنفس الهوامش والحشو والأبعاد.
توصي HTML5 باستخدام الخاصية overflow لإزالة أشرطة التمرير ، لكن ذلك غير موثوق. لذا إذا كنت تريد إزالة أشرطة التمرير أو تغييرها ، فيجب استخدام سمة التمرير على iframe أيضًا. لاستخدام سمة التمرير ، أضفها مثل أي سمة أخرى ، ثم اختر واحدة من ثلاث قيم: نعم ، أو لا ، أو تلقائي. نعم يقول المتصفح لتشمل أشرطة التمرير دائما حتى لو لم تكن هناك حاجة. لا يقول لإزالة جميع أشرطة التمرير سواء كانت مطلوبة أم لا.
التلقائي هو الافتراضي ويتضمن أشرطة التمرير عند الحاجة إليها وإزالتها عندما لا تكون.
فيما يلي كيفية إيقاف تشغيل التمرير باستخدام سمة التمرير:
scrolling = "no"
هذا هو iframe.
لإيقاف تشغيل التمرير في HTML5 ، من المفترض أن تستخدم الخاصية overflow. ولكن كما ترون في هذه الأمثلة ، فإنها لا تعمل بشكل موثوق في جميع المتصفحات حتى الآن.
إليك كيفية تشغيل التمرير طوال الوقت باستخدام الخاصية overflow:
style = "overflow: scroll؛"
هذا هو iframe.
توجد طريقة لإيقاف تشغيل التمرير بالكامل مع الخاصية overflow.
يرغب العديد من المصممين في دمج إطارات iframe الخاصة بهم مع خلفية الصفحة التي يستخدمونها حتى لا يعرف القراء أن إطارات iframes موجودة حتى. ولكن يمكنك أيضًا إضافة أنماط لجعلها مميزة. يعد ضبط الحدود بحيث يظهر iframe أكثر سهولة. ما عليك سوى استخدام خاصية نمط الحدود (أو أنها ذات صلة بالحدود ، وحدود اليمين ، وحدود اليسار ، وخواص الحد السفلي) لتصميم الحدود:
iframe {
الحد الأعلى: # c00 1px منقط ؛
border-right: # c00 2px منقط ؛
border-left: # c00 2px منقط ؛
الحد السفلي: # c00 4px منقط ؛
}
ولكن لا ينبغي أن تتوقف مع التمرير وحدود الأنماط الخاصة بك. يمكنك تطبيق الكثير من أنماط CSS الأخرى على iframe الخاص بك. يستخدم هذا المثال أنماط CSS3 لمنح iframe ظلًا وزوايا دائرية ودوره بمقدار 20 درجة.
iframe {
الهامش العلوي: 20 بكسل ؛
الهامش السفلي: 30 بكسل ؛
-moz-border-radius: 12px؛
-webkit-border-radius: 12px؛
border-radius: 12px؛
-moz-box-shadow: 4px 4px 14px # 000؛
-webkit-box-shadow: 4px 4px 14px # 000؛
box-shadow: 4px 4px 14px # 000؛
-moz-تحويل: تدوير (20deg)؛
-webkit-تحويل: تدوير (20deg)؛
-o-تحويل: تدوير (20deg)؛
-ms-تحويل: تدوير (20deg)؛
مرشح: معرف البرنامج: DXImageTransform.Microsoft.BasicImage (دوران = 0.2)؛
}
تصميم محتويات Iframe
إن تصميم محتويات iframe يشبه تصميم أي صفحة ويب أخرى. ولكن ، يجب أن يكون لديك حق الوصول لتعديل الصفحة . إذا لم تتمكن من تحرير الصفحة (على سبيل المثال ، في موقع آخر).
إذا كان بإمكانك تحرير الصفحة ، فيمكنك إضافة ورقة أنماط خارجية أو أنماط في المستند تمامًا كما تفعل مع أي صفحة ويب أخرى على موقعك.