العنصر <q>

من موسوعة حسوب
اذهب إلى: تصفح، ابحث

يُشير العنصر <q> إلى أنَّ النص المحتوى فيه يُمثِّل اقتباسًا قصيرًا، ويستعمل هذا العنصر للاقتباسات التي لا تحتاج إلى فقرة كاملة لها، أما للاقتباسات الطويلة فاستخدم العنصر <blockquote>.

مثال عن استخدام العنصر <q>:

<p>
  وفقًا لموقع شركة حسوب:
  <q cite="https://www.hsoub.com/">
  نعمل لنمكّن الشباب ونفتح مزيدًا من الفرص أمامهم. نحن حسوب.
  </q>
</p>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي أو عنصر عادي.
المحتوى المسموح محتوى عادي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى العادي.
واجهة DOM HTMLQuoteElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
مدعوم مدعوم مدعوم مدعوم مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

cite

قيمة هذه الخاصية تُمثِّل رابط URL الذي يُشير إلى المستند المصدري لهذا الاقتباس أو لشرحه، فالغرض من هذه الخاصية هو توفير رابط لشرح المزيد من المعلومات حول الاقتباس أو لتبيان مصدره.

التنسيق الافتراضي

أغلبية المتصفحات الحديث ستُضيف علامتَي اقتباس حول النص المحتوى في عنصر <q> تلقائيًا، لكن قد يلزمك استخدام قاعدة CSS لإضافة علامتَي الاقتباس في المتصفحات القديمة.

تعرض تلك المتصفحات هذا العنصر عبر ضبط الخاصية display إلى inline، واستخدام العنصر الزائف ‎::before و ‎::after مع الخاصية content لإضافة علامات اقتباس قبل وبعد العنصر:
q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

مصادر ومواصفات