标签归档:CSS

前端重构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常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

前端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) 继续阅读

整理CSS文件 去除无用样式

我想这个问题恐怕是所有前端开发工程师都会碰到的问题了.当然,随着版本的不断升级,或多或少肯定有一些样式没有被使用或者被抛弃.代码量少还好说,碰到大站点的维护的话,我想恐怕没有人会特意去一行行的找代码.作为一个高智商的物种,当然是要巧妙的利用工具来提高我们的工作效率,搜了一大把发现了几个比较好的工具和大家共享一下.

Dust-Me?selectors

Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。
支持本地和远程样式文件,包括使用<link>标签、<?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的<style>块和内联样式)
支持IE条件注释中引入的样式文件;
可以检查一个页面,也可以检查整个网站;
支持CSS1选择器、大部分CSS2和CSS3选择器;
理解通用的CSS?hack,比如?“*?html?#fuck-ie”将会被认为是”html?#fuck-ie”;
支持Firefox?3.5和Firefox?3.0,事实上得益于FF?3.5的js引擎的改进,FF?3.5中的性能比FF?3.0要高50%。

CSS?Redundancy?Checker

CSS Redundancy Checker 是一个免费的在线应用,可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面,但每次只能检查一个CSS文件,而且还要手动输入

IntelliJ?IDEA

IntelliJ?IDEA?这是一个颇强大的IDE,类似于DreamWeaver,不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly?Code?Analysis),可以分析CSS文件中未用到的class和id。

css 图片映射技术

<<精通CSS 高级 WEB 标准解决方案>> 第二版 入手,翻阅了一下中间的内容,大体还是和第一版一致,相对第一版来说还是补充了一些CSS3和CSS2的知识.圆角,图片阴影,颜色渐变等,在感叹CSS的强大之时也觉得在中国的WEB前景还是非常广阔的….

照着书上的代码做了一个小DEMO . 基本上第一版的书里面的内容看得都差不多了.还是写了个例子玩玩…..

源码下载

PNG IE6 下的透明问题

之前同行的博客看了很多,解决PNG的问题也是各式各样.曾经也尝试了使用 ie9.js 这类非常规手段和方法来实现透明之类的问题.但是后来发现效果并不是很理想,用JS修复IE的PNG问题,有点大材小用的感觉.使用JS来修复PNG的问题,我始终认为是最不可取的方案.之前georgewing 也讲过如何使用滤镜来解决IE6下的问题.早上和同事讨论的时候做了一个这样的小DEMO.和大家一起交流和分享一下.

顺便也说一下,之前在别人的博客中看见了使用PNG8来搞定透明的问题,建议大家还是抛弃吧,当一个图片有一些阴影效果,或者有一些柔滑的边角效果时,用PNG8会让你抓狂的!

测试地址:点击测试

CSS & HTML 撰写标准

之前写过一篇关于这样的文章,因为万恶的服务商,导致数据丢失了。现在重新拿了一个新的,传上来给大家分享一下。代码规范写得非常有质量。有需要的朋友可以借鉴和参考。

源码:点击下载

在线预览:http://www.qcoke.com/myupload/web/index.html

CSS 框架

做完回家无聊的时候,弄了一个CSS框架下来玩。玩起来很顺手,特别是加上了DW的代码提示,更加如鱼得水。人还是不要太懒啊。这样的东西,还是在开发过程成多使用,节约大把的时间用来学习把。嘿嘿,截图如下。

这个框架集合了原有CSS一些框架的有点,整体页面划分成了24个等列,相当容易控制版面的布局。并且兼容了IE6,7,8,FF。Safari,Chrome,Opear测试。不过相信满足大部分的开发需要啦。框架中的DEOM页面并没有看见支持弹性布局和弹性混合布局的例子,一般是用于制作冰布局的页面。CSS的组织习惯也非常良好。让我们一起来偷懒吧。



 

 

 

 

 

 

 

官方主页