当开拓 Web 运用时,良好的用户体验是至关主要的。通过利用精确的 CSS 属性和值,我们可以创建易于利用和功能强大的运用程序。然而,在实践中,开拓职员常常碰着 CSS 干系的问题,这些问题会导致页面布局混乱、滚动不流畅或者利用户难以理解内容。本文将先容一些 CSS 最佳实践,帮助您避免这些常见问题,提高 Web 运用的用户体验。
1、"scroll-behavior"属性可能会导致用户头晕或头痛。
scroll-behavior 属性掌握网页滚动行为的平滑程度。当设置为 scroll 时,页面将以传统的办法滚动,用户可以看到内容在屏幕上移动。当设置为 smooth 时,页面将更平滑和逐渐滚动,给人以内容在屏幕上滑行或漂浮的印象。
对付一些用户,尤其是对运动敏感的用户来说,smooth 设置可能会导致头晕或头痛。这是由于平滑滚动可以产生奇妙的运动,对一些人的大脑来说处理起来可能会很困难,从而导致不适或乃至晕动症。
为理解决这个问题,引入了 prefers-reduced-motion 媒体功能。该功能许可用户在浏览器设置中指定他们偏好减少运动,Web 开拓职员可以根据此功能调度其页面的行为。如果用户启用了 prefers-reduced-motion,则 scroll-behavior 的 smooth 设置将被忽略,并且页面将以传统办法滚动,以避免引起不适。
总之,如果不考虑 prefers-reduced-motion 媒体功能,利用 scroll-behavior 属性的 smooth 设置可能会对一些对运动敏感的用户造成不适。主要的是要以谅解所有用户的需求和偏好的办法利用此属性。
2、有了H5标签中的 hidden 属性,只管即便少用 display: nonehidden 属性是一个标准的 HTML 属性,可以添加到元素中以指示它该当从视图中隐蔽。当 hidden 属性涌如今元素上时,浏览器会自动运用 display: none 到该元素,有效地将其隐蔽在视图中。
在引入 hidden 属性之前,开拓职员常日会利用 display: none 来隐蔽页面上的元素。然而,这种方法可能有一些缺陷。例如,如果开拓职员利用 display:none 来隐蔽一个元素,然后稍后考试测验利用 JavaScript 再次显示它,他们必须首先将 display 属性变动回其原始值(例如 display:block)。这可能很麻烦且随意马虎出错。
比较之下,隐蔽属性简化了这个过程。当元素具有隐蔽属性时,浏览器会根据须要卖力运用和删除适当的显示值。因此,如果开拓职员想要根据某些条件(例如单击按钮)显示或隐蔽元素,他们可以大略地切换隐蔽属性的存在,而不是直接修正显示属性。 意味着开拓职员可以在其 CSS 规则中利用 :not() 伪类来打消具有隐蔽属性的元素。
例如,如果开拓职员想要将特定样式运用于所有未隐蔽的元素,他们可以利用如下规则:
:not([hidden]) { / CSS styles for elements that are not hidden /}
以下是一个利用利用 hidden 属性根据按钮点击显示或隐蔽元素的示例,帮助你更好的理解:
<button id="toggleButton">切换元素可见性</button><div id="elementToToggle" hidden> 这个元素默认情形下将被隐蔽,但是可以通过按钮点击进行显示/隐蔽。</div>
const toggleButton = document.getElementById('toggleButton');const elementToToggle = document.getElementById('elementToToggle');toggleButton.addEventListener('click', () => { elementToToggle.hidden = !elementToToggle.hidden;});
这个代码示例中,我们首先获取了用于切换元素可见性的按钮和要进行显示/隐蔽的元素。然后,我们为按钮添加了一个点击事宜监听器,当按钮被点击时,我们利用 hidden 属性来掌握元素的可见性。每次按钮被点击时,hidden 属性的值都会被取反,从而切换元素的可见性。
3、不要利用 resize: noneresize CSS 属性用于掌握用户调度元素大小的能力。默认情形下,textarea 元素可以被用户调度大小,这在某些情形下可能很有用,但如果您想保持固定的布局,则可能会成为问题。(比如手机等触屏设备,造成不好的用户体验)
过去,开拓职员常常利用 resize: none 属性值完备禁用 textarea 元素的调度大小功能。然而,这可能会导致用户感到不适,由于他们可能想要调度元素以得到更好的可读性或可用性。
更好的方法是利用 resize: vertical 属性值,它许可用户仅在垂直方向(即高下方向)调度 textarea 元素的大小。这可以是在给用户掌握布局和掩护固定设计之间的一个很好的平衡点。
为了限定 textarea 元素的高度并防止无限扩展,您可以在其上设置 max-height 属性。例如,如果您想将 textarea 的高度限定为200像素,则可以利用以下 CSS:
textarea { resize: vertical; max-height: 200px;}
这将许可用户垂直调度 textarea 元素的大小,但会防止其超出200像素的高度。
总结当开拓 Web 运用时,利用精确的 CSS 属性和值可以显著提高用户体验并减少问题和不必要的麻烦。在本文中,我们谈论了一些有关 CSS 的最佳实践,包括利用 hidden 属性来隐蔽元素、利用 resize: vertical 属性值来限定 textarea 元素的高度调度以及利用 scroll-behavior 属性来平滑地滚动页面。通过遵照这些最佳实践,您可以创建更具可用性和易用性的 Web 运用程序,从而供应更好的用户体验。
本日的CSS小知识就分享到这里,希望对你有所帮助,感谢你的阅读,文章创作不易,如果你喜好我的分享,别忘了点赞转发,让更多的人看到,末了别忘却关注「前端达人」,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。
https://medium.com/@stasmelnikov/the-3-short-september-css-tips-2aae8ec85bfa作者:Stas Melnikov
非直接翻译,有自行改编和添加部分,翻译水平有限,难免有疏漏,欢迎示正