'властивість: 0' або 'властивість: 0px' у CSS?

86

Я бачив, як ці позначення часто використовуються, і мені було цікаво, чи є якась помітна різниця між цими двома позначеннями?

element#id
{
  property: 0;
}

і

element#id
{
  property: 0px;
}

Я використовую property: 0px;весь час, оскільки мені здається, що це виглядає чистіше, але я не впевнений, чи браузер інтерпретує 0pxінакше, ніж 0.

Хтось знає, який з них кращий чи правильний?

css properties zero

— Блендер
джерело

1

Гарне запитання і раніше цього ймовірного дубліката: stackoverflow.com/q/5359222/292060 , але на нього є краща відповідь, цитуючи специфікацію.

— goodeye

1

Незалежно від того, що ви використовуєте, не забудьте залишатися послідовними протягом усього проекту.

— PBwebD

56

Ідентифікатори одиниць виміру, за бажанням , але не зазначене збільшення продуктивності (хоча є економія два символів).

CSS2 - із W3C CSS 2.1 Специфікація синтаксису та основних типів даних :

Формат значення довжини (в даному описі позначається <довжина>) - це <число> (з десятковою комою або без неї), за яким слідує ідентифікатор одиниці (наприклад, px, em тощо). Після нульової довжини ідентифікатор одиниці необов’язковий.

(Підкреслити мій)

CSS3 - З W3C Значення та одиниці вимірювання CSS Рівень 3 (На даний момент в Рекомендації кандидата на момент написання статті)

Для нульових довжин ідентифікатор одиниці необов’язковий (тобто може бути синтаксично представлений як 0).

— Кріс Бір
джерело

1

Сумніваюся, що ви дійсно економите 2 байти, коли активне стиснення GZIP. Для мене це питання того, з чим ти почуваєшся комфортно. Однак деяким CSS Linters може не подобатися 0px.

— Мануель Арвад Шмідт,

34

Хоча одиниця є необов’язковою, коли значення є 0, я, як правило, залишаю це, оскільки я можу потім налаштувати значення за допомогою Інструментів розробника Chrome, натиснувши на значення та натиснувши клавіші зі стрілками вгору / вниз. Без одиниці це насправді неможливо.

Крім того, CSS-мініфайлери в 0будь-якому випадку позбавляють одиниць значень, тому в кінцевому рахунку це не матиме значення.

— Блендер
джерело

+1 за спостереження, що мініфайнери знають про це, і що є функціональність, яка має бути, включивши їх.

— Graham P Heath

9

Інструменти розробника Chrome за замовчуванням мають значення px, якщо натиснути клавіші зі стрілками вгору / вниз на 0 без ідентифікатора. Крім того, в Інструментах розробника Chrome, якщо ви переведете стрілку вниз до 0, вона зберігає піксель.

— PBwebD

1

@ testing123: Я не думаю, що це було під час написання цієї відповіді, але це добре знати.

— Blender

чи виникнуть проблеми з часом виконання з 0 та 0px, якщо вони використовуються в кількох місцях у програмі?

— Куркула

15

Вони однакові. Браузер інтерпретує і те, і інше як 0, тому використовуйте все, що є для вас більш читабельним.

— Себастьян Патане Масуеллі
джерело

Чи є "правильний" вибір чи відповідати стандартам? Я знаю, ви не можете писати border: 3 solid, оскільки одиниць немає, але чи існують якісь веб-стандарти на нулі?

— Blender

1

Як я вже згадував у своїй відповіді, це тому, що всі вони однакові: нуль разів все рівно нулю, незалежно від того, чи множите ви на розмір пікселя, ем, колишній або відсоток.

— AgentConundrum

Не впевнені, що ви маєте на увазі під веб-стандартами, але "margin: 10px 0 0 10px" чудово працює, як і "border: 0", що означає, що ви можете використовувати нуль як еквівалент "none".

— Том,

1

@blender Перевірте мою відповідь нижче щодо веб-стандартів із посиланням на документацію.

— Chris Bier

3

-1 за відповідь із суперечливим змістом без будь-яких посилань, посилань чи обгрунтування. будь ласка, підкріпіть свою думку даними або чітко заявіть, що це лише ваша думка, а не фактична інформація.

11

Нуль чого-небудь дорівнює нулю. 0px= 0%= 0em= 0pt=0

Більшість людей залишають пристрій вимкненим, оскільки це просто непотрібна метушня.

— Чак
джерело

1

Виняток становлять одиниці часу: 0не є дійсною альтернативою 0s/0ms

— Генрік Крістенсен

5

Наскільки мені відомо, між ними немає різниці 0px = 0em = 0ex = 0% = 0. Ви як розробник вирішуєте, що вам найбільше подобається (якщо у вас, звичайно, немає корпоративних стандартів кодування).

З більшості зразків коду, які я бачив, більшість людей використовують версію без модулів. Для мене це просто виглядає чистішим. Якщо ви натискаєте значну кількість даних (скажімо, якщо ви Google), ці два байти можуть збільшити пропускну здатність, тим більше, що ви, швидше за все, повторите їх кілька разів у таблиці стилів.

— AgentConundrum
джерело

6

Я, якщо ви натискаєте значну кількість даних (наприклад, якщо ви Google), вам краще скористатися інструментами мініфікації, які роблять це за вас: p

— Джон Курлак,

4

Нульовий піксель дорівнює нулю дюймів і нулю метрів тощо. 0це все, що вам потрібно.

— Медер Омуралієв
джерело

Якусь мить я збирався проголосувати за ваш пост, тому що думав, що ваше твердження про те, що 0 пікселів дорівнює 0 дюймам, і так далі було неправдивим. :) Бо в думках я думав, як це може бути? це різні одиниці.

— Web_Designer

2

Я особисто вважаю 0чистішим ніж 0px. Це два зайвих символи, які можна скласти. Навіщо додавати зайві байти, коли це не потрібно. Я бачу, padding: 0px 0px 0px 0pxщо це можна легко висловити padding: 0занадто часто.

— Амір Рамінфар
джерело

1

Ви можете використовувати будь-який - моя найкраща порада - не хвилюватися занадто, але будьте послідовними, роблячи це так чи інакше. Я особисто вважаю за краще вказати "0px" з наступних причин:

Використання 0px робить речі більш відповідними з усіма іншими розмірами "px", які ви вказали
Це також більш детально і чітко дає зрозуміти, що ви встановлюєте нульову довжину, а не прапорець "вимкнути це"
Трохи простіше налаштувати значення "0px", щоб зробити його іншим, якщо потрібно

— Кріс Хелкроу
джерело

0

Як кажуть інші, насправді не має значення, якщо воно 0, хоча я вирішив додати вимірювання до всіх своїх значень, щоб будь-хто інший, хто переглядає мої файли CSS, міг визначити, з якими вимірами вони, мабуть, матимуть справу в іншому місці.

— Данджа
джерело