شرح الخاصية quotes في Css

شرح الخاصية quotes في CSS

الخاصية quotes في CSS تُستخدم لتحديد علامات الاقتباس التي تُستخدم مع العناصر الزائفة ::before و ::after عند إضافة علامات اقتباس حول النصوص. تُستخدم هذه الخاصية عادةً مع العناصر مثل <q> أو عند استخدام content مع العناصر الزائفة.

ما هي الخاصية quotes؟

• تُحدد quotes علامات الاقتباس الافتتاحية والختامية التي تُستخدم عند إضافة اقتباسات.
• يمكن تحديد علامات اقتباس متعددة لمستويات مختلفة من الاقتباسات المتداخلة.
• تُستخدم مع الخاصية content في العناصر الزائفة ::before و ::after.

صيغة الخاصية:

quotes: "علامة الافتتاح" "علامة الإغلاق" [مستويات إضافية];

• علامة الافتتاح: العلامة التي تظهر في بداية الاقتباس.
• علامة الإغلاق: العلامة التي تظهر في نهاية الاقتباس.
• مستويات إضافية: يمكن تحديد علامات اقتباس إضافية لمستويات متداخلة.

قيم افتراضية:

إذا لم يتم تحديد quotes، ستستخدم المتصفحات العلامات الافتراضية للغة المستخدمة في المستند. على سبيل المثال:

• في اللغة الإنجليزية: " (علامة تنصيص مزدوجة).
• في اللغة العربية: « و » (علامتا اقتباس مزدوجتان).

أمثلة عملية:

استخدام علامات اقتباس مخصصة:

q {
    quotes: "«" "»" "‹" "›";
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<q>هذا اقتباس <q>متداخل</q>.</q>

النتيجة:

«هذا اقتباس ‹متداخل›.»

استخدام علامات اقتباس مع العناصر الزائفة:

blockquote::before {
    content: open-quote;
    font-size: 1.5em;
    color: blue;
}

blockquote::after {
    content: close-quote;
    font-size: 1.5em;
    color: blue;
}

blockquote {
    quotes: "“" "”" "‘" "’";
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<blockquote>هذا نص مقتبس.</blockquote>

النتيجة:

“هذا نص مقتبس.”

إزالة علامات الاقتباس:

q {
    quotes: none;
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<q>هذا نص بدون علامات اقتباس.</q>

النتيجة:

هذا نص بدون علامات اقتباس.

استخدامات متقدمة:

علامات اقتباس متعددة المستويات:

q {
    quotes: "«" "»" "‹" "›" "„" "“";
}

في هذا المثال، عند تطبيق هذه الأنماط على العنصر التالي:

<q>هذا اقتباس <q>متداخل <q>أكثر</q></q>.</q>

النتيجة:

«هذا اقتباس ‹متداخل „أكثر“›.»

استخدام علامات اقتباس مختلفة للغات:

:lang(en) q {
    quotes: '"' '"' "'" "'";
}

:lang(ar) q {
    quotes: "«" "»" "‹" "›";
}

في هذا المثال، عند تطبيق هذه الأنماط على العناصر التالية:

<q lang="en">This is an English quote.</q>
<q lang="ar">هذا اقتباس بالعربية.</q>

النتيجة:

"This is an English quote."

«هذا اقتباس بالعربية.»

ملاحظات مهمة:

• الدعم في المتصفحات: الخاصية quotes مدعومة في جميع المتصفحات الحديثة.
• التأثير على التخطيط: إضافة علامات اقتباس باستخدام quotes لا يؤثر على تخطيط الصفحة بشكل كبير.
• الاستخدام مع العناصر الزائفة: تُستخدم quotes مع content في العناصر الزائفة ::before و ::after.
• علامات الاقتباس الافتراضية: إذا لم يتم تحديد quotes، ستستخدم المتصفحات العلامات الافتراضية للغة المستخدمة.

الخلاصــــة

الخاصية quotes في CSS هي أداة مفيدة لتخصيص علامات الاقتباس المستخدمة في النصوص المقتبسة. يمكن استخدامها مع العناصر مثل <q> أو مع العناصر الزائفة ::before و ::after لإضافة علامات اقتباس مخصصة أو متعددة المستويات. تُعد هذه الخاصية مفيدة لتحسين تجربة المستخدم وتخصيص التصميم وفقًا للغة أو النمط المطلوب.

كيف كان المقال؟