Dlaczego CSS nie obsługuje dopełnienia ujemnego?


124

Wielokrotnie widziałem to, że perspektywa negatywnego wypełnienia może pomóc w rozwoju CSS niektórych elementów strony na lepsze i łatwiejsze. Jednak w W3C CSS nie ma przepisu na ujemne wypełnienie. Jaki jest tego powód? Czy jest jakaś przeszkoda w nieruchomości, która uniemożliwia jej wykorzystanie jako takiej? Dziękuję za odpowiedzi.

AKTUALIZACJA

Jak widzę, na przykład w przypadku, gdy używasz czcionki, która ma coś, powiedzmy, 20 pikseli odstępów w pionie, i chcesz zastosować przerywaną ramkę na dole czcionki, powiedz, kiedy pojawi się hiperłącze. W takich przypadkach styl będzie zbyt odrapany, ponieważ przerywana ramka pojawi się 20 pikseli poniżej określonego słowa. jeśli użyjesz ujemnego marginesu, to nie zadziała, ponieważ margines zmienia obszar poza granicami. W takich sytuacjach może pomóc dopełnienie negatywne.


27
ponieważ ujemne dopełnienie nie ma sensu
Petah

1
Jest taki sam, jak w kodzie HTML wygenerowanym przez Frontpage. To trochę działa, ale generuje mnóstwo błędów podczas sprawdzania poprawności. Dopełnienie ujemne nie jest częścią specyfikacji, ale nadal jest obsługiwane przez przeglądarki.
Linus Kleen

9
Wiele osób chciałoby mieć przykład. Oto moje i dlaczego wolałabym negatywne wypełnienie. Korzystając z funkcji obramowania obrazu, możesz chcieć, aby obramowanie obrazu nieznacznie zachodziło na tekst (na przykład, jeśli tworzysz podkreślony błyszczący bąbelek, bardzo popularny w Internecie przez te dni;))
Himmators

81
Jeśli coś „nie ma sensu” dla kogoś, nie jest to dla niego wymówka, aby stanąć komuś w drodze.
Rolf

1
Próbuję wyświetlić kod w <span>tagu, a sposób, w jaki jest analizowany, powoduje dodatkowe podziały wierszy na początku bloku kodu. Dzięki wypełnieniu ujemnemu mógłbym usunąć tę dodatkową przestrzeń.
Steven Lu

Odpowiedzi:


86

Niedawno odpowiedziałem na inne pytanie, w którym omówiłem dlaczego model pudełkowy jest taki, jaki jest.

Każda część modelu pudełkowego ma swoje specyficzne powody. Dopełnienie ma na celu rozszerzenie tła poza jego zawartość. Jeśli chcesz zmniejszyć tło kontenera, powinieneś ustawić odpowiedni rozmiar kontenera nadrzędnego i nadać elementowi potomnemu pewne ujemne marginesy. W tym przypadku zawartość nie jest wypełniona , jest przepełniona.


2
Dzięki ziom. To daje mi satysfakcjonujący powód. Twoje zdrowie. :)
ikartik90

11
Co zrobić, jeśli chcesz zmniejszyć obramowanie bliżej tekstu, na przykład gdy używasz obrazu obramowania.
Himmators,

5
czasami nie jest praktyczne edytowanie CSS wszystkich elementów potomnych kontenera. Możesz mieć ogólny CSS, który ma zastosowanie do tych elementów w całym dokumencie i nie chcesz go zmieniać na przykład dla zawartości określonego kontenera.
Rolf

15
Ech, to powód, ale nie nazwałbym tego satysfakcjonującym. Jest to przypadek, w którym spec wykracza poza opowiadał mi, jak zdefiniować moją stronę i zaczyna opowiadać, jak ja powinien określić moją stronę. Jeśli chcę, aby moje treści zachodziły na moje krawędzie tła, obramowania i / lub marginesy, to powinno być moim przywilejem, niezależnie od wyobraźni osób definiujących specyfikacje, dlaczego warto to zrobić. Przepraszam, tylko trochę zirytowany, że muszę dodać okruch syntaktyczny lub, co gorsza, jednokolorowe obrazy o szerokości jednego piksela, aby uzyskać separator o określonej wielkości, który jest mniejszy niż wysokość tekstu i wyśrodkowany w pionie.
Jason,

1
@zzzzBov, czułem, że jest to istotne ze względu na podany na końcu przykład, dlaczego chciałbym zrobić coś takiego, co jest częstym pytaniem w komentarzach na tej stronie. Trzeba przyznać, że do tego momentu mój koń był trochę za wysoki.
Jason,

4

Wypełnienie z definicji jest dodatnią liczbą całkowitą (łącznie z 0).

Ujemne dopełnienie spowodowałoby zwinięcie obramowania do treści (patrz strona modelu pudełkowego na w3) - spowodowałoby to, że obszar zawartości byłby mniejszy niż zawartość, co nie ma sensu.


37
Obramowanie zapadające się w treść jest dokładnie pożądanym efektem. Czy znasz inny sposób uzyskania tego efektu?
Rolf

4
Uzgodniono z Rolfem. Widzę, że ty, Oded, nie interesujesz się skomplikowanym eksperymentalnym projektem. Stosując ujemne wypełnienie i obramowanie, nie mając możliwości użycia jawnych wartości pikseli, praktycznie niemożliwe jest uzyskanie podobnych wyników. O ile wiem, aby osiągnąć to samo, potrzebowałbyś wielu zagnieżdżonych elementów, jednak w niektórych przypadkach sprawy stają się nieco bardziej skomplikowane.
Yeti

4

Chciałbym opisać bardzo dobry przykład dlaczego negative padding byłby przydatny i niesamowity.

Jak wszyscy z nas, programiści CSS, wiemy, że wyrównanie w pionie dynamicznie zmieniającego się elementu div w innym jest kłopotliwe i przez większość czasu postrzegane jako niemożliwe tylko przy użyciu CSS. Włączenienegative padding może to zmienić.

Zapoznaj się z następującym kodem HTML:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

Dzięki poniższemu CSS moglibyśmy wyśrodkować w pionie zawartość wewnętrznej divczęści zewnętrznej div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

Pozwólcie mi wyjaśnić ...

Absolutne ustawienie górnej krawędzi wewnętrznego elementu div na 50% powoduje umieszczenie górnej krawędzi wewnętrznego elementu div na środku zewnętrznego elementu div. Dość proste. Dzieje się tak, ponieważ pozycjonowanie oparte na procentach jest odniesione do wewnętrznych wymiarów elementu nadrzędnego .

Z drugiej strony wypełnienie procentowe opiera się na wewnętrznych wymiarach elementu docelowego . Tak więc, stosując właściwość elementu padding-top: -50%;div, przesunęliśmy zawartość wewnętrznego elementu DIV w górę o odległość 50% wysokości zawartości elementu DIV, w ten sposób umieszczając zawartość wewnętrznego elementu DIV w środku elementu DIV i nadal umożliwiając wymiar wysokości elementu wewnętrzny div, aby był dynamiczny!

Jeśli zapytasz mnie OP, byłby to najlepszy przypadek użycia i myślę, że powinien zostać zaimplementowany tylko po to, abym mógł zrobić ten hack. lol. Lub powinni po prostu naprawić funkcjonalność vertical-aligni dać nam wersję, vertical-alignktóra działa na wszystkich elementach.


1
Tak, ale w tym celu wolałbym mieć nowe atrybuty dla elementów html, zamiast przejmować zachowanie innych atrybutów. Twój przykład wymaga nowego atrybutu inside-top; jak atrybut najwyższego elementu pozycjonowanego względnie, ale względem siebie, a nie rodzica. Innym dobrym zastosowaniem ujemnego wypełnienia byłoby wykonanie elementu proporcjonalnie do jego szerokości, wypełnienie 100% wypełnieniem, ale pozwolenie elementowi na wzrost w pionie, jeśli przepełni go więcej treści, co jest niemożliwe, jeśli zawartość jest w dodatkowym rodzeństwie abs-poz. Ujemne wypełnienie przywróciłoby elementowi zwiniętemu wypełnienie do jego rozmiaru.
Sergio

w 2018 wyśrodkowanie jest tak proste, jak użycie display flex z justowaniem treści i wyrównywaniem elementów ... 3 linie kodu, aby uzyskać idealnie wyśrodkowany element div.
kaiser


1

Zapytałeś DLACZEGO, a nie jak to oszukać:

Zwykle z powodu lenistwa programistów początkowej implementacji, ponieważ już włożyli o wiele więcej wysiłku w inne funkcje, dostarczając bardziej dziwne efekty uboczne, takie jak floaty, ponieważ projektanci byli wtedy bardziej wymagani przez projektantów, a mimo to nie poświęcili czasu aby to umożliwić, abyśmy mogli użyć CZTERY właściwości do popchnięcia / przyciągnięcia elementu do sąsiadów (teraz mamy tylko cztery do pchania i tylko 2 do ciągnięcia).

Kiedy projektowano html, magazyny uwielbiały w tamtych czasach powracać do tekstu wokół obrazów, teraz znienawidzone, ponieważ dziś mamy trendy dotykowe i uwielbiamy proste rzeczy z dużą ilością miejsca i bez treści do czytania. Dlatego kładą większy nacisk na pływaki niż na centrowanie, lub mogli zaprojektować coś takiego jak margin-top: fill;lubmargin: average 0; po prostu wyrównać zawartość do dołu lub rozprowadzić dodatkową przestrzeń wokół.

W tym przypadku myślę, że nie został zaimplementowany z tego samego powodu, dla którego CSS nie zawiera pliku :parent pseudo-selektora: aby zapobiec zapętleniu ocen.

Nie będąc inżynierem, widzę, że CSS jest teraz stworzony do malowania elementów raz, pamiętam pewne właściwości przyszłych elementów do malowania, ale NIGDY nie wracam do już pomalowanych elementów.

Dlatego (chyba) dopełnienie jest obliczane na podstawie szerokości, bo to wartość, która była dostępna w momencie rozpoczęcia malowania.

Gdybyś miał ujemną wartość dla wypełnienia, wpłynęłoby to na zewnętrzne granice, które zostały JUŻ zdefiniowane, gdy margines został już ustawiony. Wiem, że jeszcze nic nie zostało namalowane, ale kiedy czytasz jak przebiega proces malowania, stworzony przez geniuszy z technologią lat 90-tych, czuję, że zadaję głupie pytania i po prostu mówię „dzięki” hehe.

Jednym z wymagań stron internetowych jest to, że są szybko dostępne, w przeciwieństwie do aplikacji, która może zająć trochę czasu i zjadać zasoby komputera, aby wszystko było poprawne przed wyświetleniem, strony internetowe wymagają niewielkich zasobów (więc pasują do każdego urządzenia to możliwe) i przewijaj je w mgnieniu oka.

Jeśli widzisz aplikacje ze złożonym przepływem i pozycjonowaniem, takie jak InDesign, nie możesz przewijać tak szybko! Przejście do następnych stron wymaga dużego wysiłku zarówno od procesorów, jak i karty graficznej!

Więc malowanie i kalkulowanie naprzód i zapominanie o narysowanym elemencie, na razie wydaje się MUSI.



0

Ponieważ projektanci CSS nie mieli przewidywania, aby wyobrazić sobie elastyczność, jaką to przyniesie. Istnieje wiele powodów, aby rozszerzyć obszar zawartości pudełka bez wpływu na jego relacje z sąsiednimi elementami. Jeśli uważasz, że nie jest to możliwe, umieść jakiś długi nowraptekst w ramce, ustaw szerokość ramki i obserwuj, jak przepełniona zawartość nie wpływa na układ.

Tak, jest to nadal aktualne w przypadku CSS3 w 2019 r .; Przykład: układy flexbox. Marginesy elementów Flexbox nie zwijają się, więc aby je równomiernie rozmieścić i wyrównać z wizualną krawędzią pojemnika, należy odjąć marginesy elementów od wypełnienia ich kontenera. Jeśli jakikolwiek wynik jest <0, musisz użyć ujemnego marginesu na kontenerze lub zsumować ten ujemny margines z istniejącym marginesem. To znaczy zawartość elementu wpływa na to, jak definiuje się dla niego marginesy, czyli odwrotnie. Sumowanie nie działa poprawnie, gdy zawartość elementów flex ma marginesy zdefiniowane w różnych jednostkach lub ma na nią inny rozmiar czcionki itp.

Poniższy przykład powinien, najlepiej mieć wyrównane i równomiernie rozmieszczone szare pola, ale niestety tak nie jest.

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}
<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

Przez lata napotkałem wystarczająco dużo tych małych problemów, w których małe ujemne wypełnienie przeszłoby długą drogę, ale zamiast tego jestem zmuszony dodać niesemantyczne znaczniki, użycie calc()lub preprocesory CSS, które działają tylko wtedy, gdy jednostki są takie same itp.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.