1.给汉字加拼音
<div id=root>
<!-- 给汉字加拼音 -->
<ruby>
前端开发核心知识进阶
<rt>
qianduankaifahexinzhishijinjie
</rt>
</ruby>
</div>
image.png
2.展开收起组件
<!-- 展开收起组件 -->
<details>
<summary>前端开发核心知识进阶</summary>
前端领域，入门相对简单，可是想要“更上一层楼”却难上加难，也就是我们常说的“职业天花板较低”，君不见——市场上高级/资深前端工程师凤毛麟角。这当然未必完全是坏事，一旦突破瓶颈，在技能上脱颖而出，便是更广阔的空间。那么，如何从夯实基础到突破瓶颈？
</details>
image.png
3. 原生进度条和度量
- progress 不适合用来表示度量衡，如果想表示度量衡，我们应该使用 meter 标签代替
<!-- 原生进度条和度量 -->
<progress value="20" max="100" />
image.png
4. Web components
- 原生规范，无需框架
- 原生使用，无需编译
- 真正的 CSS scope 做到了样式隔离
5.移动端 H5 注意事项总结
- 打电话发短信写邮件的小技巧
<a href="tel: 110">打电话给警察局</a>
- 发短信
<a href="sms: 110">发短信给警察局</a>
- 写邮件依赖“mailto”
<a href="mailto: 110@govn.com">发邮件给警察局</a>
// 添加抄送
<a href="mailto: 110@govn.com?cc=baba@family.com">发邮件给警察局，并抄送给我爸爸</a>
// 私密发送
<a href="mailto: 110@govn.com?cc=baba@family.com&bcc=mama@family.com">发邮件给警察局，并抄送给我爸爸，密送给我妈妈</a >
// 群发
<a href="mailto: 110@govn.com; 120@govn.com">发邮件给警察局，以及 120 急救</a>
// 定义主题内容
<a href="mailto: 110@govn.com?subject=SOS">发邮件给警察局，并添加救命主题</a>
// 包含内容用 body 体现
<a href="mailto: 110@govn.com?subject=SOS&body=快来救我">发邮件给警察局，并添加救命主题和内容</a>
// 内容也是支持插入图片和链接的 ...
- 移动端 300 毫秒点击延迟以及点击穿透现象
- 这是由于历史原因造成的，一般解决手段为禁止混用 touch 和 click，或者增加一层“透明”蒙层，也可以通过延迟上层元素消失来实现。
- 点击元素禁止产生背景或边框
-webkit-touch-callout: none;
- 禁止用户选中文字
-webkit-user-select:none;
user-select: none;
- 取消 input 输入时，英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
- iOS 有效 语音和视频自动播放
- 自动播放是一个很麻烦的话题。不同浏览器内核支持自动播放的情况不一样，甚至 webkit 内核对于自动播放的策略也一直在调整当中。自动播放有时候也带着条件：比如设置静音等。https://webkit.org/blog/6784/new-video-policies-for-ios/
一般我们设置自动播放的回退策略是用户触摸屏幕时进行的播放：
// JS 绑定自动播放（操作 window 时，播放音乐）
$(window).on('touchstart', () => {
video.play()
})
// 微信环境
document.addEventListener("WeixinJSBridgeReady", () => {
video.play()
}, false)
- 视频全屏播放
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src=""></video>
6. 开启硬件加速
在做动画时，为了达到更好的性能效果，我们往往会选用硬件加速。一般手段为：
transform: translate3d(0,0,0);
7. fixed 定位问题
这个问题主要体现在 iOS 端，比如软键盘弹出时，某些情况下，会影响 fixed 元素定位；配合使用 transform、translate 时，某些情况下，也会影响 fixed 元素定位。一般解决方案是模拟 fixed 定位，或者使用 iScroll 库。
8. 怎么让 Chrome 支持小于 12px 的文字？
-webkit-text-size-adjust:none;
9. CSS 变量和主题切换优雅实现
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties
用--变量名的方式定义变量，使用var(--变量名)的方式消费变量。
body {
background: var(--bg);
color: var(--text-color);
}
a, a:link {
color: var(--link-color);
}
a:hover {
color: var(--link-hover);
}
image.png
image.png
- 使用 CSS 变量实现主题切换
一键切换主题，以往实现方式较为复杂。借助 CSS 变量，一切变得容易起来。
:root {
--bg: white;
--text-color: #555;
--link-color: #639A67;
--link-hover: #205D67;
}
.pink-theme {
--bg: hotpink;
--text-color: white;
--link-color: #B793E6;
--link-hover: #3532A7;
}
// 在切换主题时，就变得和 toggle class 一样简单
const toggleBtn = document.querySelector('.toggle-theme')
toggleBtn.addEventListener('click', e => {
e.preventDefault()
if (document.body.classList.contains('pink-theme')) {
// 当前主题为粉色主题，需要移除 pink-theme class
document.body.classList.remove('pink-theme')
toggle.innerText = '切换正常主题色'
} else {
document.body.classList.add('pink-theme')
toggle.innerText = '切换为粉色少女主题'
}
})
// 可以将“进击的 CSS”和“进击的 HTML”相结合，利用 localStorage 实现主题的保存
const toggleBtn = document.querySelector('.toggle-theme')
if (localStorage.getItem('pinkTheme')) {
document.body.classList.add('pink-theme')
toggle.innerText = '切换为粉色少女主题'
}
toggleBtn.addEventListener('click', e => {
e.preventDefault()
if (document.body.classList.contains('pink-theme')) {
// 当前主题为粉色主题，需要移除 pink-theme class
document.body.classList.remove('pink-theme')
toggle.innerText = '切换正常主题色'
localStorage.removeItem('pinkTheme')
} else {
document.body.classList.add('pink-theme')
toggle.innerText = '切换为粉色少女主题'
localStorage.setItem('pinkTheme', true)
}
})
10. CSS Modules 理论和实战
-
其实，CSS Modules 并不是一个官方规范，更不是浏览器的机制。它依赖我们的项目构建过程，因此实现往往需要借助 Webpack。借助 Webpack 或者其他构建工具的帮助，可以将 class 的名字唯一化，从而实现局部作用。
image.png
-
实战应用 CSS Modules，我将会选取 Webpack 构建一个项目
Step 1：创建项目
npm init --y
此时生成 package.json 如下：
{
"name": "css-modules",
"version": "1.0.0",
"description": "README.md",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Step 2：创建必要文件
mkdir src
touch index.html
11. 检测移动端横屏竖屏
// js
window.addEventListener("resize", () => {
if (window.orientation === 180 || window.orientation === 0) {
console.log('竖屏')
};
if (window.orientation === 90 || window.orientation === -90 ){
console.log('横屏')
}
})
// css
@media screen and (orientation: portrait) {
/*竖屏样式代码*/
}
@media screen and (orientation: landscape) {
/*横屏样式代码.*/
}
12. % 相对于什么
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%; // 相对于.wp
left: 50%;
transform: translate(-50%, -50%); // 相对于自身宽高的一半
}
....参照https://gitbook.cn/m/mazi/columns/5c91c813968b1d64b1e08fde/topics/5cbbef07bbbba80861a35c21
网友评论