• html-minifier 基于 JS 的 HTML 代码压缩工具

    2022-07-08 前端开发 22 ℃
    HTMLMinifier 是一个高度可配置的、经过良好测试的、基于 JavaScript 的 HTML 压缩工具。参见相应的博客文章,了解它的工作原理、每个选项的描述、测试结果和结论。在线测试套件。还可以看到相应的 Ruby 包装器和NodeJS,Grunt 插件,Gulp 模块,Koa 中间件包装和 Express 中间件包装。对于类似 lint 的功能,...
  • CSS 中的字体兼容写法

    2022-07-08 前端开发 21 ℃
    由于不同系统的字体差异,很多设计稿在Mac上设计的,到了windows上制作,并在windows下预览,往往会跟设计出来的有一些差异,而我们为了兼容各种操作系统和移动设备,不得不使用一些降级的方案。本文讲了一些比较常见的CSS字体兼容方案。 CSS 中的字体分类和 FALLBACK 机制 字体的分类有很多种,可以参考这个 Wiki Typeface不过计算机...
  • Flex 布局教程:语法篇

    2022-05-23 前端开发 30 ℃
    网页布局(layout)是 CSS 的一个重点应用。 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,...
  • Flex 布局教程:实例篇

    2022-05-23 前端开发 44 ℃
    今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 一、骰子的布局 骰子的一面,最多可以放置9个点。 下面,就来看看Flex如何实现,从1个点到9个点的布局。 如果不加说明,本节的HTML模板一律如下。 上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目...