Webtagr - ملخصات الأخبار التكنولوجية

دالة CSS العشوائية (random()): وداعًا لجافا سكريبت من أجل الرسوم المتحركة العشوائية

2025-08-24

ستحصل CSS على دالة `random()`، وهي تغيير جذري في تصميم الويب! أنشئ أرقامًا عشوائية مباشرةً في CSS بدون استخدام JavaScript لأشياء مثل تأخيرات الرسوم المتحركة، والتصاميم العشوائية، والألوان العشوائية. تأخذ الدالة حجج min و max و step، وتوفر طرقًا مختلفة لمشاركة العشوائية - باستخدام خصائص مخصصة أو كلمة المفتاح `element-shared` للمشاركة على مستوى العنصر أو على مستوى الصفحة. تستخدم المقالة أمثلة مثل إنشاء مجال نجمي، ومستطيلات موضوعة بشكل عشوائي، وركام صور لعرض قوة `random()`، وتدعو المطورين لتقديم تعليقاتهم لمساعدة في تشكيل مستقبل هذه الميزة.

اقرأ المزيد

(webkit.org)

التطوير دالة عشوائية

وضع المرساة CSS: قوائم متجاوبة بدون JavaScript

2025-08-13

تستكشف هذه المقالة ميزة وضع المرساة الجديدة في CSS، والتي تتيح وضع العناصر بناءً على مواقع عناصر أخرى. أنشئ قوائم ونصائح أدوات متجاوبة باستخدام الحد الأدنى من CSS، مع إزالة الحاجة إلى JavaScript. يشرح البرنامج التعليمي بالتفصيل وظائف `position-anchor` و `position-area` و `position-try` و `anchor()`، مع مقارنة استخدام الخصائص المنطقية والفيزيائية. يُظهر مثال القائمة المتجاوبة القدرة على التكيف مع أحجام الشاشة المختلفة.

اقرأ المزيد

(webkit.org)

التطوير وضع المرساة

CSS contrast-color(): أتمتة تباين الألوان من أجل إمكانية الوصول

2025-05-17

تبسط وظيفة CSS الجديدة `contrast-color()` خيارات الألوان عن طريق اختيار نص أسود أو أبيض تلقائيًا للتمايز مع لون الخلفية المعطى. تتعمق هذه المقالة في استخدامها، وتقارن خوارزميات WCAG 2.1 و APCA لحساب التباين، وتستكشف كيفية استخدام استعلامات الوسائط `prefers-contrast` لتحقيق إمكانية وصول أفضل. على الرغم من أنها محدودة حاليًا بالأسود والأبيض، إلا أن الإصدارات المستقبلية قد تقدم خيارات قابلة للتخصيص أكثر. تعمل الوظيفة على تبسيط التطوير مع تحسين إمكانية الوصول، خاصة عند إدارة حالات الألوان المتعددة.

اقرأ المزيد

(webkit.org)

التطوير تباين الألوان

text-wrap: pretty في سفاري: عصر جديد في طباعة الويب

2025-04-08

يقدم سفاري تكنولوجي بريفو 216 خاصية `text-wrap: pretty`، مما يحدث ثورة في تصميم النصوص على الويب. باستخدام خوارزميات تعتمد على الفقرات، فهي تعالج مشاكل الطباعة طويلة الأمد مثل السطور الأخيرة القصيرة جدًا، والحواف غير المتساوية، ونهر الكلمات المشتت للانتباه. على عكس الخوارزميات التقليدية سطرًا بسطر، تقيم خاصية `pretty` الفقرة بأكملها، مما يُحسّن التصميم من أجل قابلية قراءة أفضل وجمالية أفضل. على الرغم من أن كروم وغيره من المتصفحات تدعم خاصية `pretty`، إلا أن تنفيذها في سفاري أكثر شمولية، حيث يُعدّل الفقرة بأكملها بدلاً من السطور الأخيرة فقط. تركّز خاصية `text-wrap: balance` على جعل جميع الأسطر بنفس الطول تقريبًا، وهي مثالية للعناوين والنصوص الأقصر. يجب على المطورين اختيار القيمة المناسبة لـ`text-wrap` وفقًا لاحتياجاتهم وأن يكونوا على دراية بتأثيرات الأداء.

اقرأ المزيد

(webkit.org)

التطوير طباعة الويب

دفع الويب التصريحي من WebKit: أكثر كفاءة، وخصوصية أكبر

2025-04-03

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

اقرأ المزيد

(webkit.org)

التطوير دفع الويب

CSS Item Flow: توحيد تخطيطات Flexbox و Grid و Masonry

2025-04-02

تُعدّ CSS Grid و Flexbox أدوات قوية لتصميم التخطيط، لكنها لا تكفي للتعامل مع التخطيطات المعقدة مثل تخطيط Masonry. يقترح اقتراح جديد، يُسمى "Item Flow"، حلًّا لهذه المشكلة من خلال توحيد خصائص `flex-flow` في Flexbox و `grid-auto-flow` في Grid. يُدخِل هذا الاقتراح خصائص جديدة مثل `item-direction` و `item-wrap` و `item-pack` و `item-slack`، مما يسمح بمزيد من المرونة والتحكم في تصميم التخطيط. سيُتيح هذا لـ Flexbox خاصية التعبئة الكثيفة، وسيُتيح لـ Grid إمكانية تعطيل الالتفاف، بالإضافة إلى توفير حلّ أنيق لتخطيطات Masonry. النتيجة هي نظام تخطيط CSS أكثر توحيدًا وسهولة في الاستخدام.

اقرأ المزيد

(webkit.org)

التطوير التخطيط