أعمدة متعددة تخطيط (مجلة على حد سواء) مع CSS3
بشكل عام ، سيفقد الأشخاص مسارهم عند قراءة محتوى طويل للغاية. لهذا السبب ، في الوسائط المطبوعة مثل المجلات والصحف ، يتم تقسيم المحتوى إلى أعمدة متعددة لسهولة القراءة.
إنشاء عمود على الويب هو قصة مختلفة تمامًا. انه صعب للغاية. في الحقيقة ، منذ وقت ليس ببعيد قد تحتاج إلى تقسيم المحتوى يدويًا إلى البعض شعبةs وقم بتعويمها إلى اليمين أو اليسار ، ثم حدد العرض والحشو والهامش والحدود وما إلى ذلك.
ولكن ، الآن أصبحت الأمور مبسطة بشكل كبير مع CSS3 وحدة متعددة الأعمدة. كما يوحي الاسم بوضوح ، تسمح لنا هذه الوحدة بتقسيم المحتوى إلى التصميم ذي الأعمدة الذي نراه في الصحف أو المجلات.
دعم المتصفح
يتم دعم أعمدة متعددة حاليًا في جميع المتصفحات - Firefox 2+ و Chrome 4+ و Safari 3.1+ و Opera 11.1 - باستثناء ، كما هو متوقع ، Internet Explorer ، ولكن الإصدار التالي ، IE10 ، يبدو أنه بدأ في توفير الدعم لهذه الوحدة.
بالنسبة لبقية المتصفحات ، حتى تعمل فايرفوكس ، لا يزال يحتاج إلى -MOZ- بادئة ، في حين أن كروم وسفاري بحاجة إلى -بكت- اختصار. لا يتطلب Opera أي بادئات ، لذلك يمكننا فقط استخدام الخصائص الرسمية.
مصدر: متى يمكنني استخدام تخطيط العمود CSS3 متعددة?
إنشاء عمود متعدد
قبل أن ننشئ الأعمدة ، قمنا بإعداد بعض فقرات النص للعرض ، ملفوفة داخل HTML5 العلامة ، على النحو التالي ؛
أبجد هوز دولور الاعتصام ، consectetur adipiscing النخبة. Nunc libero magna، venenatis quis aliquet et، rutrum in augue. دونيك فيل tempor dolor. Donec volutpat fringilla porta. Suspendisse غير nulla tortor. Quisque commodo ornare mi، sit amet aliquet justo bibendum non. عدد صحيح bibendum convallis sapien ، والجلوس اميت tincidunt orci placerat فيها. //وما إلى ذلك وهلم جرا
... وحدد العرض لـ 600px ل من ورقة النمط ، هذا كل شيء.
الآن ، لنبدأ في إنشاء الأعمدة.
في المثال أدناه ، سنقسم المحتوى إلى عمودين مع ال العمود العد خاصية. ستخبر هذه الخاصية المستعرض بأن يعرض المحتوى في أعمدة حسب الرقم المحدد وأن يسمح للمتصفح بتحديد العرض المناسب لكل عمود.
مقالة -webkit-column-count: 2؛ -moz عمود العد: 2؛ العمود العد: 2؛
بصرف النظر عن كونه محددًا بالعدد ، يمكن إنشاء الأعمدة عن طريق تحديد العرض باستخدام عرض العمود الملكية وترك المتصفح لتحديد عدد الأعمدة التي يجب إنشاؤها في مكانها.
في هذا المثال ، نحدد عرض العمود لـ 150px, مما أدى إلى تقسيم المحتوى إلى ثلاثة أعمدة.
مقالة -moz-column-width: 150px؛ - عرض الويب - العمود: 150 بكسل ؛ عرض العمود: 150 بكسل ؛
كما جاء في المواصفات. قد يكون العرض الفعلي للعمود أكبر أو أضيق من عرض العمود المحدد وفقًا للمساحة المتاحة. أيضا ، إذا لم يتم تحديد قيمة العرض بشكل صريح ، فإن “تلقاءي” سوف تؤخذ على النحو الافتراضي ، وهو ما قد يعني أيضا “لا عمود”.
فجوة العمود
فجوة العمود تحديد المسافات التي تفصل كل عمود. يمكن ذكر قيمة الفجوة في م أو بكسل, ولكن كما هو مذكور في المواصفات لا يمكن أن تكون القيمة سالبة. في المثال أدناه ، نحدد الفجوة لـ 30px, وبالتالي فإن المسافات بين الأعمدة تبدو أوسع قليلاً.
مقالة -webkit-column-gap: 30px؛ - عمود عمود الفجوة: 30 بكسل ؛ فجوة العمود: 30 بكسل ؛
حكم العمود
إذا كنت ترغب في إضافة حدود بين العمود ، يمكنك استخدام العمود القاعدة الممتلكات ، والتي تعمل مشابهة جدا ل الحدود خاصية. دعنا نقول ، إذا أردنا وضع حد منقط بين العمود ، فيمكننا الكتابة ؛
مقالة -moz-column-rule: 1px dotted #ccc؛ -webkit-column-rule: 1px dotted #ccc؛ عمود القاعدة: 1px dotted #ccc؛
العمود سبان
هذه الخاصية تعمل تشبه الى حد بعيد كولسبان في الطاولة العلامة. التنفيذ المشترك لهذه الخاصية هو امتداد عنوان المحتوى عبر جميع الأعمدة. هنا مثال.
المادة h1 -webkit-column-span: all؛ العمود تمتد: جميع؛
في المثال أعلاه حددنا H1 لتمتد عبر جميع الأعمدة ، وإذا تم تحديد امتداد العمود, 1 سوف تؤخذ على النحو الافتراضي. لسوء الحظ ، هذه الخاصية ، في وقت كتابة هذا التقرير ، تعمل فقط في Opera و Chrome.
الكلمات الأخيرة
كل هذا في الوقت الحالي ، لقد توصلنا إلى جميع العناصر الأساسية لإنشاء أعمدة متعددة مع CSS3 ، وكما ذكرنا في البداية ، تعمل هذه الوحدة بشكل جيد جدًا في المتصفحات الحديثة ولكنها لا تعمل بعد في Internet Explorer.
في النهاية ، نأمل أن يكون لديك الآن فهم جيد إلى حد ما حول كيفية إنشاء أعمدة باستخدام CSS3 ، وإذا كان لديك وقت للتجارب ، فلا تتردد في مشاركة طرقك ونتائجك في مربع التعليقات أدناه. شكرا لك على قراءة هذا المنصب والمتعة.
- عرض
- تحميل المصدر
