Конвертер логических свойств CSS
Преобразуйте физические свойства CSS (margin-left, width, top, text-align: left) в их логические эквиваленты (margin-inline-start, inline-size, inset-block-start, text-align: start), или наоборот.
Ввод
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-logical-properties-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"inputCss": ".box {\n margin-left: 10px;\n margin-right: 20px…",
"direction": "physical-to-logical"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-logical-properties-converter` tool (CSS Logical Properties Converter) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-logical-properties-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Конвертер логических свойств CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что такое логические свойства CSS?
Обычные свойства box-model CSS — margin-left, padding-right, width, top — описывают макет в фиксированных физических направлениях. Это работает, пока каждая страница читается слева направо, сверху вниз. Но это ломается, когда ваш сайт поддерживает язык справа налево (арабский, иврит, персидский, урду) или вертикальный режим письма: margin-left: 16px, предназначенный для размещения до заголовка, заканчивается после него, когда макет переворачивается, потому что "левое" никогда не движется, даже если "до" изменилось.
Логические свойства описывают макет относительно потока контента, а не края экрана: inline-start/inline-end заменяют left/right, а block-start/block-end заменяют top/bottom. В стандартном горизонтальном режиме письма LTR — большей части веба — inline-start отображается как левое, поэтому визуально ничего не меняется. Но переключитесь на RTL или вертикальный режим письма, и логические свойства автоматически переориентируются с контентом, в то время как физические свойства остаются прибитыми к неправильной стороне.
Это важно даже без планов RTL сегодня: логические свойства описывают намерение ("пространство перед этим элементом в порядке чтения"), и браузеры, системы дизайна и фреймворки (включая утилиты ms-/me- Tailwind) сходятся к ним.
Как использовать этот инструмент
- Вставьте блок CSS в поле ввода — любые селекторы, комментарии и форматирование подойдут.
- Выберите направление: Физический в логический преобразует
margin-left,width,top,text-align: leftи аналогичные свойства в их логические эквиваленты; Логический в физический делает наоборот, полезно, когда вам нужны физические fallback для старых инструментов. - Преобразованный CSS появляется мгновенно. Скопируйте его или загрузите как файл
.css.
Затронуты только свойства в таблице ниже — селекторы, скобки, комментарии, неизвестные объявления и отступы проходят ровно так, как написаны.
Таблица соответствия (LTR — стандартное предположение)
| Физический | Логический |
|---|---|
margin-left / -right / -top / -bottom |
margin-inline-start / -inline-end / -block-start / -block-end |
padding-left / -right / -top / -bottom |
padding-inline-start / -inline-end / -block-start / -block-end |
border-left / -right / -top / -bottom (и -width/-color/-style) |
border-inline-start / -inline-end / -block-start / -block-end (и варианты) |
width / height |
inline-size / block-size |
min-/max-width/height |
min-/max-inline-size / block-size |
top / bottom / left / right |
inset-block-start / -block-end / -inline-start / -inline-end |
text-align: left / right |
text-align: start / end |
Инструмент предполагает стандартный горизонтальный режим письма LTR, поэтому inline-start = левое и inline-end = правое — упрощение, используемое почти во всей документации логических свойств, потому что его инверсия имеет значение только после того, как элемент действительно устанавливает direction: rtl или вертикальный writing-mode.
Часто задаваемые вопросы
Будет ли это захватывать все физические свойства в моей таблице стилей?
Он охватывает стандартные пары box-model, sizing, inset и text-align выше. Свойства вне этого набора (background-position, transform, углы border-radius) остаются нетронутыми, а не угадываются.
Обрабатывает ли он несколько объявлений на одной строке?
Нет — читает одно объявление property: value; на строку. Сначала отформатируйте минифицированный CSS, чтобы каждое объявление имело свою строку.
Почему text-align сохраняет свое имя, но меняет свое значение?
text-align всегда принимал логические ключевые слова (start/end) вместе с физическими — нет отдельного имени логического свойства. Меняется только значение.
Конфиденциальность
Этот инструмент работает полностью в вашем браузере. Ваш CSS никогда не загружается на сервер.