2021 يمثل تحولًا كبيرًا نحو اعتماد أوسع للخصائص المنطقية CSS! أثارت إصدارات API الحديثة في Chrome نقاشًا ، حيث يوفر التحكم في نسبة العرض إلى الارتفاع في SVG مرونة جديدة ، ويعطي WordPress الأولوية للطباعة التي يمكن الوصول إليها ، ويظل تطوير استعلامات الوسائط المخصصة CSS متوقفة. دعنا نتعمق في التفاصيل.

CSS المنطقية: الافتراضي الناشئ

بعد ست سنوات من تطبيق Mozilla الأولي ، تقترب الخصائص المنطقية لـ CSS من دعم المتصفح الكامل في عام 2021. تدعم Firefox و Chrome وأحدث معاينة Safari الخصائص والقيم الموضحة أدناه. تبسيط CSS المنطقي التصميم مع اختصاصات مثل الهامش في الخط (الجمع بين غادر). /* قبل */ رئيسي { الهامش اليساري: السيارات ؛ يمين الهامش: السيارات ؛ } /* بعد */ رئيسي { الهامش في الخط: السيارات ؛ } يصبح التكيف مع تخطيطات اليمين إلى اليسار (RTL) أسهل بكثير. يتولى مفتاح الفصل البسيط الانتقال ، وهو أمر بالغ الأهمية للمواقع المترجمة إلى لغات RTL مثل اللغة العربية والفارسية والأردية. / * قم بالتبديل إلى RTL عند ترجمته */ . translated-rtl { الاتجاه: RTL ؛ } يوضح موقع David Bushell هذا النهج ، ويستفيد من جوجل ترجمة قارن تخطيطات RTL و LTR بعد الترجمة في Chrome لرؤية الفرق. APIs Fugu المثير للجدل في Chrome

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

يتيح تفاعل تطبيق الويب مع أجهزة الواجهة البشرية غير المألوفة التي تفتقر إلى برامج تشغيل نظام التشغيل (على سبيل المثال ، Nintendo Wii Remote).

واجهة برمجة تطبيقات الويب التسلسلية:

يسهل التواصل بايت بايت مع الأجهزة الطرفية مثل متحكمها والطابعات ثلاثية الأبعاد عبر الاتصالات التسلسلية المحاكاة.

Web NFC API:

يسمح بقراءة/كتابة لاسلكية قصيرة المدى إلى علامات NFC.

• تعبير Apple و Mozilla ، نقلاً عن بصمات الأصابع والأمن وغيرها من المخاوف. تم تفصيل موقف Mozilla على صفحة مواضع المواصفات.
SVG المرونة:
• الحفاظ على perfectRatio = none
افتراضيًا ، SVG Scales مع الحفاظ على نسبة العرض إلى الارتفاع. إعداد
• المحافظات المحفوظة = "لا شيء" يمتد SVG لملء الحاوية الخاصة به ، مما يحتمل أن يشوه الصورة. يمكن أن يكون هذا مفيدًا للعناصر البسيطة المزخرفة على صفحات سريعة الاستجابة ، مثل الحدود أو الخطوط القطرية التي تحتاج إلى ملء مساحة معينة.
WordPress: تقليل مائل للوصول

بينما تعزز الخط المائل التركيز ، فإن الاستخدام الممتد يمثل تحديات إمكانية الوصول ، وخاصة للقراء الذين يعانون من عسر القراءة. يعالج WordPress 5.7 هذا عن طريق إزالة الخط المائل من الأوصاف ونص المساعدة وغيرها من المناطق داخل واجهة المسؤول لتحسين قابلية القراءة. يحل التحديث أيضًا محل خطوط الويب المخصصة بخطوط النظام.

استفسارات الوسائط المخصصة CSS: لا تزال تنتظر التقدم لا يزال

@custom-media

، المقترح قبل ما يقرب من سبع سنوات ، غير متطور. هذه الميزة ستسمح بتحديد استعلامات الوسائط القابلة لإعادة الاستخدام ، وتقليل ازدواجية الكود وتعزيز قابلية القراءة. @custom-media-narrow-window (max-width: 30em) ؛ MEDIA (-Narrow-Window) { / * أنماط النوافذ الضيقة */ }

في حين أن دعم المتصفح غير مؤكد ، فإن المكون الإضافي الرسمي لـ PostCSS يوفر مزايا تنفيذ فورية. يتم أيضًا استكشاف مفهوم متغيرات البيئة المعرفة من قبل المؤلف في استفسارات وسائل الإعلام ، لكنه لا يزال عملًا مستمرًا.

@Media (Max-Width: Env (-indow-window)) { / * أنماط النوافذ الضيقة */ }