Intrinsic Sizing
intrinsische Größenbestimmung
Die intrinsische Größenbestimmung lässt den Inhalt eines Elements dabei helfen, seine Größe zu bestimmen, anstatt nur eine feste Größe von außen zu verwenden.
Ein weiteres Beispiel
Eine Dashboard-Seitenleiste verwendet `fit-content(24rem)`. Sie kann für übersetzte Beschriftungen bis zu 24rem wachsen, während der Bericht den verbleibenden Platz einnimmt. Eine 70-Zeichen-Fall-ID kann umbrochen werden. Dies verhindert, dass ihre `min-content`-Größe die ganze Seite seitlich scrollbar macht.
Hauptteile
- 01Inhaltsbeitrag
- 02verfügbarer Speicherplatz
- 03Verwendete aufgelöste Größe
Verwenden Sie es, wenn
Verwenden Sie intrinsische Größenwörter und -funktionen, wenn der Inhalt die Größe beeinflussen soll, aber dennoch innerhalb klarer Layoutgrenzen bleibt.
Nutze es nicht, wenn
Testen Sie langen Text ohne Unterbrechungen, Bilder und andere ersetzte Elemente, Übersetzungen und Standard-Mindestgrößen, bevor Sie sich darauf verlassen.
In Code verwendeter Name
min-content, max-content, fit-content(), and intrinsic size contributions Vor dem Ausliefern
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with intrinsische Größenbestimmung (Intrinsic Sizing). User context: Eine Dashboard-Seitenleiste verwendet `fit-content(24rem)`. Sie kann für übersetzte Beschriftungen bis zu 24rem wachsen, während der Bericht den verbleibenden Platz einnimmt. Eine 70-Zeichen-Fall-ID kann umbrochen werden. Dies verhindert, dass ihre `min-content`-Größe die ganze Seite seitlich scrollbar macht. Design concept to apply: intrinsische Größenbestimmung (Intrinsic Sizing). Why it fits: Verwenden Sie intrinsische Größenwörter und -funktionen, wenn der Inhalt die Größe beeinflussen soll, aber dennoch innerhalb klarer Layoutgrenzen bleibt. Do not use it when: Testen Sie langen Text ohne Unterbrechungen, Bilder und andere ersetzte Elemente, Übersetzungen und Standard-Mindestgrößen, bevor Sie sich darauf verlassen. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Ein formelles Dokument kann trotzdem ein Entwurf, ein Release Candidate oder die finale Version sein. Prüfe seinen Status und die Browser- oder Plattform-Unterstützung. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Diese Anfrage prüfen
Review how intrinsische Größenbestimmung (Intrinsic Sizing) is used now. Definition: Die intrinsische Größenbestimmung lässt den Inhalt eines Elements dabei helfen, seine Größe zu bestimmen, anstatt nur eine feste Größe von außen zu verwenden. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.