20.综合-灵析社区

懒人学前端

一、HTTP2.0 时代，CSS Sprites 还有用吗，为什么？

HTTP1.1 下的 CSS Sprites

HTTP1.1 自身的管道化并不完善。浏览器实际通过为同一域名下的资源同时建立多个 TCP 连接，来实现并行传输，并且限制了最大连接数

通过手动或者工程化的方式，将将小图片合并成大图，即 Sprites图（又称精灵图，雪碧图）。可以将多个对小图的请求，合并为对单张大图的请求，通过background-position定位在文档显示

优点：

  • 避免大量小图请求阻塞其他资源下载
  • 减少多连接的重复的从发起请求到首字节响应的时间
  • 避免由于网络不稳定、客户端、服务端限制，导致部分小图丢失的情况
  • 图标、界面一次显示全，提升用户体验

缺点：

  • 修改、增加和删除图片、修改位置，颜色麻烦
  • 请求图片的连接失败，整个界面图片效果丢失
  • 宽度和高度通常固定，自适应需要额外设置
  • 实现响应式图片时可能需要维护多张合成图，而且灵活度依然不够
  • HTTP1.1 下的 SVG Sprites
  • 合并 SVG 到一张 SVG
<svg>
  <symbol id="svg1"><!-- SVG① --></symbol>
  <symbol id="svg2"><!-- SVG② --></symbol>
  <symbol id="svg3"><!-- SVG③ --></symbol>
</svg>
  • 在文档中通过use引用其中的一张 SVG
<svg>
  <use xlink:href="#svg1"></use>
</svg>

SVG 具有无锯齿放大，容易修改尺寸好颜色等优点

SVG Sprites 可以作为不考虑 IE8- 时，CSS Sprites替代

但开发者仍然需要 手工 或 工程化方式，合成 SVG Sprites

HTTP2.0 支持多路复用

HTTP2.0 下，一个 TCP 会话上可以进行任意数量的HTTP请求

理论上，所有图片资源几乎可以并行下载

CSS Sprites 最初要解决的问题，已经不复存在

基于 TCP 本身的局限性（丢包时，整个会话都要重传），考虑网络的不稳定

实际体验中，CSS Sprites 对比 HTTP2.0，通常仍会有轻微的速度提升

是否使用 CSS Sprites，或者升级到 SVG Sprites 可以结合维护复杂度代入具体项目决定

二、你在开发中都遇到过哪些 CSS 兼容性问题，你是如何解决的？

IE 兼容性问题

PC 时代，Trident 内核的 IE 在 5.5 - 8 时占据主导地位

  • 问题：IE6 PNG 图片不透明

答案：使用 progid:DXImageTransform.Microsoft.AlphaImageLoader 滤镜重复加载 PNG

  • 问题：IE6 浮动元素设置 margin，边距变 2 倍

答案：设置浮动元素display: inline

  • 问题：IE6 不支持绝对定位 position: fixed

答案：

position: absolute;
top: expression(((t = document.documentElement.scrollTop) ? t : document.body.scrollTop) + 'px'); 
  • 问题：IE8 有链接的图片四周由黑边框

答案：img { border: none }

测试

  • IEtester 比 IE9+ 自带 Simulater 更接近真实效果
  • 使用装有 低版本IE 的虚拟机镜像，模拟完全真实的低版本 IE 环境

微软甚至专门提供了一套90天激活的 win7 镜像

  • 非标与标准浏览器兼容性问题

标准属性不被支持，或者实现不同

  • 问题：IE兼容模式 与 标准浏览器 宽度和高度表现不同

答案：IE 兼容模式默认 box-sizing: border-box 而不是 box-sizing: content-box，可以统一声明为 前者，或者用 CSS hacks 设置值对 IE 兼容模式生效的宽高或边距

  • 问题：IE9- 不支持 opacity

答案：

opacity: .8;

filter: alpha(opacity = 80);

filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 80);

  • 问题：IE9- 不支持 background-size 等 CSS3 新特性

答案：IE6+ 支持behavior，可以设置或检索对象的 DHTML 行为。引入 css3pie 其用这个属性让 IE 支持部分 CSS3 新特性

  • 问题：cursor: hand在标准浏览器无效

答案：用 IE 也支持的标准属性值cursor:pointer替代

CSS3 新特性兼容性问题

CSS3 起，标准被模块化，每个模块相对独立。浏览器可能会将处于 非推荐 的阶段属性实验性实现，或者某个处于 候选推荐 阶段的标准又被否决。导致不同浏览器，以及同一浏览器的不同版本，对于新特性的实现差异。

解决：

  • 人工或使用混入器添加私有前缀

工作量大，开发阶段冗余代码多

同一属性，有无私有前缀，后面接收的属性值类型、顺序等可能不同

部分私有前缀，需要加到属性值，而不是属性名上

  • PostCSS 的 autoprefixer 可以配置 Browserslist，按需对浏览器及其不同版本添加私有前缀

移动端兼容问题

主要是 iOS 和 Android 下移动浏览器兼容以及使用 Webview 开发的 APP 兼容问题

注意：以下这些问题只会在特定版本的系统下出现

  • 问题：溢出含滚动条元素怒在 iOS 滑动体验卡顿

答案：给溢出滚动元素设置 -webkit-overflow-scrolling:touch

  • 问题：iOS 禁用按钮后，按钮样式异常

答案：给按钮设置 opacity: 1

  • 问题：iOS 监听<span> <label>点击无响应

答案：给元素怒设置 cursor:pointer

  • 问题：Android 输入框显示语音输入按钮

答案：隐藏语音输入按钮 input::-webkit-input-speech-button { display: none }

想要让 APP 用户获得体验更一致，减少兼容性问题：

  • 将渲染引擎与源码一起打包，比如使用腾讯基于 X5 内核的浏览服务，安装包会变大
  • 采用 React Native Flutter UniApp + Weex 等使用 HTML + CSS + JS 开发，原生渲染的方案

三、当你忘记一个 CSS 属性时，你一般如何做？

  • Emmet

Emmet 能够提高 HTML 和 CSS 的书写效率，我们只需键入缩写，代码提示就会帮助我们找到相应属性名或属性值

IDE 如 VsCode 集成了 Emmemt，文本编辑器 Sublime Notepad++ VIM 等都有相应插件可以安装

  • 查看说明

IDE 如 VsCode 支持鼠标悬停属性名 或 属性值，查看说明

点击其中的链接，可以直达 MDN 对应文档

  • 搜索

MDN，里面有属性的用法，在浏览器实现的说明及对应规范的链接

Can I use，里面有属性在各个运行环境的兼容性情况，移动端版本数据相当丰富

  • 记忆

重新手打一遍遗忘的属性和属性名，注释搜索中发现的信息或链接，在后续重构中思考最佳实践，这样能收获更多

四、结合项目谈谈你是如何学习 CSS 的？

  • 发现问题

思考你在项目中遇到过哪些问题，你是否如何解决的

搜索，查文档、查规范是比请教他人更快速的问题解决途径

Bad：同一问题，同一属性，每次都要搜索

Good：高频的属性用法，尽量记住

Bad：反复复制粘贴代码

Good：找出代码中真正解决问题的部分，自己敲一遍

Great：明白问题的原因和解决问题的思路

  • 提升效率、规范

思考项目有哪些可以改进的地方，你是如何改进的，成果怎样

效率：是否可以使用工具、脚本，将原有 CSS及相关的图片编译、压缩、上传、部署 等流程化、自动化

规范：是否可以改进 CSS 文件、规则的组织形式，是否可以参考或者根据业务，拟定一套利于团队协作的开发规范，并通过工程化的方式推广规范（比如，在Commit前，对CSS代码进行规范性校验和自动更正）

  • 技术分享

回顾一次你做的技术分享，你通过哪些渠道获取了权威的信息，是否手写代码验证了这些信息，是否有通过 脑图、动画、PPT 等提高信息分享的效率 - 回顾一次你与同事或同学的争论，你是如何证明自己观点是正确的，是拿出了权威的资料，请权威的人帮你说服，还是通过实际测试后，用数据说话

  • 学无止境

CSS 最近有哪些新鲜事，可以新的草案，新的工具，新的方法论等，简单分享你的观点

项目中所用的技术栈，最近更新的内容是什么，比过去改进了什么，解决了什么问题，怎样解决的？

你可以根据上面的提纲自由发挥，每个问题举 1 个例子即可，避免长篇大论，不要谈太多感受，重点体现方法，结果，涉及的知识点到为止


阅读量：1856

点赞量：0

收藏量:0