Можно ли опустить % после 0 в CSS?

Question

[artdeco]

Когда пишешь width: 0% например, это тоже самое, что и width: 0? Бывают ли какие-то исключения?

Comments

[Владислав Лысков]

Не можно, а нужно, нормальные ide даже это подсказывают

[Ankhena]

Более того и 0px и 0vh и все остальные нули дадут тот же результат - ноль. Поэтому, у нулей не принято писать единицы измерения.

Answer 1

[Aetae]

Не всегда, в некоторых случаях 0% != 0, например для flex-basis. :)

Comments

[artdeco]

когда еще? мне получается надо ща мдн спарсить на все возможные свойства, и посмотреть их возможные значения, чтобы избежать таких казисов?

еще на стеке пишут

border: 0 will set border-width: 0 while border: none will set border-style: none

знает же кто-то

[Aetae]

Вот тут не подскажу. Обо что сам голову разбил - то знаю, а что пока только ждёт за углом - то неведомо.:)

[imko]

artdeco, в функциях вроде тоже имеет разницу, clamp какой нибудь

[Сергей delphinpro]

Aetae,

а что пока только ждёт за углом - то неведомо.:)

не совсем так. в молодости я любил искать причины и следствия в спецификациях. Там всё описано, в том числе "неведомое".
Однако читать спеки - то еще удовольствие..

[Сергей delphinpro]

artdeco,

мне получается надо ща мдн спарсить на все возможные свойства, и посмотреть их возможные значения, чтобы избежать таких казисов?

либо так, либо набираться опыта. со временем вы будете точно знать где нужно указать ед. изм. для нуля, а где не обязательно.

А вообще, возьмите IDE типа WebStorm, и она сама вам подскажет, где вы поставили лишнее, или забыли нужное.

[Aetae]

Сергей delphinpro, кстати врядли в спеке явно описано это поведение.:)
Суть то тут в том, что 0% считается от родителя, но у родителя величина не задана, потому он не знает как считать процент и сбрасывает на значение по умолчанию - auto,
Т.е. в спеке написано что-то типа "при неизвестном значении принимает auto", но сходу ты такое всё равно не предскажешь.

[artdeco]

Aetae, 0% у margin и vertical padding будут считаться от ширины родителя поэтому неважно задана ли величина, насколько я понял

[Сергей delphinpro]

Aetae, ну вообще у вас описан/показан довольно специфичный случай
тут реально нужно изучить спеку. возможно имеет место быть баг.

Answer 2

[Fujita]

Значение "width:0" и "width:0%" будут вести себя одинаково.
Можно убрать %.

Comments

[artdeco]

почему тогда минифицированая булма делает .column.is-0{flex:none;width:0%} https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma..., какой у них компилятор? Он может 0% убрать да?

[Fujita]

artdeco, Какой у них компилятор?
PostCSS, и он может удалять неиспользуемые правила в данном случае width:0%
(поскольку flex: none означает, что элемент будет иметь нулевую ширину, независимо от значения свойства width.).
но если если вы откроете исходный CSS-код булмы, вы увидите, что там используется именно вот такой код:

.column.is-0 {
  flex: none;
  width: 0%;
}

Этот код был оставлен в исходном коде Булмы по двум причинам: для совместимости с браузерами, которые не поддерживают flex: none и для удобства разработчиков

[Stalker_RED]

Fujita, то есть минификатор не минифицирует, потому что это гипотетически кому-то удобно?Отлично.

[artdeco]

Fujita, это не исходный код, это минифицированый код. я не говорю что его надо удалять. но % после 0 можно убрать. и PostCSS этого не делает получается, ПРИ ЭТОМ он прекрасно убирает 0 из margin-left: https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.css
.columns.is-mobile > .column.is-offset-0 {
margin-left: 0%;
}
https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma...
.columns.is-mobile>.column.is-offset-0{margin-left:0}

[artdeco]

Stalker_RED, он сказал, не только, а для совместимости тоже

[Fujita]

Stalker_RED, Нет, из-за проблемы с совместимостью в браузерах, которые не поддерживают flex: none:
Если свойство width: 0% используется с flex: none, удаление % после 0 может привести к тому, что элемент будет иметь ширину 100% в браузерах, не поддерживающих flex: none.

artdeco, Не совсем понял твой вопрос.

[artdeco]

Fujita, в полной версии стоит margin:0%; width: 0%; PostCSS убирает % у margin, но не у width. То есть он знает, как это делать, и специально оставляет у width. ниже кажется написали про причину этого (про сброс до auto)

[Fujita]

artdeco, Да, это так. PostCSS убирает % у margin, но не у width.
Удаление % у margin не приведет к непредвиденным результатам. Свойство margin: 0% устанавливает все четыре края элемента на нулевое значение. Это означает, что элемент будет иметь нулевое значение для всех четырех краев, независимо от того, есть ли % после 0 или нет.

[Сергей delphinpro]

Stalker_RED, минификатор должен минифицировать без каких-либо сайд-эффектов. Если они возможны, то лучне пожертвовать размером в символ.

[Fujita]

Сергей delphinpro, Совершенно верно. Минификатор должен минимизировать код без каких-либо побочных эффектов. Если есть вероятность побочных эффектов, то лучше пожертвовать размером в символ.

Answer 3

[Сергей delphinpro]

в keyframes нужно указывать единицу измерения (процент)

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}