Чому CSS не підтримує негативне заміщення?

Я не раз бачив, що перспектива негативного прокладки може допомогти розвитку CSS певних елементів сторінки стати кращою та легшою. Тим не менш, у W3C CSS не передбачено негативного прокладки. У чому причина цього? Чи є якісь перешкоди для власності, які заважають використовувати його як таке? Дякую за відповіді

ОНОВЛЕННЯ

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

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

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

Прокладка за визначенням - це додатне ціле число (включаючи 0).

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

Я хотів би описати дуже вдалий приклад того, чому negative paddingбуло б корисно і приголомшливо.

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

Перегляньте наступний 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>

За допомогою наступного CSS ми зможемо вертикально центрувати вміст внутрішнього divвсередині зовнішнього div:

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

Дозвольте мені пояснити ...

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

Процентна підкладка , з іншого боку, базується на внутрішніх розмірах цільового елемента . Таким чином, застосувавши властивість, padding-top: -50%;ми змістили вміст внутрішнього діва вгору на відстань 50% від висоти вмісту внутрішнього діва, отже, центрируючи вміст внутрішнього діва у зовнішньому діві і все ж дозволяючи розмір висоти внутрішній дів бути динамічним!

Якщо ви запитаєте мене ОП, це було б найкращим випадком використання, і я думаю, що його слід реалізувати саме для того, щоб я міг зробити цей злом. Лол. Або вони просто повинні зафіксувати функціональність vertical-alignта надати нам версію, vertical-alignяка працює на всіх елементах.

Це може допомогти, до речі:

Коробчата проклеюванням CSS властивість використовується , щоб змінити модель коробки з CSS по замовчуванням , використовувану для обчислення ширини і висоти елементів.

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

Ви запитали ЧОМУ, а не як його обдурити:

Зазвичай через лінь програмістів первинної реалізації, тому що вони вже доклали більше зусиль в інших функціях, надаючи більше дивних побічних ефектів, таких як поплавці, тому що тоді вони були більш запитувані дизайнерами, і все ж вони не зайняли час щоб дозволити це, тому ми можемо використовувати ЧЕТВЕРТІ властивості для проштовхування / витягування елемента проти його сусідів (тепер у нас є лише чотири, щоб натиснути, і лише 2 для витягування).

Коли розроблявся html, журнали любили текст, який відновлювався навколо зображень тоді, зараз ненавидів, тому що сьогодні ми маємо тенденції дотиків і любимо скарбницькі речі з великим простором і нема чого читати. Ось чому вони чинять більший тиск на поплавці, ніж на центрування, або вони могли створити щось на кшталт margin-top: fill;або margin: average 0;просто вирівняти вміст донизу, або розподілити його додатковий простір навколо.

У цьому випадку я думаю, що вона не була реалізована через ту ж причину, що змушує CSS бракувати :parentпсевдоселектора: Щоб запобігти циклічним оцінкам.

Не будучи інженером, я можу побачити, що CSS зараз створений для фарбування елементів один раз, пам’ятайте деякі властивості для майбутніх елементів, які слід фарбувати, але НІКОЛИ не повертаючись до вже пофарбованих елементів.

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

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

Однією з вимог веб-сторінок є те, що вони швидко доступні, на відміну від програми, яка може зайняти свій час і з'їсти комп'ютерні ресурси, щоб виправити все правильно перед її відображенням, веб-сторінки повинні використовувати мало ресурсів (тому вони вміщуються на кожному пристрої можливо) і прокручуватися на вітрі.

Якщо ви бачите програми зі складним перезарядом та позиціонуванням, як-от InDesign, ви не зможете прокрутити це швидко! Щоб перейти на наступні сторінки, потрібні великі зусилля і від процесорів, і від графічної картки!

Тож малювати та обчислювати вперед та забувати про один раз намальований елемент, бо зараз це здається ОБОВ'ЯЗКОВО.

Встановлення iframe всередині контейнерів не відповідає розміру контейнера. Це додає близько 20 пікс. В даний час немає простого способу виправити це. Вам потрібен Javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Негативна маржа була б простим рішенням.

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

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

Наведений нижче приклад повинен в ідеалі мати вирівняні та рівномірно розташовані сірі поля, але, на жаль, це не так.

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>

Протягом багатьох років я стикався з цими невеликими проблемами, коли трохи негативної прокладки пройшло б довгий шлях, але натомість я змушений додати несемантичну розмітку, використання calc()або CSS-препроцесори, які працюють лише тоді, коли одиниці однакові. тощо.