深蓝的天空

一只切图喵的碎碎念

前端动画交互类优化

前端优化是个很广泛的命题,铺开去得出本书了(事实上我也没那本事),实际上市面上也有很多相关的书籍。动画与交互上的性能问题最容易被察觉,特别是在机能较低的移动端。由于自己有过一段移动开发的经历,较为关注这块且作为一个爱拾人牙慧的切图狗,现将一些他人成熟的优化方法总结如下:

当然,所有的优化都是有场景,请根据实际的场景去选择最优的方案使用。

Read More »

更好的 box-shadow 动画

引子

某日移动端有一需求:要求一 App Logo 有一层外阴影闪动效果,实现起来倒也不复杂。简单粗暴直接在 keyframes 中定义 box-shadow 动画即可交差,最终代码如下:

.box {
  margin: 100px auto;
  width: 200px;
  height: 200px;
  border-radius: 4px;
  animation: boxAnimation 1s infinite linear alternate-reverse;
}

@keyframes boxAnimation {
    form {
      box-shadow: 0 0 0px rgba(0, 0, 0, .4);
    }
    to {
      box-shadow: 0 0 50px rgba(0, 0, 0, .4);
    }
}

Read More »

macOS 下安装 Sass 失败

某日在使用 Koala 编译时 Sass 报错,之前一直正常使用,回忆起前两天系统更新到 macOS High Sierra 猜测症结在此。为了解决这个问题花了我一个多小时,甚至差点耽误项目上线,实在可恶,在此记录一下。
macOS High Sierra
Read More »

Media Query 学习笔记

Media Query 简介

Media Query 即媒体查询,借助其可实现响应式设计。Meidia Queries,该网站收集了很多优秀的 RWD(Responsive web design) 的网站。
在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式,而 Media Query 扩充了 Media Type 的功能,并且使我们能够更精准的应用样式表。


Read More »

理解 CSS 权重

权重值的计算

在最开始学习 CSS 的时,由于自己对 CSS 权重计算认识还很模糊的,在编码的时候单纯的堆积选择器数量来实现样式覆盖,导致代码非常臃肿不利于维护或者经常会疑惑某条 CSS 规则为何没有生效。正所谓“基础不牢,地动山摇”,今天就来好好回顾回顾 CSS 权重的基础。

Read More »

由p元素不能包含什么想开去

今天在做读书笔记的时候(目前使用HTML书写),遇到一个困惑:p元素不能包含什么?不想不知道,一想吓一跳。正如最近几天我在反思的:自己对HTML标准理解不够深入,导致自己在很多地方认识很模糊,进而产生模棱两口的情况。我是有着选择强迫症的,这是我不能忍受,多种选择的我定要区分出最佳出来的(在某些时候其实这也挺好)。比如今天的问题:由p元素不能包含?就暴露了自己对行内元素以及块元素区认识不深刻(这是委婉的说法,实际我一直对此的认识为空白),扯远点还有对语义化认识不足。
起初我仅仅想知道p元素不能包含哪些元素,想找出有没有业界约定俗成的做法。但是这样Google显然是无果的,但幸运的是我发现了这篇文章 《HTML中为何P标签内不可包含DIV标签?》 ,这篇文章完美的得解决了我心中的疑惑,并且将我的思考思考方向引领到正确的方向上去。
本文开头提出的问题可以转化为:p元素是什么?既然是块元素,那么问题就是块级块元素不能包涵哪些元素。首先我们需要了解HTML约束的分类。在网上胡乱Google到这些(也无法考证正确性)。HTML元素分为三大种:

  1. 顶级元素(Top-level element)
  2. 块级元素(Block-level element)
  3. 内联元素(Inline element)

Read More »