4 марта 2026 г.
2 мин
Когда CSS становится проблемой производительности
Как чрезмерное использование селекторов и глубокая вложенность влияют на производительность рендеринга.
CSS для интернационализации и макетов с поддержкой писем справа налево
<статья>
1. Используйте атрибут
4. Псевдокласс
Почему важна направленность
Веб-сайты потребляются на сотнях языков, некоторые из которых пишутся слева направо (LTR), как английский и французский, другие справа налево (RTL), как арабский и иврит, а также есть те, что сочетают вертикальный и горизонтальный текст, например японский. Если ваш CSS жестко прописан для одного направления, интерфейс может стать нечитаемым или невозможным для использования при изменении направления документа. Создание с учетом интернационализации (i18n) предполагает использование техник, которые позволяют вашим макетам естественно масштабироваться как в LTR, так и в RTL без дублирования таблиц стилей.
1. Используйте атрибут dir как источник правды
HTML предоставляет встроенную метадату направления:
<html lang="ar" dir="rtl">
...
</html>или для любого поддерева:
<section dir="rtl">...</section>Основывайте ваш CSS на этом атрибуте, а не на вручную созданных классах .rtl. Это сохраняет смысловую структуру разметки и предотвращает случайное расхождение между разметкой и стилями.
2. Предпочитайте логические свойства вместо физических
Традиционные свойства (margin-left, padding-right, border-top) являются физическими; их значение меняется в RTL. Логические свойства описывают логические стороны блока, позволяя браузеру автоматически определять правильный физический край.
margin-inline-startиmargin-inline-endзаменяют левый и правый отступыpadding-block-startиpadding-block-endзаменяют верхний и нижний отступыinset-inline-startиinset-inline-endзаменяют позиционирование слева и справа
.button {
padding-inline: 1rem 1.5rem; /* start end */
border-inline-start: 4px solid var(--brand);
}Правило выше создаст левую рамку в LTR и правую в RTL — без дополнительного CSS.
3. Используйте модули, учитывающие расположение
Flexbox
Элементы Flex автоматически следуют за direction документа при flex-direction равном row. Вам практически никогда не потребуется отдельная настройка для RTL.
.toolbar {
display: flex; /* порядок элементов меняется в зависимости от направления */
gap: 0.75rem;
}Grid
CSS Grid также поддерживает логичный поток с помощью свойства direction. Избегайте жестко прописанных grid-column-start: 1, когда вы подразумеваете «первая сторона». Используйте именованные линии сетки:
.layout {
display: grid;
grid-template-columns: [start] 250px [content] 1fr [end];
}4. Псевдокласс :dir()
Нужна исключительная ситуация? Обращайтесь к элементам по направлению без дополнительных классов:
input:dir(rtl) {
background-image: url(icons/search-rtl.svg);
}Это делает ваш стиль декларативным и избегает ненужных изменений DOM.
5. Написание вертикальных скриптов
В Восточной Азии иногда предпочитают вертикальный текст. Используйте writing-mode и логические свойства вместе:
.callout {
writing-mode: vertical-rl; /* сверху вниз, колонки справа налево */
margin-block: 2rem;
}6. Мираринг визуальных ресурсов
- Используйте
transform: scaleX(-1)для зеркалирования иконок при необходимости. - Держите стрелочные иконки в нейтральных ориентациях (вверх/вниз), когда направление подразумевается.
- SVG-изображения могут объявлять
direction="rtl", чтобы использовать<switch>для путей RTL.
7. Специфическая типографика по языкам
Объявляйте семейство шрифтов для каждого языка через псевдокласс :lang():
:lang(ja) {
font-family: "Noto Sans JP", system-ui, sans-serif;
}Комбинируйте с переменными шрифтами для уменьшения веса ресурсов.
8. Контрольный список тестирования
- Добавьте
dir="rtl"к элементу<html>и откройте каждую страницу. - Проверьте все навигационные сценарии — следите за неправильным выравниванием и сломанными анимациями.
- Увеличьте размер текста до 200%, чтобы выявить переполнение из-за длинных переводов.
- Протестируйте смешанные сценарии LTR/RTL (например, английское предложение с персидской фразой).
- Автоматизируйте скриншоты для разных направлений с помощью Playwright или Cypress.
9. Стратегия прогрессивного улучшения
Браузеры, которые не поддерживают логические свойства (в основном старый Safari и IE), могут получать запасной файл, расположенный после современного:
<link rel="stylesheet" href="styles-modern.css">
<!--[if lte IE 11]>
<link rel="stylesheet" href="styles-legacy.css">
<![endif]-->Каскадность обеспечивает, что новые браузеры игнорируют условный комментарий, а устаревшие получают пригодный CSS.
Заключение
Интернационализация — это не дополнение, а ключевая часть инклюзивного дизайна. Используя нативные возможности CSS — логические свойства, Flexbox, Grid, :dir() и селекторы с учетом языка — вы можете создать единый стиль, который гармонично адаптируется к любой системе письма. В результате получаете ускоренный цикл разработки, меньше ошибок и продукт, создающий ощущение локальности в любой точке мира.
