| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| ideas:box-model-extensions [2011/08/19 17:48] – [Size Keywords] copyedit crissov | ideas:box-model-extensions [2021/10/01 15:26] (current) – fantasai |
|---|
| ====== Box Model Extensions ====== | ====== Extensions de modèle de boîte ====== |
| We want to define several new things that would properly go in Box Model, but we don't want to wait for that, the most complicated module in all of CSS, to be finished (or even properly started). So, we should make a new module that does a few "extensions" to the box model, assuming that the base case will be properly defined later. | Nous voulons définir plusieurs nouvelles choses qui iraient correctement dans Box Model, mais nous ne voulons pas attendre que le module le plus compliqué de CSS soit terminé (ou même correctement démarré). Nous devrions donc créer un nouveau module qui ajoute quelques "extensions" au modèle de boîte, en supposant que le scénario de base sera correctement défini ultérieurement. |
| |
| ===== Aspect Ratio ===== | ===== Rapport d'aspect ===== |
| As defined at http://www.xanthir.com/blog/b4810. | Tel que défini à l'adresse http://www.xanthir.com/blog/b4810. |
| |
| Would grant the ability to specify an 'aspect ratio' for the a box, locking its width and height into a definite ratio. This can currently be partially hacked by exploiting some minor details of how percentages work in padding, but having this be explicit is better and allows a more thorough treatment. | Accorderait la possibilité de spécifier un "rapport d'aspect" pour une boîte, verrouillant sa largeur et sa hauteur dans un rapport défini. Cela peut actuellement être partiellement piraté en exploitant quelques détails mineurs sur le fonctionnement des pourcentages dans le remplissage, mais cela doit être explicite, ce qui est préférable et permet un traitement plus approfondi. |
| |
| ===== Size Keywords ===== | <note> |
| The ''auto'' keyword for width and height resolve to interesting values based on context, which can't be duplicated elsewhere. For example, tables and floats resolve ''auto'' using the "shrinkwrap" algorithm, while normal blocks use a "fill" algorithm to fill their parent as much as possible. | This has been adopted into [[https://www.w3.org/TR/css-sizing-4/|CSS Box Sizing Level 4]]. |
| | </note> |
| |
| These behaviors should be explicitly named so they can be used generally: | ===== Taille Mots-clés ===== |
| * ''fill'': The normal width of a display:block element, where it fills its parent. | Le mot clé '' auto '' pour largeur et hauteur donne des valeurs intéressantes en fonction du contexte, qui ne peuvent pas être dupliquées ailleurs. Par exemple, les tables et les flottants résolvent '' auto '' à l'aide de l'algorithme "shrinkwrap", tandis que les blocs normaux utilisent un algorithme "de remplissage" pour remplir leur parent autant que possible. |
| * ''min-content'': The width of a box if you take all optional linebreak opportunities. | |
| * ''max-content'': The width of a box if you take no optional linebreak opportunities. | Ces comportements doivent être explicitement nommés pour pouvoir être utilisés de manière générale: |
| * ''fit-content'': ''min(max-content, fill)'' | * '' fill '': La largeur normale d'un élément display: block, où il remplit son parent. |
| | * '' min-content '': La largeur d'une boîte si vous prenez toutes les opportunités de saut de ligne facultatives. |
| | * '' max-content '': La largeur d'une boîte si vous ne prenez aucune opportunité de saut de ligne facultatif. |
| | * '' fit-content '': '' min (max-content, fill) '' |
| | |
| | <note> |
| | This has been adopted into [[https://www.w3.org/TR/css-sizing-3/|CSS Box Sizing Level 3]]. |
| | </note> |
