Поддержка логических свойств CSS со временем становится лучше. Однако мне по-прежнему трудно запомнить их, когда использую их в проекте. Что означают start и end? Насколько сложно охватить все детали без проб и ошибок. В этой статье я нацелен прокачать вас и пробежаться по использованию логических свойств, чтобы возникло твёрдое понимание, у дизайнеров, говорящих на английском и арабском языках. Я попытался придумать визуальное объяснение логических свойств, которое, надеюсь, будет понятным. Готовы? Погружаемся! Основная идея логических свойств в том, что мы не будем использовать свойства направлений CSS как есть. Вместо этого мы привяжемся к прописанному в HTML направлению. Позволяющие сделать подобное свойства называются логическими. Посмотрите на пример: У нас есть карточка, содержащая аватар и текст. В макете слева направо поле расположено справа от аватара и наоборот, в макете справа налево поле отражено и расположено слева. Вот так это пишется без логических свойств: Обратите внимание, что margin-right в макете справа налево сброшено в 0, оно здесь не нужно. Представьте, что мы делаем это для большого проекта; кода слишком много. Но логические свойства решают проблему. Нам нужно только установить margin-inline-end, и свойство будет работать по-разному в зависимости от направления в HTML-документе. Мощно, правда? Используя логические свойства, вы обычно видите inline или block. Давайте посмотрим, что они означают. Смысл inline и block меняется исходя из режима письма. В языках вроде английского inline направлен горизонтально, а block – вертикально. В языках вроде японского – всё наоборот: inline направлено вертикально, block – горизонтально. В подобных английскому и арабскому языках inline направлено горизонтально. В английском start указывает на левую (left) сторону в макетах слева направо (на английском языке) и он же указывает на правую (right) сторону в арабских макетах, которые справа налево. В макетах справа налево start указывает на правую сторону, end – на левую. В примере ниже круг имеет поле (margin) с правой стороны. В макетах справа налево поле должно быть слева. Запомните, что свойства start и end зависят от контекста – направления макета: Чтобы прояснить, что же означают start и end, я покажу пример на картинке: Мне нравится представлять это как начало и конец улицы. Когда направление – слева направо, начало находится слева, а конец – справа. Когда направление справа налево, всё наоборот. Другой способ запомнить принцип – думать о направлении чтения. Английский текст начинается слева и заканчивается справа, арабский текст начинается справа и заканчивается слева. Большую часть свойств CSS можно применять как логические. Вот основные из них: размеры: высота, ширина (height, width); margin, border, padding, их подвиды; обтекание (floating), позиционирование; выравнивание текста.  Я не могу перечислить все логические свойства здесь: их много. Пожалуйста, прочитайте весь список на MDN. Теперь, когда я рассказал об основах, позвольте мне показать пример UI, чтобы убедиться, что у вас есть твёрдое понимание. У нас есть компонент со следующими свойствами: left-padding и right-padding; рамка (border) с левой стороны; поле (margin) для иконки. Вот так можно справиться с макетом слева направо. А так – с макетом справа налево; направления должны быть отражены. И снова много работы. Но мы можем минимизировать CSS-код, вот так: Иногда нужно сделать выравнивание английского текста справа. Смотрите пример. Есть поле ввода с ограниченным числом символов. Чтобы помочь пользователю это понять, у поля есть метка. В английском подобное выравнивается справа, в арабском – слева. Это правило – прекрасный кандидат, чтобы продемонстрировать логические свойства CSS. Вот как мы описали бы изложенное выше без логических свойств: Когда какой-то элемент позиционируется абсолютно, мы должны уделить внимание свойствам right и left: Мы можем сократить код выше при помощи свойства  inset Его поддержка не идеальна, но за ним будущее. Свойство inset-inline-end в макетах слева направо – эквивалент правой стороны, а в макетах справа налево – эквивалент левой стороны для макетов справа налево.Код выше можно написать так: Кроме того, top может выступать как inset-block-start, но это не нужно в нашем случае: мы не работаем с японским или с веб-сайтом на восточном языке. Вы можете удивиться применению float в 2021 году. Когда у нас есть фигура и мы хотим, чтобы текст её обтекал, без старого доброго свойства float это не будет работать. Вот, как мы можем воплотить идею: Код работает в макетах слева направо, для направления справа налево код CSS будет вроде такого: При помощи логических свойств код на CSS сокращается, вот так: Намного проще, правда? Grid и flexbox – по умолчанию логические свойства. Это означает, что они отражают направление автоматически. При помощи этих свойств CSS-код сеток и компонентов для мультиязычных сайтов сокращается до минимума. В следующем примере у нас grid-обёртка. Обратите внимание, что элементы упорядочены согласно направления. Единственное моё желание на данный момент, чтобы свойство background-color стало логическим. Зачем? Чтобы добавить иконку как изображение фона так, чтобы она разворачивалась в зависимости от направления. К сожалению, свойства вроде background-position-inline у нас нет. Вот, что я напишу сейчас. Если вы хотите больше узнать о стилизации справа налево, написал о ней расширенное руководство. Надеюсь, оно вам понравится. А если хотите больше уделить время веб-разработке, то у нас как раз скоро стартует новый поток соответствующего курса.     Узнайте, как прокачаться в других специальностях или освоить их с нуля: Профессия Data Scientist Профессия Data Analyst Курс по Data Engineering ПРОФЕССИИ Профессия Java-разработчик Профессия QA-инженер на JAVA Профессия Frontend-разработчик Профессия Этичный хакер Профессия C++ разработчик Профессия Разработчик игр на Unity Профессия Веб-разработчик Профессия iOS-разработчик с нуля Профессия Android-разработчик с нуля КУРСЫ Курс по Machine Learning Курс "Machine Learning и Deep Learning" Курс "Математика для Data Science" Курс "Математика и Machine Learning для Data Science"  Курс "Python для веб-разработки" Курс "Алгоритмы и структуры данных" Курс по аналитике данных Курс по DevOps редактор, автор, солдат удачи