Новые логические свойства CSS с чувствительностью к языку контента

Новые логические свойства CSS

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

Что изменилось в CSS и что такое новые логические свойства с чувствительностью к языку контента?

В чем суть новых логических свойств CSS?

Если коротко, то изменилась сама концепция «слева-справа-вверху-внизу». Теперь эти понятия и связанные с ними определения объектов станут неактуальными.

Что придет на смену неактуальным свойствам?

  • Изменятся свойства margin, padding, border;Старые свойства margin, padding, border CSS              
      Новые свойства margin, padding, border CSS

    Новые правила позволят сделать верстку гибкой не только по отношению к размеру гаджета, но и к языку. Например, в английском и русском языках контент будет начинаться слева, следовательно:
    — padding-inl

    ine-start (для английского или русского) = padding-left;
    — padding-inline-start (для арабского) = padding-right;
    — padding-inline-start (для японского или монгольского) = psdding-top;

    Всё теми же принципами отзывчивости к языку обусловлены и новые свойства относительно «боковых размеров». Логично, что сайты с контентом на языке, читающимся «горизонтально» будут прокручиваться по оси вверх-вниз. В то время как сайты с контентом на языке, читающимся вертикально, прокручиваются по оси влево-вправо. Соответственно элементы с display: block будут вести себя по-разному. Теперь этот вопрос решен:
    — padding-block-start (для «горизонтальной» письменности) = padding-top;
    — padding-block-start (для «вертикальной» письменности) = padding-right;

    Таблица новых свойств CSS для «горизонтальной» письменности:

    margin padding border
    top margin-block-start padding-block-start border-block-start
    bottom margin-block-end padding-block-end border-block-end
    left margin-inline-start padding-inline-start border-inline-start
    right margin-inline-end padding-inline-end border-inline-end
  • Изменятся свойства height и width;Старые свойства высота и ширины блока