العنوان: "؛ مولد مشبك CSS: طباعة السوائل والتباعد بدون استعلامات واقتباس الوسائط؛ slug: أداة دليل css-clamp-generator: css-clamp-generator الفئة: css النوع: مجموعة
مولد المشبك CSS: طباعة السوائل والتباعد بدون استعلامات الوسائط
اعتدت أن أحتفظ بمقبرة استعلام الوسائط في أسفل كل ورقة أنماط. سيكون عنوان البطل 28 بكسل على الهواتف، ثم تصطدم به نقطة توقف إلى 36 بكسل، وآخر إلى 44 بكسل، وآخر إلى 56 بكسل على الشاشات العريضة. أربع نقاط توقف لعنوان واحد، ولا يزال يبدو متقلبًا: ظل النص متجمدًا عند 36 بكسل عبر نطاق كبير من عروض الأجهزة اللوحية ثم انتقل إلى الحجم التالي في اللحظة التي تتعثر فيها نقطة التوقف. عندما قمت بإعادة بناء موقع التسويق لأحد منتجات Laravel الخاصة بي، قمت بحذف كل ذلك واستبدلت كل عنوان من هذه العناوين بآخر clamp() خط. ينمو النوع الآن بسلاسة مع النافذة، وتكون ورقة الأنماط أقصر وأكثر هدوءًا.
هذا هو الوعد الكامل بتحجيم السوائل، ولهذا السبب قمت ببناء مولد المشبك CSS على Toolz.dev. يمكنك إعطائه حجمًا صغيرًا وحجمًا كبيرًا ونطاق إطار العرض الذي يتم تعيينه إليه، ويقوم بإرجاع سطر واحد من CSS الذي يقحم كل حجم بينهما.
ليرة تركية؛DR:
clamp(min, preferred, max)إرجاع قيمة محددة بين الحد الأدنى والحد الأقصى، باستخدام القيمة المفضلة في المنتصف. يحسب المولد القيمة المفضلة كقيمة ثابتةremمصطلح زائد أvwالمصطلح، لذلك يقوم أحد الإعلانات بقياس حجم الخط أو التباعد بسلاسة عبر إطار العرض دون الحاجة إلى استعلامات الوسائط. يستخدمremحدود إمكانية الوصول، ومعاينة الحجم المحسوب عند كل عرض قبل الشحن.
ما هو مشبك CSS () وماذا يفعل؟
clamp() هي دالة CSS تُرجع قيمة مقفلة بين الحد الأدنى والحد الأعلى، المحدد في قيم ووحدات CSS المستوى 4. يستغرق الأمر ثلاث وسيطات بالترتيب clamp(minimum, preferred, maximum). يقوم المتصفح بتقييم القيمة المفضلة، وإذا انخفضت تلك القيمة إلى ما دون الحد الأدنى فإنه يستخدم الحد الأدنى، وإذا ارتفعت فوق الحد الأقصى فإنه يستخدم الحد الأقصى. وفي كل مكان بينهما، فإنه يستخدم القيمة المفضلة.
يتم تعريف الوظيفة في مواصفات CSS قيم ووحدات الوحدة المستوى 4 (https://www.w3.org/TR/css-values-4/) إلى جانب أبناء عمومتها min() و max(). ما يجعلها قوية للتخطيط هو أن القيمة المفضلة يمكنها مزج الوحدات. إذا جعلت القيمة المفضلة تعتمد على vw، وهو واحد بالمائة من عرض إطار العرض، ثم يتم قياس النتيجة مع النافذة، بينما يمنع الحد الأدنى والحد الأقصى من أن تصبح صغيرة جدًا أو كبيرة جدًا.
لماذا يجب أن أتوقف عن كتابة استعلامات الوسائط لتحديد الحجم؟
استعلامات الوسائط هي وظائف خطوة. يظل الحجم مسطحًا، ثم يقفز عند نقطة التوقف، ثم يظل مسطحًا مرة أخرى. وهذا ينتج إزعاجين. أولاً، تكون القفزة مرئية: ينتقل العنوان من حجم إلى آخر أثناء تغيير الحجم، وهو ما يبدو غير مصقول. ثانيًا، تعتبر المناطق المسطحة بمثابة حل وسط: الحجم الذي تم اختياره ليبدو مقبولًا عبر نطاق الأجهزة اللوحية بأكمله، بحكم التعريف، كبير جدًا قليلاً في أحد طرفيه وصغير جدًا قليلاً في الطرف الآخر.
تحجيم السوائل مع clamp() هي وظيفة مستمرة بدلا من ذلك. تتغير القيمة بمقدار شعرة لكل بكسل من عرض إطار العرض، لذلك لا توجد قفزة ولا حجم تسوية. أحد العناوين التي تقرأ جيدًا عند 320 بكسل وبجودة جيدة عند 1280 بكسل ستقرأ جيدًا أيضًا عند كل عرض بينهما، لأنه يتم حسابه لهذا العرض الدقيق. يمكنك استبدال مجموعة من نقاط التوقف بخط واحد، ويتصرف الخط بشكل أفضل مما فعلته المجموعة.
هناك فوز في الصيانة أيضًا. عندما يقوم المصمم بتغيير الأحجام المستهدفة، يمكنك تحرير إعلان واحد بدلاً من البحث في أربعة استعلامات وسائط لإبقائها متسقة. عدد أقل من الأماكن التي يجب تغييرها يعني عددًا أقل من الأماكن التي تخطئ في الأمر.
كيف يحسب المولد القيمة المفضلة؟
هذا هو الجزء الذي يأخذه معظم الناس على الإيمان، لذا فإليك الرياضيات الفعلية التي تقوم بها الأداة. أعطها نقطتين: الحد الأدنى للحجم عند الحد الأدنى لمنفذ العرض، والحد الأقصى للحجم عند الحد الأقصى لمنفذ العرض. يتم تحديد الخط المستقيم عبر نقطتين بالكامل، لذلك تجد الأداة هذا الخط.
الميل هو التغير في الحجم مقسومًا على التغير في عرض إطار العرض: (maxSize - minSize) / (maxViewport - minViewport)، يتم قياسها بالبكسلات من الحجم لكل بكسل من إطار العرض. يحتوي الخط أيضًا على تقاطع y، وهو الحجم الذي سيكون عليه الخط عند منفذ العرض صفر، وهو minSize - slope * minViewport.
الآن الحيلة التي تحول هذا الخط إلى CSS. طول Xvw يساوي X بالمائة من عرض إطار العرض، وبالتالي يصبح الجزء المتناسب من إطار العرض من الخط (slope * 100)vw، وينبعث الاعتراض كثابت rem قيمة. والنتيجة هي قيمة مفضلة مثل 0.8333rem + 0.8333vw. لفها clamp() مع الحجمين كحدود وستحصل على المثال الكلاسيكي 16px عند 320px ينمو إلى 24px عند 1280px، clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
ليس عليك أن تثق بذلك بشكل أعمى، ولهذا السبب تعرض الأداة جدول معاينة بالحجم المحسوب بعدة عروض لإطارات العرض. عند 320 بكسل يقرأ 16 بكسل، وعند 1280 بكسل يقرأ 24 بكسل، والقيم الموجودة بينهما تؤكد أن السطر يفعل ما تتوقعه.
هل يجب أن أستخدم px أو rem لقيم المشبك ()؟
يستخدم rem للحدود. أ rem يرتبط بحجم الخط الجذر، لذلك عندما يقوم المستخدم بزيادة حجم الخط الافتراضي لمتصفحه '؛s لسهولة القراءة، يتم التعبير عن الأحجام بـ rem تكبير معها. الأحجام المعبر عنها في px لا تفعل ذلك، الأمر الذي يكسر التحكم في إمكانية الوصول بهدوء. هذه توصية طويلة الأمد وتنطبق عليها clamp() تمامًا كما ينطبق على أي حجم خط.
يتيح لك المولد كتابة أحجام الإدخال في أي منهما px أو rem لأن المصممين يقومون بتسليم قيم px في كثير من الأحيان، ولكنها دائمًا ما تصدر الحدود rem، التحويل باستخدام حجم الخط الجذر الذي قمت بتعيينه، والذي يتم تعيينه افتراضيًا على 16 بكسل. إذا كان مشروعك يستخدم قاعدة مختلفة، فقم بتعيينه وضبط الإخراج. إذا كنت تريد التحقق مرة أخرى من تحويل px-to-rem الأولي خارج سير عمل المشبك، فإن محول وحدة CSS يفعل ذلك بالضبط ويشترك في نفس منطق التحويل، وبالتالي تصطف الأرقام.
هل يمكنني استخدام المشبك () للتباعد، وليس فقط حجم الخط؟
نعم، وهنا تتوقف عن كونها خدعة طباعة وتصبح أداة تخطيط. clamp() يعمل على أي خاصية طول: margin، padding، gap، width، height، و line-height الجميع يقبل ذلك. يمكن للقسم الذي يحتاج إلى غرفة للتنفس استخدام السوائل padding وينمو ذلك من 24 بكسل على الهواتف إلى 80 بكسل على أجهزة الكمبيوتر المكتبية في إعلان واحد، وبالتالي فإن المسافة البيضاء تتدرج مع الشاشة بدلاً من الشعور بالضيق على الشاشات الكبيرة أو الإسراف على الشاشات الصغيرة.
أنا أستخدم السوائل gap على شبكات البطاقات باستمرار. يمكن تحديد حجم البطاقات نفسها باستخدام الشبكة، لكن فجوة السوائل تحافظ على الإيقاع بينها متناسبًا عند كل عرض. لا يهتم مولد المشبك بالخاصية التي تلصق بها القيمة، لذا فإن نفس الأداة تغطي أبعاد النوع والتباعد والتخطيط.
كيف يمكن مقارنة المشبك () بالتقنيات المستجيبة الأخرى؟
| تقنية | التحجيم | خطوط CSS | نعومة |
|---|---|---|---|
| حجم ثابت | لا أحد | 1 | غير متاح |
| استعلامات الوسائط | صعدت عند نقاط التوقف | عدة لكل عنصر | يقفز عند كل نقطة توقف |
خام vw وحدة |
مستمر، غير محدود | 1 | سلسة ولكن يمكن أن تصبح صغيرة جدًا أو كبيرة |
clamp() |
مستمر، محدود | 1 | سلسة ومحدودة بأمان |
الخام vw الصف يستحق الخوض فيه، لأنه يصل إلى vw وحده هو نصف الخطوة الشائعة التي يتخذها الناس قبل أن يكتشفوا ذلك clamp(). نقي vw يتم قياس حجم الخط بسلاسة، ولكن ليس له أرضية ولا سقف، لذلك يصبح صغيرًا بشكل غير قابل للقراءة على الهواتف وكبيرًا بشكل هزلي على الشاشات العريضة. clamp() يكون vw مع حواجز الحماية، وهو ما تريده دائمًا تقريبًا.
لماذا لا تتغير قيمة المشبك () الخاص بي؟
سببان يمثلان كل " تقريبًا؛ إنه عالق وحاصل؛ تقرير. الأول هو أن الحد الأدنى والحد الأقصى للأحجام متساويان، مما يجعل الميل صفرًا، وبالتالي فإن القيمة المفضلة ثابتة والحجم لا يتحرك أبدًا. إذا كنت تريد إصلاحه، فلا بأس، ولكن إذا كنت تتوقع القياس، فامنح الحجمين قيمًا مختلفة.
والثاني هو أنك تقوم بالاختبار خارج نطاق إطار العرض. أقل من الحد الأدنى لإطار العرض، clamp() يتم قفله بشكل صحيح إلى الحد الأدنى للحجم، وفوق الحد الأقصى لمنفذ العرض يتم قفله إلى الحد الأقصى. لذا، إذا كان نطاقك يتراوح من 320 بكسل إلى 1280 بكسل وقمت بتغيير حجم شاشة 1600 بكسل، فستظل القيمة عند الحد الأقصى وتبدو مجمدة، تمامًا كما هو مصمم. اختبر عرضًا بين منفذي العرض لرؤية القياس. جدول المعاينة في مولد المشبك يتجنب ذلك من خلال إظهار القيمة المحسوبة عبر النطاق في لمحة.
كيف يتناسب هذا مع بقية سير عمل CSS؟
تحجيم السوائل هو قطعة واحدة من الطبقة البولندية. بمجرد الكتابة والتباعد بسلاسة، فإن الأشياء التالية التي أقوم بضبطها هي التفاصيل الزخرفية، وعادةً ما يعتمد نفس الموقع على بعض الأدوات معًا.
أقوم بإقران مولد المشبك مع مولد التدرج لأقسام البطل السائلة، ومع مولد الظل الصندوق للارتفاع الذي يظل ثابتًا عبر المكونات. اللون يمر عبر محول الألوان لذلك يتم التعبير عن كل قيمة بالتنسيق الدقيق الذي يحتاجه كل سياق. تغطي هذه الأربعة معظم ما أصل إليه عند تحويل التخطيط التقريبي إلى تخطيط مشحون.
إذا كنت تريد الصورة الأوسع لكيفية توافق هذه الأشياء معًا، فقد كتبت إعداداتي اليومية في مجموعة أدوات مطور الويب، وهناك إرشادات مخصصة للتدرجات في دليل مولد التدرج CSS يقترن ذلك بشكل طبيعي بأعمال التخطيط المرنة.
هل تدعم جميع المتصفحات المشبك ()؟
نعم. clamp()مع min() و max()، مدعوم عبر جميع المتصفحات الحديثة، بما في ذلك Chrome وFirefox وSafari وEdge الحالي، وهو مدعوم منذ سنوات. بالنسبة للغالبية العظمى من المشاريع، يمكنك استخدامه دون أي احتياطي على الإطلاق.
إذا كان يجب عليك دعم متصفح قديم حقًا، فإن النمط الجميل هو الإعلان عن قيمة ثابتة على السطر قبل clamp() تصريح. المتصفحات التي لا تفهم clamp() تجاهل السطر الذي لا يمكنهم تحليله والحفاظ على القيمة الثابتة، بينما تطبق المتصفحات الحديثة القيمة السائلة. يكلف أسلوب التحسين التدريجي هذا سطرًا إضافيًا ويزيل أي مخاطر، ولكن في عام 2026 نادرًا ما تحتاج إليه.
مثال عملي: حشوة قسم السوائل
اسمحوا لي أن أمشي على حالة حقيقية من البداية إلى النهاية، لأن الصيغة المجردة تنقر بشكل أسرع مع الأرقام. لنفترض أن قسم التسويق يجب أن يحتوي على 24 بكسل من الحشو الرأسي على أصغر الهواتف و80 بكسل على أجهزة الكمبيوتر المكتبية الكبيرة، ويتراوح حجمه بين 320 بكسل و1440 بكسل. هاتان نقطتي: 24 بكسل عند 320 بكسل، و80 بكسل عند 1440 بكسل.
المنحدر هو (80 - 24) / (1440 - 320)الذي هو 56 / 1120، أو 0.05 بكسل من الحشو لكل بكسل من إطار العرض. الاعتراض هو 24 - 0.05 * 320الذي هو 24 - 16، أو 8px، و 8px عند جذر 16px هو 0.5rem. ال vw المعامل هو 0.05 * 100الذي هو 5vw. إذن القيمة المفضلة هي 0.5rem + 5vw، والإعلان الكامل هو clamp(1.5rem, 0.5rem + 5vw, 5rem)منذ 24px هو 1.5rem و 80px هو 5rem.
أسقط ذلك padding-block ويتنفس القسم بشكل صحيح عند كل عرض: محكم على الهواتف، وواسع على أجهزة الكمبيوتر المكتبية، ومتناسب بسلاسة بينهما. ينتج المولد هذا بالضبط لك، ويؤكد جدول المعاينة الخاص به أن الحشو يقرأ 24 بكسل عند 320 بكسل و80 بكسل عند 1440 بكسل حتى تتمكن من الوثوق بالخط قبل لصقه.
كيف يمكنني اختبار قيمة المشبك ()؟
أسرع فحص للسلامة هو جدول المعاينة في المولد، والذي يقيم القيمة المثبتة عند انتشار العروض المشتركة. ولكن من المفيد معرفة كيفية التحقق من وجود واحد مباشر في المتصفح أيضًا. قم بتغيير حجم النافذة وشاهد الخاصية مع فتح DevTools: يتم تحديث القيمة المحسوبة في لوحة الأنماط بشكل مستمر، ويمكنك التأكد من أنها تتوقف عن التغيير تمامًا عند حدي إطار العرض الخاصين بك. هذا الفحص المباشر هو كيف حصلت على قيمة عالقة بمجرد أن تبين أنها متساوية في الأحجام الدنيا والقصوى، وهو الخطأ الكلاسيكي ذو المنحدر الصفري.
بالنسبة للقيمة المستخدمة في حجم الخط على وجه التحديد، قم أيضًا باختبار زيادة تكبير المتصفح وزيادة حجم الخط الافتراضي. لأن الحدود موجودة rem، يجب أن يتم توسيع المنحنى بأكمله باستخدام إعداد حجم الخط الخاص بالمستخدم '؛، وهو سلوك إمكانية الوصول الذي تريده وسبب انبعاث المولد rem بدلاً من px. إذا لم يتم تغيير الحجم، فتأكد من أنك لم تقم بتشفير الرمز الثابت a px ملزمة في مكان ما في اتجاه مجرى النهر.
الأسئلة المتداولة
ماذا يفعل مشبك CSS ()؟
يقوم المشبك () بإرجاع قيمة محددة بين الحد الأدنى والحد الأقصى. يستغرق الأمر ثلاث وسيطات، المشبك (الحد الأدنى، المفضل، الحد الأقصى)، ويستخدم المتصفح القيمة المفضلة ما لم تنخفض عن الحد الأدنى أو ترتفع فوق الحد الأقصى، وفي هذه الحالة يستخدم هذا الحد. يتيح ذلك لإعلان واحد التصرف بشكل مستجيب دون استعلامات الوسائط.
كيف يحسب المولد القيمة المفضلة؟
فهو يحسب القيمة كخط مستقيم عبر نقطتيك: الحد الأدنى للحجم عند الحد الأدنى لمنفذ العرض والحد الأقصى للحجم عند الحد الأقصى لمنفذ العرض. يتم التعبير عن هذا الخط كمصطلح rem ثابت بالإضافة إلى مصطلح vw، وبالتالي تنمو القيمة بشكل متناسب مع عرض إطار العرض بينما يبقيه المشبك () داخل حدودك.
هل يجب أن أستخدم px أو rem لقيم المشبك ()؟
استخدم rem للحدود بحيث تحترم القيمة المستخدم الذي يغير حجم خط المتصفح الخاص به، وهو أفضل لإمكانية الوصول. يقبل هذا المولد الإدخال إما في px أو rem ويقوم دائمًا بإصدار الحدود في rem، والتحويل باستخدام حجم الخط الجذر الذي قمت بتعيينه (16px افتراضيًا).
هل يمكنني استخدام المشبك () للتباعد، وليس فقط حجم الخط؟
نعم. يعمل المشبك () على أي خاصية طول، بما في ذلك الهامش والحشو والفجوة والعرض والارتفاع وارتفاع الخط. تعد الطباعة السائلة هي الاستخدام الأكثر شيوعًا، ولكن نفس القيمة التي تم إنشاؤها تعمل على قياس التباعد وأبعاد التخطيط بشكل سلس عبر نطاق إطار العرض.
ما نطاق إطار العرض الذي يجب أن أختاره؟
النطاق الشائع هو 320 بكسل لأصغر الهواتف إلى حوالي 1280 بكسل أو 1440 بكسل لأجهزة الكمبيوتر المكتبية الكبيرة. الحد الأدنى للحجم يقع أسفل إطار العرض السفلي والحد الأقصى للحجم يقع فوق إطار العرض العلوي، لذا اختر نطاقًا يطابق المكان الذي تريد أن يبدأ فيه القياس ويتوقف.
لماذا لا تتغير قيمة المشبك () الخاص بي؟
إذا ظلت القيمة ثابتة، فمن المحتمل أن يكون الحد الأدنى والحد الأقصى للأحجام متساويين، مما ينتج عنه ميل صفر، أو أن منفذ العرض خارج نطاقك بحيث يكون المشبك () مقفلاً على حد. تأكد من اختلاف الحجمين وأنك تختبر عرضًا بين الحد الأدنى والحد الأقصى لمنافذ العرض.
هل تدعم جميع المتصفحات المشبك ()؟
نعم. المشبك ()، إلى جانب min () وmax ()، مدعوم في جميع المتصفحات الحديثة بما في ذلك Chrome وFirefox وSafari وEdge. بالنسبة للمتصفحات القديمة جدًا، يمكنك توفير قيمة احتياطية ثابتة على السطر قبل إعلان المشبك ().
هل مولد المشبك CSS مجاني وخاص؟
نعم. المولد مجاني تمامًا بدون تسجيل أو حدود، ويتم تشغيل جميع الحسابات في متصفحك باستخدام JavaScript من جانب العميل، وبالتالي فإن القيم التي تدخلها لا تترك جهازك أبدًا وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميل الصفحة.
