xml地图|网站地图|网站标签 [设为首页] [加入收藏]
就是这么简单,不可思议的混合模式
分类:web前端

网页适配 iPhoneX,就是这么简单

2017/11/27 · CSS · 7 评论 · iPhoneX

原文出处: 凹凸实验室   

前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。

笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图:

图片 1

编写「可读」代码的实践

2017/01/08 · 基础技术 · 代码

原文出处: 淘宝前端团队(FED)- 叶斋   

图片 2

编写可读的代码,对于以代码谋生的程序员而言,是一件极为重要的事。从某种角度来说,代码最重要的功能是能够被阅读,其次才是能够被正确执行。一段无法正确执行的代码,也许会使项目延期几天,但它造成的危害只是暂时和轻微的,毕竟这种代码无法通过测试并影响最终的产品;但是,一段能够正确执行,但缺乏条理、难以阅读的代码,它造成的危害却是深远和广泛的:这种代码会提高产品后续迭代和维护的成本,影响产品的稳定,破坏团队的团结(雾),除非我们花费数倍于编写这段代码的时间和精力,来消除它对项目造成的负面影响。

在最近的工作和业余生活中,我对「如何写出可读的代码」这个问题颇有一些具体的体会,不妨记录下来吧。

JavaScript 是动态和弱类型的语言,使用起来比较「轻松随意」,在 IE6 时代,轻松随意的习惯确实不是什么大问题,反而能节省时间,提高出活儿的速度。但是,随着当下前端技术的快速发展,前端项目规模的不断膨胀,以往那种轻松随意的编码习惯,已经成为项目推进的一大阻力。

这篇文章讨论的是 ES6/7 代码,不仅因为 ES6/7 已经在大部分场合替代了 JavaScript,还因为 ES6/7 中的很多特性也能帮助我们改善代码的可读性。

不可思议的混合模式 background-blend-mode

2017/12/27 · CSS · background-blend-mode

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。

CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

适配之前需要了解的几个新知识

变量命名

变量命名是编写可读代码的基础。只有变量被赋予了一个合适的名字,才能表达出它在环境中的意义。

命名必须传递足够的信息,形如 getData 这样的函数命名就没能提供足够的信息,读者也完全无法猜测这个函数会做出些什么事情。而 fetchUserInfoAsync 也许就好很多,读者至少会猜测出,这个函数大约会远程地获取用户信息;而且因为它有一个 Async 后缀,读者甚至能猜出这个函数会返回一个 Promise 对象。

mix-blend-mode 简介

关于 mix-blend-mode 最基本的用法和描述,可以简单看看上篇文章 不可思议的混合模式 mix-blend-mode。

安全区域

安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

图片 3

也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

更详细说明,参考文档:Human Interface Guidelines – iPhoneX

命名的基础

通常,我们使用名词来命名对象,使用动词来命名函数。比如:

JavaScript

monkey.eat(banana); // the money eats a banana const apple = pick(tree); // pick an apple from the tree

1
2
monkey.eat(banana);  // the money eats a banana
const apple = pick(tree);  // pick an apple from the tree

这两句代码与自然语言(右侧的注释)很接近,即使完全不了解编程的人也能看懂大概。

有时候,我们需要表示某种集合概念,比如数组或哈希对象。这时可以通过名词的复数形式来表示,比如用 bananas 表示一个数组,这个数组的每一项都是一个 banana。如果需要特别强调这种集合的形式,也可以加上 ListMap 后缀来显式表示出来,比如用bananaList 表示数组。

有些单词的复数形式和单数形式相同,有些不可数的单词没有复数形式(比如 data,information),这时我也会使用 List 等后缀来表示集合概念。

background-blend-mode 简介

除了 mix-blend-mode ,CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。

  • 可以是背景图片与背景图片的混合,
  • 也可以是背景图片和背景色的之间的混合。

background-blend-mode 的可用取值与 mix-blend-mode一样,不重复介绍,下面直接进入应用阶段。

viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

图片 4

注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。

更详细说明,参考文档:viewport-fit-descriptor

命名的上下文

变量都是处在上下文(作用域)之内,变量的命名应与上下文相契合,同一个变量,在不同的上下文中,命名可以不同。举个例子,假设我们的程序需要管理一个动物园,程序的代码里有一个名为 feedAnimals 的函数来喂食动物园中的所有动物:

JavaScript

function feedAnimals(food, animals) { // ... // 上下文中有 bananas, peaches, monkey 变量 const banana = bananas.pop(); if (banana) { monkey.eat(banana); } else { const peach = peaches.pop(); monkey.eat(peach); } // ... }

1
2
3
4
5
6
7
8
9
10
11
12
function feedAnimals(food, animals) {
  // ...
  // 上下文中有 bananas, peaches, monkey 变量
  const banana = bananas.pop();
  if (banana) {
    monkey.eat(banana);
  } else {
    const peach = peaches.pop();
    monkey.eat(peach);
  }
  // ...
}

负责喂食动物的函数 feedAnimals 函数的主要逻辑就是:用各种食物把动物园里的各种动物喂饱。也许,每种动物能接受的食物种类不同,也许,我们需要根据各种食物的库存来决定每种动物最终分到的食物,总之在这个上下文中,我们需要关心食物的种类,所以传给money.eat 方法的实参对象命名为 banana 或者 peach,代码很清楚地表达出了它的关键逻辑:「猴子要么吃香蕉,要么吃桃子(如果没有香蕉了)」。我们肯定不会这样写:

JavaScript

// 我们不会这样写 const food = bananas.pop(); if(food) { monkey.eat(food); } else { const food = peaches.pop(); monkey.eat(food); }

1
2
3
4
5
6
7
8
// 我们不会这样写
const food = bananas.pop();
if(food) {
  monkey.eat(food);
} else {
  const food = peaches.pop();
  monkey.eat(food);
}

Monkey#eat 方法内部就不一样了,这个方法很可能是下面这样的(假设 eatMonkey 的基类 Animal 的方法):

JavaScript

class Animal{ // ... eat(food) { this.hunger -= food.energy; } // ... } class Monkey extends Animal{ // ... }

1
2
3
4
5
6
7
8
9
10
11
class Animal{
  // ...
  eat(food) {
    this.hunger -= food.energy;
  }
  // ...
}
 
class Monkey extends Animal{
  // ...
}

如代码所示,「吃」这个方法的核心逻辑就是根据食物的能量来减少动物(猴子)自身的饥饿度,至于究竟是吃了桃子还是香蕉,我们不关心,所以在这个方法的上下文中,我们直接将表示食物的函数形参命名为 food

想象一下,假设我们正在编写某个函数,即将写一段公用逻辑,我们会选择去写一个新的功能函数来执行这段公用逻辑。在编写这个新的功能函数过程中,往往会受到之前那个函数的影响,变量的命名也是按照其在之前那个函数中的意义来的。虽然写的时候不感觉有什么阻碍,但是读者阅读的单元是函数(他并不了解之前哪个函数),会被深深地困扰。

background-blend-mode 基础应用

对于 background-blend-mode ,最简单的应用就是将两个或者多个图片利用混合模式叠加在一起。假设我们存在下述两张图片,可以利用背景混合模式 background-blend-mode 叠加在一起:

图片 5
图片 6

经过背景混合模式 background-blend-mode:lighten 处理之后:

图片 7

CodePen Demo — image mix by bg-blend-mode

当然,这里使用的是 background-blend-mode:lighten 变亮这个混合模式,核心代码如下:

<div class="container"></div>

1
<div class="container"></div>

.container { background: url($pic1), url($pic2); background-size: cover; background-blend-mode: lighten; }

1
2
3
4
5
.container {
    background: url($pic1), url($pic2);
    background-size: cover;
    background-blend-mode: lighten;
}

我们可以尝试其他的组合,也就是改变 background-blend-mode 的各种取值,将会得到各种不同的感官效果。

constant 函数

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

注意:当 viewport-fit=contain 时 constant 函数是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持 constant 的浏览器,浏览器将会忽略它。
官方文档中提到 env 函数即将要替换 constant 函数,笔者测试过暂时还不可用。

更详细说明,参考文档:Designing Websites for iPhone X

严格遵循一种命名规范的收益

如果你能够时刻按照某种严格的规则来命名变量和函数,还能带来一个潜在的好处,那就是你再也不用记住哪些之前命名过(甚至其他人命名过)的变量或函数了。特定上下文中的特定含义只有一种命名方式,也就是说,只有一个名字。比如,「获取用户信息」这个概念,就叫作 fetchUserInfomation,不管是在早晨还是傍晚,不管你是在公司还是家中,你都会将它命名为 fetchUserInfomation 而不是 getUserData。那么当你再次需要使用这个变量时,你根本不用翻阅之前的代码或依赖 IDE 的代码提示功能,你只需要再命名一下「获取用户信息」这个概念,就可以得到 fetchUserInfomation 了,是不是很酷?

使用 background-blend-mode: difference 制作黑白反向动画

黑色白色这两种颜色,无疑是使用频率最高也是我认为最搭的两个颜色。当这两种颜色结合在一起,总是能碰撞出不一样的火花。

扯远了,借助 difference 差值混合模式,配合黑白 GIF,能产生奇妙的效果,假设我们拥有这样一张 GIF 图(图片来自网络,侵删):

图片 8

利用 background-blend-mode: difference ,将它叠加到不同的黑白背景之下(黑白背景由 CSS 画出来):

图片 9

产生的效果如下:

图片 10

 
demo1
我们可以尝试其他的组合,将会得到各种不同的感官效果。

如何适配

了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

分支结构

分支是代码里最常见的结构,一段结构清晰的代码单元应当是像二叉树一样,呈现下面的结构。

JavaScript

if (condition1) { if (condition2) { ... } else { ... } } else { if (condition3) { ... } else { ... } }

1
2
3
4
5
6
7
8
9
10
11
12
13
if (condition1) {
  if (condition2) {
    ...
  } else {
    ...
  }
} else {
  if (condition3) {
    ...
  } else {
    ...
  }
}

这种优美的结构能够帮助我们在大脑中迅速绘制一张图,便于我们在脑海中模拟代码的执行。但是,我们大多数人都不会遵循上面这样的结构来写分支代码。以下是一些常见的,在我看来可读性比较差的分支语句的写法:

使用 background-blend-mode 制作 hover 效果

想象一下,在上面第一个例子中,如果背景的黑白蒙层不是一开始就叠加在 GIF 图下,而是通过某些交互手段叠加上去。

应用这种方式,我们可以使用 background-blend-mode 来制作点击或者 hover 时候的蒙板效果。

假设我们有这样一张原图(黑白效果较好):

图片 11

通过混合渐变背景色,配合 Hover 效果,我们可以给这些图配上一些我们想要的色彩:

图片 12
demo2  

代码非常简单,示意如下:

.pic { background: url($img), linear-gradient(#f00, #00f); background-size: cover, 100% 100%; background-position: 0 0, -300px 0; background-blend-mode: luminosity; background-repeat: no-repeat; transition: .5s background-position linear; } .pic:hover { background-position: 0 0, 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.pic {
    background: url($img),
        linear-gradient(#f00, #00f);
    background-size: cover, 100% 100%;
    background-position: 0 0, -300px 0;
    background-blend-mode: luminosity;
    background-repeat: no-repeat;
    transition: .5s background-position linear;
}
 
.pic:hover {
    background-position: 0 0, 0 0;
}

这里有几点需要注意的:

  • 这里使用了背景色渐变动画,背景色的渐变动画有几种方式实现(戳这里了解更多方法),这里使用的是位移 background-position
  • 实现上述效果使用的 background-blend-mode 不限制具体某一种混合模式,可以自己多尝试

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:就是这么简单,不可思议的混合模式

上一篇:没有了 下一篇:你需要知道的一切,如何使用
猜你喜欢
热门排行
精彩图文