Einfache Möglichkeiten, Ihre Website aufzuwerten-CSS-Tutorial-php.cn

Einfache Möglichkeiten, Ihre Website aufzuwerten

Mary-Kate Olsen

Freigeben： 2024-12-28 16:33:10

Original

680 Leute haben es durchsucht

1. Verhindern Sie Layoutverschiebungen bei Überlauf

Wenn Sie ein Element mit overflow: auto haben, wird es nur dann eine Bildlaufleiste haben, wenn das Element überläuft. Das Problem besteht darin, dass, sobald das Element überfüllt ist und die Bildlaufleiste angezeigt wird, der Inhalt verkleinert wird, um der Breite der Bildlaufleiste gerecht zu werden.

asy ways to elevate your website
Um unnötige Layoutverschiebungen zu vermeiden, fügen Sie Folgendes hinzu:
scrollbar-gutter: stabil

Es wird Platz für die Bildlaufleiste reserviert, auch wenn diese nicht sichtbar ist.

asy ways to elevate your website

Zum Zeitpunkt des Verfassens dieses Artikels verfügen nur 74 % der Benutzer über diese Funktion. Aber es ist eine schöne progressive Verbesserung. Das bedeutet, dass Benutzer neuerer Browser eine bessere Benutzererfahrung genießen können, während diejenigen, die ältere Browser verwenden, nicht betroffen sind.

2. Respektieren Sie die Präferenz des Geräts für den Dunkelmodus

Wenn Sie den Dunkelmodus bereits auf Ihrer Website implementiert haben, können Sie dem Benutzer die manuelle Auswahl des Dunkelmodus ersparen, indem Sie überprüfen, ob das Gerät den Hell- oder Dunkelmodus bevorzugt

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

Nach dem Login kopieren

Wenn der Benutzer also in seinen Einstellungen bereits den Dunkelmodus ausgewählt hat, können Sie den Standardwert auch auf Ihrer Website auf den Dunkelmodus festlegen.

Einige Websites entscheiden sich sogar dafür, den Dunkelmodus überhaupt nicht umzuschalten und verlassen sich ausschließlich auf die Präferenz des Geräts.

3. Links sollten echte Links sein

Wenn Sie eine Schaltfläche haben, die zu einem anderen Teil Ihrer Website weiterleiten soll, besteht die offensichtliche Möglichkeit darin, einen Ereignis-Listener für den Klick zu haben und den Benutzer mithilfe von JavaScript umzuleiten.
Das ist falsch. Wann immer Sie ein Browser-Grundelement (z. B. Link, Formular) verwenden können, sollten Sie stattdessen fast immer dieses verwenden.

mit Tag hat stattdessen viele Vorteile.

Sie können den Link durch Klicken bei gedrückter Strg-Taste (oder langes Drücken auf Mobilgeräten) in einem anderen Tab öffnen
Wenn Sie mit der Maus über den Link fahren, wird Ihnen angezeigt, wohin Sie weitergeleitet werden
Andere Programme wie Screenreader und Suchmaschinen-Crawler funktionieren viel besser

Wenn Sie React-Router oder Next.js verwenden, sollten Sie die Link-Komponente dieses Frameworks verwenden, um das Neuladen ganzer Seiten zu verhindern.

4. Linkvorschauen

Wenn ein Benutzer einen Link zu Ihrer Website teilt, verfügen alle Chat- und Social-Media-Apps über eine Vorschaufunktion, mit der Sie einige Inhalte dieser Website sehen können, bevor der Benutzer darauf klickt. Durch einfaches Hinzufügen einiger Meta-Tags zu Ihrem Objekt Sie erlauben anderen Apps, Vorschauen auf Ihrer Website anzuzeigen.

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

Nach dem Login kopieren

Und in React 19 ist es einfacher denn je, Ihren Objekt. Früher mussten Sie Bibliotheken von Drittanbietern wie React-Helm verwenden, aber jetzt ist es integriert, um zu reagieren.

<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>

Nach dem Login kopieren

Dies wird als Open Graph Protocol bezeichnet.
Ein sehr nützliches Tool ist die Social-Share-Vorschau, mit der Sie testen können, wie Ihre Vorschau auf verschiedenen Websites aussieht, und Ihnen Tipps geben, wie Sie sie verbessern können.

5. Verwenden Sie Etiketten für Ihre Eingaben

Ich sehe oft Kontrollkästchen und wenn ich versuche, auf die Beschriftung des Kontrollkästchens zu klicken, passiert nichts. Abgesehen von der schlechten Zugänglichkeit bedeutet dies, dass der Benutzer auf das kleine Kontrollkästchen klicken muss, um es auszuwählen.

Um dieses Problem zu lösen, verwenden Sie die Funktion Tag.

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>
  );
}

Nach dem Login kopieren

Dies funktioniert für alle Eingabetypen. Wenn Sie beispielsweise auf die Beschriftung einer Texteingabe klicken, wird der Fokus in das Textfeld verschoben.

Das obige ist der detaillierte Inhalt vonEinfache Möglichkeiten, Ihre Website aufzuwerten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!