分类目录归档:CSS

CSS的技术文章

前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

继续阅读

Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Gulp

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

不管从代码还是从阅读性上来说,Gulp 不是更加优越一些嘛?从代码的输入和输出,以及事件的操作顺序一幕了然,完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习!

那么我们来一个简单的Case吧。

首先确保你安装了NodeJS。

然后运行 继续阅读

前端重构Sass的相关使用(笔记一)

随着Sass与Less的使用越来越多,相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。

Sass,Less,Scss 都是一些什么东西?

简单的理解来说,它们都属于对原有CSS的扩展。能够更加方便的书写样式规则,强化了Css原有的功能。Sass,Scss 都是来自同一个妈。

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(SassyCSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。

基本语法参考:

c76fd27f54f465484be3c45d06e4cd6d
而Less比较特殊,功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度,个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因,在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Sass 新语法中添加了很多很有意思的东西,变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并,减小服务器带宽、加速界面响应速度。通过几个简单的例子,介绍一下这些非常实用的功能。

  • 嵌套
    /* 生成代码 */
    nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li{
      display: inline-block;
    }
    /* SCSS语法 */
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
    }
  • 变量定义
    $blue : #1875e7; 
    div {
      color : $blue;
    }
  • 混合
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
          border-radius: $radius;
    }
    .box { @include border-radius(10px); }
    
  • 样式继承
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }

进阶功能介绍,Css常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

Html5 属性浏览器速查

网址:http://caniuse.com/#index

Html5属性支持

Html5属性支持

该网站提供了非常丰富的H5以及各种新型浏览器API,并且能够在网站上快速搜索某一属性在各个浏览器以及设备上的支持情况。
例如:搜索GEOLOCATION属性的支持。

Html5属性支持

Html5属性支持

这样极大的方便了日常H5开发的浏览器支持一览,如果需要支持低端浏览器,可以在重构HTML之前就查询相应的支持,从而判断如何使用降级版本处理方案。

前端HTML字符编码转换表

大多的服务器应该都糊使用Linux,前端在样式表规则声明时,通常都会使用“中文”样式集,如:font-family:”微软雅黑”; 但是浏览器解析是什么样子的呢?如图:


如果不想自己写的界面在浏览器字体声明上有异常,建议在书写css样式规则的时候遇到中文字符,使用Unicode编码集,对中文字符进行转码。常见的中文字符集转码如下表:

 

中文名 Unicode
新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

终结IE6下背景图片闪烁问题

a {}{
background:url(images/normal.gif);
}
a:hover {}{
background:url(images/hover.gif);
}

如果为超级链接定义上述的 css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。

一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。今天无意中从一个老外的 网站上发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器 了。
document.execCommand(“BackgroundImageCache”,false,true);

关于这段脚本的放置方式有两种:

1.纯css方式,在css中加入如下代码
html {}{
filter: expression(document.execCommand(“BackgroundImageCache”, false, true));
}

2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:
<script type=”text/javascript”>
document.execCommand(“BackgroundImageCache”, false, true);
</script>

鉴于expression严重影响浏览器效率,建议采用第二种方式。

最后,总结完整方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的javascript脚本。

(UED二区)31 CSS代码片段来让你更好的编写样式

绝对实用的好文章,前端开发经常会使用到的一些CSS样式基本上都覆盖到了。精辟!

原文链接来自:http://ued2qu.com/css/31-css-code-snippets-to-make-you-a-better-coder.html

Comprehensive List of Browser-Specific CSS Hacks

浏览器兼容hacks

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }
/* IE7 */
*:first-child+html #dos { color: red }
/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
/* Everything but IE6-8 */
:root *> #quince { color: red  }
/* IE7 */
*+html #dieciocho {  color: red }
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }
/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
/* Everything but IE6 */
#diecisiete { color/**/: blue }
/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
/* IE7, IE8 */
#veinte { color/***/: blue9; }
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

(source) 继续阅读