转载说明：原创不易，未经授权，谢绝任何形式的转载 当开发Web应用时，良好的用户体验是至关重要的。通过使用正确的CSS属性和值，我们可以创建易于使用和功能强大的应用程序。然而，在实践中，开发人员经常遇到CSS相关的问题，这些问题会导致页面布局混乱、滚动不流畅或者使用户难以理解内容。本文将介绍一些CSS最佳实践，帮助您避免这些常见问题，提高Web应用的用户体验。 1、scrollbehavior属性可能会导致用户头晕或头痛。 scrollbehavior属性控制网页滚动行为的平滑程度。当设置为scroll时，页面将以传统的方式滚动，用户可以看到内容在屏幕上移动。当设置为smooth时，页面将更平滑和逐渐滚动，给人以内容在屏幕上滑行或漂浮的印象。 对于一些用户，尤其是对运动敏感的用户来说，smooth设置可能会导致头晕或头痛。这是因为平滑滚动可以产生微妙的运动，对一些人的大脑来说处理起来可能会很困难，从而导致不适或甚至晕动症。 为了解决这个问题，引入了prefersreducedmotion媒体功能。该功能允许用户在浏览器设置中指定他们偏好减少运动，Web开发人员可以根据此功能调整其页面的行为。如果用户启用了prefersreducedmotion，则scrollbehavior的smooth设置将被忽略，并且页面将以传统方式滚动，以避免引起不适。 总之，如果不考虑prefersreducedmotion媒体功能，使用scrollbehavior属性的smooth设置可能会对一些对运动敏感的用户造成不适。重要的是要以体贴所有用户的需求和偏好的方式使用此属性。2、有了H5标签中的hidden属性，尽量少用display：none hidden属性是一个标准的HTML属性，可以添加到元素中以指示它应该从视图中隐藏。当hidden属性出现在元素上时，浏览器会自动应用display：none到该元素，有效地将其隐藏在视图中。 在引入hidden属性之前，开发人员通常会使用display：none来隐藏页面上的元素。然而，这种方法可能有一些缺点。例如，如果开发人员使用display：none来隐藏一个元素，然后稍后尝试使用JavaScript再次显示它，他们必须首先将display属性更改回其原始值（例如display：block）。这可能很麻烦且容易出错。 相比之下，隐藏属性简化了这个过程。当元素具有隐藏属性时，浏览器会根据需要负责应用和删除适当的显示值。因此，如果开发人员想要根据某些条件（例如单击按钮）显示或隐藏元素，他们可以简单地切换隐藏属性的存在，而不是直接修改显示属性。意味着开发人员可以在其CSS规则中使用：not（）伪类来排除具有隐藏属性的元素。 例如，如果开发人员想要将特定样式应用于所有未隐藏的元素，他们可以使用如下规则：：not（〔hidden〕）｛CSSstylesforelementsthatarenothidden｝ 以下是一个使用使用hidden属性根据按钮点击显示或隐藏元素的示例，帮助你更好的理解：buttonidtoggleButton切换元素可见性button这个元素默认情况下将被隐藏，但是可以通过按钮点击进行显示隐藏。consttoggleButtondocument。getElementById（toggleButton）；constelementToToggledocument。getElementById（elementToToggle）；toggleButton。addEventListener（click，（）｛elementToToggle。hidden！elementToToggle。hidden；｝）； 这个代码示例中，我们首先获取了用于切换元素可见性的按钮和要进行显示隐藏的元素。然后，我们为按钮添加了一个点击事件监听器，当按钮被点击时，我们使用hidden属性来控制元素的可见性。每次按钮被点击时，hidden属性的值都会被取反，从而切换元素的可见性。3、不要使用resize：none resizeCSS属性用于控制用户调整元素大小的能力。默认情况下，textarea元素可以被用户调整大小，这在某些情况下可能很有用，但如果您想保持固定的布局，则可能会成为问题。（比如手机等触屏设备，造成不好的用户体验） 过去，开发人员经常使用resize：none属性值完全禁用textarea元素的调整大小功能。然而，这可能会导致用户感到不适，因为他们可能想要调整元素以获得更好的可读性或可用性。 更好的方法是使用resize：vertical属性值，它允许用户仅在垂直方向（即上下方向）调整textarea元素的大小。这可以是在给用户控制布局和维护固定设计之间的一个很好的平衡点。 为了限制textarea元素的高度并防止无限扩展，您可以在其上设置maxheight属性。例如，如果您想将textarea的高度限制为200像素，则可以使用以下CSS：textarea｛resize：vertical；maxheight：200px；｝ 这将允许用户垂直调整textarea元素的大小，但会防止其超出200像素的高度。总结 当开发Web应用时，使用正确的CSS属性和值可以显著提高用户体验并减少问题和不必要的麻烦。在本文中，我们讨论了一些有关CSS的最佳实践，包括使用hidden属性来隐藏元素、使用resize：vertical属性值来限制textarea元素的高度调整以及使用scrollbehavior属性来平滑地滚动页面。通过遵循这些最佳实践，您可以创建更具可用性和易用性的Web应用程序，从而提供更好的用户体验。 今天的CSS小知识就分享到这里，希望对你有所帮助，感谢你的阅读，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多的人看到，最后别忘记关注前端达人，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。https：medium。comstasmelnikovthe3shortseptembercsstips2aae8ec85bfa 作者：StasMelnikov 非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正
石奶引16岁时因长得太美出现在1元纸币上，如今怎样了？俊男美女盛行的今天，有人敢自信自己的美貌，配得上拓印在人民币上吗？无巧不成书，在贵州省黔东南州，一位足不出户的美丽侗族姑娘，因缘际会成了第四套人民币一元面值上的头像，从此名声大噪，十日谈刘军在书的世界和你相遇，真好！六年前，大隐书局的第一家店在徐汇区武康大楼开张了，她就像是本地生长的花，自然而然，平平常常。那时正是武康路的咖啡店面包店最当红的时候。六年过去了，周围好几家门店现在是台阶染绿。历经淬炼新域新质新锋刃某信息通信基地学习宣传贯彻党的二十大精神纪事原标题淬炼新域新质新锋刃（主题）某信息通信基地学习宣传贯彻党的二十大精神纪事（副题）张大鹏解放军报记者康子湛王凌硕特约记者张少波该基地某部展开夜间组网训练。刘鑫摄年终岁尾，某信息通2019年的原始毒株再现？来分析下这件事有几分真实性一张图的出现，让一部分人感到不可思议，且有些震惊，一起来看看。（相关截图）原始毒株被放出来了？最近这张图流传在网络之间，瞬间激起了三层浪，毕竟这是很多人关心的事情。从图中我们看到的新经济新势能汇丰与企业共建出海生态链12月14日，由南方财经全媒体集团广东省工商业联合会主办，21世纪经济报道承办，汇丰银行战略支持的南方财经国际论坛2022年会暨广东民营企业百强峰会以线上直播的方式隆重开幕。作为平中国境外投资增加全球碳排放？事实可能恰恰相反导读有观点认为，中国境外能源基建等项目增加了东道国的碳排放。这种观点忽略了东道国发展经济的需求，仅将中国投资后的碳排放水平与原始状态作简单比较，逻辑片面。事实上，由于中国能源项目的可考两次，三种情况免试！2023湖南高职单招来了近日，湖南省教育厅发布通知，全省2023年高职单招统一报考和填报志愿时间为2023年2月21日28日，考生继续实行网上报考。高职单招报考设第一志愿和第二志愿，考生可选择12所院校报阳者归来真正阳了才发现专家学者网络大咖越来越不值得信任了头号有新人一三年坚守一朝落难几天没来平台打卡了，辛辛苦苦在一线防疫三年没中招，未曾想到，一放开后居然成为第一波阳人。也不知这种突发性的头痛欲裂会不会强制改变遗传密码，导致基因突变，阿斯茹嫁给瘫痪的谷智鑫，婚后连生二胎，如今一家四口其乐融融2012年10月，演员阿斯茹与聂远拍完电视剧杀尽豺狼后，便告别了演艺圈。而阿斯茹没有再拍戏，是因为即将与他结婚的男友谷智鑫拍戏时突然坠马受伤。谷智鑫2011年因为电视剧我是特种兵爆穿上军装，保家卫国脱下军装，救死扶伤一起认识这位最可爱的人穿上军装，他是人民子弟兵，保家卫国脱下军装，他是医生，在医学领域继续救死扶伤。他是韩新明，1998年入伍，原武警某部队医院院长，2019年转业回到地方后，创建了蒙自易康和医院。韩新广西贺州四年级小学生走了，妈妈在班级群提醒孩子阳了别轻视面对孩子的学习和健康，如果有一万次选择，相信所有的家长会一万次选择健康。有健康才有未来，虽然父母平时在孩子的教育方面很严厉，但到关键时刻依然会毫不犹豫地守护孩子，不让孩子受到半点伤