Pourquoi le CSS ne prend-il pas en charge le remplissage négatif?

J'ai vu cela à plusieurs reprises que la perspective d'un remplissage négatif pourrait aider le développement du CSS de certains éléments de page à devenir meilleur et plus facile. Pourtant, il n'y a aucune disposition pour un remplissage négatif dans le CSS W3C. Quelle est la raison derrière cela? Y a-t-il une obstruction à la propriété qui empêche son utilisation en tant que telle? Merci pour vos réponses.

MISE

À JOUR Comme je le vois, par exemple, dans le cas où vous utilisez une police qui a quelque chose, disons, un espacement vertical de 20 pixels, et que vous souhaitez appliquer une bordure en pointillés au bas de la police, par exemple lorsqu'un lien hypertexte apparaît. Dans de tels cas, vous trouverez que le style est bien trop minable, car la bordure en pointillés apparaîtra 20px sous le mot spécifié. si vous utilisez une marge négative, cela ne fonctionnera pas, car la marge modifie la zone à l'extérieur des frontières. Un rembourrage négatif pourrait aider dans de telles situations.

J'ai récemment répondu à une question différente où j'ai discuté de la raison pour laquelle le modèle de boîte est tel qu'il est.

Il y a des raisons spécifiques pour chaque partie du modèle de boîte. Le remplissage est destiné à étendre l'arrière-plan au-delà de son contenu. Si vous devez réduire l'arrière-plan du conteneur, vous devez donner au conteneur parent la taille correcte et donner à l'élément enfant des marges négatives. Dans ce cas, le contenu n'est pas en cours de remplissage , il déborde.

Le remplissage par définition est un entier positif (y compris 0).

Un remplissage négatif entraînerait la réduction de la bordure dans le contenu (voir la page du modèle de boîte sur w3) - cela rendrait la zone de contenu plus petite que le contenu, ce qui n'a pas de sens.

Je voudrais décrire un très bon exemple de pourquoi negative paddingserait utile et génial.

Comme nous tous les développeurs CSS le savons, aligner verticalement un div de dimensionnement dynamique dans un autre est un problème et, pour la plupart, considéré comme impossible en utilisant uniquement CSS. L'incorporation de negative paddingpourrait changer cela.

Veuillez consulter le code HTML suivant:

<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>

Avec le CSS suivant, nous pourrions centrer verticalement le contenu de l'intérieur divdans l'extérieur div:

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

Permettez-moi de vous expliquer ...

Le positionnement absolu du haut du div intérieur à 50% place le bord supérieur du div intérieur au centre du div extérieur. Assez simple. En effet, le positionnement basé sur un pourcentage est relatif aux dimensions internes de l'élément parent .

Le remplissage basé sur le pourcentage , quant à lui, est basé sur les dimensions intérieures de l'élément ciblé . Ainsi, en appliquant la propriété de, padding-top: -50%;nous avons déplacé le contenu de la div interne vers le haut d'une distance de 50% de la hauteur du contenu de la div interne, centrant ainsi le contenu de la div interne dans la div externe et permettant toujours la dimension de hauteur de la div interne. div intérieur pour être dynamique!

Si vous me demandez OP, ce serait le meilleur cas d'utilisation, et je pense qu'il devrait être implémenté juste pour que je puisse faire ce hack. lol. Ou, ils devraient simplement corriger la fonctionnalité de vertical-alignet nous donner une version de vertical-alignqui fonctionne sur tous les éléments.

Cela pourrait aider, au fait:

Le box-dimensionnement propriété CSS de est utilisée pour modifier le modèle de boîte CSS par défaut utilisé pour calculer les largeurs et les hauteurs des éléments.

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

Vous avez demandé POURQUOI, pas comment le tromper:

Habituellement à cause de la paresse des programmeurs de l'implémentation initiale, parce qu'ils ont déjà mis beaucoup plus d'efforts dans d'autres fonctionnalités, offrant des effets secondaires plus étranges comme des flotteurs, parce qu'ils étaient plus demandés par les concepteurs à l'époque et pourtant ils n'ont pas pris le temps pour permettre cela afin que nous puissions utiliser les propriétés QUATRE pour pousser / tirer un élément contre ses voisins (maintenant nous n'avons que quatre à pousser, et seulement 2 à tirer).

Lorsque le html a été conçu, les magazines adoraient le texte redistribué autour des images à l'époque, maintenant détestés parce qu'aujourd'hui nous avons des tendances tactiles et adorons les choses carrées avec beaucoup d'espace et rien à lire. C'est pourquoi ils mettent plus de pression sur les flotteurs que sur le centrage, ou ils auraient pu concevoir quelque chose comme margin-top: fill;ou margin: average 0;simplement aligner le contenu vers le bas, ou répartir son espace supplémentaire autour.

Dans ce cas, je pense qu'il n'a pas été mis en œuvre pour la même raison qui fait que CSS manque de :parent pseudo-sélecteur: pour éviter les évaluations en boucle.

Sans être ingénieur, je peux voir que CSS est actuellement fait pour peindre des éléments une fois, rappelez-vous certaines propriétés pour les futurs éléments à peindre, mais ne revenez JAMAIS à des éléments déjà peints.

C'est pourquoi (je suppose) le remplissage est calculé sur la largeur, car c'est la valeur qui était disponible au moment de commencer à le peindre.

Si vous aviez une valeur négative pour le remplissage, cela affecterait les limites extérieures, qui ont DÉJÀ été définies lorsque la marge a déjà été définie. Je sais, rien n'a encore été peint, mais quand vous lisez comment se déroule le processus de peinture, créé par des génies avec la technologie des années 90, j'ai l'impression de poser des questions stupides et de dire simplement "merci" hehe.

L'une des exigences des pages Web est qu'elles soient rapidement disponibles, contrairement à une application qui peut prendre son temps et consommer les ressources informatiques pour que tout soit correct avant de l'afficher, les pages Web doivent utiliser peu de ressources (elles sont donc adaptées à chaque appareil. possible) et faire défiler en un rien de temps.

Si vous voyez des applications avec une redistribution et un positionnement complexes, comme InDesign, vous ne pouvez pas faire défiler aussi vite! Il faut un gros effort de la part des processeurs et de la carte graphique pour passer aux pages suivantes!

Donc peindre et calculer en avant et oublier un élément une fois dessiné, pour l'instant cela semble être un MUST.

L'installation d'un Iframe à l'intérieur des conteneurs ne correspondra pas à la taille du conteneur. Il ajoute environ 20 px de rembourrage. Il n'existe actuellement aucun moyen simple de résoudre ce problème. Vous avez besoin de javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Des marges négatives seraient une solution facile.

Parce que les concepteurs de CSS n'avaient pas la clairvoyance d'imaginer la flexibilité que cela apporterait. Il existe de nombreuses raisons d'élargir la zone de contenu d'une boîte sans affecter sa relation avec les éléments voisins. Si vous pensez que ce n'est pas possible, mettez un peu de tempsnowrap du texte dans une boîte, définissez une largeur sur la boîte et regardez comment le contenu débordé ne fait rien à la mise en page.

Oui, cela est toujours d'actualité avec CSS3 en 2019; exemple: les dispositions de la flexbox. Les marges des éléments Flexbox ne se réduisent pas, donc pour les espacer uniformément et les aligner avec le bord visuel du conteneur, il faut soustraire les marges des éléments du remplissage de leur conteneur. Si un résultat est <0, vous devez utiliser une marge négative sur le conteneur ou additionner ce négatif avec la marge existante. C'est-à-dire que le contenu de l'élément influe sur la façon dont on définit les marges de celui-ci, qui est à l'envers. La sommation ne fonctionne pas correctement lorsque le contenu des éléments flexibles a des marges définies dans différentes unités ou est affecté par une taille de police différente, etc.

L'exemple ci-dessous devrait, idéalement, avoir des boîtes grises alignées et régulièrement espacées, mais malheureusement elles ne le sont pas.

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>

J'ai rencontré suffisamment de ces petits problèmes au fil des ans où un peu de remplissage négatif aurait fait beaucoup de chemin, mais à la place, je suis obligé d'ajouter des calc()préprocesseurs non sémantiques de balisage, d'utilisation ou CSS qui ne fonctionnent que lorsque les unités sont les mêmes , etc.