بناء تخطيطات مرنة ومرنة لم يكن سهلا أبدا ، ولكن من المؤكد أن CSS3 أخذ الكثير من الصداع.
ميزات CSS3 مثل حول flexbox و أعمدة جعلت بعض التصاميم المعقدة إمكانية حقيقية ، والآن انضم إليهم أحد أحدث الإضافات إلى مربع أدوات مصمم الويب: مناطق CSS.
تتيح لك مناطق CSS تدفق المحتوى إلى سلسلة من الحاويات في صفحة واحدة. إنه ما يعادل ربط مربعات النص في تطبيق مثل InDesign. يجعل من الممكن بعض التنسيقات التي كانت ممكنة في السابق فقط عن طريق طمس الخط الفاصل بين البيانات والأنماط.
كما هو الحال دائمًا ، يعد دعم المتصفح بعيدًا عن الكمال.
لا تزال مناطق CSS مسودة ، مما يعني أنها تجريبية. في البداية كان المتصفح الوحيد الذي يدعمه هو Internet Explorer 10 (لا ، أنا لا أمزح) ؛ بالرغم من استخدام IE10 لإطار iframe كمصدر محتوى.
يزعم Safari تقديم الدعم ببادئة.
في Chrome ، يمكنك اختبار الميزة من خلال فتح المتصفح وكتابة "about: flags" وتنشيط "enable-experimental-webkit-features" ، ثم إعادة تشغيل المتصفح.
لحسن الحظ هناك أيضا جافا سكريبت بوليفار تم إنشاؤه بواسطة Adobe ليوفر وظائف مناطق CSS إلى المتصفحات التي لا تدعمها حاليًا ، يمكنك العثور عليها جيثب.
نظرًا لأن الغرض من أقاليم CSS هو السماح بنقل النص عبر حاويات مختلفة ، فإن أول ما تحتاج إليه هو بعض النصوص:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.ثم بعض الحاويات:
الآن لدينا إعداد المحتوى الأساسي ، يمكننا ربط الحاويات باستخدام التدفق في التدفق ، ستلاحظ في المثال لقد قمت بإضافة -webkit- البادئة.
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}إذا قمت بالتحقق من ذلك في متصفح سترى أن النص سيتدفق فقط من مربع إلى آخر. إذا قمت الآن بوضع تلك الحاويات ، فسيستمر النص في التدفق بشكل صحيح.
-webkit-flow-into: text-flow;تقبل هذه الخاصية معرفًا كقيمة. عندما تقوم بتمرير قيمة لهذه الخاصية ، تصبح جزءًا من تدفق مسمى ، وستتوقف عن العرض كجزء من تدفق الصفحة. يمكنك إلغاء ذلك عن طريق تعيين الخاصية إلى لا شيء.
يعد اسم التدفق الذي تستخدمه تعسفيًا ، فقط تأكد من ثباتك. يمكن أن يكون لدينا أيضًا عناصر متعددة بنفس تدفق الاسم كما هو مذكور في المثال أعلاه.
لا يقتصر هذا على النص ، يمكننا أيضًا تدفق الصور والقوائم وأنواع أخرى كثيرة من محتوى HTML.
-webkit-flow-from: text-flow;نحن نستخدم هذه الخاصية لتحديد أي عنصر (عناصر) يجب أن يتلقى التدفق المحدد.
القيمة هي اسم التدفق الذي حددناه للموقع المتدفق .
ضع في اعتبارك أنه سيتم الاحتفاظ بأي أنماط محتوى تقوم بتطبيقها على النص الأصلي عبر التدفق. لذا إذا قمت بتلوين النص باللون الأزرق ، فستظل باللون الأزرق عبر جميع الحاويات.
للاطلاع على مثال على مناطق CSS قيد التنفيذ ، يمكنك إلقاء نظرة على هذا القلم صنعت.
إن دعم المتصفح لأقاليم CSS ضعيف حاليًا ، وهناك طريق طويل يجب أن نقطعه قبل أن نتمكن من الاعتماد عليه على أساس يومي. ولكن ، المرونة التي يقدمها رائعة ، وبمجرد توفر الدعم الكامل ، أعتقد أن مناطق CSS ستكون هي الأسلوب المفضل لسنوات قادمة.
هل أنت متحمس من قبل مناطق CSS؟ متى تعتقد أننا سنكون قادرين على استخدامها؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة الشلال عبر cuatrok77.