So verwenden Sie Betriebssystemstile in CSS

Eine der weniger bekannten Merkmale von CSS2.1 ist die Fähigkeit, Schriftarten und Farben zu definieren, die vom Thema zugrunde liegendem Betriebssystem verwendet werden. Dies kann in Situationen nützlich sein, wenn Sie eine engere Betriebssystemintegration benötigen, z. HTML -Hilfedateien, Adobe Air oder möglicherweise Offline -Webanwendungen. Bevor wir beginnen, gibt es ein paar Einschränkungen:

• verlassen sich nicht auf diese Eigenschaften, die in allen OS/Browser -Kombinationen arbeiten. Wenn Ihre Bewerbung in der Opera auf Beos arbeiten muss, empfehle ich, sie zuerst zu testen!
• Die Eigenschaften wurden in CSS3 zugunsten des Erscheinungswerttyps veraltet (obwohl der Browserunterstützung zu diesem Zeitpunkt äußerst begrenzt ist).
• Es gibt nichts zu verhindern, dass der Benutzer ungewöhnliche, kollidierende oder hässliche Farbschemata in seinem Betriebssystem definiert. Seiten werden ihre Entscheidungen widerspiegeln - nicht die Ihres Designers.

Systemschriften

Systemschriften werden mit der Eigenschaft "Schriftart" zugewiesen. Beachten Sie, dass Familie, Größe und Stil alle gegebenenfalls zugeordnet sind, z.

body
{
	font: caption;
}

Die folgenden Schriftwerte sind verfügbar. Die Spalte "Beispiel" zeigt die aktuelle Schriftart, die von Ihrem Betriebssystem eingestellt ist. Eigenschaft Beschreibung Beispiel CaptionControls Schriftart (Tasten, Dropdowns usw.) ABC ABC 123 Iconicon Label Fontabc ABC 123 Menumenu Fontabc ABC 123 Message-BoxDialog Box Fontabc ABC 123 small capionsmall steuern labelsabc ABC 123 Status-Barstatus Bar Fontabc ABC 123

Systemfarben

Systemfarben können jeder Eigenschaft zugeordnet werden, die einen Farbwert erwartet, z.

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}

Die folgenden Farbwerte sind verfügbar. Sie werden für die Lesbarkeit in Kamelase gezeigt, aber jedes Gehäuse ist gültig. Die Spalte "Beispiel" zeigt die von Ihrem Betriebssystem festgelegte Farbe. Eigenschaft Beschreibung Beispiel ActiveBorderActive Fensterrand  ActiveCaptionActive -Fensterbeschreibung  AppWorkspaceBackground -Farbe einer mehreren Dokumentenschnittstelle  Hintergrundinformationen Hintergrund  ButtonFaceFace -Farbe für 3D -Anzeigeelemente  ButtonHighlightDark Shadow für 3D -Displayelemente (von Licht weggesichts)  ButtonShadowShadow -Farbe für 3D -Anzeigeelemente  ButtonTextText auf Druckschaltflächen  CaptionTextText in caption-, Größenbox- und Scrollbar -Pfeilbox  GrayTextGrayed (deaktiviert) Text (#000, falls nicht durch Betriebssystem unterstützt)  Highlightem (en), die in einer Kontrolle ausgewählt wurden  HighlightTextText der in einer Steuerung ausgewählten Elemente (en)  Inaktive BorderInactive Fensterrand  INACTIVECAPTIONINAKTIVE -STITION -Bildungsunterschrift  InactiveCaptionTextColor von Text in einer inaktiven Bildunterschrift  Infobackgroundbackground -Farbe für Tooltip -Steuerelemente  InfotextText -Farbe für Tooltip -Steuerelemente  Menumenu Hintergrund  MenutextText in Menüs  Scrollbarscroll Bar Grauzone  Dreideldarkshadowdark Shadow für 3D -Displayelemente  DreidlerfaceFace -Farbe für 3D -Anzeigeelemente  Dreidlerhighlighighlight -Farbe für 3D -Displayelemente  Dreidleinigungsschwere Farbe für 3D -Displayelemente (gegenüber dem Licht)  Dreidlerschatten für 3D -Displayelemente  Fensterwindow -Hintergrund  FensterframeWindow -Frame  WindowTextText in Windows  Wären diese Eigenschaften in Ihrem nächsten Projekt nützlich?

häufig gestellte Fragen zu CSS -Systemstilen

Was sind CSS -Systemstile und warum sind sie wichtig? Sie sind wichtig, da sie Entwicklern ermöglichen, Webseiten zu erstellen, die sich an die Systempräferenzen des Benutzers anpassen und eine personalisiertere und zugängliche Benutzererfahrung bieten. Wenn beispielsweise ein Benutzer sein System auf den Dunklen Modus gesetzt hat, kann eine mit CSS -Systemstile gestaltete Webseite automatisch an diese Einstellung angepasst werden.

Wie unterscheiden sich CSS -Systemstile von den regulären CSS -Stilen? Andererseits sind CSS -Systemstile dynamisch und können sich basierend auf den Systemeinstellungen des Benutzers ändern. Dies macht sie zu einem leistungsstarken Tool zum Erstellen anpassungsfähiger und benutzerfreundlicher Webdesigns.

Wie kann ich CSS-Systemstile in meinem Webdesign verwenden? Die Hauptdifferenz besteht darin, dass Sie anstatt einen festen Wert anzugeben, ein Systemfarbschlüsselwort verwenden. Um beispielsweise die Hintergrundfarbe für den Systemfenster des Benutzers festzulegen, verwenden Sie den Code-Hintergrund-Color: Fenster;

Was sind einige Beispiele für CSS-Systemstile? Einige Beispiele sind Taste für die Gesichtsfarbe einer Taste, die Höhe für die Farbe des ausgewählten Textes und die Fenstertext für die Farbe des Textes in Fenstern. Es ist jedoch immer eine gute Idee, Ihr Webdesign in mehreren Browsern zu testen, um die Kompatibilität zu gewährleisten.

Kann ich CSS -Systemstile mit anderen CSS -Stilen verwenden? Auf diese Weise können Sie ein Design erstellen, das sowohl anpassungsfähig als auch mit Ihrer Marke übereinstimmt. Dies kann es Benutzern mit Sehbehinderungen erleichtern, um in Ihrer Website zu navigieren, da sie ihre Systemeinstellungen so anpassen können, dass sie ihre Anforderungen entsprechen.

Kann ich CSS -Systemstile überschreiben? Beachten Sie jedoch, dass dies die Vorteile der Anpassungsfähigkeit der Verwendung von Systemstilen negiert. Dies kann jedoch durch die Verwendung einer Kombination aus Systemstilen und regulären CSS -Stilen gemindert werden.

Wo kann ich mehr über CSS -Systemstile erfahren? Einige empfohlene Websites umfassen das Mozilla Developer Network, W3C und SitePoint.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Betriebssystemstile in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!