Programmierung

CSS-Bearbeitungsbegriffe für Seitenänderungen

Eine durchsuchbare Referenz für Kopfzeilen, Schaltflächen, Abstände, Zustände beim Überfahren und responsive Änderungen.

63 Treffer

Seitenstruktur

Kopfzeile

Header

Bedeutung

Der obere Bereich einer Seite, der normalerweise den Seitentitel, die Navigation, die Themensteuerelemente, die Sprachsteuerelemente und die Menüschaltfläche enthält.

Änderung

Das Ändern des Innenabstands, der Höhe, des Rahmens oder der Position des Headers verändert, wie hoch und fixiert der obere Bereich wirkt.

Hinweis

Eine größere Überschrift kann den sichtbaren Inhaltsbereich reduzieren, insbesondere auf mobilen Geräten.

CSS

headerpaddingheightpositionborder-bottom

Beispielanfrage

Der Titel des mobilen Headers sollte kleiner sein, während die Header-Höhe gleich bleibt.

Seitenstruktur

Fußzeile

Footer

Bedeutung

Der untere Bereich einer Seite, der häufig für Links, rechtliche Texte, Kontaktinformationen oder kleine Navigation verwendet wird.

Änderung

Änderungen an der Fußzeilen-Füllung und dem Rahmen beeinflussen den Abstand zum Inhalt und die Trennung vom darüber liegenden Inhalt.

CSS

footerpaddingborder-topmargin-top

Beispielanfrage

Mehr oberen Abstand zum Footer hinzufügen, damit er nicht wie angeklebt am Inhalt wirkt.

Seitenstruktur

Abschnitt

Section

Bedeutung

Ein großer Inhaltsbereich, der verwandte Inhalte gruppiert, z. B. einen Hero-Bereich, eine Liste von Tools, Referenzkarten oder einen Artikelbereich.

Änderung

Eine Abschnittspufferung ändert den vertikalen Rhythmus der Seite. Hintergrundänderungen lassen den Abschnitt getrennt wirken.

CSS

sectionpadding-blockborder-topbackground

Beispielanfrage

Reduzieren Sie die vertikale Füllung des Bereichs "Tools" auf mobilen Geräten.

Seitenstruktur

Container

Bedeutung

Eine innere Wrapper-Funktion, die verhindert, dass der Seiteninhalt auf großen Bildschirmen zu breit wird.

Änderung

Das Erhöhen der maximalen Breite macht den Inhalt breiter. Das Erhöhen des seitlichen Randes hält den Inhalt von den Bildschirmrändern fern.

CSS

max-widthmargin-inlinepadding-inline

Beispielanfrage

Der Hauptcontainer sollte auf Desktop-Computern etwas schmaler sein.

Seitenstruktur

Karte

Card

Bedeutung

Ein Rahmen, der ein wiederholtes Element darstellt, z. B. ein Tool, einen Referenzeintrag oder ein Ergebnis.

Änderung

Die Füllung, der Rahmen, der Radius und der Schatten einer Karte bestimmen, wie dicht oder hervorstechend jedes Element wirkt.

CSS

borderborder-radiuspaddingbackgroundbox-shadow

Beispielanfrage

Die Referenzkarten sollten kompakter sein, indem der Innenabstand reduziert wird.

Seitenstruktur

Bedienfeld

Panel

Bedeutung

Ein Rahmen, der den Arbeitsbereich darstellt und normalerweise Steuerelemente, Eingaben, Einstellungen oder Ausgaben enthält.

Änderung

Änderungen an Abständen und Layouts beeinflussen, wie einfach die wiederholte Verwendung von Werkzeugen erscheint.

CSS

borderbackgroundpaddingdisplay

Beispielanfrage

Richten Sie die Panel-Steuerelemente in einer Zeile auf Desktop-Geräten aus und stapeln Sie sie auf mobilen Geräten.

Seitenstruktur

Navigation

Bedeutung

Eine Gruppe von Links oder Schaltflächen, die zum Navigieren zwischen Hauptseiten oder Kategorien verwendet werden.

Änderung

Lücken, Ausrichtungen und Sichtbarkeitsregeln ändern das Verhalten der Navigation auf Desktop- und Mobilgeräten.

CSS

navdisplaygapalign-items

Beispielanfrage

Verbergen Sie die Navigationslinks auf kleinen Bildschirmen und behalten Sie den Menübutton sichtbar.

Seitenstruktur

Menü

Bedeutung

Eine Liste von Links oder Aktionen, die von einer Schaltfläche geöffnet werden.

Änderung

Position, Breite und Z-Index bestimmen, wo das Menü geöffnet wird und ob es über anderem Inhalt angezeigt wird.

Hinweis

Wenn das Menü im normalen Dokumentfluss platziert wird, kann es die gesamte Seite nach unten verschieben.

CSS

positionrighttopz-indexwidth

Beispielanfrage

Das Menü sollte als schwebendes Panel geöffnet werden, das rechts ausgerichtet ist.

Seitenstruktur

Seitenleiste

Sidebar

Bedeutung

Ein vertikaler Bereich auf der linken oder rechten Seite der Seite, der oft für Navigation oder Filter verwendet wird.

Änderung

Die Breite der Seitenleiste und die responsiven Regeln bestimmen, ob sie sichtbar bleibt, sich zusammenfaltet oder unter den Inhalt verschoben wird.

CSS

asidewidthpositiongrid-template-columns

Beispielanfrage

Verschieben Sie die Filter-Seitenleiste unter den Inhalt auf mobilen Geräten.

Seitenstruktur

Held

Hero

Bedeutung

Der erste große Abschnitt einer Seite, der den Hauptzweck oder die Hauptaktion vorstellt.

Änderung

Die Füllung des Heldenbereichs, die Größe der Überschrift und das Layout beeinflussen den ersten Eindruck und wie viel Inhalt in den ersten Viewport passt.

CSS

paddingbackgroundmin-heightgrid

Beispielanfrage

Reduzieren Sie die Größe des Haupttitels auf mobilen Geräten, damit die Aktionsbuttons sichtbar bleiben.

Abstand und Größe

Padding

Bedeutung

Abstand innerhalb eines Elements, zwischen dem Rahmen und dem Inhalt.

Änderung

Das Erhöhen des oberen Randes fügt mehr Platz über dem Inhalt innerhalb des Elements hinzu.

Hinweis

Mehr Füllraum erhöht in der Regel die sichtbare Größe des Elements.

CSS

paddingpadding-toppadding-rightpadding-bottompadding-left

Beispielanfrage

Erhöhen Sie den oberen Rand des Headers leicht.

Abstand und Größe

Rand

Margin

Bedeutung

Abstand außerhalb eines Elements, zwischen ihm und benachbarten Elementen.

Änderung

Das Erhöhen des unteren Rands verschiebt das nächste Element weiter nach unten.

CSS

marginmargin-topmargin-rightmargin-bottommargin-left

Beispielanfrage

Mehr Abstand zwischen dem Hero-Bereich und der Liste der Tools hinzufügen.

Abstand und Größe

Lücke

Gap

Bedeutung

Der Abstand zwischen Elementen innerhalb eines Flex- oder Grid-Layouts.

Änderung

Das Erhöhen des Abstands trennt Schwesterelemente voneinander, ohne zusätzlichen Platz um die gesamte Gruppe zu erzeugen.

CSS

gaprow-gapcolumn-gap

Beispielanfrage

Reduzieren Sie den Abstand zwischen dem Themenbutton, dem Sprachbutton und dem Menübutton.

Abstand und Größe

Breite

Width

Bedeutung

Die horizontale Größe eines Elements.

Änderung

Eine feste Breite sorgt für Stabilität des Elements. max-width lässt es auf kleinen Bildschirmen schrumpfen.

CSS

widthmin-widthmax-width

Beispielanfrage

Die Breite des Menü-Panels sollte der Länge seines längsten Elements entsprechen.

Abstand und Größe

Höhe

Height

Bedeutung

Die vertikale Größe eines Elements.

Änderung

Eine feste Höhe kann einen Header stabil halten. Eine maximale Höhe mit Überlauf kann verhindern, dass Dropdowns zu hoch werden.

CSS

heightmin-heightmax-height

Beispielanfrage

Halten Sie die Höhe des Headers stabil, während Sie die Titelgröße verkleinern.

Abstand und Größe

Maximale Breite

Max width

Bedeutung

Die maximale Breite, die ein Element erreichen darf.

Änderung

Eine Verringerung der maximalen Breite verkürzt die Textzeilen und verkleinert die Bereiche auf großen Bildschirmen.

CSS

max-widthwidth

Beispielanfrage

Legen Sie eine maximale Breite für das Dropdown-Menü fest, damit es nicht zu viel Bildschirmfläche einnimmt.

Abstand und Größe

Oben / Rechts / Unten / Links

Top / Right / Bottom / Left

Bedeutung

Positionsversatz, der mit positionierten Elementen verwendet wird.

Änderung

right: 0 richtet ein schwebendes Panel am rechten Rand seines positionierten übergeordneten Elements aus.

CSS

toprightbottomleftinset

Beispielanfrage

Richten Sie das offene Menü-Panel an der rechten Seite der Header-Steuerelemente aus.

Text

Schriftgröße

Font size

Bedeutung

Die Größe des Textes.

Änderung

Die Reduzierung der Schriftgröße hilft, lange Beschriftungen in engen Bereichen wie mobilen Headern anzuzeigen.

CSS

font-sizetext-smtext-lg

Beispielanfrage

Der mobile Seitentitel sollte kleiner sein, aber in einer Zeile bleiben.

Text

Schriftstärke

Font weight

Bedeutung

Wie dick oder fett erscheint der Text?

Änderung

Das Erhöhen der Schriftstärke macht Beschriftungen deutlicher, ohne ihre Größe zu ändern.

CSS

font-weightfont-boldfont-semibold

Beispielanfrage

Machen Sie die Kategoriebeschriftungen etwas fetter.

Text

Zeilenhöhe

Line height

Bedeutung

Der vertikale Abstand, den jede Textzeile einnimmt.

Änderung

Das Erhöhen des Zeilenabstands erleichtert das Lesen von Absätzen. Das Verringern davon macht UI-Beschriftungen kompakter.

CSS

line-heightleading

Beispielanfrage

Erhöhen Sie den Zeilenabstand des Absatzes in der Überschrift.

Text

Buchstabenabstand

Letter spacing

Bedeutung

Der Abstand zwischen einzelnen Buchstaben.

Änderung

Ein kleiner Abstand kann dazu beitragen, dass große Buchstaben klarer wirken. Zu viel Abstand kann koreanischen Text unübersichtlich machen.

CSS

letter-spacingtracking

Beispielanfrage

Entfernen Sie den negativen Buchstabenabstand von kompakten Buttons.

Text

Text ausrichten

Text align

Bedeutung

Die horizontale Ausrichtung des Textes innerhalb seines Containers.

Änderung

Rechtsausgerichteter Menütext kann dazu führen, dass ein schwebendes Menü sich wie an den rechten Rand angehängt anfühlt.

CSS

text-align

Beispielanfrage

Richten Sie den Text des Menüpunkts innerhalb des Menüfelds rechts aus.

Text

Zeilenumbruch / Kein Zeilenumbruch

Wrap / No wrap

Bedeutung

Ob ein langer Text in die nächste Zeile wechseln kann oder auf einer einzigen Zeile bleiben muss.

Änderung

No-wrap hält einen Header stabil, während Wrapping mehr Text anzeigen kann, aber normalerweise die Höhe erhöht.

CSS

white-spaceword-breakoverflow-wrap

Beispielanfrage

Halten Sie den Titel auf mobilen Geräten in einer Zeile und kürzen Sie den Überlauf.

Text

Kürzen / Ellipse

Truncate / Ellipsis

Bedeutung

Eine Möglichkeit, überlaufenden einzeiligen Text abzuschneiden und Punkte anzuzeigen.

Änderung

Die Kürzung verhindert Layoutfehler, wenn Beschriftungen länger sind als erwartet.

CSS

overflowtext-overflowwhite-space

Beispielanfrage

Kürzen Sie den Seitentitel auf sehr kleinen Bildschirmen.

Farbe und Hintergrund

Farbe

Color

Bedeutung

Die Farbe von Text oder Symbolen.

Änderung

Das Ändern der Farbe beeinflusst die Lesbarkeit und die visuelle Priorität.

CSS

color

Beispielanfrage

Der Text der ausgewählten Sprache sollte im Dark Mode sichtbar sein.

Farbe und Hintergrund

Hintergrund

Background

Bedeutung

Die Farbe oder das Bild hinter dem Inhalt eines Elements.

Änderung

Hintergrundänderungen können Bereiche trennen, aktive Zustände hervorheben oder den Kontrast verbessern.

CSS

backgroundbackground-color

Beispielanfrage

Verwenden Sie einen dunkleren Hintergrund für das ausgewählte Sprachelement im Dark Mode.

Farbe und Hintergrund

Deckkraft

Opacity

Bedeutung

Wie transparent ist ein Element?

Änderung

Eine geringere Deckkraft macht Elemente weniger auffällig, kann aber die Lesbarkeit verringern.

CSS

opacityrgbacolor-mix

Beispielanfrage

Lassen Sie deaktivierte Bedienelemente weniger auffällig erscheinen, ohne dass der Text unlesbar wird.

Farbe und Hintergrund

Gradient

Bedeutung

Ein sanfter Übergang zwischen zwei oder mehr Farben.

Änderung

Subtile Farbverläufe können Tiefe erzeugen, aber starke Farbverläufe können dazu führen, dass Tools weniger praktikabel wirken.

CSS

linear-gradientradial-gradientbackground-image

Beispielanfrage

Halten Sie den Hintergrund des Hero-Bereichs dezent und vermeiden Sie einen starken Farbverlauf.

Farbe und Hintergrund

Akzentfarbe

Accent color

Bedeutung

Eine wiederholte Farbe, die für Beschriftungen, aktive Zustände oder wichtige Aktionen verwendet wird.

Änderung

Das Ändern der Akzentfarbe verändert die visuelle Identität und den Schwerpunkt der Seite.

CSS

colorbackgroundborder-coloraccent-color

Beispielanfrage

Verwenden Sie die gleiche grüne Akzentfarbe für Kategorielabels und aktive Chips.

Farbe und Hintergrund

Kontrast

Contrast

Bedeutung

Der Unterschied zwischen Vorder- und Hintergrundfarben.

Änderung

Ein höherer Kontrast verbessert die Lesbarkeit, insbesondere im Dark Mode und auf mobilen Bildschirmen.

CSS

colorbackground-color

Beispielanfrage

Erhöhen Sie den Kontrast der Dropdown-Elemente im Dark Mode.

Rahmen und Form

Rahmen

Border

Bedeutung

Eine Linie um ein Element.

Änderung

Rahmenbreite und -farbe bestimmen, wie stark ein Feld oder eine Schaltfläche vom Hintergrund abgesetzt ist.

CSS

borderborder-colorborder-widthborder-style

Beispielanfrage

Die Rahmenfarbe des Menü-Panels sollte im Dark Mode etwas dunkler sein.

Rahmen und Form

Radius des Rahmens

Border radius

Bedeutung

Wie stark sind die Ecken einer Box oder eines Buttons abgerundet?

Änderung

Ein kleiner Radius wirkt praktisch und kompakt. Ein großer Radius wirkt weicher und verspielter.

CSS

border-radius

Beispielanfrage

Halten Sie die Rahmen der Karten bei einem Radius von 8 Pixeln.

Rahmen und Form

Rahmen-Schatten

Box shadow

Bedeutung

Ein Schatten um ein Element, der den Eindruck erweckt, dass es über der Seite angehoben ist.

Änderung

Stärkere Schatten lassen schwebende Menüs oder Dialogfenster dreidimensionaler wirken. Zu viel Schatten kann sich schwerfällig anfühlen.

CSS

box-shadow

Beispielanfrage

Einen subtilen Schatten zum schwebenden Menü-Panel hinzufügen.

Rahmen und Form

Gliederung

Outline

Bedeutung

Eine Linie, die um ein Element angezeigt wird, oft wenn es durch die Tastatur fokussiert wird.

Änderung

Eine klare Struktur hilft Benutzern mit Tastatur, zu erkennen, welches Steuerelement aktiv ist.

CSS

outlineoutline-offset:focus-visible

Beispielanfrage

Zeigen Sie eine gut sichtbare Fokuslinie auf Symbolschaltflächen an.

Rahmen und Form

Trennlinie

Divider

Bedeutung

Eine Linie, die verwendet wird, um Abschnitte oder Gruppen zu trennen.

Änderung

Ein Trennzeichen kann die Grenzen von Kategorien deutlicher machen, ohne viel visuellen Eindruck zu erwecken.

CSS

border-topborder-bottomhr

Beispielanfrage

Subtile Trennlinien zwischen den Menü-Kategorien hinzufügen.

Layout und Position

Flexibilität

Flex

Bedeutung

Eine Layoutmethode zum Anordnen von Elementen in einer Zeile oder Spalte.

Änderung

flex-direction: column stapelt Elemente vertikal. flex-wrap ermöglicht es Elementen, in die nächste Zeile zu wechseln.

CSS

display: flexflex-directionflex-wrapgap

Beispielanfrage

Halten Sie die Steuerelemente im Header in einer flexiblen Zeile.

Layout und Position

Raster

Grid

Bedeutung

Eine Layoutmethode zum Anordnen von Inhalten in Zeilen und Spalten.

Änderung

Das Ändern der Spalten in einem Raster steuert, wie viele Karten pro Zeile angezeigt werden.

CSS

display: gridgrid-template-columnsgrid-columngap

Beispielanfrage

Zeigen Sie vier Tool-Karten pro Zeile auf großen Desktop-Bildschirmen an.

Layout und Position

Elemente ausrichten

Align items

Bedeutung

Wie sind die Elemente auf der Kreuzachse innerhalb von Flex oder Grid ausgerichtet?

Änderung

align-items: zentriert Elemente vertikal in einer Kopfzeilenzeile.

CSS

align-itemsplace-items

Beispielanfrage

Zentrieren Sie den Titel und die Header-Schaltflächen vertikal.

Layout und Position

Inhalt rechtfertigen

Justify content

Bedeutung

Wie werden die Elemente auf der Hauptachse innerhalb von Flex oder Grid verteilt?

Änderung

justify-content: space-between platziert Gruppen an gegenüberliegenden Seiten.

CSS

justify-contentjustify-itemsmargin-left: auto

Beispielanfrage

Halten Sie den Titel links und die Steuerelemente rechts.

Layout und Position

Position

Bedeutung

Wie ein Element in Bezug auf die Seite oder ein anderes Element positioniert ist.

Änderung

position: absolute ermöglicht einem Dropdown-Menü, zu schweben, ohne das Seitenlayout nach unten zu verschieben.

CSS

positionrelativeabsolutefixedsticky

Beispielanfrage

Das Menü-Panel sollte absolut positioniert sein, damit es die Seite nicht nach unten schiebt.

Layout und Position

Z-Index

Z-index

Bedeutung

Die Stapelreihenfolge positionierter Elemente.

Änderung

Ein höherer Z-Index kann Dropdowns über den Seiteninhalt platzieren.

Hinweis

Der z-Index funktioniert nur vorhersehbar, wenn Positionierungs- und Stapelkontexte berücksichtigt werden.

CSS

z-indexposition

Beispielanfrage

Verschieben Sie das Dropdown-Menü für die Sprache oberhalb des Menübereichs.

Layout und Position

Überlauf

Overflow

Bedeutung

Was passiert, wenn der Inhalt größer ist als sein Container?

Änderung

overflow-y: auto ermöglicht es einem langen Menü, zu scrollen, anstatt über den Bildschirm hinauszugehen.

CSS

overflowoverflow-xoverflow-ymax-height

Beispielanfrage

Lassen Sie lange Dropdown-Menüs innerhalb einer maximalen Höhe scrollen.

Responsiv

Breakpoint (Haltepunkt)

Breakpoint

Bedeutung

Eine Bildschirmbreite, bei der sich das Layout ändert.

Änderung

Das Ändern eines Breakpoints bestimmt, ob Tablets eher wie mobile Geräte oder Desktop-Computer funktionieren.

CSS

@mediasmmdlgxl

Beispielanfrage

Behandeln Sie Tablets wie Desktops für die obere Navigation.

Responsiv

Mobil

Mobile

Bedeutung

Stile für kleine Bildschirme im Smartphone-Format.

Änderung

Mobile Designs reduzieren oft die Schriftgröße, stapeln Spalten und sorgen dafür, dass Bedienelemente für Touch-Geräte geeignet sind.

CSS

@mediamax-widthsm

Beispielanfrage

Auf mobilen Geräten sollten die Karten in einer Spalte angeordnet werden.

Responsiv

Desktop

Bedeutung

Stile für größere Bildschirme von Laptops oder Desktops.

Änderung

Desktop-Designs können mehr Spalten, eine horizontale Navigation und breitere Inhaltsbereiche verwenden.

CSS

@mediamin-widthlgxl

Beispielanfrage

Auf dem Desktop sollte die Kategorie-Navigation im Header sichtbar bleiben.

Responsiv

Anzeigebereich

Viewport

Bedeutung

Der sichtbare Bereich des Browser- oder Gerätebildschirms.

Änderung

Die Anzeigebereich-Einheiten beziehen die Größen auf den sichtbaren Bildschirm.

CSS

vwvh100vw100vh

Beispielanfrage

Beschränken Sie die Breite des Menüs auf die Bildschirmbreite, damit es auf Telefonen nicht überläuft.

Responsiv

Responsive

Bedeutung

Ein Design, das sich an verschiedene Bildschirmgrößen anpasst.

Änderung

Responsive Regeln können dasselbe Komponenten horizontal auf dem Desktop und vertikal auf dem Mobilgerät darstellen.

CSS

@mediaclampmin()max()

Beispielanfrage

Die Bedienelemente sollten responsiv sein, ohne ihre Reihenfolge zu ändern.

Interaktionszustände

Hover

Bedeutung

Der Zustand, wenn der Mauszeiger über einem Element liegt.

Änderung

Hover-Stile können den Hintergrund, die Textfarbe, den Rahmen oder den Schatten ändern, um anzuzeigen, dass ein Element interaktiv ist.

Hinweis

Touch-Geräte haben kein zuverlässiges Hover-Verhalten, daher sollten wichtige Aktionen auch durch Klicken oder Tippen ausgeführt werden können.

CSS

:hoverbackgroundcolortransition

Beispielanfrage

Eine Farbänderung des Hintergrunds hinzufügen, wenn über Menüelemente gefahren wird.

Interaktionszustände

Aktiv

Active

Bedeutung

Der kurze Zustand, wenn eine Schaltfläche oder ein Link gedrückt wird.

Änderung

Aktive Stile können Schaltflächen haptisch wirken lassen, indem sie eine kleine Farb- oder Positionsänderung erzeugen.

CSS

:activetransformbackground

Beispielanfrage

Einen leichten gedrückten Effekt zu den Toolbar-Buttons hinzufügen.

Interaktionszustände

Fokus

Focus

Bedeutung

Der Zustand, wenn eine Eingabe, Schaltfläche oder ein Link derzeit für die Tastatur oder die Eingabe ausgewählt ist.

Änderung

Fokus-Stile machen die Navigation mit der Tastatur sichtbar und zugänglich.

CSS

:focus:focus-visibleoutline

Beispielanfrage

Der Fokusring des Suchfelds sollte der Akzentfarbe entsprechen.

Interaktionszustände

Deaktiviert

Disabled

Bedeutung

Ein Zustand, in dem eine Steuerung sichtbar ist, aber nicht verwendet werden kann.

Änderung

Deaktivierte Designs reduzieren oft den Kontrast und entfernen die Interaktion mit dem Zeiger.

CSS

:disabledopacitycursorpointer-events

Beispielanfrage

Machen Sie deaktivierte Schaltflächen optisch inaktiv, aber dennoch lesbar.

Interaktionszustände

Ausgewählt

Selected

Bedeutung

Der Zustand des aktuell ausgewählten Elements in einer Liste, einer Registerkartengruppe oder einem Menü.

Änderung

Ausgewählte Stile benötigen normalerweise einen stärkeren Hintergrund oder eine Textfarbe als normale Elemente.

CSS

aria-currentdata-statebackgroundcolor

Beispielanfrage

Die ausgewählte Kategorie sollte sich deutlich von den anderen unterscheiden.

Interaktionszustände

Offen / Geschlossen

Open / Closed

Bedeutung

Ob ein Dropdown-Menü, ein Menü oder ein Akkordeon-Panel derzeit sichtbar ist.

Änderung

Öffnen- und Schließen-Zustände benötigen klare Anzeigen, z. B. Plus-/Minus-Symbole oder eine Pfeilrotation.

CSS

aria-expandeddisplayheightvisibility

Beispielanfrage

Halten Sie alle Menükategorien standardmäßig geschlossen.

UI-Komponenten

Schaltfläche

Button

Bedeutung

Eine Steuerung, die eine Aktion ausführt, wenn sie angeklickt oder angetippt wird.

Änderung

Die Füllung, der Rahmen, die Farbe und die Zustände einer Schaltfläche bestimmen, wie einfach und wichtig sie erscheint.

CSS

buttonpaddingborderbackgroundcursor

Beispielanfrage

Der primäre Aktionsbutton sollte prominenter sein als der sekundäre Button.

UI-Komponenten

Symbol-Button

Icon button

Bedeutung

Ein Button, der hauptsächlich durch ein Symbol anstelle von Text dargestellt wird.

Änderung

Eine stabile Breite und Höhe verhindern, dass Symbolschaltflächen ihre Position ändern, wenn sich der Zustand ändert.

CSS

buttonwidthheightaria-labeldisplay: grid

Beispielanfrage

Halten Sie die Symbolschaltfläche des Menüs quadratisch und richten Sie sie an der Sprachschaltfläche aus.

UI-Komponenten

Dropdown-Menü

Dropdown

Bedeutung

Eine schwebende Liste, die nach dem Drücken einer Schaltfläche oder eines Auswahlsteuerelements erscheint.

Änderung

Die Position, Breite, maximale Höhe und der Z-Index eines Dropdown-Menüs steuern die Platzierung und das Layering.

CSS

positiontoprightz-indexbox-shadow

Beispielanfrage

Wenn das Sprach-Dropdown-Menü geöffnet wird, schließen Sie das Site-Menü.

UI-Komponenten

Akkordeon

Accordion

Bedeutung

Ein Abschnitt, der geöffnet oder geschlossen werden kann, um seinen Inhalt anzuzeigen oder zu verbergen.

Änderung

Akkordeons verkürzen lange Menüs, indem Kategorien geschlossen bleiben, bis sie benötigt werden.

CSS

aria-expandedheightdisplayoverflow

Beispielanfrage

Öffnen- und Schließen-Verhalten zu jeder Menü-Kategorie hinzufügen.

UI-Komponenten

Tabs

Bedeutung

Eine Steuerung zum Umschalten zwischen verwandten Ansichten, ohne die Seite zu verlassen.

Änderung

Die Gestaltung des ausgewählten Tabs muss deutlich anzeigen, welche Ansicht aktiv ist.

CSS

role=tablistdisplayborderbackground

Beispielanfrage

Machen Sie den Hintergrund der aktiven Registerkarte dunkler als den der inaktiven Registerkarten.

UI-Komponenten

Modal

Bedeutung

Ein fokussiertes Overlay-Panel, das über der Seite erscheint.

Änderung

Die Breite, der Hintergrund und der Z-Index eines Modals bestimmen, wie stark es die Seite unterbricht.

CSS

dialogposition: fixedinsetz-indexbackdrop

Beispielanfrage

Zentrieren Sie das Modal und halten Sie es schmaler als den Viewport.

UI-Komponenten

Tooltip

Bedeutung

Ein kleiner Hinweis, der in der Nähe einer Steuerung angezeigt wird, oft beim Hovern oder Fokussieren.

Änderung

Tooltips helfen, Symbol-only-Buttons zu erklären, ohne dauerhaften Text hinzuzufügen.

CSS

positiontitlearia-describedbyz-index

Beispielanfrage

Einen Tooltip hinzufügen, der den Menü-Icon-Button beschriftet.

UI-Komponenten

Eingabe

Input

Bedeutung

Ein Feld, in dem der Benutzer Text oder Werte eingibt.

Änderung

Eingabe-Padding, Rahmen, Platzhalterfarbe und Fokusstil beeinflussen Komfort und Klarheit.

CSS

inputborderpaddingplaceholder:focus

Beispielanfrage

Das Suchfeld sollte die volle Breite einnehmen und auf mobilen Geräten leichter anzutippen sein.

UI-Komponenten

Badge / Chip

Bedeutung

Eine kleine, abgerundete Beschriftung oder ein Filterelement.

Änderung

Größe, Radius und aktive Farbe des Chips beeinflussen, wie sich Filter anfühlen.

CSS

border-radiuspaddingbackgroundfont-size

Beispielanfrage

Machen Sie aktive Kategorie-Chips optisch stärker.