html和css小技巧

2020-04-24 本文已影响0人 noyanse

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

使用 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

html和css小技巧

1.给汉字加拼音

2.展开收起组件

3. 原生进度条和度量

4. Web components

5.移动端 H5 注意事项总结

6. 开启硬件加速

7. fixed 定位问题

8. 怎么让 Chrome 支持小于 12px 的文字？

9. CSS 变量和主题切换优雅实现

10. CSS Modules 理论和实战

11. 检测移动端横屏竖屏

12. % 相对于什么

猜你喜欢

热点阅读