Problèmes CSS courants pour les projets frontaux

Le rendu et les interactions sont devenus beaucoup plus homogènes d'un navigateur à l'autre ces dernières années. Cependant, il n’est toujours pas parfaitement uniforme et de nombreux petits problèmes peuvent vous tromper. Ajoutez en plus de ces problèmes les variables de différentes tailles d'écran, préférences de langue et erreur humaine flagrante, et nous trouvons beaucoup de petites choses qui dérangeraient un développeur.

Lors de l’implémentation d’une interface utilisateur dans un navigateur, il est conseillé de réduire ces différences et ces problèmes autant que possible afin que l’interface utilisateur soit prévisible. Il est difficile de suivre toutes ces différences, aussi ai-je dressé une liste de problèmes courants, avec leurs solutions, comme guide de référence pratique lorsque vous travaillez sur un nouveau projet.

Commençons. [19659006]1. Bouton Réinitialiser les fonds de et entrée Eléments

Lorsque vous ajoutez un bouton, réinitialisez son arrière-plan, sinon l'apparence sera différente selon les navigateurs. Dans l'exemple ci-dessous, le même bouton est affiché dans Chrome et dans Safari. Ce dernier ajoute un fond gris par défaut.

La réinitialisation de l'arrière-plan résoudra le problème suivant:

 button {
  apparence: aucune;
  fond: transparent;
  / * Autres styles * /
}

Voir le stylo Le bouton et les entrées de Ahmad Shadeed ( @shadeed ) sur CodePen .

2. Débordement: faites défiler contre auto

Pour limiter la hauteur d'un élément et permettre à l'utilisateur de le faire défiler, ajoutez overflow: scroll-y . Cela aura l'air bien dans Chrome sur macOS. Cependant, sous Chrome Windows, la barre de défilement est toujours présente (même si le contenu est court). Ceci est dû au fait que scroll-y affichera une barre de défilement quel que soit le contenu, alors que overflow: auto affichera une barre de défilement uniquement si nécessaire.

 .element {
    hauteur: 300px;
    débordement-y: auto;
}

Voir le stylo overflow-y de Ahmad Shadeed ( à Shadeed ) sur CodePen .

3. Ajoutez flex-wrap

Faites qu'un élément se comporte comme un conteneur flex simplement en ajoutant display: flex . Cependant, lorsque la taille de l'écran diminue, le navigateur affiche une barre de défilement horizontale si le flex-wrap n'est pas ajouté.

 .wrapper {.
  affichage: flex;
}

.article {
  flex: 0 0 120px;
  hauteur: 100px;
}

L'exemple ci-dessus fonctionnera parfaitement sur les grands écrans. Sur le mobile, le navigateur affiche une barre de défilement horizontale.

La solution est assez simple. Le wrapper doit savoir que, lorsqu'il ne dispose pas d'espace libre, il doit envelopper les éléments.

 .wrapper {
    affichage: flex;
    enveloppe souple: enveloppe;
}

Voir le stylo flex-wrap de Ahmad Shadeed ( @shadeed ) sur CodePen .

4. N'utilisez pas justification-contenu: espace-entre lorsque le nombre d'éléments flexibles est dynamique

lorsque justification-contenu: espace-entre est appliqué à un conteneur flexible, il va distribuer les éléments et laisser un espace égal entre eux. Notre exemple contient huit éléments de carte, et ils ont l'air bien. Et si, pour une raison quelconque, le nombre d’articles était de sept? La deuxième rangée d'éléments serait différente de la première.

Voir le stylo justifier-contenu de Ahmad Shadeed ( @shadeed ) sur CodePen .

Dans ce cas, utiliser la grille CSS serait plus approprié.

5. Mots et liens longs

Lorsqu'un article est affiché sur un écran de mobile, un mot long ou un lien en ligne peut faire apparaître une barre de défilement horizontale. L’utilisation du code CSS permettra d’éviter que cela se produise.

 .article-content p {
    mot-break: tout-rompre;
}

Consultez CSS-Tricks pour plus de détails.

6. Dégradés transparents

Lors de l'ajout d'un dégradé avec un début et une fin transparents, cela aura l'air noir dans Safari. En effet, Safari ne reconnaît pas le mot clé transparent . En le remplaçant par rgba (0, 0, 0, 0) cela fonctionnera comme prévu. Notez la capture d'écran ci-dessous:

 .section-hero {
  fond: linéaire-dégradé (transparent, # d7e0ef), # 527ee0;
  / * Autres styles * /
}

Cela devrait plutôt être:

 .section-hero {
  arrière-plan: gradient linéaire (rgba (0, 0, 0,0), # d7e0ef), # 527ee0;
  / * Autres styles * /
}

7. Idée fausse sur la différence entre ajustement automatique et remplissage automatique dans une grille CSS

dans une grille CSS, la fonction répétition peut créer une disposition de colonne réactive sans nécessiter l'utilisation de requêtes de médias. Pour ce faire, utilisez le remplissage automatique ou le ajustement automatique .

 .wrapper {
    Grille-modèle-colonnes: répéter (remplissage automatique, minmax (100px, 1fr));
}

En bref, le remplissage automatique disposera les colonnes sans élargir leur largeur, alors que le réglage automatique les réduira à une largeur nulle, mais uniquement si vous avez des colonnes vides. Sara Soueidan a rédigé un excellent article sur le sujet.

8. Fixation d'éléments en haut de l'écran lorsque la fenêtre d'affichage n'est pas assez grande

Si vous corrigez un élément en haut de l'écran, que se passe-t-il si la fenêtre d'affichage n'est pas assez grande? C'est simple: cela prendra de la place à l'écran et, par conséquent, la zone verticale disponible pour que l'utilisateur puisse parcourir le site Web sera petite et inconfortable, ce qui nuira à l'expérience.

 @media (min-height: 500px ) {
    .site-header {
        position: collante;
        en haut: 0;
        / * autres styles * /
    }
}

Dans l'extrait ci-dessus, nous indiquons au navigateur de ne placer l'en-tête en haut que si la hauteur de la fenêtre d'affichage est égale ou supérieure à 500 pixels.

Également important: lorsque vous utilisez position: sticky cela ne fonctionnera que si vous spécifiez la propriété top .

Voir le stylo Requêtes de média verticales: Fixed Header de Ahmad Shadeed [ @shadeed ) sur CodePen .

9. Paramètre max-width pour les images

Lors de l'ajout d'une image, définissez max-width: 100% afin que l'image soit redimensionnée lorsque l'écran est petit. Sinon, le navigateur affichera une barre de défilement horizontale.

 img {
    largeur maximale: 100%;
}

10. Utilisation de la grille CSS pour définir main et côté La grille CSS des éléments

permet de définir les sections principales et de [miseenpagecequiestuneutilisationparfaitepourlagrilleEnconséquencelahauteurdelasection de côté sera égale à celle de l'élément principal même s'il est vide.

Pour résoudre ce problème, alignez l'élément de côté . ] élément au début de son parent, de sorte que sa hauteur ne se développe pas.

 .wrapper {
  affichage: grille;
  Grille-modèle-colonnes: répéter (12, minmax (0, 1fr));
  intervalle de grille: 20px;
}

// align-self indiquera à l’élément de côté de s’aligner sur le début de son parent.
de côté {
  grille-colonne: 1/4;
  rangée de grille: 1;
  align-self: start;
}

principale {
  grille-colonne: 4/13;
}




Voir le stylo principal et de côté de Ahmad Shadeed ( @ Shadeed ) sur CodePen .

11. Ajout de fill à un SVG

Parfois, lorsque vous travaillez avec des SVG, fill ne fonctionnera pas comme prévu si l'attribut fill a été ajouté en ligne dans l'élément SVG. Pour résoudre ce problème, supprimez l'attribut fill du fichier SVG lui-même ou remplacez fill: color .

Prenez cet exemple:

 .some-icon {
    remplir: # 137cbf;
}

Cela ne fonctionnera pas si le SVG a un remplissage en ligne. Ce devrait être plutôt ceci:

 .some-icon path {
    remplir: # 137cbf;
}

12. Utilisation de pseudo-éléments

J'aime utiliser des pseudo-éléments chaque fois que je le peux. Ils nous permettent de créer de faux éléments, principalement à des fins décoratives, sans les ajouter au code HTML.

Lorsqu'il travaille avec eux, l'auteur peut oublier de procéder de l'une des manières suivantes:

• ajouter le content: "" property,
• définissez ses propriétés width et sans définir la propriété display display .

Dans l'exemple ci-dessous , nous avons un titre avec un badge en tant que pseudo-élément. La propriété content: "" doit être ajoutée. En outre, l'élément devrait afficher: inline-block défini dans l'ordre dans lequel width et height fonctionneront comme prévu.

13 L'espace bizarre lors de l'utilisation de l'affichage : inline-block

Régler deux éléments ou plus sur l'affichage : inline-block ou display: inline créera une infime espace entre chacun. L'espace est ajouté car le navigateur interprète les éléments en tant que mots, ce qui ajoute un espace de caractère entre chaque élément.

Dans l'exemple ci-dessous, chaque élément a un espace de 8px à droite. , mais le minuscule espace créé par l'utilisation de display: inline-block le rend 12px ce qui n'est pas le résultat souhaité.

 li: not (: last-child) {
  marge droite: 8px;
}




Une solution simple consiste à définir taille de la police: 0 sur l'élément parent.

 ul {
    taille de police: 0;
}

li {
    taille de police: 16px; / * La taille de la police doit être réaffectée ici car elle héritera de «font-size: 0» de son parent. * /
}




Voir la plume Espacement entre les blocs de Ahmad Shadeed ( @shadeed ) sur CodePen .

14. Ajouter pour = "ID" Lorsque vous affectez un élément d'étiquette à une entrée

Lorsque vous travaillez avec des éléments de formulaire, assurez-vous qu'un identifiant est attribué à tous les éléments d'étiquette . Cela les rendra plus accessibles et, une fois cliqué dessus, l’entrée associée sera mise au point.

 Adresse électronique: 

15. Les polices ne fonctionnant pas avec les éléments HTML interactifs

Lors de l'attribution de polices à l'ensemble du document, elles ne seront pas appliquées à des éléments tels que l'entrée le bouton sélectionnez . ] et textarea . Ils n’héritent pas par défaut car le navigateur leur applique la police système par défaut.

Pour résoudre ce problème, affectez manuellement la propriété de la police:

 input, button, select, textarea {
  font-family: votre-génial-nom-de-police;
}

16. Barre de défilement horizontale

En raison de la largeur de certains éléments, une barre de défilement horizontale apparaît.

Le moyen le plus simple de rechercher la cause de ce problème consiste à utiliser un contour CSS. Addy Osmani a partagé un script très pratique qui peut être ajouté à la console du navigateur pour définir tous les éléments de la page.

[] .forEach.call ($$ ("*"), fonction (a) {
  a.style.outline =
    "1px solid #" + (~~ (Math.random () * (1 




17. Images comprimées ou étirées

Lorsque vous redimensionnez une image en CSS, celle-ci peut être comprimée ou étirée si le rapport de format ne correspond pas à la largeur et à la hauteur de l'image.

La solution est simple: utilisez CSS ' object-fit . Sa fonctionnalité est similaire à celle de background-size: cover pour les images d’arrière-plan.

 img {
    ajustement d'objet: couverture;
}




L’utilisation de object-fit ne sera pas la solution parfaite dans tous les cas. Certaines images doivent apparaître sans recadrage ni redimensionnement, et certaines plates-formes obligent l'utilisateur à télécharger ou à recadrer une image à une taille définie. Par exemple, Dribbble accepte les téléchargements de vignettes de 800 x 600 pixels.

18. Ajoutez le type correct pour l'entrée .

Utilisez le type correct pour un champ à entrée. Cela améliorera l'expérience utilisateur dans les navigateurs mobiles et le rendra plus accessible.

Voici un code HTML:

  

     nom complet 
    
  
  

     E-mail 
    
  
  

     Téléphone 
    
  

C’est à quoi ressemblera chaque entrée une fois qu’elle aura été ciblée:

19. Numéros de téléphone dans les dispositions RTL

Lors de l'ajout d'un numéro de téléphone tel que + 972-123555777 dans une disposition de droite à gauche, le symbole plus est placé à la fin du numéro. Pour résoudre ce problème, réaffectez la direction du numéro de téléphone.

 p {
    direction: ltr;
}

Conclusion

Tous les problèmes mentionnés ici font partie des problèmes les plus courants que j’ai rencontrés dans mon travail de développement initial. Mon objectif est de conserver une liste de vérification régulière lorsque vous travaillez sur un projet Web.

Avez-vous un problème que vous rencontrez toujours dans CSS? Faites-le-nous savoir dans les commentaires!

(dm, ra, al, yk, il)