Chrome DevTools – 检查动画

使用Chrome DevTools Animations(动画)检查器检查和修改动画。

animation inspector

TL;DR

  • 通过打开Animation Inspector(动画检查器)捕获动画。它会自动检测动画并将它们分组。
  • 通过减慢动画,重播动画,或查看源代码,来检查动画。
  • 通过更改动画的时间,延迟,持续时间或关键帧偏移来修改动画。

概述

在Chrome DevTools动画检查主要有两个目的。

  • 检查动画。 您希望减慢,重播或查看动画组的源代码。
  • 修改动画。 您想要修改动画组的时间,延迟,持续时间或关键帧偏移。 目前不支持贝塞尔编辑和关键帧编辑。

动画检查支持CSS动画,CSS转换和web动画。目前不支持requestAnimationFrame动画。

什么是动画组?

动画组是一组看起来彼此相关的动画。目前,web中没有真正的组动画概念,因此运动设计师和开发人员必须组合和计时单个动画,以使它们看起来是一个连贯的视觉效果。Animation Inspector(动画检查器)根据开始时间(不包括延迟等)预测哪些动画相关,并将它们并排分组。换句话说,在同一脚本块中触发的一组动画会被分到一组,但如果它们是异步的,那么它们将被分别分组。

开始

有两种打开动画检查器的方法:

  • 打开Elements(元素)面板,找到Styles(样式)窗格,然后按下 Animations(动画)按钮(animations button )。
  • 打开Command Menu(命令菜单)和类型Drawer: Show Animations

继续阅读

Chrome DevTools – 编辑CSS样式

使用Styles(样式)窗格修改与元素关联的CSS样式。

Styles pane

TL;DR

  • Styles(样式)窗格允许您以尽可能多的方式更改本地CSS,包括编辑现有样式,添加新样式,添加样式规则。
  • 如果你想要样式持久(他们页面重新加载而丢失),您需要将它们持久化到您的开发工作区。

检查应用到元素的样式

选择一个元素[Select an element] 来检查它的样式。Styles(样式)窗格将显示所有应用于所选元素的CSS规则,优先级从高到低展示: 继续阅读

降低样式计算的范围和复杂度

添加或移除一个DOM元素、修改元素属性和样式类、应用动画效果等操作,都会引起DOM结构的改变,从而导致浏览器需要重新计算每个元素的样式、对页面或其一部分重新布局(多数情况下)。这就是所谓的样式计算。

TL;DR

  • 降低样式选择器的复杂度;使用基于class的方式,比如BEM。
  • 减少需要执行样式计算的元素的个数。

计算样式的第一步是创建一套匹配的样式选择器,浏览器就是靠它们来对一个元素应用样式的。

第二步是根据匹配的样式选择器来获取对应的具体样式规则,计算出最终具体有哪些样式是要应用在DOM元素上的。在Blink(Chrome和Opera的渲染引擎)中,至少从现在来看,以上两步在时间消耗上是差不多的。 继续阅读

CSS计数器(counter)入门

7jur9kmmsuuwej7cexpk_getting-started-with-css-counters

作为一名WEB开发者,恰当的表示信息是一项重要的工作。正恰当的显示信息一种最常见的方式是通过层次结构表示,回答“先发生什么?”这个问题。

层次可以通过对对象编号表示。在CSS中,除了有序列表<ol></ol>,没有其他元素允许我们增加顺序。如果我们想显示数字,我们不得不做一些预处理。 跟踪索引,确保自动递增等。类似这样:

<ul class="numbered-list">
    <?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
    <li class="numbered-list__item">
        <span class="numbered-list__counter">
            <?php echo $i ?>
        </span>
        <!-- Remaining markup -->
    </li>
    <?php endfor ?>
</ul>

这是一个很好的点子,但它有其局限性。如果我们想使用字母,罗马数字,希腊字符等作为索引序号,都需要使用自定义的库来实现。 继续阅读

5个不常用的CSS选择器

如果你是新的CSSer,您使用选择器可能仅限于类名(class),ID和一般的元素(tag)。事实上,总共有38 CSS选择器,有些很复杂。

这里用5个你可能不知道的 CSS选择器,和他们的实用案例。

选择器 类型 描述
foo:empty 结构性伪类 一个没有子元素的foo元素
foo::first-letter 和
foo::first-line
伪元素 foo元素的第一个字母和第一行
foo:not(x) 伪类 排除x属性后的所有foo元素
foo:lang(de) 伪类 一个应用德语的foo元素
foo:target 伪类 一个指向URI的目标foo元素

:empty

:empty伪类表示一个元素没有子元素。空格,文本节点,或空的子元素都可以被认为是子元素,但不包括HTML注释。:empty伪类可用于根据元素有无子元素而呈现不同的样式。

一个例子,比如警报消息框。我们只希望他们能够在某些情况下出现,比如,当容器内有文本内容的时候就显示,否则就隐藏,例如 – 继续阅读

:target 伪类使用技巧

什么是CSS伪类?

通常选择器不能表现HTML元素或属性的状态,我们可以在CSS选择器上添加伪类表示元素的状态、特征。伪类名写在选择器的:冒号后面,必要时可以添加(),例如:#comments:not(:target)

:target 伪类用来指定那些包含片段标识符的 URL 的目标元素样式。 例如:http://www.css88.com/demo/target-selector/#target-test这个 URL 包含了 #target-test 片段标识符。 在HTML中, 标识符是元素的id(或者name属性)。 这个示例 URL 指向的是ID为”target-test”的元素 。看看这个最简单的例子,页面上有个元素,如下:

<div id="target-test">这个元素的id为"target-test"</div>

添加CSS代码:

#target-test {
    background-color: transparent;
    border-bottom: 3px solid #ffdb3a;
    font-weight: 700;
}
#target-test:target {
    background-color: #ffdb3a;
}

点击查看:http://www.css88.com/demo/target-selector/

当然这个是最简单的例子,下面我介绍几个有意思的例子。 继续阅读

介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color

-webkit-touch-callout

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

具体查看http://www.css88.com/webkit/-webkit-touch-callout/

 

-webkit-tap-highlight-color 

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

具体查看http://www.css88.com/webkit/-webkit-tap-highlight-color/

Github 的 CSS 风格指南

这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前,你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上,但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。

编码风格:

  • 用两个空格的“soft-tabs”来缩进
  • 在属性声明的“:”后加上空格
  • 在规则声明后的“{”前加上空格
  • 使用十六进制颜色代码#000,如果不使用RGBA
  • 使用//来做注释块(而不是/**/)
  • 文档风格与KSS相同

这里有个好的语法示例:

// This is a good example!
.styleguide-format {
  border: 1px solid #0f0;
  color: #000;
  background: rgba(0,0,0,0.5);
}

继续阅读

CSS print 样式

显示器(screen)和打印机(printer)是两种差别很大的设备,所以从浏览器里看到的页面,打印出来也许和你看到的样子有很大的差距。screen一般使用逻辑单位比如px,而打印机则应该使用物理单位比如cm或in。我们常见的A4纸张大小在不同DPI的显示器上显示的大小是不同的。因此如果要精确的控制打印效果就应该使用print
css,这是跨平台兼容的标准。不推荐使用浏览器插件方式实现打印。

web打印还有一种解决方式是生成pdf格式文件,客户端下载来打印,这也是不错的一种打印方式,因为pdf本身就是一种打印标准,可以做到精确控制。可以使用jsPDF在客户端动态生成pdf,也可以在服务器端使用一些组件生成pdf后传送给客户端。当然首选还是使用print
css来实现打印。

引入print css

  • 使用link标签就像通常在html页面中引入样式表一样,不过附加一个额外的media属性,如下面这样:
<link rel="stylesheet" href="print.css" media="print" />

表明print.css样式表是用于打印的

  • 使用@media规则可以在通用的样式表中,使用@media规则指定样式用于打印,比如这样:
@media print selector {
...
}

或者

@media print {
  selector{
  ...
  }
}
  • 使用@import规则使用@import规则在通用的样式表中导入打印样式表,有两种形式,其本质是一样的。

css文件中: 继续阅读

Firefox 29 开发者工具一窥:CSS source map、网络性能分析等

原文链接:http://blog.jobbole.com/60204/

Firefox 29 已经放到曙光版(Aurora)发布频道了(译注:每一个 Firefox 正式版的出炉都要经历 Nightly、Aurora 和 Beta 三个阶段。),这意味着现在是时候透露这个版本的重要更新了,这篇文章将带你一窥新版开发者工具的究竟。

开发者工具更美观了

除了添加新的功能,我们还更新了暗色主题和亮色主题的外观。我们对亮色主题做了大幅修改,而且整个工具箱在两种主题下都保持了统一的设计。你可以在工具箱中的设置里更换主题。(详见开发备注

亮色主题
暗色主题 继续阅读