Les choses que j'ajoute au vent arrière CSS à la sortie de la boîte

Pour chaque projet CSS de vent arrière, j'ajoute des styles personnalisés. Certains styles sont utilisés dans presque tous les projets. Je vais les partager et je suis également curieux de savoir ce que tout le monde a ajouté à son fichier tailwind.css .

Tout d'abord, permettez-moi de parler de mes propres habitudes:

• Définissez -webkit-tap-highlight-color .
• Ajouter le remplissage inférieur env(safe-area-inset-bottom) .
• Embellir les listes non ordonnées avec des symboles spéciaux.

Ce qui suit explique ces trois points en détail:

-webkit-tap-highlight-color

Le système Android mettra en évidence lorsque le lien est cliqué. Je n'aime pas cet effet car il obscurcit les éléments, donc je le désactive pour une meilleure expérience utilisateur.

 @layer base {
  html {
    -Webkit-Tap-Highlight-Color: transparent;
  }
}

@layer est une directive pour le vent arrière qui évite les problèmes de spécificité en disant à la ventouse de mettre des styles personnalisés dans lesquels «conteneur» à mettre. C'est comme prétendre qu'une feuille de style en cascade n'existe pas, donc il n'est pas nécessaire de s'inquiéter trop du tri CSS.

Le simple fait de supprimer la mise en surbrillance de clics peut entraîner des problèmes d'accessibilité car il masque des invites interactives. Donc, si vous choisissez cette approche, c'est mieux (si vous avez des recherches à ce sujet, j'aimerais également le vérifier) ​​pour activer :active pour fournir des commentaires sur ces opérations. Chris fournit un extrait de code pour cela.

env(safe-area-inset-bottom)

Cette classe d'utilité gère la barre inférieure du nouvel iPhone (sans le bouton "Accueil"). Sans cela, certains éléments peuvent tomber sous la barre inférieure, ce qui rend difficile la lecture et le clic.

 @layer Utilities {
  .pb-Safe {
    Padding-Bottom: Env (Safe-Area-Insset-Bottom);
  }
}

Élément de liste de symboles spéciaux

J'aime utiliser des symboles spéciaux comme éléments de liste dans les listes non ordonnées. Je ne vous punirai pas pour avoir trouvé cela. Nous parlons essentiellement de balles dans des listes non ordonnées. Tailwind les supprime par défaut via la normalisation. J'ai ajouté des symboles spéciaux à chacun de mes projets.

Ma méthode est la suivante:

 @layer Utilities {
  .List-interpunct> li: avant {
    contenu: '·';
    flottant: à gauche;
    marge: 0 0 0 -0,9em;
    Largeur: 0,9EM;
  }

  @Media (Min-Width: 992px) {
   .List-interpunct> li: avant {
      marge: 0 0 0 -1,5em;
      Largeur: 1.5EM;
    }
  }
}

Maintenant, nous avons également ::marker qui peut implémenter les mêmes fonctionnalités et il est plus facile à utiliser. Je ne l'ai pas utilisé parce que Safari a une compatibilité limitée.

maintenant vous

J'ai partagé ce que j'ai ajouté à tous les projets de vent arrière, et maintenant c'est votre tour. Quel est le style personnalisé que vous ajoutez au vent arrière dans votre projet? Y a-t-il un style que vous êtes indispensable? S'il vous plaît laissez-moi savoir dans les commentaires! J'adorerais obtenir des idées et commencer à les intégrer dans d'autres projets.

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!