padding inline start что это
Новые логические свойства в CSS!
Следующий шаг в эволюции CSS
Интро Скопировать ссылку
Большинство из нас, разработчиков, мыслят терминами право-лево и верх-низ. Всё потому что изначально интернет предназначался главным образом для загрузки документов, а не для сайтов со сложной структурой, которые мы создаём теперь. Потому никто в тот момент не учитывал потребностей многоязычных сайтов.
До недавнего времени переменные в Sass были лучшим способом поддержки сайтов с языками, пишущимися в разные стороны (RTL и LTR). Если вы хотите узнать больше, то почитайте мою статью «The Best Way to RTL Websites with Sass!»
Новые логические свойства дают нам гораздо больше возможностей управлять нашими сайтами, независимо от того, на каком они языке (английский, арабский, японский или другие), с минимальными изменениями стилей.
Самое время начать!
Мыслить логическими CSS-свойствами Скопировать ссылку
Мы привыкли видеть что-то подобное, когда обсуждаем блочную модель:
Строчная ось Скопировать ссылку
Например, padding-inline-start задаст отступ с той стороны, где начинается контент на текущем языке:
Блочная ось Скопировать ссылку
Возможно, вы всё ещё спрашиваете себя, а разве это не всегда так?!
Ответ чуточку сложнее. В настоящее время все сайты на любых языках работают именно таким образом. Просто потому что до сих пор не было других доступных методов.
Сайты на японском языке и некоторых других восточных языках идут справа налево, а не сверху вниз! Чтобы понять, каково это, представьте, что вы повернули экран на 90° вправо. Сайт приходится листать не по вертикали, а по горизонтали!
Пример блочных свойства:
Новые свойства блочной модели Скопировать ссылку
После того, как вы разобрались со строчной и блочной осями, вы можете использовать их по прямому назначению.
Пример для английского:
margin Скопировать ссылку
padding Скопировать ссылку
border Скопировать ссылку
Логическая величина Скопировать ссылку
width и height заменяются на inline-size и block-size
Пример строчного и блочного размеров: Для английского и арабского (LTR и RTL)
В языках, идущих сверху вниз, например, японском, мы столкнёмся с противоположным:
Для минимальных и максимальных свойств просто добавьте min или max в начале. К примеру:
Позиционирование в CSS Скопировать ссылку
Для английского (LTR):
Обтекание в CSS Скопировать ссылку
Для английского (LTR):
Text-align Скопировать ссылку
Для английского (LTR):
Ещё Скопировать ссылку
Свойство resize: используется в основном для
Для английского (LTR):
У свойства background-position пока нет реализации ни в одном из браузеров, но если копнуть поглубже, то можно найти отсылки к background-position-inline и background-position-block на MDN. Ещё нет нормальной документации, но они работают над этим! 🙂
Прочее: уже сейчас можно предположить, что свойства типа transform-origin тоже будут обновлены, как и любые другие свойства, имеющие отношение к направлению.
Гриды и флексбоксы Скопировать ссылку
Хорошая новость в том, что гриды и флексбоксы уже построены на новых логических свойствах и нет нужды их обновлять.
Рабочий процесс с учётом логических свойств Скопировать ссылку
На первый взгляд это выглядит очень сложно. Но в работе всё просто. При написании стилей не нужно беспокоится о поддержке нескольких языков. Вы просто используете логические свойства взамен старых физических свойств.
Применение выравнивания в зависимости от языка Скопировать ссылку
После того, как мы рассмотрели все обновлённые логические свойства, вот вам ещё два, которые позволят определить выравнивание блочной оси (поток сайта) и выравнивание строчной оси (направление чтения текста).
Свойство writing-mode (блочная ось) Скопировать ссылку
Определились с потоком сайта. В большинстве случаев он будет идти сверху вниз, но, как уже упоминалось, для некоторых языков он может идти справа налево (японский) или даже слева направо (монгольский). В обоих случаях у нас будет горизонтальная прокрутка, а не вертикальная, как мы привыкли.
Чтобы избежать этой путаницы, я рекомендую игнорировать часть значения со строчной осью и обращать внимание только на часть значения для блочной оси.
Примеры Скопировать ссылку
Пример для японского:
Свойство direction (строчная ось) Скопировать ссылку
Пример направления для арабского:
Даже удивительно, на сколько просто сайт, идущий сверху вниз, можно преобразовать в идущий справа налево с горизонтальной прокруткой.
Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.
Демо (попробуйте поменять язык):
Браузерная поддержка Скопировать ссылку
Проблемы с логическими свойствами Скопировать ссылку
Это вопрос всё ещё открыт. Я внёс предложение, которое может решить эту проблему. Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!
В данный момент, если вы хотите использовать логические единицы, вам следует отказаться от шорткатов в пользу полных названий свойств.
Предложенное мною решение:
Проблемы с адаптивным дизайном Скопировать ссылку
Изменения, которые нужно учесть Скопировать ссылку
Во время написания этого поста, уже после глубокого изучения и понимания концепции логических свойств, я заметил несколько упущенных моментов, которые следует поправить в будущем:
Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂
Резюмируя Скопировать ссылку
Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂
Новые логические свойства в CSS!
Следующий шаг в эволюции CSS
Интро
Большинство из нас, разработчиков, мыслят терминами право-лево и верх-низ. Всё потому что изначально интернет предназначался, главным образом, для загрузки документов, а не для сайтов со сложной структурой, которые мы создаём сегодня. Потому что никто в тот момент не учитывал потребностей многоязычных сайтов.
До недавнего времени переменные в Sass были лучшим способом поддержки сайтов с языками, текст которых пишется в разные стороны (RTL и LTR). Если вы хотите узнать больше, то почитайте мою статью «The Best Way to RTL Websites with Sass!»
Новые логические свойства дают нам гораздо больше возможностей управлять нашими сайтами, независимо от того, на каком они языке (английский, арабский, японский или другие), с минимальными изменениями стилей.
Самое время начать!
Мыслить логическими CSS-свойствами
Мы привыкли видеть что-то подобное, когда обсуждаем блочную модель:
Строчная ось
Например, padding-inline-start задаст отступ с той стороны, где начинается контент на текущем языке:
Блочная ось
Возможно, вы всё ещё спрашиваете себя, а разве это не всегда так?!
Ответ чуточку сложнее. В настоящее время все сайты на любых языках работают именно таким образом. Просто потому что до сих пор не было других доступных методов.
Сайты на японском и некоторых других восточных языках идут справа налево, а не сверху вниз! Чтобы понять, каково это, представьте, что вы повернули экран на 90° вправо. Сайт приходится листать не по вертикали, а по горизонтали!
Пример блочных свойства:
Новые свойства блочной модели
После того, как вы разобрались со строчной и блочной осями, вы можете использовать их по прямому назначению.
Пример для английского:
margin
padding
border
Логическая величина
width и height заменяются на inline-size и block-size
Пример строчного и блочного размеров:
Для английского и арабского (LTR и RTL)
В языках, идущих сверху вниз, например, японском, мы столкнёмся с противоположным:
Для минимальных и максимальных свойств просто добавьте min или max в начале. К примеру:
Позиционирование в CSS
Для английского (LTR):
Обтекание в CSS
Для английского (LTR):
Text-align
Для английского (LTR):
Свойство resize используется в основном для
Для английского (LTR):
У свойства background-position пока нет реализации ни в одном из браузеров, но если копнуть поглубже, то можно найти отсылки к background-position-inline и background-position-block на MDN. Ещё нет нормальной документации, но они работают над этим! 🙂
Прочее: уже сейчас можно предположить, что свойства типа transform-origin тоже будут обновлены, как и любые другие свойства, имеющие отношение к направлению.
Гриды и флексбоксы
Хорошая новость в том, что гриды и флексбоксы уже построены на новых логических свойствах и нет нужды их обновлять.
Рабочий процесс с учётом логических свойств
На первый взгляд это выглядит очень сложно. Но в работе всё просто. При написании стилей не нужно беспокоиться о поддержке нескольких языков. Вы просто используете логические свойства взамен старых физических свойств.
Применение выравнивания в зависимости от языка
После того, как мы рассмотрели все обновлённые логические свойства, вот вам ещё два, которые позволят определить выравнивание блочной оси (поток сайта) и выравнивание строчной оси (направление чтения текста).
Свойство writing-mode (блочная ось)
Определились с потоком сайта. В большинстве случаев он будет идти сверху вниз, но, как уже упоминалось, для некоторых языков он может идти справа налево (японский) или даже слева направо (монгольский). В обоих случаях у нас будет горизонтальная прокрутка, а не вертикальная, как мы привыкли.
Чтобы избежать этой путаницы, я рекомендую игнорировать часть значения со строчной осью и обращать внимание только на часть значения для блочной оси.
Примеры
Пример для японского:
Свойство direction (строчная ось)
Пример направления для арабского:
Даже удивительно, на сколько просто сайт, идущий сверху вниз, можно преобразовать в идущий справа налево с горизонтальной прокруткой.
Я сделал небольшое демо. Его лучше смотреть в Firefox, в текущий момент именно в нём поддерживается наибольшее количество свойств.
Демо (попробуйте поменять язык):
Браузерная поддержка
Проблемы с логическими свойствами
Этот вопрос всё ещё открыт. Я внёс предложение, которое может решить эту проблему. Если у вас есть решение получше, то вы можете оставить комментарий в этой ветке!
В данный момент, если вы хотите использовать логические единицы, вам следует отказаться от шорткатов в пользу полных названий свойств.
Предложенное мною решение:
Проблемы с адаптивным дизайном
Изменения, которые нужно учесть
Во время написания этого поста, уже после глубокого изучения и понимания концепции логических свойств, я заметил несколько упущенных моментов, которые следует поправить в будущем:
Но кто знает, может этот пост попадётся на глаза правильным людям из W3C 🙂
Резюмируя
Вот и всё. Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое. Я буду признателен, если вы поаплодируете или поделитесь этим постом 🙂
Больше постов по типографике
Другие мои посты о CSS
Кто я?
Меня зовут Элад Шехтер, я веб-разработчик, специализирующийся на дизайне и архитектуре CSS и HTML. Я работаю на Investing.com.
Вы можете найти меня в группах на Facebook:
padding
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).
Рис. 1. Поле слева от текста
Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить поля только для указанных сторон.
Краткая информация
| Значение по умолчанию | 0 |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
| Число значений | Результат |
|---|---|
| 1 | Поля будут установлены одновременно c каждого края элемента. |
| 2 | Первое значение устанавливает поля от верхнего и нижнего краёв, второе — от левого и правого. |
| 3 | Первое значение задаёт поле от верхнего края, второе — одновременно от левого и правого краёв, а третье — от нижнего края. |
| 4 | Поочерёдно устанавливается поля от верхнего, правого, нижнего и левого краёв. |
Величину полей можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. При указании поля в процентах, значение считается от ширины родителя элемента.
CSS эволюционирует, а, значит, пришло время уходить от привычных свойств и ощутит все удобства использования новых.
Что изменилось в CSS и что такое новые логические свойства с чувствительностью к языку контента?
В чем суть новых логических свойств CSS?
Если коротко, то изменилась сама концепция «слева-справа-вверху-внизу». Теперь эти понятия и связанные с ними определения объектов станут неактуальными.
Что придет на смену неактуальным свойствам?
Новые правила позволят сделать верстку гибкой не только по отношению к размеру гаджета, но и к языку. Например, в английском и русском языках контент будет начинаться слева, следовательно:
— 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 для «горизонтальной» письменности:
Соответственно изменятся и свойства float:
— float: left = float: inline-start;
— float: right = float: inline-end;
изменятся свойства resize:
— resize: horizontal = resize: inline;
— resize: vertical = resize: block;
Браузерная поддержка новых свойств CSS:
Итак, выглядит все, конечно, громоздко-сложно-длинно, но на самом деле эти новые свойства CSS с чувствительностью к языку контента открывают новые возможности верстки. Ждем Ваших отзывов, историй и советов. Удачи в работе!
Понятие логических свойств и значений
Дата публикации: 2018-04-11
От автора: раньше CSS привязывался к физическим измерениям и направлениям, физически отображая элементы слева, справа, сверху и снизу. Мы использовали float left и right, свойства сдвига top, left, bottom и right. Задавали margin, padding и рамки через margin-top и padding-left. Эти физические свойства и значения имеют смысл, если вы работаете в горизонтальной плоскости, сверху вниз и режиме письма слева направо.
Они имеют смысл, если вы используете вертикальный режим письма на всем макете или некоторых элементах. В этой статье я объясню, как CSS меняется в сторону поддержки режимов письма, при этом проясню некоторые моменты, которые могут смутить в Flexbox и CSS Grid. Мы будем говорить про логические свойства и значения.
Когда я начала работать с CSS Grid и объяснять новую спецификацию людям, я отмечала, что свойство grid-area можно использовать, как сокращение в одну строку для установки всех четырех линий. Поэтому 3 примера ниже создают одинаковую раскладку. Первый пример использует длинные свойства, второй определяет стартовые и конечные линии для всех плоскостей, третий использует grid-area.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Порядок линий при использовании grid-area:
Первый мой вопрос (и многих других среди моей аудитории) был «почему не Top, Right, Bottom, Left, как мы уже привыкли в CSS?». На самом деле, они идут в обратном порядке тем значениям: Top, Left, Bottom, Right! CSS Working Group активно пытается все усложнить?
Ответ – эти значения отошли от базового предположения о том, что контент в вебе соответствует физическим размерам экрана, причем первое слово предложения находится сверху слева от своего блока. Порядок линий в grid-area имеет смысл, если вы никогда не сталкивались с существующим способом установки этих значений в сокращении. Сначала мы указываем 2 стартовые линии, потом две конечные.
То есть если мы изменим режим письма документа на вертикальный, положение блока останется относительно режима письма документа, а не физических свойств экрана. Можете проверить в примере ниже, переключите значение writing-mode для макета, сетка должна повернуться.
Этот факт о режимах письма объясняет, почему CSS Grid и Flexbox используют start и end линии, а не привязывают сетку к физическим измерениям верха, права, низа и лева, как мы это делаем в абсолютном позиционировании. В примере выше первый элемент расположен через grid-area и линейное позиционирование.
Если использовать длинные свойства, запись превратится в:
Мы задали обе стартовые линии, первую блоковую ось, вторую инлайн ось, затем такой же шаблон для конечных линий в двух измерениях. В каком бы направлении не раскладывалась сетка, стартовые и конечные линии остаются относительно сетки и режима письма документа.
Блоковые и инлайн измерения
Я уже упоминала ключевой момент для понимания нового макета, концепцию блоковых и инлайн измерений. По мере работы с новым CSS вы будете натыкаться на эти термины. Два измерения легче понять в контексте Grid Layout, так как мы все время работаем с блоком и инлайн осями. Поэтому для объяснения я буду использовать CSS Grid демо.
Блоковое измерение соответствует порядку раскладки блоков на странице. Возьмем параграф текста на английском. Каждый параграф располагается друг под другом, они раскладываются в блоковом измерении. Так же и в Grid Layout. Это блоковые оси.
В CSS Grid Layout блоковые оси также называют строчными осями. Вот почему свойства блоковой оси grid-row-start и grid-row-end.
Поэтому инлайн оси пересекает блоковую ось в том направлении, в котором слова раскладываются в предложении. В английском эта ось идет слева направо. В Grid Layout инлайн ось – это колоночная ось со свойствами grid-column-start и grid-column-end.
Если изменить режим письма в нашем примере на vertical-lr, то он станет вертикальным. То есть блоковая ось станет вертикальной, а инлайн ось будет параллельна линиям (сверху вниз).
Поэтому если мы говорим о блоковом измерении, мы описываем направление, в котором параграфы текста раскладываются в документе с нормальным потоком, а инлайн измерение является направлением предложений.
Логические свойства
Как только вы привыкните к работе с блоковыми и инлайн измерениями, стартовыми и конечными линиями, связь с физическими измерениями в остальном CSS будет казаться чем-то странным. Тем не менее, есть спецификация, которая определяет логические версии всех существующих физических свойств — CSS Logical Properties and Values, находится в статусе First Public Working Draft. Сейчас только Firefox хорошо поддерживает эти свойства. Однако понимание принципов их работы – это хороший способ подумать о новом CSS. Давайте разбираться.
Я проиллюстрировала каждый раздел CodePen примерами. Для их просмотра вам понадобится Firefox!
Логические измерения
Логические свойства определяют стартовое и конечное свойство для блокового и инлайн измерения. Для свойств высоты и ширины используем block-size и inline-size. Также можно установить max-block-size, min-block-size, max-inline-size и min-inline-size. Если вы работаете с английским, горизонтальным языком сверху вниз, то block-size отсылает к физическому height блока на экране, inline-size – к физическому width элемента. Если вы работаете с языком, где блоки выстраиваются вертикально, то block-size будет контролировать width, а inline-size – height.
Можете проверить в демо ниже. Мой блок имеет block-size 150px и inline-size 250px. Измените свойство writing-mode и посмотрите, как подстроится макет.
Логические рамки
У нас есть свойства контроля рамок, которые работают по схожему принципу. Физические свойства рамок: