css

  • 今天遇到并讨论了一个CSS相关的问题,很有意思,并更正了我的某些错误概念。想以问答的形式记录下,发现只有 JavaScript问题集锦,于是干脆就新开了一个issue,以后所有的HTML与CSS相关问题都记录在这里。

  • 动画初探

    最近要做动画有关的东西,看了两天动画有关的知识,零零散散的先记录下来。

    业界动画引擎:

    • PhysicsJS: 基于JavaScript、模块化、可扩展、易于使用的物理引擎,github
    • animate.css: CSS3动画,github
    • Matter.js: 基于canvas,兼容IE9+,github
    • collie:基于Canvas,IE9+

    FPS:

    动画间隔决定了动画的每秒帧数(FPS),一般的,FPS越高,动画就表现得越流畅,FPS偏低,动画就会不流畅、卡顿。JQuery中,动画间隔默认为13ms,也就是说理想状态下,动画的每秒帧数是70(1000/13)多。

    但是动

  • IE hack? forget it!


    IE hack,每个前端同学都避免不了的东西,你应该很了解下面的写法:

    color: red\9\0; // ie9
    color: red\0;  // ie8 & 9
    *color: red;  // ie6&7
    _color: red;  // ie6

    每次碰到不同的 bug 我们总要考虑用那种 hack 处理,今天在 less 中写了一个 color: red\0 这样的 hack 时,打包失败,理论上这是 gulp-less 的 bug,不过问题是在这个 bug 之下我该怎么继续 hack,思考之后觉得这样的 hack 真的是烦

  • 注:本文来自译文

    通用 CSS 笔记、建议与指导


    原文

    在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要:

    • 保持 CSS 便于维护
    • 保持代码清晰易懂
    • 保持代码的可拓展性

    为了实现这一目标,我们要采用诸多方法。

    本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。

    目录

    第一部分

    • CSS 文档分析
      • 总则
      • 单一文件与多文件
      • 目录
      • 区块标题
    • 代码顺序
    • CSS 规则集分析
    • 命名规范
      • JavaScript 钩子
      • I18n
    • 注释
      • 注释的拓展用法
        • 准修饰选择器
        • 代码标签
        • 继承标记
  • 整理一些CSS的用法。

    1. 清理浮动,出自Nicolas Gallagher:

    .cf:before, .cf:after {
        content:"";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        zoom:1;
    }

    2. 有float:left/position:absolute撑腰的情况下,display属性就是多余的:

    如果给元素设置了float:left/right 或者 position: absolute/fixed,元素自动变为块级元素,但这个时候元素默认情况下宽度是内容的宽度,而不会充满整个父