CSS эволюционирует, а, значит, пришло время уходить от привычных свойств и ощутит все удобства использования новых.
Что изменилось в CSS и что такое новые логические свойства с чувствительностью к языку контента?
В чем суть новых логических свойств CSS?
Если коротко, то изменилась сама концепция «слева-справа-вверху-внизу». Теперь эти понятия и связанные с ними определения объектов станут неактуальными.
Что придет на смену неактуальным свойствам?
- Изменятся свойства margin, padding, border;
Новые правила позволят сделать верстку гибкой не только по отношению к размеру гаджета, но и к языку. Например, в английском и русском языках контент будет начинаться слева, следовательно:
— padding-inline-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;
Опять же согласно тем же принципам отзывчивости к языку контента старые свойства height и width будут заменены согласно следующей схеме:
— width (для «горизонтальной» письменности) = inline-size;
— height (для «горизонтальной» письменности) = block-size;
— width (для «вертикальной» письменности) = block-size;
— height (для «вертикальной» письменности) = inline-size; - Изменятся свойства top, bottom, right, left:
Соответственно изменятся и свойства float:
— float: left = float: inline-start;
— float: right = float: inline-end; - Поскольку новые правила выстроены вокруг чувствительности к языку, логично предположить, что изменятся и свойства text-align:
— text-align: left = text-align: start;
— text-align: right = text-align: end;
Также для <textarea> изменятся свойства resize:
— resize: horizontal = resize: inline;
— resize: vertical = resize: block;
Браузерная поддержка новых свойств CSS:
- margin, padding, border, inline-size, block-size, text-align — поддерживаются во всех браузерах, кроме Edge;
- float, position, resize — поддерживаются только в Firefox, пока;
Итак, выглядит все, конечно, громоздко-сложно-длинно, но на самом деле эти новые свойства CSS с чувствительностью к языку контента открывают новые возможности верстки. Ждем Ваших отзывов, историй и советов. Удачи в работе!
