《CSS 简易速速上手小册》第8章:CSS 性能优化和可访问性(2024 最新版)

news/2024/4/23 12:14:15/文章来源:https://blog.csdn.net/qq_41340258/article/details/136093779

在这里插入图片描述

文章目录

  • 8.1 CSS 文件的组织和管理
    • 8.1.1 基础知识
    • 8.1.2 重点案例:项目样式表结构
    • 8.1.3 拓展案例 1:使用BEM命名规范
    • 8.1.4 拓展案例 2:利用 Sass 混入创建响应式工具类
  • 8.2 提高网页加载速度的技巧
    • 8.2.1 基础知识
    • 8.2.2 重点案例:图片优化
    • 8.2.3 拓展案例 1:合并和压缩资源文件
    • 8.2.4 拓展案例 2:使用 CDN 和浏览器缓存
  • 8.3 设计可访问的 Web 界面
    • 8.3.1 基础知识讲解
    • 8.3.2 重点案例:构建可访问的表单
    • 8.3.3 拓展案例 1:使用合适的颜色对比度
    • 8.3.4 拓展案例 2:实现完全键盘可访问的导航

8.1 CSS 文件的组织和管理

良好的CSS文件组织和管理是维持大型项目可维护性的关键。随着项目规模的扩大,没有结构的CSS代码很容易变得难以管理和维护。通过采取一些策略和最佳实践,我们可以确保代码的可读性、可维护性和扩展性。

8.1.1 基础知识

  • 模块化:将CSS代码分割成多个模块或文件,每个模块负责一部分样式,例如布局、组件、工具类等。
  • 命名规范:采用一致的命名规范,如BEM(块、元素、修饰符),以确保类名的语义化和可读性。
  • 预处理器:使用Sass、Less等CSS预处理器,它们提供变量、混入、嵌套等功能,以支持更高级的CSS代码组织。
  • 注释:在CSS代码中添加注释,解释模块的用途、复杂的代码实现或特定的样式选择。

8.1.2 重点案例:项目样式表结构

假设你正在开发一个中到大型的Web应用,需要构建一个清晰、易于管理的CSS结构。

  • 样式目录结构
styles/
|
|-- base/
|   |-- _reset.scss       // 重置浏览器默认样式
|   |-- _typography.scss  // 设置基础字体样式
|
|-- components/
|   |-- _buttons.scss     // 按钮样式
|   |-- _cards.scss       // 卡片组件样式
|
|-- layouts/
|   |-- _header.scss      // 网站头部样式
|   |-- _footer.scss      // 网站底部样式
|
|-- utils/
|   |-- _variables.scss   // 存放所有Sass变量
|   |-- _mixins.scss      // 存放所有混入
|
|-- main.scss             // 主样式文件,@import所有其他文件

通过这种组织方式,我们可以将CSS代码分散到多个更小、更易于管理的文件中,而main.scss则用于汇总这些样式,便于编译。

8.1.3 拓展案例 1:使用BEM命名规范

为了避免样式冲突并提高CSS的可维护性,我们采用BEM命名规范来命名CSS类。

  • 示例代码
/* Block component */
.btn { ... }/* Element that depends upon the block */ 
.btn__price { ... }/* Modifier that changes the style of the block */
.btn--big { ... }

这种命名方法明确了CSS类的作用和关系,提高了代码的可读性和重用性。

8.1.4 拓展案例 2:利用 Sass 混入创建响应式工具类

使用Sass混入(Mixins)来创建一组响应式工具类,以快速应用媒体查询和响应式设计。

  • Sass Mixin 示例
@mixin respond-to($breakpoint) {@if $breakpoint == 'phone' {@media (max-width: 600px) { @content; }} @else if $breakpoint == 'tablet' {@media (max-width: 900px) { @content; }} @else if $breakpoint == 'desktop' {@media (min-width: 901px) { @content; }}
}// 使用混入
@include respond-to('phone') {.example { font-size: 14px; }
}

通过使用Sass混入,我们可以以一种更干净、更可维护的方式实现响应式设计。

通过这些组织和管理CSS文件的策略,我们可以确保即使在最复杂的项目中,样式代码也能保持清晰和高效。随着技术的发展,始终保持代码的组织和结构,对于维护一个长期项目来说至关重要。

在这里插入图片描述


8.2 提高网页加载速度的技巧

在数字化时代,网页的加载速度不仅影响用户体验,也是搜索引擎排名的重要因素。快速加载的网页能够提升用户满意度,减少跳出率,并提高网站的整体表现。以下是一些提高网页加载速度的关键技巧和策略。

8.2.1 基础知识

  • 优化图片:图片通常是网页中体积最大的资源,通过压缩和格式选择,可以显著减少它们的大小。
  • 使用CDN(内容分发网络):CDN可以将内容缓存在全球多个位置,减少服务器响应时间。
  • 减少HTTP请求:通过合并文件、使用CSS精灵、内联小资源等方法减少页面的HTTP请求次数。
  • 异步加载资源:使用异步加载(如JavaScript的asyncdefer属性)可以防止阻塞渲染的脚本延迟页面的显示。
  • 利用浏览器缓存:通过设置合适的缓存策略,可以使回访用户更快地加载页面。

8.2.2 重点案例:图片优化

一个在线零售网站使用了大量的高分辨率产品图片,导致页面加载速度缓慢。

  • 优化步骤
    1. 压缩图片:使用工具如TinyPNG或ImageOptim压缩图片文件大小,而不损失可见的图片质量。
    2. 适当选择格式:对于图标和简单图形,使用SVG格式;对于照片,使用WebP或JPEG格式。
    3. 懒加载:实现图片的懒加载,使得页面初始化时只加载视口内的图片,其他图片在滚动到视口时才加载。

8.2.3 拓展案例 1:合并和压缩资源文件

一个博客网站有多个CSS和JavaScript文件,导致加载速度受影响。

  • 优化步骤
    1. 合并文件:将所有CSS文件合并为一个文件,所有JavaScript文件也合并为一个文件,减少HTTP请求的次数。
    2. 压缩文件:使用工具如UglifyJS和CSSNano等压缩资源文件,去除空格、注释,缩短变量名。

8.2.4 拓展案例 2:使用 CDN 和浏览器缓存

一个视频内容提供网站面临着全球用户的高延迟加载问题。

  • 优化步骤
    1. 部署CDN:选择一个性能良好的CDN服务提供商,将静态资源(如CSS、JavaScript和媒体文件)部署在CDN上,减少地理位置对加载速度的影响。
    2. 配置缓存策略:通过设置HTTP头Cache-ControlExpires,使浏览器缓存静态资源,减少回访用户的加载时间。

通过实施这些技巧,你可以显著提高网页的加载速度,从而改善用户体验和提升网站的SEO表现。记住,网页性能优化是一个持续的过程,定期评估和调整是必要的。使用工具如Google PageSpeed Insights和WebPageTest可以帮助你诊断性能问题并跟踪优化的效果。

在这里插入图片描述


8.3 设计可访问的 Web 界面

在构建网站时,确保每个人都能平等访问和使用你的网站是至关重要的。设计可访问的Web界面意味着要考虑到所有用户的需求,包括那些有视觉、听力、运动和认知障碍的人。通过遵循Web内容可访问性指南(WCAG),我们可以创建一个对所有人更加友好和包容的网络环境。

8.3.1 基础知识讲解

  • 语义化HTML:使用正确的HTML标签(如<header><nav><main><footer>)来提供清晰的文档结构,帮助屏幕阅读器正确解读页面内容。
  • 键盘导航:确保网站的所有功能都可以通过键盘访问,这对那些无法使用鼠标的用户尤其重要。
  • ARIA(Accessible Rich Internet Applications):当标准的HTML元素无法满足交互需求时,使用ARIA角色和属性增强元素的可访问性。
  • 颜色对比度:确保文本和其背景之间有足够的对比度,使得色盲用户和视力不佳的用户也能轻松阅读。
  • 替代文本:为所有非文本内容(如图片)提供替代文本,帮助视觉障碍用户理解内容。

8.3.2 重点案例:构建可访问的表单

表单是网站交互的重要组成部分,确保它们对所有用户都是可访问的至关重要。

  • HTML 结构
<form><label for="name">姓名:</label><input type="text" id="name" name="user_name"><label for="email">电子邮件:</label><input type="email" id="email" name="user_email"><button type="submit">提交</button>
</form>
  • 关键实践
    • 使用<label>元素关联每个输入,提高表单的可访问性。
    • 为重要的表单控件提供明确的指示和错误提示。

8.3.3 拓展案例 1:使用合适的颜色对比度

为网站选择颜色时,确保文本内容与背景之间的对比度符合WCAG指南,至少达到AA级标准。

  • 实践技巧
    • 使用在线工具,如WebAIM的颜色对比度检查器,来验证你的颜色选择。
    • 在设计早期阶段就考虑对比度,确保设计的可访问性。

8.3.4 拓展案例 2:实现完全键盘可访问的导航

网站的导航菜单应该能够通过键盘完全访问,特别是对于那些无法使用鼠标的用户。

  • 实践技巧
    • 确保所有的交互元素(链接、按钮)都可以通过Tab键访问。
    • 使用focus样式提供视觉反馈,显示当前键盘焦点的位置。
    • 在JavaScript中处理keydown事件,以支持复杂的键盘交互。

通过实现这些可访问性最佳实践,我们不仅能够创建一个对所有用户都开放和友好的网站,还能提升我们的品牌形象和法律合规性。记住,设计可访问的Web界面是一个持续的过程,需要我们在设计和开发的每个阶段都保持关注和改进。让我们一起努力,为每个人打造更加开放、平等的数字世界。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ldbm.cn/p/343298.html

如若内容造成侵权/违法违规/事实不符,请联系编程新知网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

react中hook封装一个table组件 与 useColumns组件

目录 1&#xff1a;react中hook封装一个table组件依赖CommonTable / index.tsx使用组件效果 2&#xff1a;useColumns组件useColumns.tsx使用 1&#xff1a;react中hook封装一个table组件 依赖 cnpm i react-resizable --save cnpm i ahooks cnpm i --save-dev types/react-r…

多机多卡运行nccl-tests和channel获取

nccl-tests 环境1. 安装nccl2. 安装openmpi3. 单机测试4. 多机测试mpirun多机多进程多节点运行nccl-testschannel获取 环境 Ubuntu 22.04.3 LTS (GNU/Linux 5.15.0-91-generic x86_64)cuda 11.8 cudnn 8nccl 2.15.1NVIDIA GeForce RTX 4090 *2 1. 安装nccl #查看cuda版本 nv…

腾讯云4核8G服务器可以用来干嘛?怎么收费?

腾讯云4核8G服务器适合做什么&#xff1f;搭建网站博客、企业官网、小程序、小游戏后端服务器、电商应用、云盘和图床等均可以&#xff0c;腾讯云4核8G服务器可以选择轻量应用服务器4核8G12M或云服务器CVM&#xff0c;轻量服务器和标准型CVM服务器性能是差不多的&#xff0c;轻…

NAT——网络地址转换、NAPT

网络地址转换 NAT (Network Address Translation) 1994 年提出。 需要在专用网连接到互联网的路由器上安装 NAT 软件。 装有 NAT 软件的路由器叫做 NAT路由器&#xff0c;它至少有一个有效的外部全球 IP 地址。 所有使用本地地址的主机在和外界通信时&#xff0c;都要在 NA…

【MATLAB源码-第137期】基于matlab的NOMA系统和OFDMA系统对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 NOMA&#xff08;非正交多址&#xff09;和OFDMA&#xff08;正交频分多址&#xff09;是两种流行的无线通信技术&#xff0c;广泛应用于现代移动通信系统中&#xff0c;如4G、5G和未来的6G网络。它们的设计目标是提高频谱效…

【RT-DETR有效改进】计算训练好权重文件对应的FPS、推理每张图片的平均时间(科研必备)

👑欢迎大家订阅本专栏,一起学习RT-DETR👑 一、本文介绍 本文给大家带来的改进机制是利用我们训练好的权重文件计算FPS,同时打印每张图片所利用的平均时间,模型大小(以MB为单位),同时支持batch_size功能的选择,对于轻量化模型的读者来说,本文的内容对你一定有…

PE 特征码定位修改程序清单 uiAccess

requestedExecutionLevel level"asInvoker" uiAccess"false" 可以修改这一行来启用禁用原程序的盾牌图标&#xff0c;似乎作用不大。以前没事写的一个小玩意&#xff0c;记录一下。 等同于这里的设置&#xff1a; 截图 代码如下&#xff1a; #include …

跨境电商新风潮:充分发挥海外云手机的威力

在互联网行业迅速发展的大环境下&#xff0c;跨境电商、海外社交媒体营销以及游戏产业等重要领域都越来越需要借助海外云手机的协助。 特别是在蓬勃发展的跨境电商领域&#xff0c;像亚马逊、速卖通、eBay等平台&#xff0c;结合社交电商营销和短视频内容成为最有效的流量来源。…

Stable Diffusion 模型下载:majicMIX reverie 麦橘梦幻

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十

每日一练:LeeCode-654、最大二叉树【二叉树+DFS+分治】

本文是力扣LeeCode-654、最大二叉树【二叉树DFS分治】 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其…

精品springboot疫苗发布和接种预约系统

《[含文档PPT源码等]精品基于springboot疫苗发布和接种预约系统[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; Java——涉及技术&#xff1a; 前端使用技术&#xff1a;…

【数据分享】1929-2023年全球站点的逐日降水量数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;说到常用的降水数据&#xff0c;最详细的降水数据是具体到气象监测站点的降水数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全…

分享76个文字特效,总有一款适合您

分享76个文字特效&#xff0c;总有一款适合您 76个文字特效下载链接&#xff1a;https://pan.baidu.com/s/1rIiUdCMQScoRVKhFhXQYpw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不…

小白水平理解面试经典题目LeetCode 102 Binary Tree Level Order Traversal【二叉树】

102. 二叉树层次顺序遍历 小白渣翻译 给定二叉树的 root &#xff0c;返回其节点值的层序遍历。 &#xff08;即从左到右&#xff0c;逐级&#xff09;。 例子 小白教室做题 在大学某个自习的下午&#xff0c;小白坐在教室看到这道题。想想自己曾经和白月光做题&#xff0c…

第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例:深度解析响应式布局支持

传奇开心果系列 系列博文目录Vant开发移动应用示例系列 博文目录前言一、Vant响应式布局介绍二、媒体查询实现响应式布局示例代码三、短点设置实现响应式布局示例代码四、响应式工具类实现响应式布局示例代码五、栅格系统实现响应式布局示例代码六、响应式组件实现响应式布局示…

SolidWorks学习笔记——入门知识2

目录 建出第一个模型 1、建立草图 2、选取中心线 3、草图绘制 4、拉伸 特征的显示与隐藏 改变特征名称 5、外观 6、渲染 建出第一个模型 1、建立草图 图1 建立草图 按需要选择基准面。 2、选取中心线 图2 选取中心线 3、草图绘制 以对称图形举例&#xff0c;先画出…

《傲剑狂刀》中的人物性格——龙吟风

在《傲剑狂刀》这款经典武侠题材的格斗游戏中,龙吟风作为一位具有传奇色彩的角色,其性格特征复杂且引人入胜。以下是对龙吟风这一角色的性格特点进行深度剖析: 一、孤高独立的剑客气质 龙吟风的名字本身就流露出一种独特的江湖气息,"吟风"象征着他的飘逸与淡泊名…

鸿蒙开发第3篇__大数据量的列表加载性能优化

列表 是最常用到的组件 一 ForEach 渲染控制语法————Foreach Foreach的作用 遍历数组项&#xff0c;并创建相同的布局组件块在组件加载时&#xff0c; 将数组内容数据全部创建对应的组件内容&#xff0c; 渲染到页面上 const swiperImage: Resource[] {$r("app.me…

React18原理: 再聊Fiber架构下的时间分片

时间分片 react的任务可以被打断&#xff0c;其实就是基于时间分片的人眼最高能识别的帧数不超过30帧&#xff0c;电影的帧数差不多是在24浏览器的帧率一般来说是60帧&#xff0c;也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右浏览器正常的工作流程是运算渲染&#xff…

专业140+总分410+华南理工大学811信号与系统考研经验华工电子信息与通信,真题,大纲,参考书。

23考研已经落幕&#xff0c;我也成功的上岸华工&#xff0c;回首这一年多的历程&#xff0c;也是有一些经验想和大家分享一下。 首先说一下个人情况&#xff0c;本科211&#xff0c;初试成绩400分。专业课140。 整体时间安排 对于考研&#xff0c;很重要的一环就是时间安排&…