تغييرات على اكتساب الأنماط لتنسيق اختيار خدمة مقارنة الأسعار (CSS)

Stephen Chenney

تاريخ النشر: 8 تشرين الأول (أكتوبر) 2024

اعتبارًا من الإصدار 131 من Chrome، سيتم تغيير ميزة اكتساب تمييز CSS للصفوف الوصفية ::selection و ::target-text. يهدف ذلك إلى إنشاء نموذج أكثر سهولة لميزة الاستبدال والتنسيق مع الفئات الزائفة ::highlight و::spelling-error و ::grammar-error التي تمت إضافتها مؤخرًا. توضّح هذه المشاركة هذا التغيير الذي من المفترض ألا يؤدي إلى تأثير ملحوظ في معظم المواقع الإلكترونية.

تنسيق الاختيار

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

تتيح لغة CSS تصميم الاختيار باستخدام العنصر الصوري ::selection ، وهو أحد مجموعة من العناصر الصورية المعروفة باسم العناصر الصورية للتمييز. تتحكّم هذه العناصر الزائفة في كيفية ظهور النص ضمن إجراءات مختلفة مستندة إلى المستخدِم أو المتصفّح أو النص البرمجي. بالإضافة إلى الاختيار، يمكنك تنسيق أخطاء نحوية (::spelling-error) وأخطاء إملائية (::grammar-error) واستهدافات النصوص المضمّنة في عناوين URL (::target-text) والعناصر المميّزة التي تم إنشاؤها باستخدام نص برمجي (::highlight).

كما هو الحال مع أي مجموعة من خصائص CSS، يُعدّ سلوك اكتساب السمات أحد العوامل المهمة عند تصميم موقع إلكتروني. بشكل عام، يتوقع مطوّرو البرامج أن يتم اكتساب سمات CSS من خلال شجرة عناصر DOM (على سبيل المثال، font) أو غير مُكتسَبة على الإطلاق (مثل background).

تغييرات في سلوك الاختيار في الإصدار 131 من Chrome

راجِع هذا المقتطف من المستند:

p {
  color: red;
}

.blue::selection {
  color: blue;
}

<p class="blue">Some <em>emphasized</em> text that one would expect to be blue</p>

تعمل تعريفات نمط الجزء على تعديل لون النص المحدد، بقاعدة واحدة تتطابق مع جميع العناصر وقاعدة واحدة تطابق تلك للفئة "blue". عند اختيار هذا الخيار في الإصدار 130 من Chrome أو الإصدارات الأقدم، تكون النتيجة على النحو التالي:

عند اختيار هذا الخيار في الإصدار 131 من Chrome، تتغير النتيجة إلى ما يلي:

ما الذي تغيَّر؟ تم تنفيذ سلوك الاكتساب لخصائص الاختيار سابقًا من خلال إنشاء توارث العناصر، حيث يستخدم الاختيار الخصائص من ::selection التي تطابق العنصر الذي يتم اختياره. يستخدم الإصدار 130 من Chrome والإصدارات الأقدم هذا النموذج، حيث لا يتطابق النص المميّز مع ::selection لأنّ .blue::selection لا يتطابق إلا مع العناصر التي تحمل الفئة "blue"، والتي لا يملكها العنصر <em>.

يتيح الإصدار 131 من Chrome سلوكًا جديدًا يكتسب فيه العناصر سلوك الاختيار من العنصر الرئيسي. في المثال السابق، لا يتضمّن عنصر <em> ::selection مطابقًا له، لذا يكتسب ألوان اختيار عنصر <p>. يُشار إلى ذلك باسم تداخل تمييز CSS، ويمكنك تجربته في إصدارات Chrome الأقدم من خلال تفعيل ميزات منصة الويب التجريبية في Chrome chrome://flags.

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

لا تزال خصائص CSS المخصصة للاختيار

تحاكي العديد من المواقع الإلكترونية ميزة اكتساب تمييز CSS من خلال استخدام ملف CSS مخصّص للخصائص. يتم اكتساب السمات المخصّصة من خلال شجرة العناصر، ما يؤدي إلى نتيجة "اكتساب السمات من العنصر الرئيسي" باستخدام مقتطف رمز مثل هذا:

:root {
   --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text that is blue</p>

هذه هي النتيجة عند اختيارها في كل من Chrome 130 وChrome 131:

هنا، يكتسب كل عنصر قيمة لسمة --selection-color من خلال شجرة العناصر، ويتم استخدام هذا اللون عند اختيار النص. تظهر العناصر التي تحمل الفئة .blue ونسلها باللون الأزرق عند اختيارها، وتظهر العناصر الأخرى باللون الأخضر الفاتح. تستخدم العديد من المواقع هذه التقنية وهي الطريقة الموصى بها على Stack Overflow.

للحفاظ على التوافق، يحدّد نموذج اكتساب تمييز CSS أنّ ::selection (والعناصر الأخرى التي تميّز CSS) يكتسب قيم الخصائص المخصّصة من العناصر الأصلية (العنصر الذي يتم تطبيقها عليه). من المفترض ألا تتأثر المواقع الإلكترونية التي تستخدم هذه الطريقة بالتغييرات في Chrome 131.

يتم تجاهل السمات المخصّصة المحدّدة في العنصر النائب ::selection نفسه لتجنّب السلوكيات المتنافسة للاكتساب. يجب تحديد السمات في العنصر نفسه، ثم الإشارة إليها في العنصر الزائف.

تعمل أدوات الاختيار العامة لـ ::selection على إيقاف اكتساب التمييز

قد تكون المواقع الإلكترونية التي لا تستخدم خصائص CSS المخصّصة قد استخدمت محدّدًا شاملاً لتعيين لون النص المحدّد. مثل ملف CSS التالي، على سبيل المثال:

::selection /* = *::selection (universal) */ {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

في ما يلي النتيجة عند تحديد هذا الخيار في كلّ من الإصدار 130 من Chrome (والإصدارات الأقدم) والإصدار 131 (والإصدارات الأحدث):

لا يؤدي اكتساب تمييز CSS إلى اكتساب النص المميّز الثاني للون الأزرق من العنصر الرئيسي لأنّ المحدّد الشامل يتطابق مع العنصر <em> ويطبّق لون التمييز الشامل، وهو الأخضر الفاتح.

للاستفادة من مزايا اكتساب تمييز CSS، يمكنك تغيير أداة الاختيار العامة لمطابقة الجذر فقط، والذي سيتم اكتسابه بعد ذلك من خلال العناصر التابعة له:

:root::selection {
  color: lightgreen;
}

.blue::selection {
  color: blue;
}

<p>Some <em>emphasized</em> text</p>
<p class="blue">Some <em>emphasized</em> text</p>

تظهر النتيجة في الإصدار 131 من Chrome على النحو التالي:

إذا كان موقعك الإلكتروني يعدّل ألوان الاختيار ولكنّه لا يستخدم السمات المخصّصة، من المرجّح أن يكون لديك أداة اختيار شاملة للعنصر النائب ::selection. ويسرنا إخبارك بأنّ هذا التغيير في Chrome لن يتأثّر على موقعك الإلكتروني، ولكنك لن تستفيد من أي مزايا سهلة في الحصول على الميزات المرتبطة بإبراز التغييرات في متصفِّح Chrome.

سيتم أيضًا تغيير تنسيق ::target-text.

تنطبق جميع السلوكيات والتغييرات الموضّحة هنا على العنصر النائب ::target-text كما تنطبق على ::selection. إنّ حالات استخدام أكثر من أسلوب واحد لتنسيق النص المستهدَف على موقع إلكتروني واحد محدودة، والميزة جديدة تمامًا، لذلك من غير المرجّح أن يتغيّر سلوك ::target-text في موقعك الإلكتروني.

ما هي أسباب هذا التغيير؟

عندما كانت العناصر الصورية الأخرى للتمييز قيد التطوير، قرّرت مجموعة CSS العاملة تنفيذ اكتساب السمات باستخدام نموذج اكتساب سمات التمييز. كانت هذه هي الطريقة الواردة في مواصفات العنصر النائب ::selection ، ولكن لم تنفِّذها المتصفّحات. إنّ العناصر الزائفة التي لا تُستخدَم للاختيار تستخدم ميزة اكتساب التمييز، حيث يتم اكتساب العنصر الزائف كما لو كان خاصية. وهذا يعني أن العناصر تكتسب العناصر الزائفة المميزة من العنصر الرئيسي في الوثيقة.

سعيًا إلى الحفاظ على الاتساق بين جميع العناصر، كرّرت مجموعة العمل في CSS دعمها لتسليط الضوء على التوريث في ::selection، وتعمل المتصفحات على إطلاق السلوك الجديد مع محاولة عدم تعطيل المواقع الإلكترونية الحالية.

جرّبه الآن

يوضّح الرابط التالي على CodePen التغييرات. جرِّبه في الإصدار 131 من Chrome.