CSS Bugs and Inconsistencies in Firefox 3.x

لا توجد العديد من المقالات التي تتناول حالات عدم التوافق ، أو اختلافات CSS في Firefox وحده - ولسبب وجيه.

لقد عمل فايرفوكس دائمًا بعمل ممتاز في دعم كل من CSS وجافا سكريبت بطريقة متوافقة مع المعايير دون الكثير من الأخطاء البالية.

ومع ذلك ، هناك بعض الخصائص والمتخصصات في CSS التي لا يتم دعمها بواسطة واحد أو أكثر من الإصدارات التي تم إصدارها منذ الإصدار 3.0 ، والتي سأغطيها هنا.

ستغطي هذه المقالة الخلل ، عدم الاتساق ، وعدم الدعم . لذلك ، إذا كنت تواجه مشكلة في خاصية CSS أو محدد في Firefox ولم يتم سردها هنا ، فربما يتعين عليك إعادة التفكير في التصميم وإعادة النظر في ما قد يكون عليه السبب.

منذ فايرفوكس 2 هو تقريبا غير موجودة ، لن أفكر في هذا الإصدار على وجه التحديد ، ولكن سيتم تطبيق هذه المعلومات بشكل عام على هذا الإصدار بشكل افتراضي.

وأود أن أشير إلى أن مادة لهذا المنصب أخذت في المقام الأول من حديثا المحدثة، SitePoint مرجع CSS ، والتي هي أفضل مرجع CSS وأكثرها شمولاً في أي مكان.

تجاوز المخطوطة تجاوز

في الإصدار 3.x من Firefox ، عندما يتجاوز عنصر حدود أحد الأبوين الأم outline تعيين الخاصية ، سيتم توسيع المخطط لتلائم عنصر يحتوي على ، كما هو موضح في التقاط الشاشة أدناه:

يظهر التنفيذ الصحيح في التقاط الشاشة التالي الذي تم التقاطه من Chrome:

كما هو موضح أعلاه ، يجب أن يشمل المخطط العنصر الذي يتم تحديده ، ويجب ألا يتأثر بأي عناصر متدفقة. لضمان عدم وجود ارتباك ، لاحظ أن هذا خطأ في تنفيذ outline الملكية ، وليس border خاصية.

مرجع: SitePoint CSS Reference: مخطط تفصيلي الخاصية

الجداول ذات الحدود المقلدة

في Firefox ، عندما يكون للجدول حدوده collapse باستخدام border-collapse الخاصية ، أعلى هوامش الجدول واليسار الأيسر بالنسبة إلى العناصر المجاورة 1 بكسل. يظهر هذا في لقطة شاشة مكبرة في الصورة أدناه ، والتي تعرض الحد السفلي لعنصر مستوى الكتلة (أحمر) لمس الحد العلوي لجدول مطوي (أزرق):

في ما يلي التنفيذ الصحيح لزوج الخاصية / القيمة هذا ، كما هو موضح في Chrome:

كما هو موضح أعلاه ، نظرًا لأن الحدود "مطوية" ، ولأن الجدول ليس عنصر كتلة ، يجب أن يكون هناك تخالف طفيف في الهامش الأيسر ، ويجب أن يكون الهامش العلوي حتى مع الحد السفلي للعنصر فوقه.

مرجع: SitePoint CSS Reference: border-collapse Property

خلايا فارغة في صفوف الجدول

هذه قيمة خاصية لا يتم تنفيذها بشكل صحيح من قبل أي متصفح ، بما في ذلك Firefox. عندما لا يحتوي صف الجدول على محتوى مرئي وكل الخلايا الخاصة به empty-cells تم تعيين الخاصية على hide ، يجب أن يتصرف الصف بأكمله كما لو تم تعيينه على "display: none" ، بدون حدود أو خلفيات مرئية.

لا يعالج المتصفح هذا بشكل صحيح ، لذلك لا يزال صف الجدول مرئيًا ، كما هو موضح في الصورة أدناه.

مرجع: SitePoint CSS Reference: خصائص الخلايا الفارغة

تباعد الكلمات على العناصر المضمنة

في Firefox 3.x ، قيمة سالبة على word-spacing سيتم التعامل مع الخاصية صفر على العناصر المضمنة المجاورة. يجب أن تتسبب القيمة السالبة في تداخل العناصر المضمنة مع بعضها البعض ، كما هو الحال مع النص ، ولكن هذا لا يحدث. بدلاً من ذلك ، يتم إعطاء العناصر صفر فصل المسافة البيضاء بدون تراكب.

تعرض الصورة أدناه كل من التطبيقات الصحيحة وغير الصحيحة:

في الأمثلة الموضحة أعلاه ، يتم تغليف الكلمات الثلاث "Fruits" و "Vegetables" و "Other Foods" بشكل فردي في العناصر ، في حين أن الفقرة التي يلتف عليها لديها word-spacing تم تعيين الخاصية إلى قيمة سالبة.

المثال الثاني (Firefox) يفشل في تطبيق المسافات بين الكلمات السالبة ، باستثناء ما بين الكلمتين الأخيرتين لأن هذه الكلمات لا يتم تغليفها بشكل فردي بواسطة امتدادات ولكنها عناصر نصية طبيعية.

كنقطة جانبية ، يحدث هذا الخطأ بشكل مشابه في IE8 ، ولكن ليس في الإصدارات السابقة من IE.

مرجع: SitePoint CSS Reference: خاصية تباعد الكلمات

زخرفة النص على أحفاد العائمة

عندما يحتوي عنصر ما على قيمة مجموعة زخرفة نصية ، لا يجب أن تكون هذه القيمة موروثة بواسطة أحفاد عائمة. في فايرفوكس 3.x ، يتم إعطاء أحفاد العائمة نفس قيم زخرفة النص مثل الأصل ، على الرغم من أن هذا لا ينبغي أن يكون عليه الحال.

في الصورة أعلاه ، السطر الأول عبارة عن لقطة شاشة من IE8 ، يعرض عنصر طرحت داخل مرساة. النص داخل ليس لديه زخرفة نص واضحة ، وهي الطريقة الصحيحة لعرضه. في Firefox (كما هو موضح في المثال الثاني) ، يتم تطبيق زخرفة النص بشكل غير صحيح على الطفو .

قد تكون لاحظت هذا الخطأ في Firefox عند محاولة إزالة زخرفة النص من الصور العائمة داخل المراسي.

مرجع: SitePoint CSS Reference: خاصية زخرفة النص

ما قبل الخط والتلف المسبق لملكية الفضاء الأبيض في FF 3.0

باستخدام white-space الخاصية في فايرفوكس 3.5 ، يمكنك تحديد ما إذا كان يجب تصغير أحرف المسافات المتعددة إلى مسافة واحدة أم لا. بشكل افتراضي ، ستنهار مستندات HTML بمسافات متعددة لأسفل إلى مسافة واحدة. في بعض الحالات ، يمكنك التقدم بطلب white-space: pre لمنع المساحة البيضاء من الانهيار ، وهو ما يشبه استخدام

  علامة HTML.  في وقت لاحق ، قد ترغب في إزالة هذا الإعداد باستخدام white-space:  pre-line  (لطي الفضاء الأبيض). 
  لا يدعم Firefox 3.0 هذه القيمة ، لذا سيتم الاحتفاظ بالمساحة البيضاء.  فايرفوكس 3.5 ينهار الفضاء بشكل صحيح.  توضح الصورة أدناه كلا المثالين: 
  وبالمثل ، عند تعيين فقرة نص white-space:  pre-wrap  يجب أن يحافظ هذا على المسافات البيضاء بين الكلمات ، ولكن يجب أن يتضمن فواصل الأسطر بشكل طبيعي.  فشل فايرفوكس 3.0 في تنفيذ ذلك بشكل صحيح ، بينما تتضمن الإصدارات الأحدث (وجميع المتصفحات الأخرى) فواصل الأسطر الطبيعية.  يتم عرض كلا المثالين أدناه. 
  ضع في اعتبارك أنه يتم إعطاء العنصر الخارجي white-space: pre  بينما الداخلية   يحاول تجاوز عدم استخدام فواصل الأسطر pre-wrap  .  من تلقاء نفسها، pre-wrap  لن يكون لها أي تأثير. 
  فايرفوكس 3.x يعامل أيضا بعض من white-space  القيم بشكل مختلف عن المتصفحات الأخرى عند تطبيق تلك القيم على </code>  جزء.  على سبيل المثال ، تطبيق <code>white-space:  nowrap</code>  يجب أن يسبب كل النص المكتوب في <code><textarea></code>  لتشكيل خط واحد ، ولكن لا يقوم Firefox 3.x بذلك. </p><p style=";text-align:right;direction:rtl">  <strong>مرجع:</strong> <a href="http://reference.sitepoint.com/css/white-space" class=external rel=nofollow>SitePoint CSS Reference: الخاصية white-space</a></p><ul style=";text-align:right;direction:rtl"></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  خصائص فاصل الصفحة </h2><p style=";text-align:right;direction:rtl">  يتيح CSS للمطورين تحديد مكان أو عدم حدوث فواصل الصفحات باستخدام الخصائص الثلاثة <code>page-break-before</code>  ، <code>page-break-inside</code>  و <code>page-break-after</code>  .  Opera هو المتصفح الوحيد الذي يدعم هذه الخصائص تمامًا ، بينما توفر المتصفحات الأخرى دعمًا جزئيًا أو بدون دعم. </p><p style=";text-align:right;direction:rtl">  ال <code>page-break-inside</code>  تحدد الخاصية ما إذا كان يمكن أن يحدث فاصل صفحات داخل عنصر واحد على مستوى الكتلة.  لا يوفر Firefox الدعم لهذه الخاصية.  باستخدام بناء الجملة <code>page-break-inside:  avoid</code>  ، يمكنك منع عنصر من أن يتم تقسيمه أثناء الطباعة.  توضح الصورة أدناه ، من معاينة الطباعة في أوبرا 10 ، كيف يمكن لهذه الخاصية منع تقسيم قائمة غير مرتبة على صفحتين: </p><div class=article-large-block style=";text-align:right;direction:rtl"><img src="https://odwebdesign.net/uploads/c/d1/22/css-bugs-and-inconsistencies-in-firefox-3-x_10.gif" alt="" width=615 height=293 /></div><p style=";text-align:right;direction:rtl">  على النقيض من ذلك ، انظر إلى الصورة أدناه ، مأخوذة من خيار معاينة الطباعة في فايرفوكس 3.5: </p><div class=article-large-block style=";text-align:right;direction:rtl"><img src="https://odwebdesign.net/uploads/9/18/ac/css-bugs-and-inconsistencies-in-firefox-3-x_11.gif" alt="" width=615 height=278 /></div><p style=";text-align:right;direction:rtl">  <strong>مرجع:</strong> <a href="http://reference.sitepoint.com/css/pagedmedia" class=external rel=nofollow>SitePoint CSS Reference: خصائص وسائط Paged</a></p><ul style=";text-align:right;direction:rtl"></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  الأيتام والأرامل على الصفحات القابلة للطباعة </h2><p style=";text-align:right;direction:rtl">  ال <code>orphans</code>  و <code>widows</code>  يتم دعم خصائص CSS فقط بواسطة Internet Explorer 8 و Opera منذ الإصدار 9. يتم استخدام هذه الخاصية لتحديد الحد الأدنى لعدد الأسطر من فقرة واحدة يمكن أن تظهر على صفحة مطبوعة ، إما في الجزء السفلي (الأيتام) أو الأعلى (الأرامل) ).  بناءً على العدد المختار ، سيتم نقل الخطوط من صفحة إلى أخرى (أو السابقة) لمنع طباعة سطر واحد في أعلى أو أسفل الصفحة. </p><p style=";text-align:right;direction:rtl">  حتى مع <code>orphans</code>  الخاصية التي تم تعيينها إلى قيمة "3" ، كما هو موضح في الصورة أدناه ، تعرض معاينة الطباعة في فايرفوكس سطرًا واحدًا في الجزء السفلي من إحدى الصفحات القابلة للطباعة: </p><div class=article-large-block style=";text-align:right;direction:rtl"><img src="https://odwebdesign.net/uploads/e/d0/f4/css-bugs-and-inconsistencies-in-firefox-3-x_12.gif" alt="" width=615 height=162 /></div><p style=";text-align:right;direction:rtl">  مشابهه ل <code>page-break-inside</code>  الخاصية ، فشل فايرفوكس أيضا لدعم القيم <code>avoid</code>  ، <code>left</code>  و <code>right</code>  لكل من <code>page-break-before</code>  و <code>page-break-after</code>  الخصائص. </p><p style=";text-align:right;direction:rtl">  <strong>المراجع:</strong> <a href="http://reference.sitepoint.com/css/orphans" class=external rel=nofollow>SitePoint CSS Reference: خاصية orphans</a>  | <a href="http://reference.sitepoint.com/css/widows" class=external rel=nofollow>SitePoint CSS Reference: Property widows</a></p><ul style=";text-align:right;direction:rtl"></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  The: first-line Bseudo-Element Bug </h2><p style=";text-align:right;direction:rtl">  ال <code>:first-line</code>  يسمح عنصر pseudo-first السطر من أي كتلة نص معينة أن يكون تنسيق مختلف عن باقي النص.  على سبيل المثال ، يمكن تغيير السطر الأول من فقرة من النص إلى أحرف كبيرة أو إلى لون مختلف.  لكي يعمل عنصر CSS هذا بطريقة عملية ، يجب أن يسمح بإمكانية وجود عناصر متداخلة على مستوى الكتلة.  على سبيل المثال ، <code><div></code>  عنصر يحتوي على <code><p></code>  عنصر يجب أن تسمح <code>:first-line</code>  عنصر زائف لتغيير تصميم السطر الأول من النص داخل <code><div></code>  .  في Firefox (وفي العديد من المتصفحات الأخرى) ، هذا غير ممكن ما لم يستهدف العنصر الزائف بشكل خاص الفقرة الفرعية. </p><p style=";text-align:right;direction:rtl">  يقوم Internet Explorer 8 و Chrome و Safari بتنفيذ هذه الميزة بشكل صحيح ، مما يمنع تداخل عناصر الكتلة من كسر التصميم ، كما هو موضح في الصورة أدناه: </p><div class=article-large-block style=";text-align:right;direction:rtl"><img src="https://odwebdesign.net/uploads/1/82/8f/css-bugs-and-inconsistencies-in-firefox-3-x_13.gif" alt="" width=615 height=249 /></div><p style=";text-align:right;direction:rtl">  في الفقرة أعلاه ، يكون النص داخل a <code><p></code>  العنصر ، الذي يوجد داخل <code><div></code>  .  ال <code><p></code>  لديه <code>:first-line</code>  تم تعيين عنصر pseudo-to <code>color:  blue</code>  الذي فشل في فايرفوكس بسبب تداخل الفقرة داخل <code><div></code>  . </p><p style=";text-align:right;direction:rtl">  <strong>مرجع:</strong> <a href="http://reference.sitepoint.com/css/pseudoelement-firstline" class=external rel=nofollow>SitePoint CSS Reference: Pseudo-Element first-line</a></p><ul style=";text-align:right;direction:rtl"></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  دعم CSS3 في Firefox 3.x </h2><p style=";text-align:right;direction:rtl">  أضاف Firefox بشكل تدريجي دعمًا أفضل لـ CSS3 منذ إصدار الإصدار 3.0.  فيما يلي وصف لكيفية معالجة فايرفوكس لميزات مختلفة من CSS3.  بعض هذه قد لا تزال في <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsWD" class=external rel=nofollow>مشروع العمل</a>  أو <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsCR" class=external rel=nofollow>توصية مرشح</a>  المرحلة ، لذلك لا يمكننا أن نكون العقائديين حول ما ينبغي وينبغي أن لا تكون مدعومة حتى وصلت <a href="http://www.w3.org/Consortium/Process/Process-19991111/tr.html#RecsW3C" class=external rel=nofollow>توصية</a>  المسرح. </p><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl">  فايرفوكس 3.0 لا يدعم <code>text-shadow</code>  خاصية </li><li style=";text-align:right;direction:rtl">  لا يدعم متصفح Firefox 3.x <code>box-shadow</code>  الخاصية ، إلا عند استخدام بادئة الملكية <code>-moz-</code></li><li style=";text-align:right;direction:rtl">  لا يدعم متصفح Firefox 3.x <code>box-sizing</code>  الخاصية ، إلا عند استخدام بادئة الملكية <code>-moz-</code></li><li style=";text-align:right;direction:rtl">  لا يدعم متصفح Firefox 3.x أعمدة متعددة ما لم تكن بادئة الملكية <code>-moz-</code>  يستخدم </li><li style=";text-align:right;direction:rtl">  لا يدعم Firefox 3.0 و 3.5 تدرجات CSS3 وخلفيات متعددة (تمت إضافة كليهما مؤخرًا في 3.6) </li><li style=";text-align:right;direction:rtl">  فايرفوكس 3.0 لا يدعم <code>border-image</code>  خاصية ، ولكن 3.5 يدعم ذلك باستخدام <code>-moz-</code>  بادئة الملكية </li><li style=";text-align:right;direction:rtl">  لا يدعم الإصدار 3.0 من فايرفوكس عددًا من الطبقات الزائفة CSS3 (: nth-child،: nth-last-child،: nth-of-type، etc.) </li><li style=";text-align:right;direction:rtl">  لا يدعم Firefox 3.0 تحويلات CSS </li><li style=";text-align:right;direction:rtl">  لا يدعم متصفح Firefox 3.x انتقالات CSS </li><li style=";text-align:right;direction:rtl">  لا يدعم Firefox 3.x الرسوم المتحركة من CSS </li></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  ميزات CSS الأخرى غير مدعومة </h2><p style=";text-align:right;direction:rtl">  تمت مناقشة بعض الأخطاء الأكثر أهمية وعدم التوافق أعلاه ، ولكن هناك عدد قليل آخر جدير بالملاحظة. </p><ul style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl">  لا يدعم Firefox الإصدار 3.5 حتى القيمة <code>run-in</code>  ل <code>display</code>  خاصية </li><li style=";text-align:right;direction:rtl">  فايرفوكس لا يدعم <code>::selection</code>  شبه عنصر </li><li style=";text-align:right;direction:rtl">  لا يتم دعمpage at-rule بواسطة Firefox </li><li style=";text-align:right;direction:rtl">  لا يدعم Firefox 3.0 @ font-face-rule </li></ul><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  استنتاج </h2><p style=";text-align:right;direction:rtl">  بعد الاطلاع على هذه المادة ، يمكنك أن ترى بوضوح أن <strong>نقص دعم ميزات CSS في فايرفوكس هو الحد الأدنى ، وفي كثير من الحالات غير ذي صلة تمامًا</strong> نظرًا لأن العديد من الخصائص التي نوقشت هنا ليست شائعة الاستخدام. </p><p style=";text-align:right;direction:rtl">  ومع ذلك ، آمل أن يوفر هذا مرجعًا جيدًا لأهم الأخطاء والتناقضات في فايرفوكس.  إذا كنت تواجه مشاكل مع ميزة معينة لـ CSS في Firefox غير مدرجة هنا ، فمن المحتمل أنك تقوم بشيء خاطئ أو قد لا تفهم بشكل كامل مفاهيم ومبادئ CSS معينة. </p><p style=";text-align:right;direction:rtl">  لذا ، في هذا الصدد ، <strong>يجب أن تعمل</strong> هذه الإشارة <strong>بشكل جيد كمرجع معكوس</strong> ، حيث يمكن الوثوق بالأشخاص غير المدرجين هنا للعمل بشكل جيد إذا تم تنفيذها بشكل صحيح مع التركيب الصحيح. </p><p style=";text-align:right;direction:rtl">  بالطبع ، إذا كان هناك أي شيء فاتني ، أو أي أخطاء ، يرجى التعليق وسأبذل قصارى جهدي لإجراء أي تصحيحات وإضافات ضرورية. </p><p class=clearrow style=";text-align:right;direction:rtl"></p><h2 style=";text-align:right;direction:rtl">  مزيد من المراجع </h2><ul class=tight_list style=";text-align:right;direction:rtl"><li style=";text-align:right;direction:rtl"><a href="https://developer.mozilla.org/En/CSS_improvements_in_Firefox_3" class=external rel=nofollow>تحسينات CSS في Firefox 3</a></li><li style=";text-align:right;direction:rtl"><a href="https://developer.mozilla.org/En/Firefox_3.5_for_developers#Newly-supported_CSS_features" class=external rel=nofollow>ميزات CSS المدعومة حديثًا في Firefox 3.5</a></li></ul><p style=";text-align:right;direction:rtl"><br class=spacer_ /></p><p style=";text-align:right;direction:rtl">  <em>فايرفوكس الصورة المقدمة من قبل</em> <em><a rel=nofollow href="http://rakaz.nl/2004/10/firefox-wallpapers.html" class=external></em>  <em>Rakaz</em></a> <em><br class=spacer_ /></em> </p><p style=";text-align:right;direction:rtl">  <em>تمت كتابة هذه المقالة حصريًا لـ Webdesigner Depot بواسطة Louis Lazaris ، كاتب مستقل ومطور على الويب.</em>  <em>يدير لويس</em> <em><a rel=nofollow href="http://www.impressivewebs.com/" class=external></em>  <em>شبكة رائعة</em></a>  <em>حيث ينشر مقالات ودروسًا حول تصميم الويب.</em>  <em>يمكنك اتباع لويس</em> <em><a rel=nofollow href="http://twitter.com/ImpressiveWebs" class=external></em>  <em>على تويتر</em></a>  <em>أو الاتصال به</em> <em><a rel=nofollow href="http://www.impressivewebs.com/contact" class=external></em>  <em>من خلال موقعه على الانترنت</em></a>  <em>.</em> </p><p style=";text-align:right;direction:rtl"><br class=spacer_ /></p>


        <div class="bootstrap-tagsinput">
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/lmghlk/">المغلق</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/thaalb-ln-r/">ثعلب النار</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/lbk/">البق</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/lbk-css/">البق css</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/f-yrfoks-3/">فايرفوكس 3</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/akht-f-yrfoks/">أخطاء فايرفوكس</a> </span>
                        <span class="tag label label-info"><a href="https://ar.odwebdesign.net/tag/inconsitencies/">inconsitencies</a> </span>
                    </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <ul class="pager">
            
            <li class="previous"><a href="https://ar.odwebdesign.net/fight-div-itis-and-class-itis-with-the-960-grid-system/">← قتال Div-Itis و Class-Itis مع نظام الشبكة 960</a></li>            
            <li class="next"><a href="https://ar.odwebdesign.net/wordpress-vs-expressionengine-apples-and-oranges/">مقابل وورد.  ExpressionEngine: التفاح والبرتقال؟ →</a></li>        </ul>
    </div>
</div>



                                                                
            </div>
                <div class="col-md-3">
                                        <aside class="col-lg-12 side-bar col-md-12">
    <ul class="nav nav-tabs">
        <li class="active"> <a data-toggle="tab" href="#latest" role="tab">الأخيرة</a> </li>
        <li> <a data-toggle="tab" href="#popular" role="tab">الأفضل</a> </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content sidebar-tabing" id="nav-tabContent">
        <div class="tab-pane active" id="latest" role="tabpanel">
            
                        <div class="media"> <a href="https://ar.odwebdesign.net/why-html5-is-more-semantic/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/6/62/de/why-html5-is-more-semantic_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://ar.odwebdesign.net/why-html5-is-more-semantic/">لماذا HTML5 هو أكثر الدلالي</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://ar.odwebdesign.net/how-to-make-an-animated-thumbnail/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/5/8d/96/how-to-make-an-animated-thumbnail_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://ar.odwebdesign.net/how-to-make-an-animated-thumbnail/">كيفية جعل صورة متحركة مصغرة</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://ar.odwebdesign.net/how-to-use-the-css3-transition-property/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/5/4b/7e/how-to-use-the-css3-transition-property_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://ar.odwebdesign.net/how-to-use-the-css3-transition-property/">كيفية استخدام خاصية انتقال CSS3</a>
                    </div>
                </div>
            </div>
                        <div class="media"> <a href="https://ar.odwebdesign.net/how-to-harness-yahoos-weather-api/"> <img class="pull-left" style="margin-top: 10px; margin-left: 3px" src="https://odwebdesign.net/uploads//titles/a/04/a9/how-to-harness-yahoos-weather-api_ors.jpg" alt=""></a>
                <div class="media-body">
                    <div class="title-small-sidebar">
                        <a href="https://ar.odwebdesign.net/how-to-harness-yahoos-weather-api/">كيفية تسخير ياهو!</a>
                    </div>
                </div>
            </div>
                    </div>
        <div class="tab-pane" id="popular" role="tabpanel">
            
                            <div class="media"> <a href="https://ar.odwebdesign.net/say-hello-to-developerdrive-com/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://ar.odwebdesign.net/say-hello-to-developerdrive-com/">قل مرحبًا إلى DeveloperDrive.com</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://ar.odwebdesign.net/techniques-for-creating-modal-windows/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://ar.odwebdesign.net/techniques-for-creating-modal-windows/">تقنيات لخلق النوافذ مشروط</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://ar.odwebdesign.net/back-to-basics-how-to-code-an-html5-template/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://ar.odwebdesign.net/back-to-basics-how-to-code-an-html5-template/">الرجوع إلى الأساسيات: كيفية ترميز قالب HTML5</a>
                        </div>
                    </div>
                </div>
                            <div class="media"> <a href="https://ar.odwebdesign.net/flash-centric-misconceptions-of-html5/"> <img class="pull-left" src="https://odwebdesign.net/uploads//noima.jpg" alt=""></a>
                    <div class="media-body">
                        <div class="title-small-sidebar">
                            <a href="https://ar.odwebdesign.net/flash-centric-misconceptions-of-html5/">مفاهيم خاطئة تتمحور حول فلاش حول HTML5</a>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</aside>
    
                                        
                                    </div>

            
        </div>
                <footer class="footer-bs">
            <div class="row">
                <div class="col-md-3 footer-brand animated fadeInLeft">
                    <img src="https://ar.odwebdesign.net/img/logo1n.png">
                                                        </div>


                <div class="col-md-9 footer-nav animated fadeInRight">
                    <ul class="list">
                        <li><a href="https://ar.odwebdesign.net/category/freebies/">المجانية</a></li>
                        <li><a href="https://ar.odwebdesign.net/category/interactive-design/">التصميم التفاعلي</a></li>
                        <li><a href="https://ar.odwebdesign.net/contact_us/">اتصل بنا</a> </li>
                    </ul>
                    <br>
                    <h4>OdWebDesign.Net</h4>
                </div>
            </div>

            
                <!-- Piwik -->
                <script type="text/javascript">
                    var _paq = _paq || [];
                    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
                    _paq.push(['trackPageView']);
                    _paq.push(['enableLinkTracking']);
                    (function() {
                        var u="//odwebdesign.net/";
                        _paq.push(["setTrackerUrl", u+"piwik.php"]);
                        _paq.push(["setSiteId", "470"]);
                        var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
                        g.type="text/javascript"; g.async=true; g.defer=true; g.src=u+"piwik.php"; s.parentNode.insertBefore(g,s);
                    })();
                </script>
                <!-- End Piwik Code -->
            

        </footer>
    </div><!-- /.container -->

      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/dist/js/bootstrap.min.js"></script>
  </body>
</html>