Czy piksel CSS może być ułamkiem?

81

Czy CSS może pxbyć ułamkiem? Czy jest to dozwolone przez normy? A jeśli tak, to czy główne przeglądarki to obsługują?

Poprzyjmy odpowiedzi dokumentacją, ludzie.

Kees C. Bakker
źródło
@MetalFrog to pytanie pochodzi z dyskusji w pracy :-)
Kees C. Bakker
3
Jak na ironię, ostatnio musiałem użyć ułamkowego piksela, aby uzyskać sortowalną siatkę interfejsu użytkownika jQuery do prawidłowego układu. Gdy margines elementu zastępczego był taki sam lub o jeden piksel mniejszy niż margines otaczających elementów, podczas przeciągania siatka przesuwała się po całym miejscu. Jedynym rozwiązaniem (i to w różnych przeglądarkach!) Było zmniejszenie marginesu symbolu zastępczego o 0,5 piksela. Wtedy wszystko działało dobrze. Niezależnie od tego, czy jest to specyfikacja, czy nie, jest w większości pedantyczna, na koniec dnia musisz zrobić to, co musisz.
Chris Pratt
Czy istnieją zasady dotyczące renderowania linii mniejszej niż 1 piksel przez przeglądarkę? Mam wiele stron (dokumenty Word przekonwertowane na HTML), w których obramowania tabeli mają szerokość odpowiadającą ułamkowi piksela. Są one wyświetlane jako 1px w IE i Firefox, ale obramowanie nie jest w ogóle widoczne w chrome
Andy,
1
Czy Twoje pierwotne pytanie dotyczyło ułamków zwykłych czy dziesiętnych? Ułamek to 1/3, a ułamek dziesiętny to 0,33 (powtórzenie). Matematycznie jest różnica i jeśli cokolwiek dba o techniczne aspekty matematyki, to są to komputery.
Mike
1
Brak duplikatów, ale powiązane - dyskusja na temat poszanowania ułamkowych pikseli podczas renderowania: stackoverflow.com/questions/4308989/ ...
Sandy Gifford

Odpowiedzi:

69

Tak, możesz określić ułamkowe piksele. Ponieważ jest to część CSS od pierwszej wersji, powinno być dobrze obsługiwane przez każdą przeglądarkę, która w ogóle obsługuje CSS.

Odniesienie: CSS 2.1: 4.3.2 Długości

„Format wartości długości (oznaczonej w tej specyfikacji przez <długość>) to <liczba> (z kropką dziesiętną lub bez niej), po której bezpośrednio następuje identyfikator jednostki (np. Px, em itp.).”

Gdy elementy są wyświetlane na ekranie, większość przeglądarek w naturalny sposób zaokrągla pozycję do najbliższego piksela przy użyciu poziomu powiększenia 100%. Przy wyższych poziomach powiększenia zauważysz, że rozpoznawane są ułamkowe wartości pikseli.

Guffa
źródło
1
@ KeesC.Bakker: Właśnie to dodałem. :)
Guffa
6
Problem polega na tym, że różne przeglądarki działają inaczej: stackoverflow.com/a/5587820/405015
thirtydot
4
Znalazłem interesującego bloga na ten temat: ejohn.org/blog/sub-pixel-problems-in-css
cboler
12
Dla wyjaśnienia, ułamek to 1/3, podczas gdy ułamek dziesiętny to 0,33 (powtarzanie). Przyznaję, że jest to częściowo semantyka (nie na kierunku matematycznym, tak nie jest), ale prawidłowa odpowiedź jest taka, że ​​CSS nie obsługuje ułamków ani ułamków pikseli. Obsługuje jednak dziesiętne wartości pikseli.
Mike
4
@Mike: Termin ułamek może być używany na różne sposoby, podobnie jak termin dziesiętny, który może określać liczbę mającą część ułamkową lub liczbę wyrażoną jako dziesiętna.
Guffa