HTML和CSS进阶1

【展开和收起组件】

<details>

    <summary>前端知识</summary>

    前端CSS领域，入门简单，但是简单不代表容易，要想“更上一层楼”，其实是难上加难。

</details>

无须javascript，就可以实现手风琴效果

【原生框架web components】

谷歌公司由于掌握了 Chrome 浏览器，一直在推动浏览器的原生组件，即 Web Components API。相比第三方框架，原生组件简单直接，不用加载任何外部模块，代码量小。目前，它还在不断发展，但已经可用于生产环境。优点如下：

1、原生规范，无须使用框架

2、原生使用，无须进行编译

3、真正的CSS scope，即样式隔离

未来的网站开发，可以像搭积木一样，把组件合在一起，就组成了一个网站。这种前景是非常诱人的。

【移动端注意事项】

1、点击元素时禁止产生背景或边框

在移动端的某些设备上，点击按钮后会出现丑陋的边框

-webkit-tap-highlight-color: rgba(0,0,0,0);

2、长按链接或图片时禁止弹出菜单

在移动端的某些设备上，长按链接或图片时会默认弹出菜单

-webkit-touch-callout: none;

3、禁止用户选中文字

-webkit-user-select: none;

user-select: none;

4、取消输入英文时默认首字母大写（在ios下生效）

<input autocapitalize="off" autocorrect="off">

5、语音和视频自动播放

//javascript绑定自动播放

$(window).on('touchstart', () => {

    video.play();

})

//微信环境

document.addEventListener("WeixinJSBridgeReady", () => {

    video.play()

},false)

6、开启动画硬件加速

transform: translate3d(0,0,0);

7、让Chrome支持小于12px的文字

-webkit-text-size-adjust: none;

【css原生变量】

:root{

    --bg:white;

    --text-color:#555;

    --link-color:#000;

    --link-hover:red;

}

body{

    background-color: var(--bg);

    color:var(--text-color);

}

a, a:link{

    color:var(--link-color);

}

a:hover{

    color:var(--link-hover);

}

除了IE11（它不支持CSS变量），所有主流浏览器都对CSS变量有全面地支持