5 اتجاهات للواجهة الأمامية للمتابعة في عام 2021

هناك الكثير من مقالات "اتجاهات التصميم التي يجب اتباعها" التي تطفو على الويب. نضع أيضًا دورنا في واحدة في Hot Web Design Trends to Follow in 2021. التركيز على مثل هذه المقالات مفهوم جدًا - التصميم نفسه هو ما يراه كل من العميل والزائر. ومع ذلك ، فإن الكود الذي يقف وراءه غير ذي صلة بمعظم المستخدمين.

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

لذلك ، من أجل إعطاء بعض الاحترام الواجب لجميع مطوري الواجهة الأمامية بالإضافة إلى بعض الأفكار والأفكار للمصممين ، قمنا بتجميع قائمة "اتجاهات الواجهة الأمامية التي يجب اتباعها في عام 2021".

1. خصائص CSS المخصصة

هذا شيء أراده المطورون لسنوات على الرغم من أن خصائص CSS المخصصة (أو المعروفة أيضًا باسم CSS Variables) كانت موجودة منذ فترة حتى الآن. على سبيل المثال ، W3C Module Level 1 من عام 2015. ولكن كما هو الحال مع أي تقنية جديدة ، يستغرق الأمر بعض الوقت للحصول على الجر. ونعتقد أنه في عام 2021 ، سنشهد بعضًا من أكبر معدلات التبني منذ إنشائه.

لماذا هو رائع؟

الخصائص المخصصة هي في الواقع متغيرات في CSS. قد تقول "لكن لدينا متغيرات في Sass ، أليس كذلك؟" نعم فعلنا! ولكن عندما تقوم بترجمة Sass إلى CSS ، فإنك تحصل على CSS جيدًا. ولا توجد متغيرات. لم يعد بإمكانك تغيير قيمة هذا المتغير. $primary: red هو الأحمر فقط.

الخصائص المخصصة مدعومة جيدًا في كل مكان باستثناء Internet Explorer

ومع ذلك ، مع الخصائص المخصصة ، لديك - --primary: red . وبعد ذلك يمكنك إعادة تعريف - --primary إلى الأزرق على سبيل المثال. مباشرة في المتصفح ، لا حاجة إلى تجميع. لمعرفة المزيد عن حيل CSS هذه ، ما هو الفرق بين متغيرات CSS ومتغيرات المعالج المسبق؟

أحد الاختراقات الأنيقة لاستخدامها هو تخصيص السمات. يمكنك تحديد قيم HSL عبر المتغيرات ثم السماح للمستخدمين بتغيير التدرج من خلال شريط التمرير في الواجهة الأمامية. قم بتوصيل قيمة شريط التمرير بمتغير CSS باستخدام JS و BAM بوظيفة "تعيين نظام الألوان".

2. الخطوط المتغيرة

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

يعد Variable Fonts أحد مواقع go-to التي يمكنك استخدامها للتصفح والتجريب. إنه أيضًا بمثابة عرض توضيحي جيد في حال كنت تسمع هذا المصطلح لأول مرة. تتيح لك الخطوط المتغيرة استخدام ملف واحد وتطبيق خصائص مثل "font-weight" أو "font-style" مع التحكم الكامل في مقدار السُمك أو الميل ...

المصدر: مقدمة إلى الخطوط المتغيرة على الويب

لماذا هو رائع؟

حسنًا ، من الواضح أنه يمنحنا ، المطورين (والمصممين) ، حرية لا نهائية تقريبًا في طريقة ظهور الخط. هل فكرت يومًا أن "font-weight: bold" كثير جدًا ، لكن "عادي" ضعيف جدًا وليس لديك أي شيء بينهما؟

يدرك مصممو الخطوط ذلك جيدًا وغالبًا ما يقدمون خصائص متوسطة. لقد قاموا بتسميتها بأرقام مثل 100 (خفيف) أو 900 (سميك جدًا) وأي شيء بين مثل 300 ، 400 ، 600 ، 700 ، إلخ. ولكن ربما تحتاج إلى 750 وهو غير متوفر؟ الآن ، مع الخطوط المتغيرة ، أنت تفعل!

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

• headings-font-normal.woff2
• headings-font-bold.woff2
• body-normal.woff2
• body-italic.woff2
• body-bold.woff2

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

يمكنك قراءة المزيد عن الخطوط المتغيرة: مقدمة عن الخطوط المتغيرة على الويب.

3. المزيد من JavaScript!

هذا عنوان "ملفت للانتباه" ، لكنه صحيح! مطورو الواجهة الأمامية ليسوا فقط "مطورو JS" ، ولكن أيضًا مطورو "CSS / HTML" فقط. وهذا العنوان لهم.

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

ولكن بغض النظر عن عدد الجوانب الإيجابية والسلبية لديه ، فإن استخدامه ينمو. إذن ، ما هي التقنية / النهج / الأدوات المستندة إلى JS التي يجب أن تتجه أكثر؟

• رد الفعل / Vue كواجهة لنظام إدارة المحتوى مثل WordPress (بدون رأس)
• WebGL (Three.js) رسومات ثلاثية الأبعاد ، محاكاة ، تفاعلية
• محتوى VR و AR
• المزيد من تدفقات عمل البناء المحسّنة (webpack ، gulp)
• واجهات برمجة تطبيقات المتصفح لمزيد من التحكم / الوظائف

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

4. التصميم القائم على المنفعة

يركز التصميم المستند إلى المنفعة على تطبيق الأنماط من خلال فئات محددة مسبقًا. هذا هو ما يعنيه تصميم صفحة ويب بشكل عام. ومع ذلك ، يختلف الأمر هنا قليلاً عن النهج القياسي. انظر ، لا تقوم .card مع الظل ، والخلفية ، وما إلى ذلك. يمكنك تصميم عنصر HTML باستخدام .shadow و .bg-light و .br-5 (مثل نصف قطر الحدود).

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

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

صفحة Tailwind الرئيسية

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

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

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

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

5. ميزات CSS الجديدة

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

ولكن بفضل تقدم بائعي المستعرضات في العام أو العامين الماضيين (بالنظر إليك يا Microsoft) ، يمكن لغالبية المستخدمين حول العالم الوصول إلى الويب بكفاءة أكبر من أي وقت مضى.

أجزاء ظل CSS كميزة قادمة أخرى

تعد خصائص CSS المخصصة إحدى هذه الميزات ، ولكن نظرًا لكونها عمرها 5 سنوات (وهي كبيرة جدًا) ، فإنها تحتوي على قسم خاص بها.

أوضاع الكتابة

على الرغم من عدم استخدامها كثيرًا ، نظرًا لأن العديد من المطورين نادرًا ما يحتاجون إلى دعم اللغات من اليمين إلى اليسار ، فإن أوضاع الكتابة موجودة. إنها ضرورية للوحات القيادة / أطر العمل والمواقع متعددة اللغات. بفضل الدعم المتزايد لخصائص الكتابة الاتجاهية مثل margin-inline-start على سبيل المثال ، ليس عليك استبدال margin-left إلى margin-right لـ RTL.

CSS Subgrid

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

:is

مُحدد الاختزال الذي يتم شرحه بشكل أفضل باستخدام مقتطف الشفرة الذي أخذناه من MDN:

 / * تحديد أي فقرة داخل رأس رئيسي
أو عنصر تذييل يتم تحريكه * /
: is (header، main، footer) p: hover {
لون احمر؛
المؤشر: المؤشر.
}

 / * ما ورد أعلاه يعادل ما يلي * /
رأس ع: تحوم ،
ص الرئيسي: تحوم ،
تذييل ع: مرر {
لون احمر؛
المؤشر: المؤشر.
}