Чи дотримуються десяткових знаків у ширині CSS?

225

Щось мені було цікаво деякий час, роблячи дизайн CSS.

Чи дотримуються десяткових знаків у ширині CSS? Або вони округлі?

.percentage {
  width: 49.5%;
}

або

.pixel {
  width: 122.5px;
}

html css

— Аластер Піттс
джерело

186

Якщо це відсоткова ширина, то так, це дотримується . Як зазначав Мартін, ситуація руйнується, коли ви дістаєтесь до дробових пікселів, але якщо ваші відсоткові значення дають цілочисельне значення пікселя (наприклад, 50,5% від 200 пікселів у прикладі), ви отримаєте розумну, очікувану поведінку.

Редагувати: я оновив приклад, щоб показати, що відбувається з дробовими пікселями (у Chrome значення усічені, тому 50, 50.5 та 50.6 показують однакову ширину).

— Skilldrick
джерело

7

Ви маєте рацію щодо того, що відсоткові значення самі не округлюються, але ширина пікселів з десятковими

— знаками

2

@MartinodF Дякую за пояснення. Так, пікселі закруглені, але не визначено, чи вони насправді круглі до найближчого, підлоги чи стелі (що я мав на увазі під "речі ламаються").

— Skilldrick

1

@Skilldrick Я намагався дробові пікселі у вашій демонстрації в деяких браузерах заради цікавості: і IE9p7, і FF4b7 обходять найближчий піксель, а Opera 11b, Chrome 9.0.587.0 і Safari 5.0.3 усіляють значення. @andras Просто для уточнення: я не кажу, що внутрішні значення округлені, лише кінцеві значення візуалізації є. Якщо ви збільшуєте масштаб, або деякі елементи успадковують властивості тощо, десяткові знаки будуть рахуватися.

— MartinodF

10

Сучасне оновлення: моя Chrome версія 24 фактично округляє дробові пікселі. Перегляд jsFiddle, 50,5 та 50,6, обидва круглі до 51 пікселів, що на 1 піксель ширше, ніж роздільник 50px.

— Майкл Батлер

5

Найважливіше, що слід зазначити, - це те, як елементи з розмірами дробових пікселів укладаються один біля одного. У той час як вони роблять круглі візуально самі по собі, вони також не займають додатковий простір , якщо покласти поруч з іншими дрібно розмірних елементів: cssdesk.com/8R2rB

— Sandy Гіффорд

53

Навіть коли число округлене під час розмальовування сторінки, повне значення зберігається в пам’яті та використовується для подальшого підрахунку дитини. Наприклад, якщо ваша коробка розміром 100,4999 пікселів фарбує до 100 пікс., Дочірня ширина 50% буде обчислюватися як .5 * 100.4999 замість .5 * 100. І так далі на більш глибокі рівні.

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

Крайний випадок, звичайно, але щось пам’ятати.

— natekoechley
джерело

2

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

— Том

23

Хоча дрібні пікселі можуть здаватися округлими на окремих елементах (як @SkillDrick демонструє дуже добре) , важливо знати, що дробові пікселі насправді дотримуються у фактичній моделі коробки .

Це найкраще видно, коли елементи укладаються поруч (або зверху); Іншими словами, якби я розмістив 400 диваків 0,5 пікселя поруч, вони мали б ту ж ширину, що і окремий роздільник на 200 пікселів. Якби вони насправді округлили до 1 пікселя (як це означатиме, якщо дивитись на окремі елементи), ми очікуємо, що роздільник 200px буде наполовину довшим.

Це можна побачити в цьому фрагменті коду, який можна виконати:

body {
  color:            white;
  font-family:      sans-serif;
  font-weight:      bold;
  background-color: #334;
}

.div_house div {
  height:           10px;
  background-color: orange;
  display:          inline-block;
}

div#small_divs div {
  width:            0.5px;
}

div#large_div div {
  width:            200px;
}

<div class="div_house" id="small_divs">
  <p>0.5px div x 400</p>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
  <p>200px div x 1</p>
  <div></div>
</div>

Розгорніть фрагмент

— Сенді Гіффорд
джерело

11

Що стосується візуалізації: у вашому прикладі у вас є два діви, які змагаються за кожен піксель. У цих випадках ваш браузер вибере одну з них, щоб відобразити весь піксель - щоб уникнути розмиття та інших дивних артефактів. Якщо ви встановите половину пікселів блакитним кольором, використовуючи :nth-child(even)або :nth-child(odd), ви помічаєте, що або вся справа помаранчева, або вся справа синя - не суміш синього та оранжевого (що було б деяким невиразним фіолетовим відтінком).

— Даан Вілмер

16

Ширина буде округлена до цілої кількості пікселів .

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

редагувати : Я протестував демонстрацію @ Skilldrick в деяких браузерах заради цікавості. При використанні значень дробових пікселів (не у відсотках вони працюють, як було запропоновано у статті, яку я пов’язав) IE9p7 та FF4b7, схоже, округлюються до найближчого пікселя, тоді як Opera 11b, Chrome 9.0.587.0 та Safari 5.0.3 усіляють десяткові знаки. Не те, щоб я сподівався, що все-таки вони мають щось спільне ...

— MartinodF
джерело

7

Вони ніби округляють значення до найближчого цілого числа; але я бачу непослідовність у хромі, сафарі та фаєрфоксі.

Наприклад, якщо 33,3% перетворюється на 420,945 пікселів

хром і firexfox показують це як 421 пікселів. в той час як сафарі показує його як 420 пікселів.

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

http://ejohn.org/blog/sub-pixel-problems-in-css/

— агааза
джерело

6

Елементи повинні фарбувати до цілої кількості пікселів, і, як інші відповіді охоплені, відсотки справді дотримуються.

Важливо відзначити, що пікселі в даному випадку означає Css пікселі , а НЕ екранні пікселі, тому 200px контейнер з 50,7499% дітьми з округлюються до 101px Css пікселів , які потім отримують надані на 202px на екрані сітківки ока, а НЕ 400 *. 507499 ~ = 203 пікс.

У цьому розрахунку щільність екрана ігнорується, і немає можливості намалювати * елемент під конкретні розміри субпікселя сітківки. Ви не можете мати фони або рамки елементів, розміщені на пікселі менше 1 css , хоча фактичний розмір елемента може бути меншим за 1 css піксель, як показав Sandy Gifford.

[*] Ви можете використовувати деякі прийоми, такі як 0,5 зміщення поля-тіні тощо, але фактичні властивості моделі коробки підфарбуватимуть до повного пікселя CSS.

— Олександр Пономаренко
джерело

Відмінне спостереження

— серпня