关于javascript:10个CSS技巧极大提升用户体验

3次阅读

共计 5115 个字符，预计需要花费 13 分钟才能阅读完成。

作者：Shadeed
译者：前端小智
起源：medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

一个胜利的 Web App 必须有良好的用户体验。当咱们谈及改善用户体验时，你会想到什么？

其实，有一点是很容易被开发者漠视的，那就是 CSS。咱们能够应用一些 CSS 技巧来改善网页的表现形式、交互细节和可拜访性。

而且这些技巧不须要破费太多工夫，也不须要耗费服务器资源。你只须要花两个小时学习，而后就能够把它利用到你所有的我的项目中，并永远改善用户体验。

有时你的按钮很小，这可能导致用户无奈精确点击按钮。这种景象常常产生在挪动端上。如果用户点击次数太多，没有点击他们想要的按钮，或者点击谬误的按钮，会让他们感到十分丧气。

那么，如何解决这个问题呢？有些开发者可能会说：把按钮做大点。

但网页中元素的大小往往是固定的，咱们不能轻易调整一个元素的大小。而且如果按钮太大，感觉很奇怪。

一个更好的解决方案是在不扭转按钮原始尺寸的状况下减少其可点击区域。具体来说：咱们能够应用伪元素来减少一个元素的可点击区域。

例如，这里有一个按钮。

<button id="btn">btn</button>

而后咱们能够为它增加一个伪类。

#btn::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}

这时，如果咱们点击按钮四周的区域，咱们依然能够触发按钮的点击事件。

事例地址：

https://codepen.io/bytefishme…

当页面被 # 链接滚动时，默认成果是这样的。

这种忽然的跳跃会让人感到不难受。为了解决这个问题，咱们能够应用这个 CSS 款式：sroll-behavior: smooth。

事例地址：https://codepen.io/bytefishme…

咱们的网页常常须要提供一些内容供用户抉择，如电话号码、地址、题目等。而这些文字应该是一个整体，咱们心愿当用户点击局部文字时，残余的文字会被主动抉择。

要实现这种成果非常简单，只需应用这个 CSS 款式：user-select: all。用户抉择的 CSS 属性管制用户是否能够抉择文本。如果它的值是 all，意味着一个元素的所有内容都将被原子化地抉择。

事例地址：https://codepen.io/bytefishme…

如果你想在文本被选中后增加一些额定的款式，你能够应用::selection。::selection CSS 伪元素将款式利用于文档中被用户突出显示的局部（比方在文本上点击和拖动鼠标）。

但要记住。只有某些 CSS 属性能够和 ::selection 一起应用。

color
background-color
text-decoration 及其相干属性
text-shadow
stroke-color, fill-color 和 stroke-width

事例地址：https://codepen.io/bytefishme…

在不同的场景下应用不同的鼠标款式能够帮忙读者感知页面的以后状态，从而改善用户的互动体验。

cursor CSS 属性设置鼠标指针在一个元素上时要显示的鼠标指针（如果有的话）。

光标设置应该告知用户在以后地位能够进行的鼠标操作，包含文本抉择、激活帮忙或上下文菜单、复制内容、调整表格大小，等等。你能够用一个关键词来指定光标的类型，或者加载一个特定的图标来应用（有可选的回退图像和强制性的关键词作为最初的回退）。

例如：

事例地址：https://codepen.io/bytefishme…

有很多光标款式，你能够在 MDN 文档中找到它们。

当初咱们来看看 text-overflow 的问题。如果一个文本容器的内容是从服务器返回的，或者是由用户输出的，那么就很难预测这个文本会有多长。

如果没有任何预防措施，你可能会写出这样的代码。

<head>
  <style>
    .container{
      border: 2px solid red;
      width: 200px;
      height: 60px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="username">bytefish</div>
    <p class="profile">FE, UX Designer</p>
  </div>
</body>

这个容器有一个固定的宽度和高度，包裹着名字和介绍。

但如果有些用户的简介太长，就会导致文本溢出容器，使页面看起来很蹩脚。

在这一点上，咱们能够将溢出的文本折叠起来。做到这一点就像增加三行 CSS 款式一样简略。

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

white-space: nowrap; 能够使文本不被包起来。而后咱们应用 overflow: hidden 来暗藏溢出的文本。最初，咱们应用 text-overflow: ellipsis 在文本的开端增加一个圆点，向用户表明有一些暗藏的文本。

事例地址：https://codepen.io/bytefishme…

当初咱们来讨论一下图片的格调。网络应用中应用的图片个别由后端提供。你可能曾经与后端开发者达成协议，将图片放弃在一个固定的尺寸。而后你写下这样的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img-list {
      display: flex;
      flex-direction: row;
      list-style: none;
    }
  </style>
</head>

<body>
  <ul class="img-list">
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*TyRLQdZO7NdPATwSeut8gg.png">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*pKOfOAOvx-fWzfITATgGRg.jpeg">
    </li>
    <li>
      <img src="https://miro.medium.com/fit/c/128/128/1*mXOVdfMwS0IEcjPXiikJkg.png">
    </li>
  </ul>

</body>

</html>

而网页看起来是这样的。

图片的排列与咱们所冀望的一样。

通常状况下是没有问题的。然而当咱们写代码时，咱们不能假如所有都会依照咱们的预期倒退。咱们须要做好充沛的筹备。如果后端返回的图片不失常，不合乎预期的尺寸，可能大也可能小，那么布局就会被打乱。

你能够用这个替换其中一张图片的链接。

https://miro.medium.com/max/1400/0*zQaS0awtSTOO-JYa.jpg

你会发现，页面忽然变得横七竖八。

为了避免这个问题，使咱们的页面更加强壮，咱们能够设置图片的宽度和高度。这样，咱们就不用放心后端返回的图片的大小。

img {
  width: 128px;
  height: 128px;
}

但上述写法有一个毛病：如果图像自身的长宽比与咱们设定的长宽比不统一，图像将被压缩或拉伸。

为了放弃图像的原始长宽比，咱们能够应用 object-fit: cover。

img {
  width: 128px;
  height: 128px;
  object-fit: cover;
}

object-fit 的 CSS 属性设置一个被替换的元素的内容，如 <img> 或<video>，应该如何调整大小以适宜其容器。

如果该值是 cover，那么被替换的内容的大小将放弃其长宽比，同时填充元素的整个内容框。如果对象的长宽比与它的盒子的长宽比不统一，那么该对象将被剪掉以适配。

咱们之前探讨的状况都是建设在咱们可能失去图片的前提下。然而，在理论利用中，可能因为后端服务的不稳固，或者用户本身的网络信号不好，咱们的网页可能无奈正确加载图片。

当图片缺失时，浏览器的默认款式是不优雅的，这里咱们能够优化它。

咱们能够给 img元素增加一个 onerror 事件。如果在加载图片时呈现了谬误，那么咱们能够通过 onerro r 事件给该元素增加一个款式，并应用 404 图片。

img 元素:

<img src="https://miro.medium.com/xxx.jpg" alt='fireworks picture' onerror="this.classList.add('error');">

假如这就是咱们的 404 图像:

https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg

上面是 css 代码

img.error {
      display: inline-block;
      transform: scale(1);
      content: '';
      color: transparent;
    }
img.error::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #f5f5f5 url('https://cdn-images-1.medium.com/max/1600/1*we8wfyztsdo12e2Cww6oVA.jpeg') no-repeat center / 100% 100%;
    }

这样，当 img 元素中的图片链接无奈加载图片时，咱们的 404 图片将被应用。

这里还有一点须要优化。在这种状况下，如果原始图片没有被正确加载，用户就不晓得这个图片应该是什么。为了不便用户了解，咱们能够将 img 元素的 alt 属性显示在页面上。

img.error::after {content: attr(alt);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      line-height: 2;
      background-color: rgba(0, 0, 0, .5);
      color: white;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

假如 img 的 alt 属性是这样的。

<img src="https://miro.medium.com/xxx.jpg" alt='Log of Medium' >

事例地址：https://codepen.io/bytefishme…

当你在设计色彩组合时，你是否思考过页面的色彩比照？

你须要晓得，世界上有很多色盲和色弱用户。如果你的页面的对比度低，可能会导致他们无奈失常应用你的产品。无论是出于人文关心，还是出于留住客户的思考，你都应该设计出适合的对比度。

WCAG AA 标准指出，所有重要的内容须要有 4.5:1 以上的色调对比度。

这里有一个对比度查看器的工具。

https://webaim.org/resources/…

事例：

咱们也能够应用 Chrome DevTool 来查看一个元素的色彩比照。而后咱们能够发现，Medium 的网页也在实际这一准则。

俗话说得好，细节决定成败。如果你的我的项目有很多能够改善用户体验的细节，你就能够让用户感到难受，你就有更高的胜利概率。

~ 完，我是刷碗智，新的一年咱们一起刷刷刷！

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://betterprogramming.pub…

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

正文完

javascript

发表至： javascript

2022-02-10

0

Vue实现电商网站项目

关于javascript:参考资料

关于javascript:js原型原型链

关于javascript:Mutation-events和MutationObserver-监听DOM变化

关于云计算:JavaCV的摄像头实战之六保存为mp4文件有声音

关于javascript:10个CSS技巧极大提升用户体验

可点击区域

平滑滚动

抉择所有文本

Cursor

Text Overflow

Image

无图片

色调对比度

总结

交换

站内搜索