Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

الشروع في العمل مع CSS وظائف الرياضيات المستوى 4

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by osamagaradh (you can also view the original English article)

تعد الرموز الوظيفية جزءًا من الوحدة النمطية للوحدات النمطية للوحدات CSS ، والتي تعد أيضًا موطنًا للوظائف الرياضية المفيدة مثل calc () ، واعتبارًا من المستوى 4min () و max () . هذه الوظائف القوية تفتح مداخل لا تصدق لمؤلفي CSS التي تتطلب قدرات منطقية رياضية ضمن CSS. في هذه المقالة سنناقش calc () و min () و max () وكيف يمكن أن تكون الثلاثة مفيدة في عملك الآن. هيا بنا نبدأ!

ما هي هي هي الرموز الوظيفية؟

تعد الرموز الوظيفية واحدة من الأقسام الفرعية التسعة (القسم 8 على وجه الدقة) من وحدة قيم ووحدات CSS الخاصة بـ W3C. اعتبارًا من مسودة محرر المستوى 4 ، تحتوي الملاحظات الوظيفية الآن على أقسام فرعية أخرى مثل تبديل () تسمح بالتبادل بين القيم ومراجع السمة من خلال استخدام attr () . هناك أيضًا قسم فرعي آخر مثير يسمى "التعبيرات الرياضية" والذي يشمل حسابات الرياضيات الصديقة لدينا () و min () و max () .

دعونا ننتقل إلى تعريف W3C لمساعدتنا على فهم ما هي الرموز الوظيفية:

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

في شروط layperson يقولون انها "اسم وظيفة" ، مثل حساب ، تليها أقواس الفتح (والإغلاق ) . لكن ما الذي يحدث بينهم؟

إدخال التعبيرات الرياضية

كما ذكرنا ، فإن "التعبيرات الرياضية" هي جزء من "الرموز الوظيفية" ، ولكن ما هي وماذا يفعلون؟ مرة أخرى ، لننتقل إلى W3C ، حيث يتم تعريفها على النحو التالي:

" تسمح وظائف الرياضيات ، calc () ، min () ، و max () ، بالتعبيرات الرياضية مع إضافة ( + ) ، والطرح ( - ) ، والضرب ( *) ، والقسمة ( / ) لاستخدامها كقيم مكونة."

وهذا يعني أن calc () و min () و max () هي "وظائف رياضيات" تسمح "بالتعبيرات" بين قوسين من أجل "حساب القيم". حسنا ، هذا واضح الآن. المصطلح "التعبيرات" هو مجرد طريقة خيالية لقول "منطق الرياضيات مسموح به تمامًا داخل الأقواس".

تم تقديمه في المستوى 4 وهو تعريف تم تحديثه حديثًا لاستكمال ما نعرفه حتى الآن:

" يمكن أن تكون مكونات دالة حسابية قيمًا حرفية أو دالات رياضية أخرى أو تعبيرات أخرى ، مثل attr () ، والتي يتم تقييمها إلى نوع وسيطة صالح (مثل <length> )."

لمزيد من التوضيح ، فإن "وظائف الرياضيات الأخرى" المشار إليها هنا هي calc ()، min () و max () ، ولكنها تشير أيضًا إلى أن هذه الوظائف يمكن أن تتداخل داخل بعضها البعض. يمكنك كتابة calc (min ()) ، min (calc ()) ، calc (max (min ())) ، calc (min (attr ()) وهكذا. ومع ذلك ، فإن اقتراحي هو بذل قصارى جهدك وتجنب دوامة التعشيش ، حتى مع القدرة على القيام بذلك كما تقترح المواصفات.

الآن دعونا نقول "مرحبا" مرة أخرى إلى اثنين من وظائف الرياضيات المعلقة التي فقدت فرصتها تقريبا لمصافحة فريق عمل CSS.

مرحبًا بعودتك إلى دقيقة () و max ()

وظائف دقيقة () و ماكس () نوعان من وظائف الرياضيات بصمتهم، ولكن فقط بعد أن أزيلت تقريبا من قيم وحدات مستوى 4 مشروع المحرر. بفضل ليا فيرو ، شقت رياح التغيير طريقها ولم أستطع أن أكون أكثر سعادة.

"ربما الآن وقد ذهب القيم 3 إلى CR حان الوقت لإعادة النظر في إضافة دقيقة () و max () مرة أخرى إلى القيم 4؟

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

علاوة على ذلك ، كلما أصبحت متغيرات CSS أكثر استخدامًا ، ستصبح الحاجة إلى min () و max () أكبر. أذكر أن بعض القضايا التي جعلتنا نسقطها منذ 6 سنوات مضت يمكن حلها الآن مع الخطأ في مفهوم القيمة الزمنية المحسوبةالتي أدخلتها المتغيرات. " - Lea Verou

منذ أن تم إدراج اقتراح ليا على GitHub ، min () و max () بشكل رسمي في مسودة Editor of CSS المستوى 4 القيم والوحدات بما في ذلك التبني المبكر لـ WebKit. يمكن للمطورين التجريب والاستكشاف بشكل شخصي باستخدام WebKit Nightly (اعتبارًا من 10/24/17). وهنا يلتزم WebKit واحد للغريب غريبة حيث تم منح الدعم سحري ل min () و max () .

لمحة سريعة في المشبك ()

آخر قطعة مثيرة للاهتمام من القيل والقال في هذا الموضوع نفسه GitHub بدأت من قبل ليا Verou كان التعليق حيث يقترح تاب اتكينز وظيفة المشبك الفعلي () . المشبك ()حرفيا "المشبك" قيمة بين القيم الحدودية.

"... أنا أوافق على أن المشبك () ، في حين أنه لا لزوم له من الناحية التقنية ، مفيد في كثير من الأحيان لدرجة أنه ربما يستحق الوجود".

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

تدور المناقشات الحالية حول هذا النوع من التركيبات أعلاه ، وأنا أوافق على هذا الاقتراح.فمن المنطقي ويقرأ بطريقة منطقية. أنا فقط أتساءل ما الذي سيحدث لاستخدام min ()و max () إذا كان clamp () يظهر في الواقع في المستقبل.

مع الثرثرة المبردة بالماء عن الطريق ، يمكنك التركيز على وظائف الرياضيات الفعلية التي جئناها هنا لمناقشة الأمر. calc () و min () و max () .

الآن تلبية حساب ()

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

في هذا النموذج أعلاه لدينا اسم الدالة ( calc ) متبوعًا بأقواسنا التي تحتوي على "تعبيرات" ، أو بعبارة أخرى ... منطق الرياضيات.

" تسمح الدالة calc () بالتعبيرات الرياضية مع إضافة ( + ) والطرح ( - ) والضرب ( * ) والقسمة ( / ) لاستخدامها كقيم مكون." - W3C

مرة أخرى ، هذا الكلام يتوهم بالقول "يمكنك أن تفعل الرياضيات بين قوسين".

فيما يتعلق بالتعبيرات ، يمكن للمؤلفين تمرير القيم العامة مثل 50٪ و 2 em و 40ويمكن استخدام calc () أينما كان <length> و <frequency> و <angle> و<time> و <percent> و <number> و أو قيم <integer> مسموح بها. وحداتي المفضلة لاستخدام وفحص في البرية هي وحدات viewport ( vh ، vw ، vmin ، vmax ). هذه هي قيم أبعاد الشاشة المفيدة بشكل خاص مع الطباعة والتخطيط كما نحن على وشك رؤيتها.

احسب () في البرية

المثال أعلاه هو طريقة واحدة للتعامل مع الطباعة المتجاوبة. باستخدام مزيج من استعلامات الوسائط و Sass و calc () ووحدات إطار العرض ، يثبت لنا Mike كيف يمكن أن تتطابق الطباعة المتجاوبة تمامًا بين قيم وحدات البكسل المحددة.

هنا آخر الفك اسقاط عرض الطباعة باستخدام calc () ووحدات العرض من قبل تيم براون. تم استخدام هذا العرض التوضيحي لمقالاته التي تناقش CSS Locks التي أشجعك على قراءتها إذا كانت الطباعة أمرًا يهمك.

يمكن أن تساعد وحدات Viewport و calc () أيضًا في إنشاء بعض أنماط التخطيط المفضلة. في العرض التوضيحي أعلاه ، يتم استخدام calc () لطرح ارتفاع التذييل من ارتفاع منفذ العرض ( vh ). حل كريس كويير لحل ذكي لصديقنا القديم "The Sticky Footer" كثيرًا ما يطلب. يعمل هذا العرض أيضًا بشكل رائع عند دمجه مع متغيرات CSS أيضًا.

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

الآن دعونا نلقي نظرة على وظيفتين رياضيتين إضافيتين ستستمتعان بها بالتأكيد ، والمعروف حاليًا باسم min () و max () .

min () و max () : تعريف القيود

وكما ذكرنا سابقًا ، لا تزال هذه الوظائف في مراحلها الأولى ، لذا فإن العروض التوضيحية التي تعرض حالات الاستخدام تكون قاتمة ، ولكن لا تدع ذلك يخيفك من التجربة. للتحقيق في min () و max () ، ستحتاج إلى تنزيل WebKit كل ليلة . بمجرد تحميلها ، أنت حر في فتح "ليلة" (أيقونة سوداء) والوصول إلى العمل.

تذكر عندما علمنا ما هي التعبيرات؟ كانت مجرد طريقة رائعة لقول "منطق الرياضيات".فمثلا:

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

"القيمة المحسوبة لدقيقة () أو الحد الأقصى () هي قائمة التعبيرات المفصولة بفواصل" - W3C

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

" تمثل الدالة min () أو max () أصغر (الأكثر سلبية) أو أكبر (الأكثر إيجابية) ، على التوالي ، حسابات مفصولة بفواصل تحتوي عليها." - W3C

هل قبض على كل ذلك؟ قالوا فقط أصغر (الأكثر سلبية) أو أكبر (الأكثر إيجابية).أعطتنا W3C لنا فقط كتابة الأرقام السالبة كجزء من تعبيراتنا.

لنأخذ هذا الوقت الآن لنرى كيف تثبت min () و max () نفسها في عرض توضيحي عملي. الابقاء على القبعات الخاص بك.

min () و max () في Real Life

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

في المثال أعلاه ، بدأت في تشغيل الأشياء عن طريق تقييد العرض والقيام بذلك في سطر واحد.

باستخدام المقاربة أعلاه ، يمكنني تضمين قيد متوسط ​​في مقابل الحد الأدنى والحد الأقصى.يخبر هذا السطر من التعليمة البرمجية المستعرض " حاول تعيين العرض إلى 70vw ، ولكن لا تدعها تذهب أقل من 200 بكسل (100 بكسل * 2) ، أو أعلى من 500 بكسل." هناك أيضًا طريق آخر يمكنك الوصول إليه لتحقيق نتيجة مماثلة.

ولتفسير ذلك بمزيد من التفصيل ، فإن هذا يعادل الحد الأدنى ، قيمة متوسطة وأخيراً أقصى قيمة للقيد. يساعد التعشيش max () ضمن min () على الإحكام بين القيود المطلوبة.

إذا كنا مين العرض و ماكس العرض كنا التوصل إلى وجهة ما يعادل كنا تحقيق عن طريق دقيقة () و ماكس () . أنا أشعر بالفضول إذا كانت خصائص مثل min-width ستصبح بالية لصالح وظائف الرياضيات مثل min () و max () في السنوات القادمة.

في ما يتعلق بحجم الخط ، أستخدم نهج min / max ذاته لإنشاء استجابة وقفل الطباعة.

أنا أقول متصفح " في محاولة لضبط حجم الخط ل4vw، ولكن لا ندعه يذهب أي أقل من 1rem، أو أعلى من 2rem." لسوء الحظ لا يوجد ما يعادلها مثل مين حجم الخط و max- حجم الخط كما كان لدينا للعرض ، ولكن اعتبارا من مواصفاتمستوى الوحدة النمطية للخطوط CSS 4 التي يمكن أن تصبح حقيقة واقعة.

هذا هو بالتأكيد الأخبار المثيرة والمؤلفين متحمسون عندما يتعلق الأمر بقيم تقييد في CSS.

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

"الطباعة المرنة بأقفال CSS" ، إلا أن هذا الأسلوب قدّمه Mike Riethmuller لأول مرة في مقالته "التحكم الدقيق في الطباعة المتجاوبة".>

calc ()

ووحدات إطار العرض للعناوين ونسختها التي ترتفع أو تنخفض حسب أبعاد الشاشة. هذا النوع من القيود هو ما عرفناه باسم "Locks CSS"..

  • الطباعة على قاعدة الوحدة الإعلانية من Zell Lieww
  • الرياضيات أقفال CSS بواسطة Florens Verscheldee
  • CSS "أقفال" كريس كوييرr
  • الطباعة السوائل بواسطة جيف جراهامm
  • الطباعة المستجيبة والسوائل مع وحدات vh و vw بواسطة Michael Riethmullerr
  • سائل الطباعة المتجاوبة مع CSS بولي السوائل التحجيم من قبل جيك ويلسونn

تثبيت حجم الخط مع JavaScript في رأس ، بينما CSS في المقعد الخلفي.سأترك لك أن تقرر ما تشعر به حول جافا سكريبت خلط نفسها مع المغلق..

calc () أو جربت min () و max () ، فيرجى إعلامنا بذلك في التعليقات. الترميز سعيدة!!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.