**الخصائص المنطقية (Logical Properties)** هي خصائص CSS حديثة تعتمد على اتجاه الكتابة بدلاً من الاتجاه الفيزيائي (يسار/يمين). مثالية للمواقع متعددة اللغات (عربي + إنجليزي).
**بدلاً من left/right/top/bottom، استخدم:**
| الفيزيائي | المنطقي | |---|---| | margin-left/right | margin-inline-start/end | | margin-top/bottom | margin-block-start/end | | padding-left | padding-inline-start | | padding-right | padding-inline-end | | top, bottom | block-start, block-end | | left, right | inline-start, inline-end | | width | inline-size | | height | block-size | | border-left | border-inline-start |
**الاختصارات:** `margin-inline: 16px` = margin-inline-start + margin-inline-end `margin-block: 16px` = margin-block-start + margin-block-end `inset-inline: 0` = left: 0 + right: 0
| 1 | /* بدلاً من margin-left/right */ |
| 2 | .item { margin-inline: auto; } /* توسيط أفقي */ |
| 3 | |
| 4 | /* بدلاً من padding-left */ |
| 5 | .nav-item { padding-inline-start: 16px; } |
| 6 | |
| 7 | /* بدلاً من left/right */ |
| 8 | .icon { inset-inline-end: 12px; } /* يمين في LTR، يسار في RTL */ |
| 9 | |
| 10 | /* بدلاً من border-right */ |
| 11 | .sidebar { border-inline-end: 1px solid var(--border); } |
مثال 1: مكوّن يدعم LTR وRTL تلقائياً
| 1 | .card { |
| 2 | padding-block: 20px; /* أعلى وأسفل */ |
| 3 | padding-inline: 24px; /* يسار ويمين (أو عكس في RTL) */ |
| 4 | border-inline-start: 4px solid var(--color-primary); |
| 5 | margin-block-end: 16px; |
| 6 | } |
| 7 | |
| 8 | .nav-item { |
| 9 | padding-inline: 12px; /* مسافة على جانبي النص */ |
| 10 | margin-inline-end: 4px; /* مسافة بعد كل عنصر */ |
| 11 | } |
| 12 | |
| 13 | .close-btn { |
| 14 | position: absolute; |
| 15 | inset-block-start: 16px; /* top */ |
| 16 | inset-inline-end: 16px; /* right في LTR, left في RTL */ |
| 17 | } |
| 18 | |
| 19 | /* قائمة */ |
| 20 | .list-item::before { |
| 21 | content: ""; |
| 22 | margin-inline-end: 8px; /* مسافة بعد النقطة */ |
| 23 | } |