Pytanie Czy miejsca po przecinku w szerokości CSS są respektowane?


Coś, nad czym zastanawiałem się przez jakiś czas podczas projektowania CSS.

Czy miejsca dziesiętne w szerokości css są respektowane? Czy są one zaokrąglone?

.percentage
{
    width: 49.5%;
}

lub

.pixel
{
    width: 122.5px;
}

192
2017-11-29 23:03


pochodzenie




Odpowiedzi:


Jeśli jest to szerokość procentowa, to tak, jest szanowany. Jak zauważył Martin, rzeczy ulegają awarii, gdy dojdzie się do ułamkowych pikseli, ale jeśli wartości procentowe podniosą całkowitą wartość pikseli (na przykład 50,5% z 200px w przykładzie), otrzymasz rozsądne, oczekiwane zachowanie.

Edytować: Ja zaktualizowano przykład, aby pokazać, co dzieje się z ułamkowymi pikselami (w Chrome wartości są obcięte, więc 50, 50,5 i 50.6 wszystkie mają tę samą szerokość).


162
2017-11-29 23:12



Masz rację, że wartości procentowe nie są zaokrąglane same, ale szerokość piksela z miejscami dziesiętnymi i końcowy wynik obliczeń procentowych zawsze będzie zaokrąglany do całych pikseli :) - MartinodF
@MartinodF Dzięki za wyjaśnienia. Tak, piksele są zaokrąglone, ale nie określa się, czy faktycznie zaokrąglają one do najbliższej, podłogi czy sufitu (co rozumiem przez "rzeczy się psują"). - Skilldrick
@Skilldrick Wypróbowałem ułamkowe piksele w twojej wersji demonstracyjnej w niektórych przeglądarkach ze względu na ciekawość: zarówno IE9p7, jak i FF4b7 zaokrąglono do najbliższego piksela, podczas gdy Opera 11b, Chrome 9.0.587.0 i Safari 5.0.3 obcięły tę wartość. @ Andras Tylko wyjaśnić: nie mówię, że wewnętrzne wartości są zaokrąglone, tylko ostateczne wartości renderowania są. Jeśli powiększysz lub niektóre elementy dziedziczą właściwości i tak dalej, to miejsca dziesiętne będą się liczyć. - MartinodF
Nowoczesna aktualizacja: faktycznie moja wersja Chrome 24 zaokrągla w górę ułamkowe piksele. Oglądanie jsFiddle, 50,5 i 50.6 zarówno zaokrągla do 51 pikseli, jak i o 1 piksel więcej niż 50 pikseli div. - Michael Butler
Najważniejsze, aby zwrócić uwagę na to, w jaki sposób elementy o ułamkowych wymiarach pikseli układają się obok siebie. Podczas gdy oni zrobić zaokrąglają wzrokowo, nie zajmują dodatkowego miejsca po umieszczeniu obok innych elementów o wymiarach wymiarowych: cssdesk.com/8R2rB - Sandy Gifford


Nawet jeśli liczba jest zaokrąglana podczas malowania strony, pełna wartość zostaje zachowana w pamięci i używana do późniejszego obliczania dziecka. Na przykład, jeśli twoje opakowanie 100.4999px maluje do 100 pikseli, to dziecko o szerokości 50% zostanie obliczone jako .5 * 100.4999 zamiast .5 * 100. I tak dalej na głębsze poziomy.

Stworzyłem głęboko zagnieżdżone układy układów siatki, w których szerokości rodziców to ems, a dzieci są procentami, a włącznie z czterema punktami dziesiętnymi w górę strumienia miały zauważalny wpływ.

Sprawa Edge'a, na pewno, ale o czym należy pamiętać.


43
2017-11-29 23:29



Przyjęta odpowiedź jest bardziej kompletna niż ta, ale anegdota w tej sprawie daje mi lepsze wyczucie tego, jak będą odczuwalne implikacje techniczne. Dziękujemy za przesłanie wiadomości. - Tom


Chociaż ułamkowe piksele mogą wydawać się zaokrąglać poszczególne elementy (np @SkillDrick demonstruje bardzo dobrze) ważne jest, aby wiedzieć, że ułamkowe piksele są rzeczywiście przestrzegane w rzeczywistym modelu pudełkowym.

Najlepiej widać to, gdy elementy są układane obok siebie (lub nad sobą); innymi słowy, gdybym umieścił obok siebie podziałki o wielkości 0.5 o 0.5 piksela, miałby taką samą szerokość jak pojedynczy element div o rozdzielczości 200 pikseli. Jeśli wszyscy tak właściwie zaokrąglone do 1 piksela (patrząc na poszczególne elementy oznaczałyby) spodziewalibyśmy się, że dł 200px będzie o połowę krótszy.

Widać to w tym działającym fragmencie kodu:

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>


20
2018-04-09 21:28



W odniesieniu do renderowania: na przykład, masz dwóch div konkurujących o każdy piksel. W takich przypadkach przeglądarka wybierze jeden z nich, aby renderować cały piksel - aby uniknąć rozmycia i innych dziwnych artefaktów. Jeśli ustawisz połowę pikseli na niebieski, użyj :nth-child(even) lub :nth-child(odd)zauważysz, że albo całość jest pomarańczowa, albo cała sprawa jest niebieska - nie mieszanina niebieskiego i pomarańczowego (która byłaby niejasnym purpurowym odcieniem). - Daan Wilmer
@DaanWilmer To naprawdę dobry sposób na wyjaśnienie tego - Sandy Gifford


Szerokość zostanie zaokrąglona do liczby całkowitej piksele.

Nie wiem, czy każda przeglądarka zaokrągla to w jednakowy sposób. Wszystkie wydają się mieć inną strategię przy zaokrąglaniu procentów pod pikselami. Jeśli interesują Cię szczegóły zaokrąglania podpikseli w różnych przeglądarkach, to jest doskonały artykuł na temat ElastiCSS.

edytować: Przetestowałem demo Skilldricka w niektórych przeglądarkach ze względu na ciekawość. Podczas używania ułamkowego piksel wartości (nie wartości procentowe, działają zgodnie z sugestią w łączonym artykule) IE9p7 i FF4b7 wydają się zaokrąglać do najbliższego piksela, podczas gdy Opera 11b, Chrome 9.0.587.0 i Safari 5.0.3 obcinają miejsca dziesiętne. Nie żebym miał nadzieję, że mają ze sobą coś wspólnego ...


16
2017-11-29 23:10





Wydaje się, że zaokrąglają wartości do najbliższej liczby całkowitej; ale widzę niespójności w chrome, safari i firefox.

Na przykład, jeśli 33,3% konwertuje do 420,945px

chrome i firexfox pokazują go jako 421px. podczas safari pokazuje jego 420px.

Wydaje się, że chrom i firefox podążają za logiką podłogi i sufitu, podczas gdy safari nie. Ta strona wydaje się omawiać ten sam problem

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


5
2017-08-19 12:16





Elementy muszą być pomalowane na liczbę całkowitą pikseli, a pozostałe odpowiedzi dotyczą procentów.

Ważną informacją jest to piksele w tym przypadku oznacza piksele css, a nie pikseli ekranu, więc pojemnik 200px z 50,7499% dzieckiem zostanie zaokrąglony do 101 pikseli piksele css, które następnie zostają przekształcone na ekran 202px na ekranie siatkówki, oraz nie 400 * .507499 ~ = 203px.

Gęstość ekranu jest ignorowana w tych obliczeniach i nie ma możliwości dopasowania elementu do określonych rozmiarów podpikseli siatkówki. Nie możesz mieć tła lub obramowania elementów z mniej niż 1 piksel css rozmiar, nawet jeśli rzeczywisty rozmiar elementu może być mniejszy niż 1 piksel css, jak pokazał Sandy Gifford.


5
2018-05-19 20:44



Doskonała obserwacja - August


Ciekawe, że pomiędzy odpowiedzią Natekoechley i Olex Ponomarenko, że dokładne wartości są przechowywane w pamięci i brane pod uwagę w przypadku niektórych rzeczy, ale nie wszystkich.


1
2017-08-23 04:19