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

Stephen Chenney

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

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

تصميم الاختيارات

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

تتيح لغة 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". عند اختيارها في Chrome 130 أو إصدار أقدم، تكون هذه هي النتيجة:

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

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

يعمل الإصدار 131 من Chrome على تفعيل سلوك جديد تكتسب العناصر بموجبه سلوك التحديد من والديهم. في المثال السابق، لا يحتوي العنصر <em> على ::selection يطابق نفسه، لذا فإنّه يكتسب ألوان تحديد العنصر <p>. هذا هو باسم توريث تمييز CSS ويمكنك تجربتها في وقت سابق إصدارات 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>

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

هنا يكتسب كل عنصر قيمة من السمة --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>

هذه هي النتيجة عند اختيارها في كل من Chrome 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، ولكنك وتفوت أي فوائد مريحة من تسليط الضوء على التوريث.

سيتم أيضًا إجراء تغييرات على تصميم "::target-text"

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

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

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

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

جرّبه الآن

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