При проектировании веб-сайтов, обслуживание как к языкам слева направо (LTR), так и на леле (RTL), необходимо для глобальной аудитории. В то время как большинство разработчиков знакомы с использованием левого края и правой маржи для корректировки макета, эти свойства не хватают в средах, где изменяется направление текста. Введите Margin-Inline-Start и его логические аналоги-современные свойства CSS, которые упрощают проектирование для многоязычного и двунаправленного контента.

В этой статье мы рассмотрим, как переход от маржи левого/правого маржи на маржу-встроенную и маржинальную концентрацию повышает гибкость и поддерживает согласованность на языках LTR и RTL.

понимание логических свойств в CSS

традиционные свойства CSS, такие как левые маржи и правая маржи, являются физическими свойствами, то есть их поведение связано с визуальным левым и правом экрана. Это прекрасно работает для таких языков LTR, как английский, но создает проблемы, когда направление страницы переключается на RTL, например, на арабском или иврите.

логические свойства, представленные в CSS3, являются направлением. Они адаптируются на основе режима записи документа или элемента. Ключевые свойства логической маржи включают:

• Margin-Inline-Start: заменяет левый маржи для LTR и Reth-Right для RTL.
] • Margin-Inline-end: заменяет правую маржу для LTR и Margin-Lefft для RTL.

эти свойства лучше соответствуют естественному потоку двунаправленного текста, что делает их незаменимыми для интернационализированного веб -дизайна.

зачем использовать Margin-Inline-Start?

1 - бесшовная поддержка RTL
] Когда вы используете левую маржу, он всегда применяет край к левой стороне элемента, независимо от направления текста. Такое поведение не меняется, даже когда страница переключается на RTL, что приводит к смещенным макетам. В отличие от этого, маржин-строка адаптируется на основе направления текста, применяя маржу к соответствующей стороне:
]

/* Logical property */
.element {
 margin-inline-start: 20px;
}
/* Equivalent to */
:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

2 - Cleaner Code
Без логических свойств поддержка как LTR, так и RTL потребует стилей для конкретного направления, добавляя сложность и потенциал для ошибок. Вот сравнение:

традиционный подход:

:root[dir="ltr"] .element {
 margin-left: 20px;
}
:root[dir="rtl"] .element {
 margin-right: 20px;
}

современный подход:

.element {
 margin-inline-start: 20px;
}

3 - будущее и масштабируемое
] Логические свойства являются частью продолжающейся эволюции CSS к адаптивной и гибкой макетах. Принимая маржу-внедорожник, вы соглашаете свои проекты с современными стандартами, делая их более масштабируемыми и поддерживаемыми.

пример реального мира

Вот как вы можете рефакторировать типичную компоновку карты для лучшей поддержки RTL:
Перед: Использование маржи-левого
]

.card {
 margin-left: 1rem;
 padding-left: 2rem;
}

в RTL макет будет выглядеть, потому что расстояние остается фиксированным с левой стороны.
] After: Использование Margin-Inline-Start
]

.card {
 margin-inline-start: 1rem;
 padding-inline-start: 2rem;
}

Теперь поля и положения приспосабливаются автоматически при изменении направления, обеспечивая постоянный пользовательский опыт.

Поддержка браузера

Логические свойства хорошо поддерживаются в современных браузерах, включая Chrome, Edge, Firefox и Safari. Если вам нужно поддерживать более старые браузеры, рассмотрите возможность использования запасных средств:
]

.card {
 margin-left: 1rem; /* Fallback */
 margin-inline-start: 1rem;
}

final Monds

переключение на логические свойства, такие как Margin-Inline-Start,-это небольшое изменение, которое оказывает большое влияние на доступность, обслуживаемость и интернационализацию. По мере того, как Интернет становится все более глобальным, принятие этих свойств гарантирует, что ваши проекты являются инклюзивными и адаптированными для пользователей по всему миру.

, так что в следующий раз, когда вы достигнете левого поля, сделайте паузу и рассмотрите: будет ли маржа-встроенный старт лучше? Скорее всего, это будет.

счастливое кодирование, и пусть ваши дизайны прекрасно текут на любом языке!