الميزات الجديدة في الإصدار 131 من Chrome

Mariko Kosaka
X

في ما يلي ما تحتاج إلى معرفته:

اسمي "ماريك كوساك". لنلقِ نظرة على الميزات الجديدة للمطوّرين في الإصدار 131 من Chrome.

اكتساب تمييز CSS

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

فكِّر في مقتطف الرمز البرمجي هذا الذي يتضمّن نصًا مميّزًا.

p {
  color: deeppink;
}

.blue::selection {
  color: blue;
}

<p class="blue">
    This is
    <em>emphasized</em>
    text.
</p>

في الإصدارات السابقة من Chrome، عند اختيار نص مميّز، لم يتغيّر لون النص إلى الأزرق على الرغم من ضبط الفئة الزائفة ::selection على عنصر الفقرة الرئيسي.

النص المميّز باللون الوردي

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

بعد تغيير ميزة اكتساب تمييز النص، عند اختيار النص نفسه في الإصدار 131 من Chrome، سيتغيّر لون النص إلى الأزرق.

النص المميّز باللون الأزرق

هناك بعض التغييرات الأخرى ذات الصلة بهذا الموضوع، لذا احرص على الاطّلاع على تغييرات اكتساب الخصائص لتنسيق اختيار CSS التي كتبها "ستيفن تشيني" من Igalia، الذي عمل على هذه الميزة.

تحسينات على التصميم في <details> و<summary>

يتوفّر لك الآن المزيد من الخيارات لتصميم بنية العنصرَين <details> و<summary> من أجل إنشاء تطبيقات مصغّرة لبيان الإفصاح أو التطبيق المتعدّد الأقسام.

تتيح التغييرات التي تم إدخالها في هذا الإصدار استخدام السمة display وإضافة عنصر زائف ::details-content لتصميم الجزء الذي يتم توسيعه وتصغيره.

في السابق، كان من المستحيل تغيير نوع عرض عنصر details. تمّ الآن تخفيف هذا التقييد، ما يتيح لك استخدام تنسيقات مثل الشبكة أو التنسيقات المرنة.

في هذا المثال الحصري للوحة المفاتيح الموسيقية، المكوّنة من عدة عناصر details، عند توسيع أحد عناصر details، يتم وضع محتواه بجانب summary.

تطبيق مصغّر على شكل أكورديون بتنسيق Flex

ويتم ذلك باستخدام تنسيق مرن في العنصر details. يمكنك أيضًا تجربة المزيد من أنماط التنسيقات مع قيم عرض أخرى، مثل grid.

يمكنك الاطّلاع على مقالة Bramus مزيد من الخيارات لتنسيق المحتوى <details> للحصول على شرح أكثر تفصيلاً.

@page مربّعات الهامش

تمت إضافة ميزة دعم مربّعات هامش الصفحة عند طباعة مستند ويب أو تصديره كملف PDF.

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

يتم تحديد هامش الصفحة باستخدام قاعدة @page في CSS.

@page :right {
  @bottom-left {
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

يتم تحديد مظهر مربّع الهامش ومحتوياته باستخدام سمات CSS داخل قواعد at-rules التي تمثّل مربّعات الهامش الستة عشر باستخدام المحتوى الذي تم إنشاؤه.

بالنسبة إلى ترقيم الصفحات، يمكن أيضًا استخدام العدادات مع page لرقم الصفحة الحالي وpages لعدد الصفحات الإجمالي.

اطّلِع على مقالة "راشيل" إضافة محتوى إلى هوامش صفحات الويب عند الطباعة باستخدام CSS للحصول على شرح أكثر تفصيلاً.

وغير ذلك

وهناك بالطبع الكثير من الميزات الأخرى.

  • إتاحة استخدام موارد SVG الخارجية لعناصر "clip-path" و"fill" و"stroke" و"marker"
  • يتم تفعيل WebHID داخل سياقات عمال مخصّصة.
  • يمكنك التحكّم في سلوك الرموز التعبيرية باستخدام خاصية font-variant-emoji في CSS.

مراجع إضافية

لا يشمل ذلك سوى بعض النقاط الرئيسية. يمكنك الاطّلاع على الروابط التالية للاطّلاع على مزيد من التغييرات في الإصدار 131 من Chrome.

اشتراك

للاطّلاع على آخر الأخبار، يمكنك الاشتراك في قناة YouTube الخاصة بمطوّري Chrome، وستتلقّى إشعارًا عبر البريد الإلكتروني عند نشر فيديو جديد.

اسمي "ماريكو كوساك"، وسنكون هنا لإطلاعك على الميزات الجديدة في Chrome فور إصدار الإصدار 132.