التصميم الجوهري: تحديد الحجم حسب المحتوى

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

min-content: أصغر حجم يستوعب المحتوى من دون تجاوز (يلتف النص عند كل حد بين الكلمات). max-content: الحجم اللازم لعرض المحتوى في سطر واحد من دون التفاف. يعكس كلاهما الأبعاد الفعلية للمحتوى.

تعادل fit-content التعبير min(max-content, max(min-content, available)). تتمدد مع المحتوى حتى تصل إلى المساحة المتاحة، ثم يلتف المحتوى. وهي مثالية للأزرار والتسميات التي ينبغي أن يكون عرضها بقدر عرض النص، من دون أن يتجاوز عرض الحاوية.

تحدد minmax(min, max) في grid-template-columns الحدين الأدنى والأقصى لحجم مسار. تنشئ minmax(200px, 1fr) عمودًا لا يقل عرضه عن 200px، لكنه يمكن أن يتمدد. وعند دمجها مع auto-fill، تنشئ شبكات متجاوبة ذاتيًا.

يملأ كلاهما الصف بأكبر عدد ممكن من المسارات. يحتفظ auto-fill بالمسارات الفارغة (مع الحفاظ على عدد الأعمدة). أما auto-fit فيطوي المسارات الفارغة، ما يسمح للمسارات المملوءة بالتمدد لملء المساحة. استخدموا auto-fit في التخطيطات التي يقودها المحتوى والتي ينبغي أن تتمدد لملء العرض المتاح.

تقيّد clamp(min, preferred, max) قيمةً بين حدين. تعمل font-size: clamp(1rem, 2.5vw, 1.5rem) على تغيير الحجم بين 1rem و1.5rem استنادًا إلى عرض إطار العرض، ما يوفر طباعة مرنة من دون استعلامات الوسائط.

تنشئ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) شبكة متجاوبة تكون في عمود واحد ضمن إطارات العرض شديدة الضيق، وتضيف أعمدة تلقائيًا كلما سمحت المساحة. من دون استعلامات وسائط أو JavaScript.

تجعل aspect-ratio: 16/9 العنصر يحافظ على تناسب أبعاده مع تغير عرضه. وعند دمجها مع width: 100%، تملأ حاوية الفيديو الحاوية الأصلية وتحافظ دائمًا على نسبة 16:9 من دون JavaScript أو حيل الحشو المعتمدة على النسب المئوية.

يتكامل التصميم الذاتي مع الخصائص المنطقية في CSS (inline-size وblock-size وmargin-inline) لإنشاء تخطيطات تعمل في اتجاهي الكتابة الأفقي والرأسي. يتكيف التحجيم الذاتي مع اتجاه الكتابة تلقائيًا.

ثابت: width: 300px — يظل عرضه 300px بغض النظر عن المحتوى. ذاتي: width: fit-content — يكون بعرض المحتوى، ضمن القيود المحددة. تتطلب التخطيطات الثابتة نقاط توقف للتكيف؛ أما التخطيطات الذاتية فتتكيف تلقائيًا استنادًا إلى محتواها وسياقها.

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

يستخدم التصميم الذاتي كلمات CSS المفتاحية للتحجيم (min-content وmax-content وfit-content)، وminmax() مع auto-fit، وclamp() للتحجيم المرن، وaspect-ratio لإنشاء تخطيطات تقودها أبعاد المحتوى بدلًا من نقاط توقف إطار العرض. والنتيجة تخطيطات متجاوبة طبيعيًا باستخدام CSS أقل واستعلامات وسائط أقل.