Comment utiliser les styles de système d'exploitation dans CSS

L'une des caractéristiques les moins connues de CSS2.1 est la possibilité de définir les polices et les couleurs utilisées par le thème du système d'exploitation sous-jacent. Cela peut être utile dans des situations lorsque vous avez besoin d'intégration de SG plus serrée, par ex. HTML Aide les fichiers, Adobe Air ou peut-être des applications Web hors ligne. Avant de commencer, il y a quelques mises en garde:

• Ne comptez pas sur ces propriétés fonctionnant dans toutes les combinaisons OS / navigateur. Si votre demande doit fonctionner dans l'opéra sur Beos, je vous recommande de le tester d'abord!
• Les propriétés ont été obsolètes dans CSS3 en faveur du type de valeur d'apparence (bien que la prise en charge du navigateur soit extrêmement limitée pour le moment).
• Il n'y a rien pour empêcher l'utilisateur de définir des schémas de couleurs inhabituels, affrontés ou laids dans leur système d'exploitation. Les pages refléteront leurs choix - pas celles de votre concepteur.

Fonts système

Les polices système sont attribuées à l'aide de la propriété «Font». Notez que la famille, la taille et le style sont tous attribués le cas échéant, par ex.

body
{
	font: caption;
}

Les valeurs de police suivantes sont disponibles. La colonne «Exemple» montre la police actuelle définie par votre système d'exploitation. Propriété Description Exemple Police de légendes (boutons, déroutes, etc.) ABC ABC 123 étiquette iConicon Fontabc ABC 123 Menumenu Fontabc ABC 123 Message-BoxDialog Box Fontabc ABC 123 Small-Captionsmall Control LabelsAbc ABC 123 barre de statut de barre de statut Fontabc ABC 123

Couleurs du système

Les couleurs du système peuvent être attribuées à n'importe quelle propriété qui attend une valeur de couleur, par ex.

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

Les valeurs de couleur suivantes sont disponibles. Ils sont indiqués dans Camelcase pour la lisibilité, mais tout boîtier est valide. La colonne «Exemple» montre la couleur définie par votre système d'exploitation. Propriété Description Exemple Borde de fenêtre ActiveBorderactive  Légende de fenêtre activecaptionactive  AppWorkspaceBackground Couleur de plusieurs interface de document  BackgroundDesktop Background  Couleur de ButtonFaceFace pour les éléments d'affichage 3D  ButtonHighlightDark Shadow pour les éléments d'affichage 3D (face à la lumière)  Buttonshadowshadow Couleur pour les éléments d'affichage 3D  ButtonTextText sur les boutons poussoirs  LégendexText dans la légende, la boîte de taille et la boîte de flèche de barre de défilement  Texte GrayTextExtGray (désactivé) (# 000 Si ce n'est pas pris en charge par OS)  HighlightItem (s) sélectionné dans un contrôle  HighlightTextText de l'élément sélectionné dans un contrôle  Borde à fenêtre inactive  InactivercaptionInactive Window Légende  InactivercaptionTextColor du texte dans une légende inactive  InfoBackgroundbackground Couleur pour les commandes d'info-bulle  Couleur infoxText pour les contrôles d'info-bulle  Contexte de Menumenu  MenuteXtText dans les menus  Scrollbarscroll Bar Gray Area  Threeddarkshadowdark Shadow pour les éléments d'affichage 3D  Couleur à trois surface pour les éléments d'affichage 3D  THREEDHIGHLIGHIGHIGHILLIGHT Couleur pour les éléments d'affichage 3D  THREEDLIGHTSHADOWlight Couleur pour les éléments d'affichage 3D (face à la lumière)  ThreedShadowdark Shadow pour les éléments d'affichage 3D  Fond de fenêtre  Cadre WindowFramewindow  WindowTextText dans Windows  Ces propriétés seraient-elles utiles dans votre prochain projet?

Les questions fréquemment posées sur les styles du système CSS

Quels sont les styles du système CSS et pourquoi sont-ils importants?

Les styles système CSS sont un ensemble de styles prédéfinis originaires du système d'exploitation ou du navigateur. Ils sont importants car ils permettent aux développeurs de créer des pages Web qui peuvent s'adapter aux préférences du système de l'utilisateur, offrant une expérience utilisateur plus personnalisée et accessible. Par exemple, si un utilisateur a défini son système en mode sombre, une page Web stylée avec les styles système CSS peut s'adapter automatiquement pour correspondre à ce paramètre.

En quoi les styles du système CSS diffèrent-ils des styles CSS réguliers?

Les styles CSS réguliers sont définis par le développeur et restent les mêmes quels que soient les paramètres du système de l'utilisateur. D'un autre côté, les styles système CSS sont dynamiques et peuvent changer en fonction des préférences du système de l'utilisateur. Cela en fait un outil puissant pour créer des conceptions Web adaptables et conviviales.

Comment puis-je utiliser les styles de système CSS dans ma conception Web?

Les styles système CSS peuvent être utilisés dans votre code CSS comme n'importe quel autre style. La principale différence est qu'au lieu de spécifier une valeur fixe, vous utilisez un mot clé de couleur système. Par exemple, pour définir la couleur d'arrière-plan pour correspondre à l'arrière-plan de la fenêtre du système de l'utilisateur, vous utiliseriez le code arrière-couleur: fenêtre;.

Quels sont quelques exemples de styles de système CSS?

Il existe de nombreux styles système CSS différents qui correspondent à divers aspects du système de l'utilisateur. Certains exemples incluent ButtonFace pour la couleur du visage d'un bouton, en surbrillance pour la couleur du texte sélectionné et en texte de fenêtre pour la couleur du texte sous Windows.

Les styles du système CSS sont-ils pris en charge par tous les navigateurs? Cependant, c'est toujours une bonne idée de tester votre conception Web dans plusieurs navigateurs pour assurer la compatibilité.

Puis-je utiliser les styles de système CSS avec d'autres styles CSS?

Oui, les styles du système CSS peuvent être utilisés en combinaison avec d'autres styles CSS. Cela vous permet de créer une conception à la fois adaptable et cohérente avec votre marque.

Comment les styles du système CSS améliorent-ils l'accessibilité?

Les styles du système CSS améliorent l'accessibilité en permettant aux pages Web de s'adapter aux préférences système de l'utilisateur. Cela peut faciliter la navigation pour les utilisateurs visuels de naviguer sur votre site, car ils peuvent ajuster les paramètres de leurs systèmes pour répondre à leurs besoins.

Puis-je remplacer les styles système CSS?

Oui, vous pouvez remplacer les styles système CSS en spécifiant un style différent dans votre code CSS. Cependant, gardez à l'esprit que cela annulera les avantages de l'adaptabilité de l'utilisation des styles de système.

Y a-t-il des inconvénients pour utiliser les styles de système CSS?

Un inconvénient potentiel pour utiliser les styles de système CSS est qu'ils peuvent conduire à des conceptions incohérentes sur différents systèmes. Cependant, cela peut être atténué en utilisant une combinaison de styles de système et de styles CSS ordinaires.

Où puis-je en savoir plus sur les styles de système CSS?

Il existe de nombreuses ressources disponibles en ligne pour en savoir plus sur les styles système CSS. Certains sites recommandés incluent le réseau de développeurs Mozilla, le W3C et le point de site.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!