دليل لأدوات تطوير CSS الجديدة والتجريبية في Firefox

على مدى السنوات القليلة الماضية ، عمل فريقنا في Firefox على أدوات CSS جديدة تعالج كل من التقنيات المتطورة والإحباطات القديمة. نحن فريق Layout Tools ، وهو مجموعة فرعية من Firefox Developer Tools ، وسعينا هو تحسين سير عمل تصميم الويب الحديث.

شهد الويب تطورًا مذهلاً في العقد الماضي: ميزات HTML / CSS الجديدة ، وتحسينات المتصفح ، وتقنيات التصميم. فريقنا مكرس لبناء الأدوات التي تتوافق مع هذا الابتكار حتى يتمكن المصممون والمطورون من تسخير المزيد من الكفاءة والإبداع الممكن الآن.

في هذا الدليل ، سنشارك نظرة عامة على أدواتنا السبع الجديدة ، مع قصص من عملية التصميم وخطوات عملية لتجربة كل أداة.

1. مفتش الشبكة

بدأ كل شيء منذ ثلاث سنوات عندما عمل Jen Simmons ، خبير تخطيط CSS وداعية التطوير ، مع أعضاء Firefox DevTools لبناء أداة من شأنها أن تساعد المستخدمين في فحص تخطيطات CSS Grid.

باعتبارها واحدة من أقوى الميزات الجديدة للويب الحديث ، اكتسبت CSS Grid اعتمادًا لائقًا للمتصفح بسرعة ، لكنها لا تزال تتمتع بتبني منخفض لموقع الويب. هناك منحنى تعليمي حاد ، وما زلت بحاجة إلى احتياطات لبعض المتصفحات. وبالتالي ، كان جزءًا من هدفنا هو المساعدة في نشر Grid من خلال منح المطورين طريقة عملية أكثر لتعلمها.

جوهر الأداة هو مخطط الشبكة ، المتراكب على الصفحة ، مما يساعد المطورين على تصور كيفية قيام الشبكة بتعيين عناصرهم ، وكيف يتغير التخطيط عندما يقومون بتعديل أنماطهم. أضفنا تسميات مرقمة لتحديد كل خط شبكة ، والقدرة على عرض ما يصل إلى ثلاث شبكات في وقت واحد ، وتخصيص الألوان للتراكبات. في الآونة الأخيرة ، أضفنا أيضًا دعمًا للشبكة الفرعية ، وهي مواصفات CSS جديدة تمامًا مطبقة في Firefox ونأمل في المزيد من المتصفحات قريبًا.

كان Grid Inspector مصدر إلهام لجميع الأدوات التي تلت ذلك. لقد كان حتى مصدر إلهام لفريق جديد: أدوات التخطيط! تم تشكيلنا في أواخر عام 2017 ، وانتشرنا عبر أربع مناطق زمنية ونتعاون مع العديد من الآخرين في Mozilla ، مثل مطوري محرك العرض والأشخاص الجيدين في MDN.

جرب مفتش الشبكة

1. في Firefox ، قم بزيارة موقع مثال الشبكة الخاص بنا.
2. افتح المفتش باستخدام Cmd + Shift + C.
3. قم بتشغيل تراكب الشبكة بإحدى الطرق الثلاث:
• لوحة التخطيط :
  في قسم الشبكة ، حدد خانة الاختيار الموجودة بجوار .content.grid-content ؛
• عرض العلامات :
  تبديل شارة "الشبكة" بجوار <div class="content grid-content"> ؛
• عرض القواعد :
  انقر على زر بجانب display:grid; داخل #page-intro .grid-content ؛
4. تجربة مع مفتش الشبكة:
• تغيير لون التراكب الأرجواني إلى اللون الأحمر ؛
• تبديل "أرقام الأسطر" أو "تمديد الأسطر إلى ما لا نهاية" ؛
• قم بتشغيل المزيد من تراكبات الشبكة ؛
• شاهد ما يحدث عند تعطيل grid-gap: 15px في القواعد.

منذ Grid ، سعينا إلى توسيع نطاق إمكانيات ما يمكن أن تكون عليه أداة CSS للمتصفح.

"

2. محرر مسار الشكل

كان المشروع التالي الذي عملنا عليه هو محرر مسار الشكل: أول أداة تحرير بصري.

تتيح لك أشكال CSS تحديد أشكال يتدفق النص حولها: دائرة أو مثلث أو مضلع متعدد الجوانب. يمكن استخدامه مع خاصية clip-path التي تسمح لك بقص العناصر لأي من تلك الأشكال نفسها. تفتح هاتان التقنيتان معًا إمكانية بعض التخطيطات الفريدة المستوحاة من التصميم الجرافيكي.

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

كان هذا النوع من الميزات - التحرير المرئي - جديدًا بالنسبة لنا ولأدوات المتصفح بشكل عام. إنه مثال على كيف يمكننا تجاوز الفحص والتصحيح إلى عالم التصميم.

جرب محرر مسار الشكل

1. في Firefox ، قم بزيارة هذه الصفحة على موقع ويب An Event Apart.
2. افتح المفتش باستخدام Cmd + Shift + C وحدد أول صورة دائرية.
3. في القواعد ، انقر فوق بجانب خاصية shape-outside .
4. في الصفحة ، انقر فوق نقاط الشكل وشاهد ما يحدث عند السحب لجعل الشكل ضخمًا أو صغيرًا. قم بتغييره إلى الحجم الذي يبدو جيدًا بالنسبة لك.

يعد التحرير المرئي مثالًا على كيف يمكننا تجاوز الفحص والتصحيح إلى عالم التصميم.

"

3. محرر الخطوط

لسنوات ، كان لدينا لوحة Fonts في Firefox تعرض قائمة إعلامية بجميع الخطوط المستخدمة في موقع الويب. لمواصلة موضوع التصميم في المتصفح ، قررنا تحويله إلى محرر خط لضبط خصائص الخط.

كانت القوة الدافعة وراء هذا المشروع هي هدفنا لدعم الخطوط المتغيرة في نفس الوقت الذي كان فيه فريق محرك عرض Firefox يضيف دعمًا لها. تمنح الخطوط المتغيرة مصممي الخطوط طريقة لتقديم تنوعات دقيقة على طول المحاور ، مثل الوزن ، داخل ملف خط واحد. كما أنه يدعم محاور مخصصة ، والتي تمنح كلاً من منشئي الخطوط ومصممي الويب قدرًا مذهلاً من المرونة. تكتشف أداتنا تلقائيًا هذه المحاور المخصصة وتمنحك طريقة لتعديلها وتصورها. قد يتطلب ذلك مواقع ويب متخصصة مثل Axis-Praxis.

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

جرب محرر الخطوط

1. في Firefox ، قم بزيارة موقع العرض التوضيحي للخطوط المتغيرة.
2. افتح المفتش باستخدام Cmd + Shift + C وحدد كلمة "متغير" في العنوان (محدد العنصر هو .title__variable-web__variable ).
3. في الجزء الثالث من المفتش ، انتقل إلى لوحة الخطوط:
• مرر مؤشر الماوس فوق اسم الخط Output Sans Regular لمعرفة ما يتم تمييزه ؛
• جرب الوزن والمنزلقات المائلة ؛
• ألق نظرة على تنوعات الخطوط المحددة مسبقًا في القائمة المنسدلة المثيلات .

4. مفتش Flexbox

يمكن لأدواتنا Grid و Shapes و Variable Fonts معًا تشغيل بعض التصميمات الرسومية المتقدمة جدًا على الويب ، لكنها لا تزال متطورة إلى حد ما بناءً على دعم المتصفح. (إنها موجودة تقريبًا ، لكنها لا تزال بحاجة إلى احتياطات.) لم نرغب في العمل على الميزات الجديدة فقط - لقد انجذبنا إلى المشكلات التي يواجهها معظم مطوري الويب بشكل يومي.

لذلك بدأنا العمل في Flexbox Inspector. من حيث التصميم ، كان هذا أكثر مشاريعنا طموحًا ، وقد أدى إلى ظهور بعض استراتيجيات بحث المستخدم الجديدة لفريقنا.

مثل Grid ، يحتوي CSS Flexbox على منحنى تعليمي حاد إلى حد ما عند البدء. يستغرق الأمر وقتًا لفهمه حقًا ، ويلجأ الكثير منا إلى التجربة والخطأ لتحقيق التخطيطات التي نريدها. في بداية المشروع ، لم يكن فريقنا متأكدًا مما إذا كنا نفهم Flexbox بأنفسنا ، ولم نكن نعرف ما هي التحديات الرئيسية. لذلك قمنا برفع مستوى فهمنا ، وقمنا بإجراء مسح لاكتشاف أكثر ما يحتاجه الناس عندما يتعلق الأمر بـ Flexbox.

كان للنتائج تأثير كبير على خططنا ، مما جعل حالة التصورات المعقدة مثل النمو / التقلص و min / max. واصلنا العمل مع المجتمع في جميع أنحاء المشروع من خلال دمج الملاحظات في تطوير النماذج الأولية المرئية والبنيات الليلية.

تشتمل الأداة على جزأين رئيسيين: أداة تمييز تعمل مثل Grid Inspector ، وأداة Flexbox مفصلة داخل المفتش. جوهر الأداة هو مخطط عنصر مرن مع معلومات التحجيم.

بمساعدة مهندسي تخطيط Gecko ، تمكنا من إظهار قرارات الحجم خطوة بخطوة لمحرك العرض لمنح المستخدمين صورة كاملة عن سبب وكيفية انتهاء عنصر مرن بحجم معين.

ملاحظة : تعرف على القصة الكاملة لعملية التصميم لدينا في "Designing the Flexbox Inspector".

جرب مفتش Flexbox

1. في Firefox ، قم بزيارة Mozilla Bugzilla.
2. افتح المفتش باستخدام Cmd + Shift + C وحدد عنصر div.inner (داخل شريط الرأس فقط).
3. قم بتشغيل Flexbox Overlay بإحدى الطرق الثلاث:
• لوحة التخطيط :
  في قسم Flex Container ، قم بتشغيل المفتاح ؛
• عرض العلامات :
  بدّل شارة "المرن" بجوار <div class="inner"> ؛
• عرض القواعد :
  انقر على زر بجانب display:flex .
4. استخدم لوحة Flex Container للانتقال إلى عنصر Flex يسمى nav#header-nav .
• لاحظ الأحجام الموضحة في الرسم التخطيطي ومخطط الحجم ؛
• قم بزيادة عرض المستعرض وتقليله وشاهد كيف يتغير الرسم التخطيطي.

استراحة: مضاعفة البحث

بصفتنا فريقًا صغيرًا بدون دعم بحثي رسمي للمستخدم ، فقد لجأنا غالبًا إلى التصميم تلو الآخر: بناء آرائنا على تجاربنا الخاصة في استخدام الأدوات. ولكن بعد نجاحنا في استطلاع Flexbox ، عرفنا أننا نريد أن نكون أفضل في جمع البيانات لإرشادنا. أجرينا استبيانًا جديدًا للمساعدة في إبلاغ خطواتنا التالية.

لقد جمعنا قائمة بأكبر 20 تحديًا يواجهها مطورو الويب وطلبنا من مجتمعنا تصنيفها باستخدام تنسيق max-diff.

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

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

5. لوحة التغييرات

تعد صعوبة نقل عمل المرء من أداة مطور المتصفح إلى المحرر إحدى تلك المشكلات القديمة التي اعتدنا عليها جميعًا للتو. كنا متحمسين لتقديم حل بسيط وسهل الاستخدام على الفور.

خرجت Edge و Chrome DevTools مع متغيرات هذه الأداة أولاً. ينصب تركيزنا على مساعدة نطاق واسع من مهام سير عمل CSS: قم بتشغيل DevTools ، وقم بتغيير أي أنماط تريدها ، ثم قم بتصدير تغييراتك إما بنسخ المجموعة الكاملة من التغييرات (للتعاون) أو مجرد قاعدة واحدة تم تغييرها (للصقها في التعليمات البرمجية).

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

جرب لوحة التغييرات

1. في Firefox ، انتقل إلى أي موقع ويب.
2. افتح المفتش باستخدام Cmd + Shift + C وحدد عنصرًا.
3. قم بإجراء بعض التغييرات على CSS:
• تعديل الأنماط في جزء القواعد ؛
• اضبط الخطوط في جزء الخطوط.
4. في الجزء الأيسر من المفتش ، انتقل إلى علامة التبويب التغييرات وقم بما يلي:
• انقر فوق Copy All Changes ، ثم الصقها في محرر نصي لعرض الإخراج ؛
• قم بالتمرير فوق اسم المحدد وانقر فوق نسخ القاعدة ، ثم الصقها لعرض الإخراج.

6. غير نشط CSS

تعمل ميزة CSS غير النشطة الخاصة بنا على حل إحدى أهم المشكلات من استطلاع تصحيح أخطاء التخطيط الخاص بنا حول أخطاء معينة في CSS:

"لماذا لا تفعل خاصية CSS هذه أي شيء؟"

من ناحية التصميم ، هذه الميزة بسيطة للغاية - فهي تقوم بتدوير CSS بحيث لا يؤثر على الصفحة ، وتعرض تلميحًا لشرح سبب عدم تأثير الخاصية. لكننا نعلم أن هذا يمكن أن يعزز الكفاءة ويقلل من الإحباط. لقد دعمنا البحث الذي أجرته سارة ليم وزملائها الذين صمموا أداة مماثلة. وجدوا في دراساتهم أن المطورين المبتدئين كانوا أسرع بنسبة 50٪ في البناء باستخدام CSS عندما استخدموا أداة سمحت لهم بتجاهل التعليمات البرمجية غير ذات الصلة.

بطريقة ما ، هذا هو نوعنا المفضل من الميزات: فاكهة UX معلقة منخفضة بالكاد تسجل كميزة ، ولكنها تحسن سير العمل بالكامل دون الحاجة إلى اكتشافها أو تعلمها.

يتم إطلاق Inactive CSS في Firefox 70 ولكن يمكن استخدامها الآن في الإصدارات التجريبية من Firefox ، بما في ذلك Developer Edition و Beta و Nightly.

جرب Inactive CSS

1. تنزيل Firefox Developer Edition ؛
2. افتح Firefox وانتقل إلى wikipedia.org ؛
3. افتح المفتش باستخدام Cmd + Shift + C وحدد منطقة المحتوى المركزية ، المسماة central-featured ؛
4. لاحظ إعلان vertical-align باللون الرمادي ؛
5. مرر مؤشر الماوس فوق رمز المعلومات ، وانقر فوق "معرفة المزيد" إذا كنت مهتمًا.

7. لوحة الوصول

على طول الطريق ، كان لدينا ميزات إمكانية الوصول التي طورها فريق منفصل يتكون في الغالب من شخص واحد - يورا زينيفيتش ، هذا العام مع متدربته مليحة إسلام.

لقد قاموا معًا بتحويل لوحة إمكانية الوصول الجديدة في Firefox إلى أداة فحص وتدقيق قوية. إلى جانب عرض شجرة إمكانية الوصول والخصائص ، يمكنك الآن تشغيل أنواع مختلفة من عمليات التحقق على الصفحة. تتضمن عمليات التحقق حتى الآن تباين الألوان والتسميات النصية وتصميم تركيز لوحة المفاتيح.

الآن في Nightly ، يمكنك تجربة محاكي عمى الألوان الجديد الذي يستخدم تقنية WebRender القادمة.

جرب لوحة الوصول

1. تنزيل Firefox Developer Edition ؛
2. انتقل إلى meetup.com ؛
3. في أدوات المطور ، انتقل إلى علامة التبويب إمكانية الوصول ، وانقر فوق الزر "تشغيل ميزات إمكانية الوصول" ؛
4. انقر فوق القائمة المنسدلة بجوار "التحقق من المشكلات" وحدد "كل المشكلات" ؛
5. ألقِ نظرة على مختلف مشكلات التباين ولوحة المفاتيح وتسميات النص ، وانقر على روابط "معرفة المزيد" إذا كنت مهتمًا.

القادم

نعمل حاليًا بجد على أداة توافق المتصفح التي تستخدم معلومات من MDN لعرض المشكلات الخاصة بالمتصفح لعنصر محدد. يمكنك المتابعة على GitHub لمعرفة المزيد.

المستقبل

نحن ملتزمون بدعم الويب الحديث ، وهذا يعني التغيير والنمو المستمر.

يتم تنفيذ المواصفات الجديدة من قبل بائعي المستعرضات في كل وقت. تتطور باستمرار الإرشادات وأفضل الممارسات حول التعزيز التدريجي والاستجابة وإمكانية الوصول. يحتاج صانعو الأدوات في الولايات المتحدة إلى الاستمرار في التطور أيضًا.

وماذا عن المشاكل طويلة الأمد والحاضرة دائمًا في إنشاء الويب؟ ما هي واجهات المستخدم اليومية التي تحتاج إلى إعادة التفكير؟ هذه بعض الأسئلة التي تجعلنا مستمرين!

ماذا عن طريقة أفضل للتنقل في شجرة DOM للصفحة؟ لم يتغير هذا الجزء من DevTools بشكل أساسي منذ أيام Firebug.

لقد جربنا ميزات مثل أزرار الخلف والأمام التي من شأنها تسهيل التنقل بين العناصر التي تمت زيارتها مؤخرًا.

هناك تغيير أكثر دراماتيكية نناقشه وهو إضافة عرض DOM مضغوط يستخدم بنية مشابهة لمحركات قوالب HTML. سيكون التركيز على حالة الاستخدام الأكثر شيوعًا - التنقل إلى CSS - بدلاً من عرض / تحرير المصدر.

لقد فكرنا أيضًا في اختيار أفضل للعناصر. نحن نعلم كيف يمكن أن يكون العمل داخل الصفحة أكثر إنتاجية ، مع قفز أقل ذهابًا وإيابًا في DevTools. يمكننا أن نجعل محدد العناصر أكثر قوة واستمرارية. ربما يمكنه تحديد مسافة بيضاء على الصفحة وإخبارك بأسباب هذه المساحة ، أو قد يلقي الضوء على العلاقات بين العناصر المختلفة.

هاتان فقط اثنتان من الأفكار العديدة التي نأمل في استكشافها بشكل أكبر بمساعدة المجتمع.

نحن بحاجة إلى المدخلات الخاصة بك!

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

إليك طريقة سهلة للمساعدة: قم بتنزيل Firefox Developer Edition وحاول استخدامه لبعض أعمالك الأسبوع المقبل.

بعد ذلك ، أخبرنا برأيك من خلال المشاركة في الاستبيان المكون من صفحة واحدة.

نحن مهتمون دائمًا بسماع الأفكار من أجل التحسينات ، لا سيما أي فاكهة منخفضة السقوط يمكن أن تنقذنا جميعًا من بعض الإحباط المنتظم. نقوم بعملنا في العراء ، حتى تتمكن من المتابعة والتوافق. سنبقيك على اطلاع دائم علىFirefoxDevTools.

شكراً لباتريك بروسيت على مساهماته في هذا المقال.