الفرق بين المراجعتين ل"CSS/:lang"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
 
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 45: سطر 45:
 
*مواصفة [https://drafts.csswg.org/selectors-3/#lang-pseudo Selectors Level 3].
 
*مواصفة [https://drafts.csswg.org/selectors-3/#lang-pseudo Selectors Level 3].
 
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#lang ‎CSS Level 2 (Revision 1)]‎.
 
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#lang ‎CSS Level 2 (Revision 1)]‎.
[[تصنيف:CSS]]
+
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors]]
+
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]
[[تصنيف:CSS pseudo-class]]
+
[[تصنيف:CSS pseudo-class|{{SUBPAGENAME}}]]

مراجعة 15:35، 28 يناير 2018

الصنف الزائف ‎:lang()‎ في CSS (أي pseudo-class) يطابق العناصر اعتمادًا على لغة تلك العناصر.

هذا المُحدِّد يُحدِّد أيّة عناصر <p> مكتوبة باللغة الإنكليزية:

p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

لاحظ أنَّ اللغة في مستندات HTML تُحدَّد عبر الخاصية lang، والعنصر <meta>، وقد تؤخذ معلومات من البروتوكول (مثل ترويسات HTTP). الشكل العام لهذا المحدد:

:lang( <language-code> )

حيث <language-code> هي سلسلة نصية <string> تُمثِّل اللغة التي تريد تحديد العناصر المكتوبة فيها، والقيم المسموحة مُعرَّفة في مواصفة BCP 47.

أمثلة

استخدمنا الصنف الزائف ‎:lang()‎ في المثال الآتي لمُطابقة العنصر الأب للاقتباسات <q> باستخدام مُحدِّد الأبناء:

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

شيفرة CSS:

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 1.0 1.0 8.0 8.0 3.1

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