ترويسة الموقع وشريط التنقّل
Site Header and Navbar<header> + <nav>
اسمه كمانالهيدر، شريط التنقّل العلوي، ترويسة الصفحة، نافبار، الشريط العلوي، قائمة التنقّل الرئيسية، navbar، top nav، site header، masthead، primary navigation، app bar
الترويسة هي الشريط الممتدّ في أعلى الصفحة، والعنصر <header> الذي يحملها يصير معلَم banner من تلقاء نفسه ما دام ليس داخل <article> أو <aside> أو <main> أو <nav> أو <section>. أمّا شريط التنقّل فهو صفّ روابط الأقسام الجالس داخل ذلك الشريط، ويُكتب <nav> فيصير معلَم navigation. الاسمان يتبادلان في كلام المطوّرين كل يوم، والفرق بينهما قاعدة عدّ: في الصفحة معلَم banner واحد لا غير، بينما يجوز أن يكون فيها عدّة عناصر <nav> بشرط أن يحمل كل واحد منها aria-label يميّزه. والترويسة ليست شريط تبويبات، لأن التبويبات تبدّل محتوى لوحة داخل الصفحة نفسها بلا عنوان URL جديد، بينما روابط الترويسة تنقل المستخدم بين صفحات. وليست شريط أدوات، فـ role="toolbar" يجمع أزراراً تعمل على المحتوى المعروض ويُتنقَّل بينها بالأسهم داخل موضع Tab واحد. وليست menubar، وهو أكثر الأدوار التي يُساء استعمالها هنا، لأنه يفرض نمط قوائم تطبيقات سطح المكتب على ما هو في حقيقته قائمة روابط. والشريط الجانبي يعرض شجرة الأقسام كاملة، أمّا الترويسة فتعرض المقاصد العليا التي تتكرّر في كل صفحة.
لو قلت عليه…
العيّنة الحيّة
تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.
أنت الآن في
الصفحة الرئيسية
تشريح العنصر: كل جزء واسمه
مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.
برومبت البناء
سلوكه في الاتجاه من اليمين لليسار
الجزء ده حصري عندنا.
ترتيب الشريط
ينعكسترتيب المصدر واحد في الاتجاهين: الشعار، ثم قائمة الروابط، ثم الإجراءات. حاوية flex تصفّها على المحور المضمّن، والمحور المضمّن ينقلب مع dir وحده، فإضافة flex-direction: row-reverse داخل [dir="rtl"] انعكاس ثانٍ يعيد الشعار إلى اليسار ويجعل ترتيب Tab مخالفاً لما تراه العين. وادفع مجموعة الإجراءات إلى الطرف بـ margin-inline-start: auto، أمّا margin-left: auto فيبتلع في RTL الفراغ من الجهة الخطأ، ويسحب المجموعة نحو قائمة الروابط بدل أن يدفعها إلى الحافّة.
حشو قائمة الروابط
ينعكسالعنصر <ul> يأتي من ورقة أنماط المتصفّح بحشو ابتدائي مقداره 40px، وهو مكتوب اليوم بـ padding-inline-start في كروم وفايرفوكس وسفاري. لذلك تنجح إعادة الضبط الشائعة padding-left: 0 في الإنجليزية وتترك أربعين بكسل عالقة عند يمين القائمة في العربية، فتبدو الروابط منزاحة عن الشعار بلا سبب ظاهر. اكتب padding-inline-start: 0 أو padding-inline: 0، وتحقّق من القيمة المحسوبة في أدوات المطوّر لا من ملفّ الأنماط.
القائمة المنسدلة من عنصر تنقّل
ينعكساللوحة النازلة من رابط في الشريط تحاذي بدايته المنطقية: inset-inline-start: 0 على اللوحة المطلقة داخل عنصر القائمة، لا left: 0. وإن حسبت الموضع بجافاسكربت فتذكّر أن getBoundingClientRect().left فيزيائية دائماً ولا تعرف اتجاه الصفحة، فالمحاذاة الصحيحة في RTL تُبنى على قيمة right من الكائن نفسه. ومكتبة Floating UI تحلّ bottom-start و bottom-end على أساس اتجاه الكتابة بينما تبقى القيم الفيزيائية ثابتة، فاستعمل start و end واترك flip و shift يمنعان خروج اللوحة من الشاشة.
مبدّل اللغة
لا ينعكسموضع المبدّل داخل مجموعة الإجراءات لا يتغيّر بين النسختين، فلا تكتب [dir="rtl"] .lang { order: -1 } لتنقله إلى ركن آخر؛ من يمدّ يده إليه غالباً لا يقرأ لغة الصفحة المعروضة، وعنصر يتنقّل بين الأركان عنصر يبحث عنه المستخدم في كل مرّة. واضبط الاتجاه الجديد بسمة dir على <html> لا بـ direction: rtl في ورقة الأنماط، لأن المحدّد :dir() ومحدّدات [dir="rtl"] وأي سكربت يقرأ document.dir كلها تقرأ السمة وحدها ولا ترى قيمة CSS. واكتب اسم كل لغة بحروفها، «العربية» و English، وضع lang="en" على النصّ اللاتيني حتى لا ينطقه قارئ الشاشة بصوت عربي.
زرّ القائمة ولوحته
ينعكسزرّ القائمة آخر عنصر في ترتيب المصدر، فيقع عند النهاية المنطقية للشريط، أي عند اليسار في العربية، بلا قاعدة خاصّة بالاتجاه ودون هامش تلقائي ثانٍ يتقاسم الفراغ مع مجموعة الإجراءات. واللوحة التي يفتحها ترسو بـ inset-inline-end: 0 وتدخل من الحافّة نفسها، لكن transform بلا صيغة منطقية: اكتب translateX(calc(100% * var(--dir))) واضبط --dir: -1 داخل [dir="rtl"]، وإلا دخلت اللوحة من الجهة المقابلة وعبرت الشاشة كلها أمام المستخدم. والخطوط الثلاثة في الأيقونة أفقية متساوية فلا يغيّر قلبها شيئاً، أمّا سهم القائمة الفرعية فيشير على المحور المضمّن ويُقلب مع الصفحة.
أسماؤه في الكود
كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.
شوف كمان
آخر تحديث · 2026-08-19