分类：前端

以html+css为主的网页技术

Stylus 实现 `content: “5”`

一般来说 Stylus 对属性是直接替换的，所以正常来说下面的 stylus 

$a = 10

.foo::before
  content $a

会编译成：

.foo::before {
  content: 10;
}

这样是非法的，10 不会渲染出来。如果想让它渲染出来，必须用字符串。如果只有一个值，那就好办了，直接 $a = '10' 就好。但如果在循环里，就比较麻烦，此时，可以用 '' + 10 转换成字符串，或者使用 s(template, value)，以下两种方式是等效的。

// 注意运算顺序哦
.foo
  for n in 1..5
    &:nth-child({n})::before
      $str = '' + (5 - n)
      content $str

  for n in 1..5
    &:nth-child({n})::after
      $str = 5 - n
      content s('"%s"', $str)

近期用 webpack-dev-server 作代理的一些经验

使用 webpack-dev-server 代理远程服务器；修改 http header 以便本地登录；代理 WebSocket。

如今前端开发使用 webpack-dev-server 作为本地服务器已经是基本配置，加上 proxy 功能可以很好的应对 SSL、跨域、线上环境切换等需求。Vue CLI 3 里也做了相应的集成，用起来很方便。

继续阅读“近期用 webpack-dev-server 作代理的一些经验”

在 Pug 模板中使用变量

如何在 Pug 里，把变量注入父模板。

我厂使用 Pug 作为 HTML 的预编译工具，写久了发现回不去了……Pug 写起来很高效，看久了习惯了阅读效率也很高，读了读文档，发现还有很丰富的可编程特性。于是我决定抛弃 Handlebars，以后都用 Pug 写模板了。

这次我厂官网改版，我就用 Pug 替换了 Handlebars，于是 build 脚本一下少了几十行，非常爽。其实我早就想这样做，不过卡在一个点：使用变量。

在 Pug 里可以这样使用变量：

- var name = 'meathill'

h1 hello #{ name }

以上代码将输出 <h1>hello meathill</h1>。这种用法比较简单，不过在 extends模板的时候，把变量放到哪里就不知道了，官方文档也语焉不详，我反复试了很多次无果，最终还是靠搜索找到了答案，原来要这样：

// Layout.pug
html
  block vars
    p 注意，这个 block 是重点，它出现在前面，用来注入变量
  head
    title #{ title } | My site
  body
    block content

// page.pug
extends Layout

block vars
  - var title = 'A blog'
  
block content
  h1 Blog title
  p blog content

关于“大漠”的一点不好的记忆

关于大漠的一点不好的记忆。不过当年没搞清楚到底是哪个。发生了最近的事情，我觉得可能是这个……

我这个人不爱交际，在行业里一直是个小透明。

不过我当年也曾想试着改变一下自己，所以找了个前端交流群加了进去。具体的群名字忘记了，总之是“大漠”创建的群。

然后发现这个群真TM恶心。群主大漠有几个小弟，一副高高在上颐指气使的样子，对群里成员吆五喝六随意攻击，不仅对发问者提出各种限制，对回答者也提出各种限制。群主也是一副老子对你们这些废柴施恩，还不快快对我歌功颂德的气势。（具体做法记不清了，好多年了。）

然后我就受不了啦。如果前端圈子都这个吊样子，那我不交际也不要紧。于是吐槽两句自己退群了。

退了之后，想说这个大漠是谁啊，怎么这么差劲，然后搜了一下，发现叫这个名字的好多，无法确定是哪个，我也懒得跑回去确认。

发生了最近的事情后，我举得按人品和气度，有可能是这个……

准备搞一场专题直播

准备在 SegmentFault 搞一场专题直播，标题是《jQuery, Backbone, Vue》，计划通过对比老中青三代框架开发的差异，带领大家理解前端发展的趋势，接触更好的未来。https://segmentfault.com/l/1500000008694676 求关注，求购买。

准备在 SegmentFault 搞一场专题直播，标题是《jQuery, Backbone, Vue》，计划通过对比老中青三代框架开发的差异，带领大家理解前端发展的趋势，接触更好的未来。

直播地址：https://segmentfault.com/l/1500000008694676
幻灯片地址：https://meathill-lecture.github.io/jquery-backbone-vue/
范例代码仓库：https://github.com/meathill-lecture/jquery-backbone-vue

求关注，求购买。

一个超级诡异的 iOS Safari `position: fixed` 失效问题

iOS Safari 下，`input readonly` 仍然可以获得输入焦点，此时页面交互大部分正常，但 `position:fixed` 会受影响。

今天前同事李某找我咨询 Hybrid 开发的问题，想起来大前天搞这个问题搞了一天，赶紧记下来，省得忘记。

先说需求。东家让我做个日历组件，在手机 Web 上用。组件的样式是这样的，很多地方都可以见到，比如南航国航的客户端。

日历控件需求图

看起来并不复杂，事实上也是，基本上顺顺利利的开发完成，准备交付。这里有个伏笔，开发中我按老习惯，使用桌面 Chrome，和实际生产环境不太一样。不过我自然要去真机上测试，结果一测问题就出来了。

因为组件需要全屏展示，所以我设置了如下的CSS：

.date-picker {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color: white;
  z-index:1024;
}

同时，对原本的 <input name="date">，我给它加上 readonly，避免弹出虚拟键盘。理论上，这样的就可以了。但实测时，不滚屏的时候，组件弹出时尺寸是准确的，盖满全屏；然则一旦滚屏，组件就会占据从页面最上方到当前最下面这截位置。大约相当于 position:absolte;top:0 的效果。

Safari 截图
手机截图
如图，可以看到组件占据了全屏，但实际是从页面最上面开始的，定位有问题。用桌面 Safari 调试也可以看出来它的高度是 968，远大于正常的 667。

这很诡异，上下左右全为0，是上古巨兽 IE6 都支持的做法。iOS Safari 虽然 Bug 多多，不应该连这个都有毛病啊。以 ios safari position fixed 为关键词 Google 之，结果 iOS Safari 历史不清白，当年 iPhone 刚出的时候的确有定位问题，于是虽有满屏的结果，但都不适用。

然后我想到找其它库，比如 Bootstrap，它的 Modal 组件也是类似的效果。但是怎么测都正常，于是我只好一个样式一个样式修改，仍然没有结果。

时间慢慢流逝，转眼已经凌晨2点了，就在我几欲放弃之际，突然发现，虽然组件弹出的时候定位有问题，但只要我点掉下面的完成，定位就会立刻恢复正常。

手机截图
注意，就是那个“完成”。

问题至此已经明朗：在 iOS Safari 里，即使 <input> 设置了 readonly，它仍然可以获取输入焦点。获取输入焦点之后，虽然没有弹出虚拟键盘，但仍然是待输入状态。

此时页面各种交互都是正常工作的，比如点击、滚屏。唯独 position:fixed 定位有问题。点击“完成”离开输入状态，Safari 自动刷新页面元素，定位就正常了。

于是我在组件弹出后，自动 input.blur()，使其失去焦点，组件的尺寸便正常无误了。

总结

移动端 Web 开发总有各种各样稀奇古怪的问题。有些好解决，有些不好解决，比如这个问题，很难定位：

  1. 历史不清白，搜也搜不到
  2. 组件要求全屏，需要避免虚拟键盘，所以会改变默认行为
  3. 其它情况下都是好的

我能想到的方案，就是想办法，用所有能用的工具，排除掉所有其它问题，最终还是能搞出来的。

FontAwesome 通过组合创建新图标

复合使用 FontAwesome 图标，创建符合需求的新图标。比如把“图片（fa-picture-o)”和“加（fa-plus-circle)”叠到一起，就可以创造”新增图片“的图标。

FontAwesome 提供了很多好看的图标，使用 WebFont 嵌入页面更是简单又好用，所以我基本上一直用它。不过有时候还是觉得不太够用，这就需要复合使用多个图标。

下面是个例子，我在图标的右下角增加一个圆形加号，表示增加、创建。

See the Pen add icon by Meathill (@meathill) on CodePen.

这里有两个选择：

  1. FontAwesome 提供了一个堆叠图标的样式：fa-stack，可以堆叠任意多的图标。
  2. 因为它实际上只占用了 :before，所以也可以使用 :after 来容纳新增的图标。如果只需要两个图标，这个方式更简单。

Bootstrap 4 发布 alpha 6

Bootstrap 4 发布 alpha 6 版本，在之前的基础上彻底拥抱 Flexbox，并对若干 class 和组件进行了升级。

这两天直播写 Meart 有点上瘾，博客好久没更了，公更私更都没更。刷推看到这则公告，小更一下吧。
图文无关，马上又要去台湾了，翻出来一张台湾公安局的照片阵楼。

Bootsrap 团队宣布 Bootstrap 4 推出 alpha 6 版本

如题。Bootstrap 4 alpha 已经是第六个版本了，我最近一直在用 alpha 5，感觉没有太大问题。

这次更新主要包含三个部分：

1. 拥抱 Flexbox

这个版本放弃了 IE9，从而可以彻底拥抱 Flexbox（之前的版本中，Grid 多半使用 display:table 和 float 实现，如果要启用 Flexbox，需要单独引用一个 bootstrap-flex.css）。

根据 CanIuse 显示，目前除了 IE 系列，大部分浏览器均已全面支持 Flexbox。

这次修改之后，绝大部分组件均已全面转向 Flexbox。

2. 加强布局和显示样式

增加了一批用于调整布局和显示的 class，这样从 Bootstrap 3 迁移也会方便一些。

这块儿我暂时没用到，没啥可说的。

3. 提升 Grid 布局

增加了更多的可控样式，可以调整 Grid 布局中的边距。

4. 升级导航栏

之前的版本中，导航栏还是个半成品，现在虽然不敢说是“完成版”，单也差不多了。

这个用途可能比较大，不过还没研究。

下次再发布就是 beta 版了，感觉离正式推出不远了。

Staticfile.org 搜索仓库还没更新，文件已经更新了。

感谢原作者和贡献者的努力，让我们得以用上越来越好用的开源框架，节省大量时间和精力，可以集中于更有产出的事情。

原文：Bootstrap 4 Alpha 6

Compass + cleancss 导致的灵异小问题

:blank伪类尚未被Chrome支持，会导致整条规则被忽略。

问题不大，不过很诡异。代码如下：

SASS:

.some-class
  display: none

.other-class:blank
  display: none

HTML:

<div class="some-class">...</div>

理论上说，这样这个div应该不显示。在本项目中，它的确没显示；但是在另外一个将本项目作为依赖的项目中，它却显示出来了。

经检查，本地开发和部署时，直接使用 compass compile 生成CSS，compass 配置中，设置输出模式（output_style）为 compressed，结果是这样的：

.some-class{display:none}.other-class:blank{display:none}

而在作为依赖时，用到的则是 grunt-contrib-cssmin 处理过的CSS，刚才那句就被压缩成

.some-class,.other-class:blank{display:none}

:blank伪类尚未被Chrome中支持，于是整条规则都被忽略，导致div显示出来。