css

webstrom 使用技巧合集

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

  1. -webkit-user-select: none;

  2. -moz-user-select: none;

  3. -ms-user-select: none;

  4. 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

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {background : linear-gradient(to top, black, white);display : flex}::placeholder {color : #ccc}

编译成:

a {background : -webkit-linear-gradient(bottom, black, white);background : linear-gradient(to top, black, white);display : -webkit-box;display : -webkit-flex;display : -moz-box;display : -ms-flexbox;display : flex}:-ms-input-placeholder {color : #ccc}::-moz-placeholder {color : #ccc}::-webkit-input-placeholder {color : #ccc}::placeholder {color : #ccc}

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {-webkit-border-radius : 5px;border-radius : 5px}

编译成:

a {border-radius : 5px}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

具体安装和配置:

所以尝试在Webstorm下搜索autoprefixer插件,无果。那就自己手动配置了一个。首先我考虑配置File Watchers,但是不习惯,原来在sublime text下用autoprefixer都是手动触发的,所以后面我配置了External Tools。

1.首先当然是安装node.js;

(略)

2.安装Autoprefixer,

见https://github.com/postcss/autoprefixer:

sudo npm install autoprefixer -g

要不要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。

npm太慢,我是用淘宝的 NPM 镜像的https://npm.taobao.org/

3.安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli

sudo npm install postcss-cli -g

4.配置External Tools

打开Webstorm设置,Preferences -> Tools -> External Tools ;点击新增按钮,如图:

769EDD8B-6AF0-4D6B-B73B-DF2DC25FAA1F

填写具体配置,例如我的配置,如图:

0C4975D0-6531-432B-8812-46D56164B817

  1. Program:填入你的postcss-cli 的PATH;

  2. Parameters: -u autoprefixer -o $FileDir$/$FileName$  $FileDir$/$FileName$ ,你可以根据你自己的需要配置,具体参见https://github.com/code42day/postcss-cli

  3. Working directory :$ProjectFileDir$

配置好后,你可以在css,或sass文件中右键,就可以在右键菜单中看到External Tools – autoprefixer,点击搞定,嘎嘎。

5.设置快捷键

右键太麻烦的话,可以设置个快捷键,打开Webstorm设置,Preferences -> Keymap , 搜索External Tools , 配置 autoprefixer即可。 不要和原来的冲突就可以了。

ps:windows下可以直接用autoprefixer的PATH,具体配置

414473-5caba82f3555f590 (1)


windows 找不到autoprefixer.cmd,webstrom无法用执行autoprefixer 这个问题,
可以配置
Program:C:\Users\gaojun-pd\AppData\Roaming\npm\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory :$ProjectFileDir$


web移动端元素内元素滑动不流畅

解决方法:

外面的元素加{ overflow: auto; -webkit-overflow-scrolling: touch; } 样式


手机站边框0.5px

.background-t-1{  /*通过设置背景色的方式*/
    background-image: -webkit-linear-gradient(bottom,transparent 50%,#dcdcdc 50%);/*使用背景色注意一下这个颜色,统一是使用dcdcdc。如果需要用其他颜色和小顾老师确认下*/
    background-image: linear-gradient(to bottom,transparent 50%,#dcdcdc 50%);
    background-size:100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
}
.border-1{ /*左右边框*/
    border-width: 0 1px 0 1px;
    border-image: url(http://img1.40017.cn/touch/public/borderImage/border-dc-abeam.png) 0 2 stretch;
}
 
.background-b-1{
    background-image: -webkit-linear-gradient(top,transparent 50%,#dcdcdc 50%);
    /*先透明和dcdcdc是因为不倒一下的话左右边框和这个边框会有.5px的间隙*/
    background-image: linear-gradient(to top,transparent 50%,#dcdcdc 50%);
    background-size:100% 1px;
    background-repeat: no-repeat;
    background-position: top;
}
 
.background-t-2{
    background-image: -webkit-linear-gradient(top,#dcdcdc 50%,transparent 50%);
    background-image: linear-gradient(to top,#dcdcdc 50%,transparent 50%);
    background-size:100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    padding-top: 1px;
}
.border-2{ /*上下边框*/
    border-width: 1px 0 1px 0;
    border-image: url(http://img1.40017.cn/touch/public/borderImage/border-dc.png) 2 0 stretch;
}
 
/*全部通过背景实现*/
/*
<div class="bg-border"></div>
 
*/
.bg-border{
    width: 15px;
    height: 15px;
    background-image: linear-gradient(to bottom,transparent 96.9%,#dcdcdc 3.1%),linear-gradient(to top,transparent 96.9%,#dcdcdc 3.1%),linear-gradient(to left,transparent 96.9%,#dcdcdc 3.1%),linear-gradient(to right,#f5f5f5 96.9%,#dcdcdc 3.1%);
/*这里可以根据需求显示哪几个边,(这个方法有个缺陷,必须要定宽度 或者高度,根据实际情况决定,因为每一个边都是根据宽度或者高 计算比例得到0.5px)*/
 
/*https路径*/
/*
 
https://security.40017.cn/touch/img/public/borderImage/border-dc.png
 
https://security.40017.cn/touch/img/public/borderImage/border-dc-abeam.png
 
*/
}



compass用法初探

 阮一峰的Compass用法指南写的蛮好,我只是在此文章上面进行补充,地址:http://www.ruanyifeng.com/blog/2012/11/compass.html

1、&的用法代码如下:

a {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    .sidebar & {
        color: blue;
    }
}

这里的&指的就是它的父级a编译之后就是这样的

阅读详细 »


Web开发者的福利 30段超实用CSS代码

摘要:国外UX设计师Jake Rocheleau收集整理了50段超实用的CSS代码,上周,研发频道编译了前20段,本文是对后30个CSS特效的编译。

上周,研发频道发表了一篇“ Web开发者不容错过的20段CSS代码”,大家一致觉得很实用。该文是笔者对后30个的翻译,希望对大家有帮助。

阅读详细 »


另一种a标签范围

我们一般让整个区域称为可点击的a标签连接的时候都会让a标签直接包裹住所要点击的元素即可,但是下面介绍的这种方法可以不需要把a标签放在元素外面,

阅读详细 »


css em详细讲解

使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分享,希望对童子们有些许的帮助。

这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行。


阅读详细 »


css3制作漂亮精美的小图标

<html>

<head>

<title>Page Title</title>

</head>

<body>

<style>

.docIcon {

    background: #eee;

 

    background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

    background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

    background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

    background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

    background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

 

    border: 1px solid #ccc;

    display: block;

    width: 40px;

    height: 56px;

    position: relative;

    margin: 42px auto;

-webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;

    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;

    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;

     -webkit-border-radius:3px 15px 3px 3px;

    -moz-border-radius:3px 15px 3px 3px;

    border-radius:3px 15px 3px 3px;

    text-indent:-9999em;

}

.docIcon:before {

    content: "";

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    width: 15px;

    height: 15px;

    background: #ccc;

 

    background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

    background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

    background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

    background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

    background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);

 

    -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;

    -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;

    box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;

 

    border-bottom: 1px solid #ccc;

    border-left: 1px solid #ccc;

-webkit-border-radius:3px 15px 3px 3px;

-moz-border-radius:3px 15px 3px 3px;

border-radius:3px 15px 3px 3px;


}

.docIcon:after

{

    content:"";

    display:block;

    position:absolute;

    left:0;

    top:0;

    width:60%;

    margin:22px 20% 0;

    height:15px;

background:#ccc;

    background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);

    background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);

    background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);

    background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);

    background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);

}

</style>

<a class="docIcon" href="#">Document Icon</a>

</body>

</html>

效果哟如下



ie6下多出一条线解决方案

先看图:

阅读详细 »


ie8 css hack

  • “\9″  只在IE6/IE7/IE8/IE9/IE10下生效
  • “\0”  只在 IE8/IE9/IE10下生效
  • “\9\0”只在IE9/IE10下生效

故目前如果需要只针对ie8的hack,可先使用在IE8/IE9/IE10生效的“\0”,再用仅在IE9/IE10生效的“\9\0”hack覆盖之前的样式。

selector{
color : #000 ;
color : #F00 \ 0 ;   /* only for IE8&IE9&IE10 */
color : #000 \ 9 \ 0 ; /* only for IE9&IE10 */
}