قد يكون لديك”https://webkit.org/blog/17660/introducing-css-grid-lanes/”> سمعت مؤخرا أن Safari Technology Preview 234 قد حصل على الخطة النهائية لدعم تخطيطات نمط البناء في CSS. يطلق عليه ممرات الشبكة.
ممرات شبكة CSS يضيف قدرة جديدة تمامًا إلى CSS Grid. يتيح لك ترتيب المحتوى في أيضاً الأعمدة أو الصفوف – وليس كلاهما.
يتيح نمط التخطيط هذا تجميع المحتوى بنسب العرض إلى الارتفاع المختلفة معًا. لم تعد بحاجة إلى اقتطاع المحتوى بشكل مصطنع لجعله مناسبًا. بالإضافة إلى ذلك، يتم تجميع المحتوى الموجود مسبقًا في HTML معًا في بداية الحاوية. إذا تم تحميل العناصر الجديدة ببطء، فإنها تظهر في النهاية دون تعديل ما هو موجود بالفعل على الشاشة.
قد يكون من الصعب فهم نمط تدفق المحتوى أثناء تعلمك لـ Grid Lanes. لا يتدفق المحتوى إلى أسفل العمود الأول إلى أسفل الحاوية، ثم يعود إلى أعلى العمود الثاني. (إذا كنت تريد هذا النمط، استخدم”https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Multicol_layout”> CSS متعدد الأعمدة أو فليكس بوكس.)
باستخدام Grid Lanes، يتدفق المحتوى بشكل عمودي على شكل التخطيط الذي قمت بإنشائه. عند تحديد الأعمدة، يتدفق المحتوى ذهابًا وإيابًا عبر تلك الأعمدة، تمامًا كما لو كانت الصفوف موجودة. إذا قمت بتحديد صفوف، فسوف يتدفق المحتوى لأعلى ولأسفل عبر الصفوف – في اتجاه العمود، كما لو كانت الأعمدة موجودة.
إن وجود طريقة لرؤية ترتيب العناصر يمكن أن يسهل فهم تدفق المحتوى هذا. تقديم CSS Grid Lanes Inspector في Safari. إنه مجرد Grid Inspector العادي، والآن مع المزيد من الميزات.
سفاري”https://webkit.org/blog/11588/introducing-css-grid-inspector/”> مفتش الشبكة يكشف بالفعل عن خطوط الشبكة الخاصة بممرات الشبكة، ويسمي أحجام المسارات وأرقام الخطوط وأسماء الخطوط وأسماء المناطق. الآن لديها ميزة جديدة – “أرقام الطلب”.
من خلال تشغيل أرقام الطلب في المثال أعلاه، يمكننا أن نرى بوضوح كيف تتدفق العناصر 1 و2 و3 و4 عبر الأعمدة، كما لو كان هناك صف. ثم يكون العنصر 5 في منتصف اليمين، يليه العنصر 6 في أقصى اليمين، وهكذا.
قد تميل إلى الاعتقاد بأن ترتيب المحتوى لا يهم. مع صفحات مثل معرض الصور هذا — لن يكون لدى معظم المستخدمين أي فكرة عن كيفية ترتيب الصور بتنسيق HTML. ولكن بالنسبة للعديد من المستخدمين، فإن ترتيب المحتوى له تأثير كبير على تجربتهم. يجب أن تفكر دائمًا في كيفية التنقل عبر المحتوى – حيث يتم التركيز على عنصر تلو الآخر بشكل تسلسلي. ضع في اعتبارك ما يعنيه الاستماع إلى الموقع من خلال قارئ الشاشة أثناء التنقل باللمس أو لوحة المفاتيح. مع Grid Lanes، يمكنك التعديل”https://webkit.org/blog/17660/introducing-css-grid-lanes/#:~:text=FlowTolerance”>flow-tolerance لتقليل القفز ووضع العناصر في المكان الذي يتوقعه الناس.
لمعرفة القيمة التي يجب اختيارها لتحمل التدفق، من المفيد حقًا رؤية ترتيب العناصر بسرعة. وهذا يوضح على الفور كيف يؤثر CSS الخاص بك على النتيجة.
تُعد أرقام الطلب في Grid Inspector امتدادًا لميزة توفرها Safari’s Flexbox Inspector”https://webkit.org/blog/13152/webkit-features-in-safari-16-0/#:~:text=Safari16.0addsFlexboxInspector.”> منذ سفاري 16.0 – تحديد ترتيب العناصر المرنة. تعتبر رؤية ترتيب المحتوى مفيدة أيضًا عند استخدام order الملكية في Flexbox.
تعمل أرقام الطلب في Grid Inspector في Safari مع CSS Grid وSubgrid، بالإضافة إلى Grid Lanes.
جرّب أدوات التخطيط في Safari
قد يبدو مفتشو تخطيط Grid وFlexbox متشابهين عبر المتصفحات، لكن الفريق الذي يقف وراء Web Inspector في Safari استغرق وقتًا لصقل التفاصيل بدقة. في كل من Grid وFlexbox Inspectors، يمكنك في نفس الوقت تنشيط أي عدد تريده من التراكبات. لا حدود. ولا يوجد تمرير غير مرغوب فيه بسبب صراعات الأداء.
يميز Flexbox Inspector في Safari بصريًا بين المساحة الحرة الزائدة والفجوات المرنة، نظرًا لأن معرفة أي منها يمكن أن يحل الالتباس. فهو يوضح حدود العناصر، ويكشف كيفية توزيعها على المحور الرئيسي والمحور العرضي لحاويات Flexbox. وهو يسرد جميع حاويات Flexbox، مما يسهل فهم ما يحدث بشكل عام.
يتمتع Grid Inspector لدينا بواجهة بسيطة وواضحة، مما يجعل من السهل فهم الخيارات. كما أنه يسرد كافة حاويات الشبكة. وبالطبع، يمكنك تغيير الألوان الافتراضية للتراكبات، لتتناسب بشكل أفضل مع محتوى موقعك.
وSafari’s Grid وFlexbox Inspectors هما أدوات تطوير المتصفح الوحيدة التي تحدد ترتيب المحتوى. نأمل أن تساعدك رؤية ترتيب المحتوى في Grid Lanes على فهمه بشكل أكثر شمولاً والاستمتاع باستخدام آلية التخطيط الجديدة القوية هذه.
جرب أرقام الطلب
تم شحن أرقام الطلب في Safari’s Grid Inspector اليوم في Safari Technology Preview 235. أخبرنا برأيك. لا يزال هناك وقت لصقل التفاصيل لجعل الأداة الأكثر فائدة ممكنة. يمكنك تنفيذ الأمر ping على جين سيمونز”https://bsky.app/profile/jensimmons.bsky.social”>بلوسكي أو”https://front-end.social/@jensimmons”> المستودون مع الروابط والتعليقات والأفكار.