asy ways to elevate your website-CSS Tutorial-php.cn

asy ways to elevate your website

Mary-Kate Olsen

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

Original

680 people have browsed it

1. Prevent layout shifts on overflow

If you have an element with overflow: auto then it will have a scrollbar only when the element is overflowing. The problem is that once the element is overflowing and the scrollbar appears, the content has shrunk to accommodate the width of the scrollbar.

asy ways to elevate your website
To avoid the unnecessary layout shift, add:
scrollbar-gutter: stable

It will reserve space for the scrollbar even if it is not visible.

asy ways to elevate your website

At the time of writing this, only 74% of users have this feature. But it is a nice progressive enhancement. Meaning those on newer browser can enjoy a better user experience while those that are on older browsers are not affected.

2. respect the device's preference for dark mode

If you already implemented dark mode in your website, you can spare the user from selecting dark mode manually by checking it's device's preference for light or dark mode

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

Copy after login

So if the user already selected dark mode in it's settings, then you can have the default value be dark mode in your website as well.

Some websites even choose to not have a dark mode toggle at all and rely solely on the device's preference.

3. Links should be real links

When you have a button that should redirect to a different part of your website, the obvious way to do it is to have an event listener for click and to redirect the user using JavaScript.
This is wrong, whenever you can use a browser primitive (eg: link, form) then you should almost always use that instead.

using tag instead has a lot of benefits.

Being able to Ctrl click (or long press on mobile) to open the link in a different tab
Hovering over the link shows you where you will be redirected to
Other programs like screen readers and search engine crawlers will work a lot better

If you are using react-router or Next.js than you should use that framework's Link component to prevent full page reloads.

4. Link previews

When a user shares a link to your website, all chat and social media apps have a preview feature to see some of the content of that website before the user clicks it. By simply adding a couple of meta tags to your object you will allow other apps to show previews to your website.

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

Copy after login

And in react 19 it is easier than ever to edit your object. You previously had to use third party libraries like react-helmet but now it is built in to react.

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

Copy after login

This is called the Open Graph Protocol.
A very useful tool is social share preview which lets you test how your preview will look in different websites and give you advice on how to make it better.

5. Use lables with your inputs

I often see checkboxes and when I try to click the checkbox's label nothing happens. Aside from poor accessibility, this means the user has to click the tiny checkbox to select it.

To solve this use the 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>
  );
}

Copy after login

This works for all input types. Clicking the label of a text input for example will focus into the textbox.

The above is the detailed content of asy ways to elevate your website. For more information, please follow other related articles on the PHP Chinese website!