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

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

TL;DR

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

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

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

CSS3 Flexbox解决方案

1df97ee6-992d-4723-aa69-68730625dcc7

长期以来,CSS 一直缺乏合适的布局机制。 变形,动画,滤镜,对这门伟大的语言来说都很有用的补充的,但是都没有解决 Web 开发人员一直抱怨的的主要的看起来似乎是永恒的问题。

终于,感谢Flexbox ,我们有了一个解决方案。查看说明、DEMO及项目源代码:Flexbox解决方案

这个网站不是另一个CSS框架。相反,它的目的是展示曾经很困难甚至无法单独使用 CSS 能解决的问题,而现在使用Flexbox简单易用。随着最近发布的Internet Explorer 11和Safari 6.1,最新的Flexbox规格已经被每一个的现代浏览器支持(愚人码头注:浏览器的支持请客,你可以看 http://caniuse.com/#feat=flexbox)。 继续阅读

边玩游戏边学Flexbox 布局

513f757a-9117-4e87-ad86-141b90122a98

Flexbox 布局在很大程度上解决了网页布局问题。但是实际使用的时候还是有一定的难度,因为属性太多,应用非常灵活。

愚人码头注:Flexbox属性具体属性查看 CSS3 Flexbox属性可视化指南这篇文章。

这里给大家介绍一个边玩游戏边学习Flexbox 布局的网站,将枯燥的说明文档瞬间变成有趣、又更易理解的游戏学习。

FLEXBOX FROGGY:http://flexboxfroggy.com/#zh-cn

这里也从github上下了一个,作为镜像网页:http://www.css88.com/tool/flexboxfroggy/#zh-cn

CSS3 Flexbox属性可视化指南

a-vusial-guide-to-css3-flexbox-layout-and-properties

愚人码头注:

Flexbox 布局(国内很多人称为弹性布局)正式的全称为 CSS Flexible Box布局模块,它是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的元素的对齐,方向和顺序等等。flex容器的主要特性是它可以调整其子元素的宽度或高度去填充可用的空白区,以最优的方式达到兼容不同屏幕大小。

很多设计人员和开发人员发现使用Flexbox来布局很容易,可以使用更少的代码,更简单的方式实现更复杂的布局,也使整个开发过程更为简单。Flexbox布局算法不同于那些基于垂直或水平的块或内联布局。Flexbox布局应该用于小的应用程序组件之中,而新的CSS 网格布局模块正在兴起,来处理大规模布局。

本指南将以可视化的方式重点介绍 flex 属性是如何影响布局的,不是解释 flex 属性是如何工作。 继续阅读

移动前端不得不了解的HTML5 head 头标签(2016最新版)

html5-head

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--具体可以查看本文 为移动设备添加 viewport 部分-->
    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
    <title>页面标题</title>
    ...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

继续阅读

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>

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

css Table布局-display:table

使用表格布局一直是一个敏感的主题。一般情况下,Web开发人员考虑基于表格布局是禁忌。尽管反对的理由看起来证据很充分,但是大多数开发者除了谴责基于表格的布局,都无法提供完善的使用场景。“表格不好。”

从早期反对HTML Table(<table>标签)开始这种势头就非常强劲。几代开发者被成功洗脑,根深蒂固的认为:任何使用表格都是邪恶的。

诚然,我也是避免使用表格布局的开发者之一,即使是显示表格数据。

我甚至曾经斥责我的下属开发者同事,当他们使用 display:table 用来表仪式的布局(或圣杯布局)的时候。

回想起来,头脑麻木而且倔强的我花了大把时间,为此写了一堆CSS hack,是多么的可笑。

两种类型的表格布局

你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性)。

HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。

W3C关于<table>相关标签的文档中我们可以找到,HTML 4中<table>相关标签的默认样式表

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption }

显而易见HTML Table使用标签<table><tr><td>等标签,就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况: 继续阅读

: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/

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

移动前端适配—低级、无趣的老方法

首先请了解一下移动前端中 viewport (视口)http://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视,看图就知道了。 继续阅读

在Webstorm中使用Autoprefixer

最近玩了一下Sass (广告一下Sass中文文档:http://www.css88.com/doc/sass/),感觉不错,不过CSS3在不同平台兼容性代码一直是个头痛的问题,手写处理费时费力又容易出错。
曾经一直用sublime text写html和css,这些问题都有相应的插件。用Webstorm写js,但是来回切换编辑器也比较麻烦。
虽然Webstorm内置了css3自动补全功能,当输入user-select时,Webstorm会自动补全:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

但是很多情况下,这种自动补全并不令人满意,比如当我输入display:flex;时,Webstorm并不会自动补全为:

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

关于Autoprefixer

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

继续阅读