Weekly #013

2023-10-23

文章推荐

A Complete Guide to CSS Refactoring

https://www.lambdatest.com/blog/css-refactoring

这篇文章讨论了 CSS 重构对网站性能的影响以及如何改善 CSS 代码的结构。它介绍了影响 CSS 性能的因素，包括加载时间延长、移动设备适应性不佳、用户体验差以及服务器负载增加。文章还解释了核心网络指标（Core Web Vitals）的概念，包括最大内容绘制时间（Largest Contentful Paint）、首次输入延迟（First Input Delay）和累计布局偏移（Cumulative Layout Shift）。

Styling External Links with Attribute Selectors

https://css-irl.info/styling-external-links-with-attribute-selectors

本篇文章讲解了如何使用 CSS 样式来为外部链接添加自定义图标，以及如何根据链接的属性来选择不同的样式。同时还介绍了如何使用伪元素来添加图标，并解决了图标换行的问题。

Designing for All: The Basic Principles of Web Accessibility

https://www.sitepoint.com/designing-for-all-the-basics-principles-of-web-accessibility

本文介绍了 Web 可访问性的重要性和定义，以及创建可访问和包容性用户界面的实践。其中包括使用语义化 HTML、优化排版、颜色和布局、使多媒体内容无障碍等方面的最佳实践。通过遵循这些实践，可以提高网站和应用程序的可读性、可用性和可访问性，使所有用户都能够获得良好的在线体验。

The Negative Impact of Mobile-First Web Design on Desktop

https://www.nngroup.com/articles/content-dispersion

本文讨论了移动优先的网页设计对桌面设备的影响，现代网站设计趋向于移动优先，但在桌面设备上呈现时，内容会显得过大和拉伸，使用户难以使用和理解信息。这种设计趋势由于移动优先、极简主义和大型图像等因素造成，会导致用户体验的负面影响，包括增加认知负荷、互动成本提高、难以理解内容和用户沮丧等。为了改善内容分散问题，建议提高信息密度、优化页面布局和减少不必要的负空间等。

Don’t Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers

https://ashleemboyer.com/blog/don-t-use-fixed-css-height-or-width-on-text-containers

这篇文章讨论了在网页设计中使用固定的 CSS 高度值可能导致不符合 WCAG 2.2 中 Resize Text 的风险。文章提到了使用 rem 单位和 padding 来处理文本大小调整的方法，并介绍了一种使用 em 单位来指定文本容器大小的技术。同时，文章强调了确保文本在调整大小时仍然可用的重要性。