Des moyens simples pour améliorer votre site Web-tutoriel CSS-php.cn

Des moyens simples pour améliorer votre site Web

Mary-Kate Olsen

Libérer： 2024-12-28 16:33:10

original

680 Les gens l'ont consulté

1. Empêcher les changements de disposition en cas de débordement

Si vous avez un élément avec overflow: auto alors il aura une barre de défilement uniquement lorsque l'élément déborde. Le problème est qu'une fois que l'élément déborde et que la barre de défilement apparaît, le contenu a été réduit pour s'adapter à la largeur de la barre de défilement.

asy ways to elevate your website
Pour éviter un changement de mise en page inutile, ajoutez :
barre de défilement-gouttière : stable

Il réservera de l'espace pour la barre de défilement même si elle n'est pas visible.

asy ways to elevate your website

Au moment d'écrire ces lignes, seuls 74 % des utilisateurs disposent de cette fonctionnalité. Mais c'est une belle amélioration progressive. Cela signifie que ceux qui utilisent un navigateur plus récent peuvent profiter d'une meilleure expérience utilisateur, tandis que ceux qui utilisent des navigateurs plus anciens ne sont pas affectés.

2. respecter la préférence de l'appareil pour le mode sombre

Si vous avez déjà implémenté le mode sombre sur votre site Web, vous pouvez éviter à l'utilisateur de sélectionner manuellement le mode sombre en vérifiant la préférence de son appareil pour le mode clair ou sombre

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Copier après la connexion

Donc, si l'utilisateur a déjà sélectionné le mode sombre dans ses paramètres, vous pouvez également définir la valeur par défaut en mode sombre sur votre site Web.

Certains sites Web choisissent même de ne pas activer le mode sombre du tout et de se fier uniquement aux préférences de l'appareil.

3. Les liens doivent être de vrais liens

Lorsque vous avez un bouton qui doit rediriger vers une autre partie de votre site Web, la manière évidente de le faire est d'avoir un écouteur d'événement pour le clic et de rediriger l'utilisateur à l'aide de JavaScript.
C'est faux, chaque fois que vous pouvez utiliser une primitive de navigateur (par exemple : lien, formulaire), vous devriez presque toujours l'utiliser à la place.

en utilisant la balise présente à la place de nombreux avantages.

Pouvoir Ctrl clic (ou appui long sur mobile) pour ouvrir le lien dans un autre onglet
Survoler le lien vous montre où vous serez redirigé vers
D'autres programmes comme les lecteurs d'écran et les robots des moteurs de recherche fonctionneront beaucoup mieux

Si vous utilisez React-Router ou Next.js, vous devez utiliser le composant Link de ce framework pour empêcher les rechargements de pages complètes.

4. Aperçus des liens

Lorsqu'un utilisateur partage un lien vers votre site Web, toutes les applications de chat et de réseaux sociaux disposent d'une fonction de prévisualisation pour voir une partie du contenu de ce site Web avant que l'utilisateur ne clique dessus. En ajoutant simplement quelques balises méta à votre objet, vous autoriserez d’autres applications à afficher des aperçus sur votre site Web.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Copier après la connexion

Et dans React 19, il est plus facile que jamais de modifier votre objet. Auparavant, vous deviez utiliser des bibliothèques tierces telles que React-helmet, mais elles sont désormais intégrées pour réagir.

<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>

Copier après la connexion

C'est ce qu'on appelle le protocole Open Graph.
Un outil très utile est l'aperçu du partage social qui vous permet de tester l'apparence de votre aperçu sur différents sites Web et de vous donner des conseils pour l'améliorer.

5. Utilisez des étiquettes avec vos entrées

Je vois souvent des cases à cocher et lorsque j'essaie de cliquer sur l'étiquette de la case à cocher, rien ne se passe. Outre une mauvaise accessibilité, cela signifie que l'utilisateur doit cliquer sur la petite case à cocher pour le sélectionner.

Pour résoudre ce problème, utilisez le bouton étiquette.

function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <title>{post.title}</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.image} />
      <meta property="og:url" content={post.url} />
      <meta property="og:type" content="article" />

    </article>
  );
}

Copier après la connexion

Cela fonctionne pour tous les types d'entrée. Cliquer sur l'étiquette d'une saisie de texte par exemple se concentrera sur la zone de texte.

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!