3.10 进击的HTML和CSS

梅洛笛

于 2022-12-04 18:57:18 发布

阅读量427

点赞数 2

分类专栏：前端开发核心知识进阶文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/oneoftwo_three/article/details/125472749

版权

前端开发核心知识进阶专栏收录该内容

10 篇文章 1 订阅

订阅专栏

引言：

通过前面的介绍，我们认识到JavaScript语言发展飞速。其实，HTML和CSS也在不断进步，本篇就来介绍一下发展中的HTML和CSS。之所以说“进击的HTML和CSS"，是因为它们中的很多新特性确实非常实用且具有变革精神。
本篇首先会介绍HTML的相关发展情况，接着重点分析CSS变量和CSS Modules,我认为这两
个概念代表了未来的发展方向。目前来看，有必要根据具体情况将这两个概念融合到成熟的项目中并加以应用，因此在讲解这方面的内容时，除了会介绍相关的基本理论，还会给出实战案例和构建流程。

一、进击的HTML

HTML规范是W3C与WHATWG共同合作产出的，HTML5也不例外。说是“合作产出”，其实更像是“产出两套HTML5规范”。但“话说天下大势，分久必合，合久必分”，如今它们又表示将会开发单一版本的HTML规范。
那么，HTML5给开发者提供了哪些便利呢?简单列举如下。
1.用于绘画的canvas元素。
2.用于媒介播放的video和audio元素。
3.对本地离线存储有更好的支持( localStorage、sessionStorage )。
4.新的语义化标签(article、footer、 header、 nav 、section 等)。
5.新的表单控件(calendar、date、 time、 email、 url、 search 等)。
除了以上常规功能，HTML5还可实现以下功能，我们通过一些示例来具体说明。

1.给汉字加拼音

HTMLS可以用于给汉字加拼音，示例代码如下

<ruby>
前端开发核心知识进阶
<rt>
qianduankai fahexinzhishijinjie
</rt>
</ruby>

2.展开和收起组件

我们可以通过HTMLS来展开和收起组件，代码如下。

  <details>
    <summary>解忧杂货店</summary>
    《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年于《小说野性时代》连载，于2012年3月由角川书店发行单行本。
  </details>

通过以上几行简单的代码，我们就可以实现一一个类似 “手风琴”展开和收起的效果。展开效果
以往要实现这样的效果，我们必须依靠JavaScript现在来看，HTML也变得更加具有可交互性。

3.原生进度条和度量

<progress value="30" max="100"></progress>

值得一提的是，progress不适合用来表示度量衡，如果想用来表示度量衡，则应该用meter。progress元素用于显示某个特定任务的时间进度。这个任务的时间上限是可以确定的值，如播放一段音乐的时间；或者是不可确定的值，如上传一个文件到服务器上。<progress>元素的最大值在元素显示时可能是不确定的。例如，完成一个表单提交所需要的进度条。

二、不可忽视的Web components

作为“更高阶”的前端工程师，要时刻保持技术视野的广度。在框架带来的“组件化”、“生命周期化”
这些统治级别的概念下，Web components取长补短并带有“原生”优势，因此这是可以深人研究的一个方向。下面总结一Web components的优点。

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

这条优点的后半句话是“但是继承且具备了框架的优点”
新的Web components规范中新增工程件生命局期、slot校板等概念(可以与JSX成Vue template类比)，这些概念与本来存在的组件化、shadow dom、扩展原生元素的能力相结合，使Web components具备了较好的发展前景。

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

想现有的一系列框架，不论是Vue还是Reaet,都需要进行编译，而Web components是原生
工具，会得到浏览器的天然支持，可以免去编译构建过程。

3.真正的CSS scope

Web components实现了真正的CSS scope,做到了样式隔离。关于这一点，读者可以与下面即将
介绍的CSS Modules对照学习。真正的CSS scope对于项目的可维护性至关重要。
进击的HTML和CSS带来了进击的Web components 概念。通过这个案例，可以了解到真正的高级工程师，不仅要理解this、熟练掌握各种基础知识(当然，这些是前提)，更要有技术嗅觉，对新的解决方案能够理解，面向“未来”编程。

三、移动端HTML5注意事项总结

2. 移动端产生300ms点击延迟及点击穿透现象

这是由于历史原因造成，一般解决方法为禁止混用touch和click，或者增加一层“透明”蒙层，也可以通过延迟上层元素消失来实现

3. 点击元素时禁止产生背景或边框

在移动端的某些设备上，点击按钮后会出现丑陋的边框，对于这种情况，我们一般可以使用以
下代码，对默认样式进行禁用。

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

4.长按链接与图片时禁止弹出菜单

在移动端的某些设备上，长按链接或图片会默认弹出菜单，我们般可以使用以下代码来禁止这一默认行为。

-webkit-touch-callout: none;

5.禁止用户选中文字

禁止用户选中文字的代码如下。

-webkit-user-select:none;
user-select: none;

6.取消输入英文时默认首字母大写

在某些版本的系统中，用户输人英文时，会默认首字母大写，我们可以通过以下代码来关闭这
种设置(在iOS下生效)。

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

7.语音和视频自动播放

自动播放是一个很麻烦的话题。不同浏览器的内核支持自动播放的情况不一一样，甚至WebKit
内核对于自动播放的策略也一直在调整中。自动播放有时候也带着条件，如设置静音等。
一般，我们设置自动播放的回退策略是用户触摸屏幕时进行播放，相关代码如下。

//JavaScript绑定自动播放(操作window时， 播放音乐)
$ (window) . on('touchstart', () => {
video.play()
})

//微信环境
document . addEventListener ("WeixinJSBridgeReady", () => {
video.play()
},false)

8.视频全屏播放

为了使视频全屏播放，我们一般进行如下设置。但是，最终情况会受到浏览器引擎实现所影响。

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto"
autoplay src=""></video>

9.开启硬件加速

在做动画时，为了达到更好的性能效果，我们往往会开启硬件加速，一般会进行如下设置。

transform: translate3d(0,0,0);

10. fixed定位问题

fixed定位问题主要体现在iOS端，比如，在软键盘弹出的某些情况下，fixed 元素定位会受到影响;在配合使用transform、translate 的某些情况下，fixed 元素定位也会受到影响。这个问题的一般解决方案是模拟fixed定位，或者使用iScroll库。

11.让Chrome支持小于12px的文字

一般会通过以下代码使Chrome支持小于12px的文字。

-webkit-text-size-adjust :none;

四、CSS变量和主题切换优雅实现方式

对于一键切换主题这一功能，以往的实现方式较为复杂，如今，借助CSS变量，一切都变得容易起来。代码如下：

    :root {
      --bg: antiquewhite;
      --text-color: #555;
      --border-color: #639A67;
      --hover-color: #205D67;
    }

    .other-theme {
      --bg: aliceblue;
      --text-color: rgb(236, 150, 150);
      --border-color: #B793E6;
      --hover-bg-color: #3532A7;
    }

在:root里可以声明变量，在other-theme类名选择器中可以规定改变量的值，对应的元素的盒子内的子元素在样式的使用变量，就会是other-theme规定的值，而不是:root规定的值。通过添加、删除other-theme类名，就可以做到主题切换

例子：

css代码

    #box {
      width: 500px;
      height: 500px;
      margin: 100px auto 0;
      background-color: var(--bg);
      border: 3px var(--border-color) solid;
      line-height: 500px;
      color: var(--text-color);
      text-align: center;
    }

    #box:hover {
      background-color: var(--hover-bg-color);
    }

html代码

<body>
  <div id="box">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
  <button>切换主题</button>
</body>
<script>
  document.querySelector('button').onclick = function () {
    const body = document.body
    if (body.classList.contains('other-theme')) {
      body.classList.remove('other-theme')
    } else {
      body.classList.add('other-theme')
    }
  }
</script>

运行结果：点击切换主题，样式改变

五、CSS Module理论和实战

1.什么是CSS Modules

CSS Modules是指，项目中的所有class名默认都是局部起作用的。
其实，CSS Modules并不是一个官方规范，更不是浏览器的机制。因为它依赖我们的项目构建
过程，因此基于它的实现往往需要借助webpack.借助webpack或其他构建工具，可以将clas名唯
一化，从而使其只在局部起作用。
例子如下：

<div class-"test">This is a test</div>

对应的样式表如下。

.test{color: red;}

经过编译构建后，对应的HTML代码内容如下所示。

<div class=" style_test_309571057">Thisis atest</div>

同时，经过编译构建后，对应的CSS代码内容如下所示。

_style_test_309571057{color: red;}

那该如何实现样式复用呢，这靠关键字composes实现。

在项目祥式表: style.css文件中，有如下相关代码。

.common{
  color: red;
}
.test{
  composes: common;
  font-size: 18px;
}

注意，这里使用composes关键字在.test中关联了.common样式。
项目的HTML文件中引人了style.css 文件，并使用了CSS Modules特性，代码如下。

import style from "./style.css";
<div class="${style.test}">
  This is a test
</div>

以上代码经过编译构建后，得到的代码如下。

<div class="_style__test_0980340 _style__common_404840">
  This is a test
</div>

我们看到，div的class中加入了_style__common_404840,这样就实现了复用样式。明白了道理，
那么该如何应用CSS Modules呢?

2.CSS Modules实战

本节将会使用webpack来构建一个项目，-步步进行分析讲解。由于本节的主题并不是“如
何配置webpack”,因此一些与webpack基础知识有关的内容便不在这里赘述，同时为了简化问题，
我们不进行其他webpack配置(比如dev server)。

1.创建项目

通过命令npm init --y初始创建项目

此时生成的package.json如下

{
  "name": "3.10",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

2.创建文件

在根目录创建src文件夹，在src目录下创建index.html,style.css,app.css,他们的内容分别如下

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./bundle.js"></script>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>

</body>

</html>

/* style.css */

.my_css_selector {
  color: green;
}

/* app.css */

.common {
  border: 1px solid;
}

.my_css_selector {
  composes: common;
  color: blue;
}

3.安装依赖

接下来安装webpack、webpack-cli、 Babel 全家桶( babel-core、babel-loader、 abel-preset-env) 、相应的loaders ( css-loader、style-loader )及extract-text-webpack-plugin插件。
建议安装版本遵循以下代码设置，否则会出现类似webpack版本和extract-text-webpack plugin不兼容等版本依赖问题。

添加之后，package.json如下

{
  "name": "3.10",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^3.1.1"
  }
}

4.编写webpack配置

在根目录创建webpack.config.js，内容如下

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: "./src",
  output: {
    path: __dirname + "/src",
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js/,
      loader: ' babel-loader',
      include: __dirname + '/src'
    },
    {
      test: /\.css/,
      loader:
        ExtractTextPlugin.extract("css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]")
    }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css")]
}

这里使用了extract-text-webpack-plugin插件，并定义插件分析入口为.src目录,插件进行处理后，
输出结果到_dirname + '/build'目录中。对后缀为.css的文件使用css-loader进行解析，输出样式内容style.css文件中，并在index.html文件中引人styles.css文件。
注意，这里为css-loader设置了modules 参数，并对其进行了CSS Modules处理。

5.编写npm script并运行
最后，将package jso中的script命令改为如下形式。

"scripts":{
  "start": "webpack --mode development"
}

最后package.json如下：

{
  "name": "3.10",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.1.0",
    "webpack-cli": "^3.1.1"
  }
}

最近运行npm run start，得出输出，打开页面会发现，样式已经进行了CSS Module处理

总结：
在本篇中，既进行了“大面儿”上的梳理，又在关键点上深人进行了“ 实战”。有趣中的的标签和属性、移动端HTML5注意事项总结、HTML5和CSS3面试题梳理，这3块内容旨在将碎片化的知识点进行“记事本”式的排列: Web components 方面的内容更多是想给大家带来对新技火的思考和总结; css变量、css Modules是我认为最有发展潜力、最有实用价值、最能马上落地现的解决方案。HTMI和CSS向来被忽视,但是它们涉及项目组织和构建，涉及新技术的调研和决断，我们切不可含糊对待。