اذهب إلى المحتوى

البحث في الموقع

المحتوى عن 'counter'.

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المحتوى


التصنيفات

  • الإدارة والقيادة
  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • السلوك التنظيمي في المؤسسات
  • عالم الأعمال
  • التجارة والتجارة الإلكترونية
  • نصائح وإرشادات
  • مقالات ريادة أعمال عامة

التصنيفات

  • مقالات برمجة عامة
  • مقالات برمجة متقدمة
  • PHP
    • Laravel
    • ووردبريس
  • جافاسكربت
    • لغة TypeScript
    • Node.js
    • React
    • Vue.js
    • Angular
    • jQuery
    • Cordova
  • HTML
  • CSS
    • Sass
    • إطار عمل Bootstrap
  • SQL
  • لغة C#‎
    • ‎.NET
    • منصة Xamarin
  • لغة C++‎
  • لغة C
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • لغة Rust
  • برمجة أندرويد
  • لغة R
  • الذكاء الاصطناعي
  • صناعة الألعاب
  • سير العمل
    • Git
  • الأنظمة والأنظمة المدمجة

التصنيفات

  • تصميم تجربة المستخدم UX
  • تصميم واجهة المستخدم UI
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب GIMP
    • كريتا Krita
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • مقالات DevOps عامة
  • خوادم
    • الويب HTTP
    • البريد الإلكتروني
    • قواعد البيانات
    • DNS
    • Samba
  • الحوسبة السحابية
    • Docker
  • إدارة الإعدادات والنشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
    • ريدهات (Red Hat)
  • خواديم ويندوز
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • شبكات
    • سيسكو (Cisco)

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح
  • مبادئ علم التسويق

التصنيفات

  • مقالات عمل حر عامة
  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • العمل الحر المهني
    • العمل بالترجمة
    • العمل كمساعد افتراضي
    • العمل بكتابة المحتوى

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
    • بريستاشوب
    • أوبن كارت
    • دروبال
  • الترجمة بمساعدة الحاسوب
    • omegaT
    • memoQ
    • Trados
    • Memsource
  • برامج تخطيط موارد المؤسسات ERP
    • تطبيقات أودو odoo
  • أنظمة تشغيل الحواسيب والهواتف
    • ويندوز
    • لينكس
  • مقالات عامة

التصنيفات

  • آخر التحديثات

أسئلة وأجوبة

  • الأقسام
    • أسئلة البرمجة
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات

التصنيفات

  • كتب ريادة الأعمال
  • كتب العمل الحر
  • كتب تسويق ومبيعات
  • كتب برمجة
  • كتب تصميم
  • كتب DevOps

ابحث في

ابحث عن


تاريخ الإنشاء

  • بداية

    نهاية


آخر تحديث

  • بداية

    نهاية


رشح النتائج حسب

تاريخ الانضمام

  • بداية

    نهاية


المجموعة


النبذة الشخصية

تم العثور على 1 نتيجة

  1. عند كتابة نص أو مقال ما، فأنت في الأغلب ستضيف له بعض الصور، أو الفيديو أو رسومات لتوضح المحتوى بشكل أكبر. والأغلب أنك ستضيف لكل منه نصا تقوم فيه بشرح مفهوم الصورة، وقد ترغب بترقيم الصور حتى لا يضيع القارئ، وهذا ما سنقوم به عبر استخدام عنصر <figure> مع المُرقمات (counters). عنصر figure إن عنصر <figure> صُمم ليستخدم جنبا إلى جنب مع <figcaption> لاحتواء الصور وما شابه. هذا هو شرح <figure> في وصف لغة HTML الرسمي: هكذا نقوم بإضافة figure : <figure> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> هناك بعض الملاحظات بشأن العنصر: عنصر <figcaption> اختياري. تستطيع استخدام عنصر <figcaption> واحد فقط داخل عنصر <figure>. تستطيع إدراج أيّ عدد تشاء من العناصر داخل <figure>. إذا كنت ستدرج صورة فتستطيع ترك alt فارغة إذا كنت ستدرج <figcaption> حتى لا تقوم برامج قراءة الشاشة بقراءة نفس المحتوى مرّتين. للمزيد من المعلومات حول <figure> ألق نظرة على هذه المصادر: HTML5Doctor Mozilla Developer Network W3C Specification أمثلة: إذا أردت أن تظهر شيفرة برمجية ما، فتستطيع استخدامه بهذه الطريقة: <figure> <code>body { background: white; }</code> <figcaption>Some illustrated code with figure<figcaption> </figure> بدل إدراج صورك بهذه الطريقة: <img src="cute-kitty.jpg" alt="This is a cute kitty!" /> تستطيع إدراجها بهذه الطريقة: <figure> <img src="cute-kitty.jpg" alt="" /> <figcaption>This is a cute kitty!<figcaption> <figure> دعم المتصفحات عنصر <figure> يعتبر من أحد عناصر HTML5 الجديدة، ولذا فهو ليس مدعوما من قبل المتصفحات القديمة (IE 8) ولكن لا أحد يهتم صراحة. ولكن إن كنت مُهتمًا بدعم المُتصفّحات القديمة فتستطيع استخدام html5shiv ليظهر الوسم بشكل عادي. المُرقّمات في CSS أحد أكثر خصائص CSS ديناميكة وأقلها شهرة هي CSS Counter فهي تسمح لك بترقيم العناصر ديناميكيا عبر CSS فحسب، بدون الاستعانة بأيّ شيء آخر. استخدام المرقمات يكون عبر خاصيتين وقيمة وهما: counter-reset والتي تستخدم لتهيئة أو إعادة تهيئة مرقم أو أكثر. counter-increment والتي تستخدم لزيادة قيمة مرقم أو أكثر. ()counter وهي قيمة تستخدمها مع before:: أو after:: والتي تقبل اسم المرقم كقيمة من أجل أن تظهر القيمة. الأمر بسيط. كل ما تقوم به هو تهيئة عدّاد ما بالاسم الذي تريده، ثم تحدد لمجموعة عناصر ما أن تقوم بزيادة تلك القيمة كلنا ظهر أحدها. ويمكن إظهار هذه القيمة عبر CSS باستخدام before:: و after::. مثال بسيط للعداد: /* 1. نقوم بتهيئة المرقم (أو العداد) */ body { counter-reset: thisSuperCoolCounter; } /* 2. نحدد أنه في كل مرة يظهر فيها هذا العنصر نرفع قيمة المرقم */ .myAwesomeElement { counter-increment: thisSuperCoolCounter; } /* 3. نقوم بإظهار قيمة العداد قبل العنصر */ .myAwesomeElement:before { content: counter(thisSuperCoolCounter); } مثال بسيط حسنا نعود للموضوع الأساسي الذي يدور حوله الدرس، نريد ترقيم صورنا حتى تظهر قبلها Fig. 2 – … Fig. 1 – … وهكذا. .article { counter-reset: figures; } .figure { counter-increment: figures; } .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; } إعداد كل شيء الأساسيات بعد أن فهمنا كيف نستخدم عنصر <figure> وكيف تعمل المرقمات في CSS حان الوقت لاستخدامها في ترقيم الصور. نقوم بإعداد وسم <figure> ببعض الأمور البسيطة: .figure { padding: 0.9em; border: 3px solid #f5bca8; background: #fff; margin: 0 auto 1em; } ثم نريد أن نحاذي الصور في وسط عنصر <figure> ونمنعهم من الخروج عن حجم الحاوي لذا نضيف التالي: .figure img { margin: 0 auto; display: block; max-width: 100%; } الآن بالنسبة لوصف الصّورة (caption) وسنجعلها تبرز أكثر بتوسيطها وجعل الخط بارزًا. فقط تذكر أنّ الهدف من الوصف أن يضيف شرحًا بسيطا، وأن إزالته لن تشكل مشكلة في الفهم فلا داعي لأن تضيف فقرة هناك. .figure figcaption { font-weight: 700; font-size: 0.8em; padding: .5em; text-align: center; color: #fff; background: #f5bca8; } الترقيم حان الوقت لإضافة الترقيم للصور، وإضافته سهلة كما رأينا سابقا. .article { counter-reset: figures; } .figure figcaption { counter-increment: figures; } .figure figcaption:before { content: 'Fig. ' counter(figures) ' - '; } الإضافات البسيطة نريد أن نضيف طريقة سهل لجعل الصور تتمركز على يمين المحتوى أو على يساره، وسنقوم بذلك عبر إضافة التالي: .figure-left { float: left; margin: 0 1em .5em 0; width: -webkit-min-content; width: -moz-min-content; width: min-content; } .figure-right { float: right; margin: 0 0 .5em 1em; width: -webkit-min-content; width: -moz-min-content; width: min-content; } إنّ min-content هي قيمة صحيحة لكل من الخواص التالية min-height min-width max-height max-widthheight width. في حالتنا، نريد من figure أن يكون بأصغر قدر ممكن، أو بالأحرى نريد من عرضه أن يكون هو نفس عرض الصورة التي هي بداخله. لأن figure هو عنصر بحجم كامل (block) فسوف يتمد عرضه إلى كامل الحاوي (100%). نستطيع استخدام float: left أو display: inline-block لجعل عرضه يقل إلى أكبر عنصر داخله، ولكن ماذا سيحدث لو كان الوصف أكبر من حجم الصورة، فستحدث مشكلة. نستطيع أن نحدد عرض العنصر يدويًّا، ولكن الأمر غير منطقي وغير ديناميكي، لهذا استخدمنا قيمة min-content، فهي بكل بساطة تخبر عنصر figure أن يقلل من حجمه إلى حجم الصورة مثال: See the Pen pJLXde by Hsoub Academy (@HsoubAcademy) on CodePen. الخاصية مدعومة من قبل فيرفكس باستخدام -moz- و chrome باستخدام -webkit-. المتصفحات التي لا تدعم الخاصية ستتصرف كما هو متوقع منها، لن يتم تعيين أيّ عرض وسيكون عرضه هو عرض أكبر عنصر داخله. ملاحظة: يوجد قيم أخرى وهي max-content و fit-content و available. اطلع على التوثيق للمزيد من المعلومات. وأخيرًا وليس آخرا، نريد أن نغير أو نحذف العرض الأقصى الذي حددناه للصور التي ستميل لليمين أو لليسار، فإذا أردت أن تأخذ الصور حجمها الطبيعي فاستخدم max-width: none وإذا أردت عرضا أقصى فاستخدم التالي: .figure-right img, .figure-left img { max-width: 300px; /* عدل على حسب حاجتك */ } توافق الشاشات الصغيرة لنتأكد من العناصر التي نحاذيها لا تتصرف بغرابة في شاشات الهواتف الصغيرة سنقوم ببعض التعديلات حتى تأخذ العناصر كامل العرض وتتوسط الصفحة أفقيا: @media (max-width: 767px) { .figure-left, .figure-right { float: none; margin: 0 0 1em 0; width: 100%; } .figure img { max-width: 100%; } } الاستخدام استخدام ما قدمناه شيء بسيط، إما أن تستخدم صورا تستغل كامل المساحة عبر استخدام figure. أو تريد أن تحاذي الصور لليمين أو لليسار فتستخدم كل من figure. وfigure-left. أو figure-right. <figure class='figure'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> <figure class='figure figure-left'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> <figure class='figure figure-right'> <img src="path/to/your/image.jpg" alt="" /> <figcaption>Here is the legend for your image<figcaption> </figure> خاتمة هذا كان كل شيء، كل ما تبقى هو أن تطبقها في موقعك، جرب إلقاء نظرة على المثال لترى مثالا عمليا. ترجمة وبتصرّف للمقال: Automatic Figure Numbering with CSS Counters لصاحبه: Hugo Giraudel. جميع حقوق المقال محفوظة لموقع codrops.
×
×
  • أضف...