الميزات الجديدة في الإصدار 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 التي كتبها "ستيفن تشيني" من إيغاليا، الذي عمل على هذه الميزة.

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

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

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

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

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

تطبيق أكورديون المصغّر بتصميم مرن

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

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

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

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

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

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

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

يتم تحديد مظهر مربّع الهوامش ومحتواه باستخدام خصائص CSS داخل القواعد التي تمثِّل مربّعات الهوامش الـ 16 باستخدام المحتوى الذي تم إنشاؤه.

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

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

وغير ذلك

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

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

مراجع إضافية

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

اشتراك

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

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