تأخذ CSS الحديثة التحكم الكامل في تصميم مواقع الويب بمساعدة JavaScript المطلوبة. في هذه المقالة ، سنسلط الضوء على سبعة تحديثات جديدة لـ CSS لتبسيط مستقبل التصميم. بالإضافة إلى ذلك ، نحن نفكر في دعم المتصفح لمتصفح Chrome و Edge و Firefox. أخيرًا ، سنناقش المشكلات والحلول وكل ما تحتاجه للبدء على الفور.
بالنظر إلى جميع الحيل والتقنيات ، إليك بعض ميزات CSS المختارة بعناية والتي تستحق وقتك. لذلك ، دون أي مزيد من اللغط ، دعنا نتعمق فيه.
1. CSS Subgrid
على عكس قدرة CSS flexbox على التحرك في اتجاه واحد فقط ، يمكنك تحديد الأبعاد في الشبكات. مع بدء اكتساب القوة والشعبية في العقود القادمة ، شوهدت تغييرات هائلة في تصميمات الويب. تُستخدم الشبكات المتداخلة لرسم الشبكات داخل الشبكات. ولكن ، ما هي العوائق الرئيسية التي أثارت دعوة لشبكات CSS الفرعية؟
- تستخدم الشبكات المتداخلة بعد المستوى 2 لتجاوز المحتوى خارج الشبكة الأكبر التي أثرت بشكل كبير على استجابة موقع الويب.
- عملت الشبكات المتداخلة كعناصر مستقلة داخل حاوية الشبكة الأكبر. لم يكن هناك أي إشارة على الإطلاق إلى الحاوية الرئيسية لأي تغيير.
بدون شبكات فرعية:
بعد الشبكات الفرعية:
إليك كيفية تنفيذ الشبكات الفرعية:
.وعاء {
العرض: 700 بكسل ؛
الارتفاع: 500 بكسل ؛
الخلفية: RGB (214 ، 255 ، 139) ؛
عرض: شبكة ؛
أعمدة شبكة القوالب: 1fr 1fr 1fr 1fr ؛
صفوف قالب الشبكة: 1fr 1fr 1fr 1fr ؛
}
.container div {
الخلفية: RGB (72 ، 170 ، 137) ؛
صف الشبكة: 2/3 ؛
عمود الشبكة: 2/5 ؛
عرض: شبكة ؛
أعمدة قالب الشبكة: شبكة فرعية ؛
صفوف قالب الشبكة: شبكة فرعية ؛
}يمكنك وضع شبكات فرعية متعددة. الاستثناء الملحوظ هو أن الشبكات الفرعية ترث خاصية شبكة الفجوة الأصل. سينتج عن ذلك إنشاء جميع الشبكات الفرعية بنفس خصائص الفجوة داخل كل شبكة رئيسية.
أفضل شيء عن الشبكات الفرعية هو أنها سريعة الاستجابة وقابلة للتعديل وقابلة للتطوير.
توافق المتصفح: Firefox
2. خاصية نسبة العرض إلى الارتفاع
يمكنك التخلص من جميع مشكلات الضبط والحساب عن طريق تغيير نسبة العرض إلى الارتفاع لحاوية معينة. إذا كنت تهدف إلى إدراج مقطع فيديو ، فكل ما عليك فعله هو إصلاح نسبة العرض إلى الارتفاع بالنسبة لحجم الشاشة المتغير. ولكن ، أثناء العمل مع شبكات متعددة الأبعاد ثنائية الأبعاد ، هناك فرص لحدوث تجاوزات وعرض افتراضي.
يمكنك إصلاحه من خلال دعم خاصية نسبة العرض إلى الارتفاع بسمة العرض. يصبح مفيدًا للصور سريعة الاستجابة حيث يمكنك تحديد الارتفاع أو العرض.
إليك كيفية تنفيذ خاصية نسبة العرض إلى الارتفاع:
.وعاء {
العرض: 700 بكسل ؛
نسبة العرض إلى الارتفاع: 16/9 ؛
الخلفية: RGB (72 ، 170 ، 137) ؛
}
يمكنك أيضًا إدخال نسبة العرض إلى الارتفاع: تلقائي بدلاً من تحديد النسبة. يتمثل الجانب السلبي للقيمة التلقائية الافتراضية في أن المتصفح سيختار البعد الأصلي للصورة. مما لا شك فيه أنه يعيق استجابة الموقع.
توافق المتصفح: Chrome و Edge و Firefox (جزئي)
3. فليكس بوكس جاب
تعتبر فجوة الشبكة شائعة جدًا لإنشاء مساحة متساوية بين كل شبكة. ولكن ، كان من المفترض أن تقوم بتطبيق هوامش سالبة ومحددات فئة زائفة ومحددات معقدة للتعامل مع المسافة بين كل عناصر مرنة. وبالتالي ، ينتج عن فجوة Flexbox سطورًا أقل من التعليمات البرمجية مع قابلية تطوير أعلى.
إليك كيفية تنفيذ فجوة flexbox:
.وعاء {
العرض: 700 بكسل ؛
الارتفاع: 500 بكسل ؛
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
فجوة: 1em ؛
}انتاج:
توافق المتصفح: جميع المتصفحات الرئيسية ، بما في ذلك Chrome و Edge و Firefox.
يساعد التمرير في مشاركة المزيد من المعلومات حول موقع ويب واحد دون ازدحام نسخة الويب. لكن الجانب السلبي الرئيسي للتمرير هو أنه قد يتوقف عند نصف الفقرة أو الصورة. في بعض الأحيان ، يتم ترك التحكم في المحتوى المقسم إلى صفحات في منتصف الطريق. يتم استخدام JavaScript بعناية لتجنب تخصيص التمرير. لكنها لم تكن نتيجة مرضية تمامًا حتى جاء CSS Scroll Snap.
باستخدام Scroll Snap ، يمكنك تحديد حدود معينة لإصلاح تخطيط ورؤية حاوية معينة. على سبيل المثال ، إنه يعمل بشكل رائع لإنشاء دائري وأقسام محددة لموقع الويب. لاحظ أنك لن تحتاج إلى JS لأي تعديل.
إليك كيفية تنفيذ التمرير المفاجئ:
.وعاء {
العرض: 100٪؛
الارتفاع: 100٪؛
عرض: فليكس ؛
تجاوز x: التمرير ؛
نوع التمرير المفاجئ: x إلزامي ؛
}
القطاع الثامن {
المرن: لا شيء ؛
عرض: فليكس ؛
محاذاة العناصر: مركز ؛
تبرير المحتوى: مركز ؛
حجم الخط: 15em ؛
عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
محاذاة التمرير المفاجئة: نهاية ؛
العرض: 100٪؛
الارتفاع: 100٪؛
}انتاج:
يحتوي CSS scroll snap على خاصيتين أصليتين وفرعيتين. تحدد الخاصية الأصل أو الحاوية اتجاه التمرير (س أو ص) وسلوك التمرير المفاجئ. على سبيل المثال ، يمكنك تعيين نوع التمرير المفاجئ: x إلزامي. سيمنح المستخدم التحكم في تحديد نقطة التمرير دون مراعاة موضع التمرير.
من ناحية أخرى ، فإن Scroll-snap-type: y يعمل التقارب فقط عندما يكون زائر الموقع أقرب إلى نقطة التمرير.
الخاصية الفرعية هي scroll-snap-align لمحاذاة العناصر أثناء التمرير المفاجئ CSS. يقوم بإدخال قيم البداية والنهاية والمركز لمحاذاة العناصر وفقًا لذلك.
5. استعلامات الميزات
تُستخدم استعلامات الميزات للتعامل مع التدهور اللطيف. على سبيل المثال ، تحظى شبكات CSS بشعبية كبيرة في الوقت الحاضر. لكن من الجدير بالذكر أن المتصفحات القديمة لا يمكنها عرضها.
هنا ، تتحقق استعلامات الميزات مما إذا كان هذا المتصفح المعين يدعم خاصية معينة أم لا و يوفر نظام دعم يشجع الإشارة إلى خاصية CSS فقط إذا كانت مدعومة على ذلك المتصفح. خلاف ذلك ، تعتبر القيمة الافتراضية. في هذه الحالة ، يمكنك وضع كتل بدلاً من الشبكات لأي رجوع متوقع.
إليك كيفية تنفيذ استعلامات الميزات:
supports (content-visibility: auto) {
الجسم{
الخلفية: البط البري.
العرض: 100٪؛
الارتفاع: 100٪؛
}
}لذلك ، فقط تلك المستعرضات التي تعرض خصائص رؤية المحتوى سيكون لها لون خلفية أزرق مخضر ؛ خلاف ذلك ، سيتم النظر في القيمة الافتراضية. لاحظ أن @ يشبهmedia لاستعلامات الوسائط ، حيث كان من المفترض أن تقوم بتعيين أقصى عرض أو أدنى عرض لعمليات الضبط المؤقتة. إنه يبسط تذكر استعلامات الميزةsupports.
اقرأ أكثر: كيفية استخدام استعلامات الوسائط في HTML و CSS
توافق المتصفح: جميع المتصفحات الرئيسية ، بما في ذلك Chrome و Edge و Firefox.
6. خاصية رؤية المحتوى
يعمل العرض السريع باعتباره العمود الفقري لموقع ويب تفاعلي للمستخدم. مع تزايد شعبية الأجهزة المحمولة ، يعمل أداء عرض موقع الويب بمثابة عنق الزجاجة للحصول على موقع ويب جذاب.
هنا ، تلعب خاصية رؤية المحتوى دورًا مهمًا. لأنه ، افتراضيًا ، تعرض المتصفحات جميع عناصر موقع الويب مرة واحدة. إنه يقلل من وقت التحميل والأداء العام للموقع ، خاصة إذا كان موقع الويب الخاص بك يحتوي على العديد من الرسوم المتحركة الثقيلة. من ناحية أخرى ، تعرض خاصية content-visibility عناصر منفذ العرض فقط وتعرض العناصر الأخرى أثناء التمرير في جميع أنحاء الصفحة.
#رئيسي {
رؤية المحتوى: تلقائي ؛
/ * تحتوي على الحجم الجوهري: 0 500 بكسل ؛ */
}تُدخل خاصية رؤية المحتوى ثلاث قيم. رؤية المحتوى: لا يظهر أي تأثير أثناء رؤية المحتوى: المخفي مشابه للعرض: لا شيء حيث يتخطى العنصر المحتويات التي يتعذر الوصول إليها. رؤية المحتوى: يتخطى تلقائيًا المحتوى غير ذي الصلة ، ولكنه متاح كصفحة عادية لميزات وكيل المستخدم.
دعونا نقيس قوة رؤية المحتوى. ها هي النتيجة:
7. الانتقال والتحويل والرسوم المتحركة
في CSS ، لدينا طريقتان لتطبيق الرسوم المتحركة. يستخدم الانتقال لإجراء تغييرات سلسة في الخصائص المرئية للعناصر. من ناحية أخرى ، بدون انتقال ، سيتلاعب التحول فجأة من دولة إلى أخرى.
تُستخدم الرسوم المتحركة معkeyframes التي تعين الأنماط في عدة نقاط أثناء مدة الرسوم المتحركة. الشيء المثير للاهتمام هو ذلك keyframes يحدد متى سيحدث التغيير، يتولى التحويل والرسوم المتحركة التحكم في التغيير ، ويهتم الانتقال بكيفية حدوث التغيير (على سبيل المثال ، تأثيرات التمرير).
.طفل {
الخلفية: البط البري.
الارتفاع: 150 بكسل ؛
العرض: 150 بكسل ؛
اللون الابيض؛
الانتقال: تحويل 0.2 ثانية بسهولة إلى الخارج ؛
الرسوم المتحركة: myAnimation 2s لانهائي ؛
}
.child: مرر {
تحويل: مقياس (2 ، 2) استدارة (45 درجة) ؛
}
keyframes myAnimation {
0% {
}
50% {
تحويل: translateX (400 بكسل)
}
100% {
تحويل: translateX (0px)
}
}توافق المتصفح: جميع المتصفحات الرئيسية ، بما في ذلك Chrome و Edge و Firefox.
تغليف
يتطور ترميز ورقة الأنماط المتتالية باستمرار مع ميزات أفضل. حتى الآن ، تعرفت على هذه الميزات السبع الرائعة التي تتضمن شبكة CSS الفرعية ، وخاصية نسبة العرض إلى الارتفاع ، فجوات Flexbox ، والتمرير المفاجئ ، واستعلامات الميزة ، وخاصية رؤية المحتوى ، والانتقال ، والتحويل ، و الرسوم المتحركة.
في نهاية اليوم ، عليك التأكد من الميزات التي تعمل على تبسيط تصميم موقع الويب الخاص بك.
إذا كنت تقوم بتطوير مواقع الويب والتطبيقات باستخدام إطار عمل Bootstrap CSS ، فإليك الجديد في Bootstrap 5.
اقرأ التالي
- برمجة
Naincy متخصصة في بناء مواقع ويب سريعة الاستجابة واستراتيجية محتوى فعالة إلى جانب نسخ الويب. إنها كاتبة تقنية مستقلة تراقب التقنيات الشائعة.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
خطوة أخرى أيضا…!
يرجى تأكيد عنوان بريدك الإلكتروني في البريد الإلكتروني الذي أرسلناه لك للتو.
